Generator-auto-ui NPM

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	-