• 单元格 (bui-cell)
    • 用法
    • 属性
    • 事件

    单元格 (bui-cell)

    bui-cell 可用于表单展示，也可以用在列表中，一个单元格分为 4个内容区域：

    单元格(bui-cell) - 图1   单元格(bui-cell) - 图2

    用法

    1. <bui-cell title="文字内容" label="标题" desc="描述信息"></bui-cell>
    2. <bui-cell label="公司名称" >
    3.     <input slot="title" class="input" placeholder="请输入公司名称" />
    4. </bui-cell>
    6. <bui-cell title="标题文字" @cellClick="cellClick" :cellStyle="cellStyle">
    7.    <bui-icon slot="action" name="ion-ios-arrow-right"></bui-icon>
    8. </bui-cell>
    10. <bui-cell title="标题文字"  :cellStyle="cellStyle">
    11.     <bui-icon slot="label" style="margin-right: 10px" name="ion-ios-cloud-upload-outline"></bui-icon>
    12.     <bui-icon slot="action" name="ion-ios-arrow-right"></bui-icon>
    13. </bui-cell>
    15. <bui-cell :cellStyle="cellStyle" label="开发者选项">
    16.     <switch checked="true"></switch>
    17. </bui-cell>

    Example: bui-cell-demo

    属性

    Prop Type Required Default Description
    label string N 左边区域文本
    title string N 标题文本
    desc string N 描述文本
    hasTopBorder boolean N false 是否有top border
    hasBottomBorder boolean N true 是否有bottom border
    hasMargin boolean N false 是否有bottom margin
    cellStyle object N 用于扩展cell样式

    事件

    • @cellClick: 单元格点击事件