List 列表

List 组件会为第一层子集添加分割线。

当 List 与 List 在同一层级堆叠时，上方 List 的底部边框会与下方 List 的顶部边框自动重合。

Form 组件和 Collapse 组件与 List 均有相似的效果。且 Form 组件与 List 组件堆叠，或者 Collapse 组件作为 List 组件的子元素时，均会自动合并边框。

示例

基础用法

请注意：

1. 两个 List 堆叠时，自动合并了之间的边框。
2. List 的第一层子元素，会自动添加缩进的边框。

<List>
  {#each ['A', 'B', 'C'] as txt}
    <div class="bg-white py-2 pl-4">{txt}</div>
  {/each}
</List>
<List>
  <ListItem>
    <span>列表条目</span>
    {#snippet extra()}
      <span>条目的值</span>
    {/snippet}
  </ListItem>
  <ListItem header="条目标题" icon="arrow-down-s-line">
    <span>列表条目</span>
  </ListItem>
  <ListItem description="这是一段很长的说明有可能会超过原有的长度或者造成换行">
    {#snippet aside()}
      <Avatar src={avatars[0]} />
    {/snippet}
    <span>列表条目</span>
    {#snippet extra()}
      <span>条目的值</span>
    {/snippet}
  </ListItem>
</List>

列表标题

<List header="列表标题">
  <ListItem {clickable}>
    {#snippet aside()}
      <Avatar src={avatars[1]} />
    {/snippet}
    <span>列表条目</span>
  </ListItem>
  <ListItem {clickable} header="条目标题">
    {#snippet aside()}
      <Avatar src={avatars[2]} />
    {/snippet}
    <span>列表条目</span>
  </ListItem>
  <ListItem {clickable} description="这是一段很长的说明有可能会超过原有的长度或者造成换行">
    {#snippet aside()}
      <Avatar src={avatars[3]} />
    {/snippet}
    <span>列表条目</span>
    {#snippet extra()}
      <span>条目的值</span>
    {/snippet}
  </ListItem>
</List>

List

属性

属性	说明	类型	默认值
header	标题。不填则不会显示标题。	string | Snippet	undefined

ListItem

属性

属性	说明	类型	默认值
children	列表项	Snippet	undefined
aside	列表项左侧区域	Snippet	undefined
header	列表项上部的标题区域	string | Snippet	undefined
description	列表项下部显示的描述	string | Snippet	undefined
extra	列表项右侧区域	string | Snippet	undefined
icon	右侧图标	string | IconOption	undefined
clickable	是否显示点击效果	boolean	false
disabled	是否禁用	boolean	false