uilib-md-react v0.1.11

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

在这个组件中还包含了一个图标组件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

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

MDDatepicker

调用方法

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

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

属性列表props

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

方法列表methods