@rrc-materials/list v0.2.0

showNav: true

List

@rrc-materials/list for rrc

主要由三个部分：rc-list、rc-item 来形成一个纵向的table。

rc-list组件

rc-list 组件设置整体label的宽度，位置以及列数。默认3列，label左对齐，label宽度为80，可自定义。

rc-item组件

rc-item 实现键值对的设置，其中label对应每一项中的label值，插槽内容可自定义。

默认布局

:::demo

<rc-card title="默认三列布局左对齐80px">
  <rc-list>
    <rc-item label="车商姓名" >Lily</rc-item>
    <rc-item label="车商手机号">133662138888</rc-item>
    <rc-item label="车商城市">北京市</rc-item>
    <rc-item label="备注">暂无</rc-item>
    <rc-item label="车商姓名">Lily</rc-item>
    <rc-item label="车商手机号">133662138888</rc-item>
  </rc-list>
</rc-card>

:::

自定义

可以根据需要，通过修改 col 属性来设置列数，label-position 属性来设置label的对齐方式，label-width 属性来设置label的宽度，添加 no-line 属性来去除底部的下划线。 :::demo

<rc-card title="两列布局右对齐" no-line>
  <rc-list :col=2  label-position='right'>
    <rc-item label="车商姓名" :label-width="70" >Lily(label为70)</rc-item>
    <rc-item label="车商手机号">133662138888</rc-item>
    <rc-item label="车商城市">北京市</rc-item>
    <rc-item label="备注">暂无</rc-item>
    <rc-item label="车商姓名">Lily</rc-item>
    <rc-item label="车商手机号">133662138888</rc-item>
  </rc-list>
</rc-card>

:::

换行显示

内容较多，且想要换行显示的时候，可以设置 isOverflow 为 false。 :::demo

<rc-card title="换行显示" no-line>
  <rc-list :col=2  label-position="right">
    <rc-item label="内容" :label-width="70" :is-overflow="false" >这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的内容</rc-item>
     <rc-item label="内容" :label-width="70" :is-overflow="false" >这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的内容</rc-item>
  </rc-list>
</rc-card>

:::

List Attributes

Item Attributes