Appearance

iuiDesign
100%
02:32
本页目录

单元格为列表中的单个展示项，常用于列表项、表单等。

基本使用 ​

单元格基本用法，可设置标题、图标、描述信息、右侧内容等。

html
<iui-cell label="Cell"></iui-cell>
<iui-cell label="Cell"></iui-cell>

图标 ​

通过 icon 属性设置图标，支持所有内置图标

html
<iui-cell label="List Cell" icon="user"></iui-cell>
<iui-cell label="List Cell" icon="user"></iui-cell>

描述信息 ​

通过 desc 属性可以在 label 下方设置描述信息。

html
<iui-cell label="List Cell" desc="Description"></iui-cell>
<iui-cell label="List Cell" desc="Description"></iui-cell>

右侧内容 ​

如果需要在单元格右侧显示更多内容，可以使用 extra 属性。

html
<iui-cell label="List Cell" extra="Information"></iui-cell>
<iui-cell label="List Cell" extra="Information"></iui-cell>

在列表中使用 ​

使用单元格组件配合 iui-list 列表组件，可以快速实现一个列表。

html
<iui-list arrow>
  <iui-cell label="List Cell" :arrow="false"></iui-cell>
  <iui-cell label="List Cell"></iui-cell>
  <iui-cell label="List Cell"></iui-cell>
</iui-list>
<iui-list arrow>
  <iui-cell label="List Cell" :arrow="false"></iui-cell>
  <iui-cell label="List Cell"></iui-cell>
  <iui-cell label="List Cell"></iui-cell>
</iui-list>

数据渲染 ​

通过传入 data 属性，可以快速渲染一组数据。

html
<iui-list arrow :data="list"> </iui-list>

<script setup>
  const list = [
    {
      icon: "smile",
      label: "Data Cell",
      arrow: false,
    },
    {
      label: "Data Cell",
    },
    {
      label: "Data Cell",
      desc: "Description",
      extra: "Information",
    },
  ];
</script>
<iui-list arrow :data="list"> </iui-list>

<script setup>
  const list = [
    {
      icon: "smile",
      label: "Data Cell",
      arrow: false,
    },
    {
      label: "Data Cell",
    },
    {
      label: "Data Cell",
      desc: "Description",
      extra: "Information",
    },
  ];
</script>

API ​

<Cell>props
参数描述类型默认值
label左侧标题String-
desc标题下方的描述信息String-
extra右侧额外内容String-
icon左侧图标名称String-
arrow是否显示右侧箭头Booleanfalse
height单元格高度Number54
<Cell>slots
插槽名描述参数
icon自定义左侧图标-
extra自定义右侧额外内容-
<List>props
参数描述类型默认值
data列表数据Array[]
split是否显示分割线Booleantrue
arrow是否显示右侧箭头Booleanfalse
<List>slots
插槽名描述参数
defaultcell 列表项-
cell自定义列表项（需要传入data）dataItem