# uilib-md-react

> YOUR DESCRIPTION - Generated by generator-react-webpack

Latest version **0.1.11** (published 2018-05-20) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install uilib-md-react
pnpm add uilib-md-react
yarn add uilib-md-react
bun add uilib-md-react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2018-05-20 |
| First published | 2018-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Your name here |
| Maintainers | changehow |

## Links

- npm: https://www.npmjs.com/package/uilib-md-react
- Repository: https://github.com/ChangeHow/md-react
- Homepage: https://github.com/ChangeHow/md-react#readme
- Issues: https://github.com/ChangeHow/md-react/issues
- npm.io page: https://npm.io/package/uilib-md-react

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^15.0.0
- [core-js](https://npm.io/package/core-js.md) ^2.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^7.2.5
- [normalize.css](https://npm.io/package/normalize.css.md) ^4.0.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.1.0

## Recent versions

- 0.1.11 (latest) — 2018-05-20
- 0.1.10 — 2018-05-20
- 0.1.9 — 2018-05-20
- 0.1.8 — 2018-05-19
- 0.1.7 — 2018-05-19
- 0.1.6 — 2018-04-01
- 0.1.5 — 2018-03-31
- 0.1.4 — 2018-03-31
- 0.1.3 — 2018-03-31
- 0.1.2 — 2018-03-31
- 0.1.1 — 2018-03-31
- 0.1.0 — 2018-03-31
- 0.0.1 — 2018-03-30

## README

# uilib-md-react
> 一个依照`Material Design`制作的组件库

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

## MDButton
> 按钮样式

### 调用方式

```react
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](https://fontawesome.com/icons?d=gallery)，值得注意的是，现在能够调用的图标为页面内类名前缀包含`fas fa-`的图标。

## MDCard

>   `Material Design`中的卡片作为内容的主要承载，其大小能够根据内容的多寡进行自动适应，而且在不同的平台下的展示效果应该尽可能的相近。
>
>   卡片应该具备的特性是，完全没有限制的可拓展性，拥有良好且适当的交互(表现为触摸事件发生时卡片相对应的微微上浮)，能够良好的展示不同类型的数据。

### 调用方式

```react
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

### 调用方法

```react
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

### 调用方法

```react
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 | 格式化后的时间数据 |

---
_Source: https://npm.io/package/uilib-md-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._