lm-cell
v1.0.3
Published
* 作者:winber * 邮箱:[email protected] * 版本:**`1.0.3`**
Downloads
25
Readme
cell
- 作者:winber
- 邮箱:[email protected]
- 版本:
1.0.3
介绍
cell组件
安装
lm-*
组件使用 npm
是进行管理,命名空间统一为 lm-
,请使用以下命令进行组件安装。
npm i lm-cell --save
- 如果你还没有安装
npm
,可通过以下方式进行 安装。 - 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
- List with description & subText
<CellsTitle>list with text</CellsTitle>
<Cells>
<Cell disabled={true}>
<CellBody subDesc="文本信息">禁用</CellBody>
</Cell>
<Cell link={true}>
<CellBody subDesc="文本信息">文本</CellBody>
<CellFooter direction="right"/>
</Cell>
<Cell disabled={true}>
<CellBody subDesc="文本信息">文本</CellBody>
<CellFooter>文本信息</CellFooter>
</Cell>
<Cell>
<CellBody subDesc="文本信息">文本</CellBody>
<CellFooter direction="right">文本信息</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>
- 表单左右结构的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
| 跳转链接 |
| disable
| Boolean
| false
| 是否禁用 |
| link
| Boolean
| false
| 是否具有active的样式 |
CellHeader配置参数
| Prop | Type | Default | Description |
| ---- |:----:|:-------:| :----------:|
| icon
| base64
| undefined
| icon图标 |
CellFooter配置参数
| Prop | Type | Default | Description |
| ---- |:----:|:-------:| :----------:|
| direction
| string
| right
| 箭头方向 可选 right up down left |
CellBody配置参数
| Prop | Type | Default | Description |
| ---- |:----:|:-------:| :----------:|
| subDesc
| string
| undefined
| 副标题 |
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
0.1.6
- icon 默认尺寸修改为 24px * 24px
- 修改 cell 的 component 属性为 Component
- 当 Cell 使用 ‘Component’ 属性的时候,不能使用小写的 ‘component’,webpack 在编译的时候会将其解析为字符串而不是一个 React Element
0.2.0
- 升级到 react 16.4.0
- 修改 propTypes 相关bug
0.2.1
- 移除不必要的依赖
- 优化scss文件
1.0.0
- 增加高亮
- 增加禁用
- 增加副标题
- 调整行高及相关样式
- icon 默认尺寸修改为 28px * 28px
1.0.1
- Cell 增加 link 配置
1.0.3
- 修改细线颜色
- 删除顶部细线