* 作者:winber * 邮箱:winberxie@163.com * 版本:**`0.2.1`**


Keywords
earth, react, reactsfc, cell
Install
npm install lm-cell@0.2.1

Documentation

cell

介绍

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

  1. init

0.1.3

  1. 修复样式不匹配的问题
  2. 增加form左右布局,详情请参考样例文档

0.1.4

  1. 增加 Link 跳转
  2. 增加 href 跳转

0.1.5

  1. Link 跳转增加通屏线
  2. href 跳转增加通屏线
  3. 修改 cell 的 Component 属性为 component