cell
- 作者:winber
- 邮箱:winberxie@163.com
- 版本:
0.1.5
介绍
cell组件
安装
lm-*
组件使用 npm
是进行管理,命名空间统一为 lm-
,请使用以下命令进行组件安装。
npm i lm-cell --save
- 如果你还没有安装
npm
,可通过以下方式进行 安装。 - 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
- List with description
<CellsTitle>List with description</CellsTitle>
<Cells>
<Cell>
<CellBody>item1</CellBody>
<CellFooter>desc1</CellFooter>
</Cell>
</Cells>
- List with icon & description
<CellsTitle>List with icon & description</CellsTitle>
<Cells>
<Cell>
<CellHeader icon={icon} />
<CellBody>343434</CellBody>
<CellFooter>wewewe</CellFooter>
</Cell>
</Cells>
- List with link
<CellsTitle>List with link</CellsTitle>
<Cells>
<Cell onClick={this.onClick}>
<CellBody>item</CellBody>
<CellFooter direction="right"/>
</Cell>
</Cells>
- List with link
<CellsTitle>List with link</CellsTitle>
<Cells>
<Cell onClick={this.onClick}>
<CellBody>item</CellBody>
<CellFooter direction="right"/>
</Cell>
</Cells>
- 表单左右结构的cell
<CellsTitle>表单左右结构</CellsTitle>
<Cells>
<Cell>
<Label>姓名</Label>
<CellBody>343434</CellBody>
</Cell>
</Cells>
- Link with cell
<CellsTitle>Link with cell</CellsTitle>
<Cell component= {Link} to="/a/b">
<CellBody>路由切换</CellBody>
<CellFooter direction="right"/>
</Cell>
- href with cell
<CellsTitle>href with cell</CellsTitle>
<Cell href="http://www.baidu.com">
<CellBody>百度</CellBody>
<CellFooter direction="right"/>
</Cell>
Cell配置参数
Prop | Type | Default | Description |
---|---|---|---|
component |
React Element |
undefined |
输出 react 元素时,需要将该元素其它属性一并传入 |
onClick |
func |
undefined |
点击回调函数 |
href |
String |
undefined |
跳转链接 |
CellHeader配置参数
Prop | Type | Default | Description |
---|---|---|---|
icon |
base64 |
undefined |
icon图标 |
CellFooter配置参数
Prop | Type | Default | Description |
---|---|---|---|
direction |
string |
right |
箭头方向 可选 right up down left |
Label 无配置参数直接引用即可
注意事项
- 暂无
开发调试
进入项目目录后,使用 node
命令启动服务
npm run start
打包发布可通过 node
命令执行
npm run build
npm publish
相关资料
Changelog
0.1.0
- init
0.1.3
- 修复样式不匹配的问题
- 增加form左右布局,详情请参考样例文档
0.1.4
- 增加 Link 跳转
- 增加 href 跳转
0.1.5
- Link 跳转增加通屏线
- href 跳转增加通屏线
- 修改 cell 的 Component 属性为 component