Collapse 折叠面板

示例

基础用法

<Collapse header="基础用法">
  <p class="p-2 pl-0">...</p>
</Collapse>

默认展开

<Collapse header="默认展开" expanded>
  <p class="p-2 pl-0">...</p>
</Collapse>

内容分栏

<Collapse header="内容分栏">
  {#each new Array(5) as row, ix}
    <div class="py-4">第{ix + 1}行</div>
  {/each}
</Collapse>

列表条目

<Collapse header="列表条目">
  {#each new Array(5) as row, ix}
    <ListItem clickable>第{ix + 1}行</ListItem>
  {/each}
</Collapse>

配合列表

<List header="基础用法" class="-mt-[1px]">
  <Collapse header="基础用法">
    <p class="p-2 pl-0">...</p>
  </Collapse>
  <Collapse header="默认展开" expanded={true}>
    <p class="p-2 pl-0">...</p>
  </Collapse>
  <Collapse header="列表条目">
    {#each new Array(5) as row, ix}
      <ListItem clickable>第{ix + 1}行</ListItem>
    {/each}
  </Collapse>
  <Collapse header="内部滚动">
    <div>
      <!-- 滚动层外侧一定要垫一层 div -->
      <div class="overflow-y-auto py-4" style="height: 200px">
        {#each new Array(20) as row, ix}
          <p>第{ix}行</p>
        {/each}
      </div>
    </div>
  </Collapse>
</List>
<List header="手风琴 {expanded}">
  <Collapse
    expanded={expanded === 0}
    header="折叠面板"
    onChange={ex => (expanded = ex ? 0 : -1)}
  >
    <div>
      <p>第一行</p>
      <p>第二行</p>
    </div>
  </Collapse>
  <Collapse
    expanded={expanded === 1}
    header="折叠面板"
    onChange={ex => (expanded = ex ? 1 : -1)}
  >
    <div>
      <p>第一行</p>
      <p>第二行</p>
    </div>
  </Collapse>
  <Collapse
    expanded={expanded === 2}
    header="折叠面板"
    onChange={ex => (expanded = ex ? 2 : -1)}
  >
    <div>
      <p>第一行</p>
      <p>第二行</p>
    </div>
  </Collapse>
</List>

Collapse

属性

事件