auto-ui 移动端ui库

1. Layout 布局

包括3个部分，Header、Body和Footer，用于页面结构最外层

示例代码

render(
  <Layout>
    <Layout.Header>
       { header }
    </Layout.Header>

    <Layout.Body>
      { header }
    </Layout.Body>

    <Layout.Footer>
      { header }
    </Layout.Footer>
  </Layout>
)

API Layout.Header

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |innerClassName|内层额外样式名，因为有2层嵌套|String|-| |title|标题|String|-|

Layout.Body

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |loading|是否正在加载中，若为true显示loading效果并隐藏内容|Boolean|false| |errorInfo|出错时的文案，不为空时显示文案并隐藏内容|String|-|

Layout.Header

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-|

2. Button 按钮

示例代码

<Button onClick={ ... }>Click me!</Button>

API

|属性|说明|类型|默认值| |-|-|-|-| |type|按钮类型，default、primary、danger三种可选|String|default| |onClick|点击事件|Function|-| |className|额外样式名|String|-| |disabled|按钮是否可用|Boolean|false|

3. Cell 列表

示例代码

<Cell>
  <Cell.Row>
    { content }
  </Cell.Row>
</Cell>

如果需要统一监听Cell.Row的onClick事件的话可以这样

<Cell onClick={ val => { ... } }>
  <Cell.Row value="1">
    { content }
  </Cell.Row>

  <Cell.Row value="2">
    { content }
  </Cell.Row>
</Cell>

onClick事件中的回调函数将返回Cell.Row的value值

API Cell

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |onClick|Cell.Row点击时的事件监听。如果用了该事件，Cell.Row中的onClick事件将会失效|Function|-|

Cell.Row

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |onClick|点击事件|Function|-| |arrow|是否显示箭头|Boolean|false|

4. Panel 板块

示例代码

<Panel>
  <Panel.Item>
    { content }
  </Panel.Item>
</Panel>

API Panel

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-|

Panel.Item

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |onClick|点击事件|Function|-|

5. Radio 勾选

示例代码

<Radio checked={ true } />

API

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |checked|是否选中|Boolean|false|

6. Switch 开关

示例代码

<Switch active={ true } i="Off" o="On" />

API

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |active|是否激活|Boolean|false| |i|非激活时的文字(建议最多4字节)，非必填|String|-| |o|激活时的文字(建议最多4字节)，非必填|String|-|

7. Tabs 滑块

示例代码

<Tabs active="1" onClick={ val => { ... } }>
  <Tabs.Item value="1">
    { content }
  </Tabs.Item>

  <Tabs.Item value="2">
    { content }
  </Tabs.Item>

  <Tabs.Item value="3">
    { content }
  </Tabs.Item>
</Tabs>

API Tabs

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |active|激活项，值与Tabs.Item的value对应|String / Int|-| |onClick|Tabs.Item的点击事件，返回Tabs.Item的value值|Function|-|

Tabs.Item

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |value|该值与Tabs的active相同时，表示为当前状态|String / Int|-|

8. ActionSheet 按钮弹层

示例代码

<ActionSheet title="action title" visible={ true } onBgClick={ e => {} } onClick={ e => {} } closeText="关闭">
  <ActionSheet.Item value="1">
    button 1
  </ActionSheet.Item>

  <ActionSheet.Item value="2">
    button 2
  </ActionSheet.Item>

  <ActionSheet.Item value="3">
    button 3
  </ActionSheet.Item>
</ActionSheet>

或者不想要该组件中的按钮组件，可以这样：

<ActionSheet title="action title" visible={ true } onBgClick={ e => {} } onClick={ e => {} } closeText="关闭">
  <a onClick={ ... } className="item"> click me 1 </a>
  <a onClick={ ... } className="item"> click me 2 </a>
</ActionSheet>

该组件会将每一项子组件用线分隔开，子项目的样式和事件可完全自己定义，甚至不用自身的title属性，只用其外容器也是可以的

API ActionSheet

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |title|标题|String|-| |visible|弹层是否显示|Boolean|false| |onBgClick|背景层点击事件|Function|-| |onClick|ActionSheet.Item的点击事件，返回其value值|Function|-| |closeText|关闭的文字描述|String|Close|

ActionSheet.Item

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |value|值，用于ActionSheet的onClick事件，作为其返回值|String|-|

9. Dailog 对话弹层

示例代码

<Dailog height={ 50 } onBgClick={ e => {} }>
  <h1>hello</h1>

  <Dailog.Scroller>
    { scroll content }
  </Dailog.Scroller>

  <button onClick={ ... }>close it</button>
</Dailog>

API Dailog

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |visible|弹层是否显示|Boolean|false| | height |对话框高度(%)，若用到Dailog.Scroller时必填|Int|-| |onBgClick|背景层点击事件|Function|-|

Dailog.Scroller 非必须，需要内滚动时使用，但使用时Dailog组件必须设置height属性，该组件会占满同级组件所用的剩余高度

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-|

10. Popup 上（下）拉弹层

示例代码

<Popup visible={ true } title="title" height={ 50 } onBgClick={ e => {} } onClose={ e => {} } top={ true }>
  { content }
</Popup>

API

|属性|说明|类型|默认值| |-|-|-|-| |className|额外样式名|String|-| |visible|弹层是否显示|Boolean|false| |title|标题|String|-| |top|是否置于最顶部，不设置默认从底部拉出|Boolean|false| | height |对话框高度(%)，若设置过该属性，内容部分超出将会内滚动|Int|-| |onBgClick|背景层点击事件|Function|-| |onClose|关闭x的点击事件，若不设置，该按钮不显示|Function|-|

...待续