uilib-md-react

uilib-md-react

一个依照Material Design制作的组件库

npm install --save-dev uilib-md-react

MDButton

按钮样式

调用方式

import {MDButton} from 'uilib-md-react';

<MDButton
  onClick={this.clickTest}
  content='BUTTON'
  size='28'
  color='#ffffff'
  state={this.state.status}
>
  check-circle
</MDButton>

属性列表 props

属性名	描述	默认值	可选值
type	按钮的样式类型(可选是固体按钮或者是浮动按钮)	normal	normal[float]
content	按钮的内容文本
state	按钮性质(是警告性质或者是普通的)	normal	normal[error,success,warn]
size	图标的大小	number
iconPos	图标出现的位置	left	left[right]
color	字体颜色	#575757

在这个组件中还包含了一个图标组件MDIcon.js，因为目前还没有修改完善，还没有测试能不能本地传入的img对象，所以就不做属性方法的说明

这是个能够包裹内容的组件，包裹的内容是图标的名字，具体什么名字调用什么图标详见 Font Awesome，值得注意的是，现在能够调用的图标为页面内类名前缀包含fas fa-的图标。

MDCard

Material Design中的卡片作为内容的主要承载，其大小能够根据内容的多寡进行自动适应，而且在不同的平台下的展示效果应该尽可能的相近。

卡片应该具备的特性是，完全没有限制的可拓展性，拥有良好且适当的交互(表现为触摸事件发生时卡片相对应的微微上浮)，能够良好的展示不同类型的数据。

调用方式

import {MDCard} from 'uilib-md-react';

<MDCard
  someProps...  
>
  <div data-title>...</div>
  <div data-content>
    ...
  </div>
  <div data-footer>
    ...
  </div>
</MDCard>

一个卡片可以大体分成三个部分，分别为头部，内容部分，底部；三个部分可以不声明，如果是未声明的部分，将被解析成内容部分进行展示。

属性列表props

属性名	描述	默认值	可选值
ripper	是否展示水波纹效果	false	false[true]
width	卡片的宽度		number
height	卡片的高度		number
backgroundColor	卡片的背景颜色	#FFFFFF	RGB-color
内容标签
div data-title	卡片的标题部分，声明会令包裹的内容显示在卡片的顶部
div data-content	卡片的内容部分，不论是否声明，总会有这个部分存在，在其中如果超出将会隐藏，所以尽可能不要超出内容
div data-footer	卡片的底部部分，与内容部分存在一条分割线

MDDotsmenu

调用方法

import {MDDotsmenu} from 'uilib-md-react';

const _list0 = [
  {
    context: '设置1',
    callback: function(){
      console.log('click setting 1');
    }
  },
  {
    context: '设置2',
    callback: function(){
      console.log('click setting 2');
    }
  },
  {
    context: '设置3',
    callback: function () {
      console.log('click setting 3');
    }
  },
  {
    context: '设置4设置4设置4设置4设置4设置4设置4设',
    callback: function () {
      console.log('click setting 4');
    }
  }
];

//render()
<MDDotsmenu
  list={_list0}
/>

这是一个带有图标的菜单组件，能够自适应处在页面的位置并弹出选项框，不建议作为导航菜单栏使用。有且只接受一个参数，参数为数组，记录了所有选项的内容以及回调函数。

属性列表props

属性名	描述	默认值	可选值
list	一个数组对象，保存了所有的Menu信息

MDDatepicker

调用方法

import {MDdatepicker} from 'uilib-md-react';

<MDDatepicker
	getTime={this.getTime.bind(this)}
/>

属性列表props

属性名	描述	默认值	可选值
showInput	是否显示输入框	true	true[false]
selFlag	打开选择器的时候显示的选择范围，是年或是月或者是日甚至是时间	1(时间)	1~4
navColor	整个时间选择器的颜色	#29B6F6	RGB-color

值得注意的是，如果选择不显示输入框，组件本身会在调用的时候创建一个隐藏的块级元素，以便能够自动化的确定选择器是向下展开还是向上展开。输入框紧紧为只读，不提供输入。

方法列表methods

方法名	描述	参数	参数描述
getTime	在点击确认按钮之后会激活回调，返回用户选择的时间	time	格式化后的时间数据