折叠面板

折叠面板就是单独一个 <details>——和手风琴用的是同一个元素，只是没有那些外包装。页面中间有一条可选的细节时用它；成组出现时用 accordion()。

它不需要脚本，而且因为内容始终留在文档里，浏览器自带的页内查找和搜索引擎都能找到它。

基础折叠面板

查看生成的配置

当你不带自己的配置文件运行构建时，sitelo 写下的全部内容。

collapsible({ trigger: '查看生成的配置' },
  text({ variant: 'small' }, '当你不带自己的配置文件运行构建时，sitelo 写下的全部内容。'),
)

默认展开

为什么会有这个

因为把解释藏在一次点击后面的页面，是没人会读的页面。

collapsible({ trigger: '为什么会有这个', open: true },
  text({ variant: 'small' }, '因为把解释藏在一次点击后面的页面，是没人会读的页面。'),
)

富内容

查看完整输出
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: '查看完整输出' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

放进别的东西里

折叠面板放在卡片、提示或表格单元格里都很自在。

构建失败

2 条断链

查看出问题的链接
  • /docs/old-routing
    来自 /docs 的链接
  • /blog/draft
    来自 /blog 的链接
stack({ gap: 'md' },
  card(
    cardHeader({ title: '构建失败', subtitle: '2 条断链' }),
    cardBody(
      collapsible({ trigger: '查看出问题的链接' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: '来自 /docs 的链接' }),
          listItem({ title: '/blog/draft', description: '来自 /blog 的链接' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: '页面偏慢' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, '有一个页面渲染用了超过 500 毫秒。'),
      collapsible({ trigger: '查看耗时' },
        text({ variant: 'small' }, '/examples/wordpress — 512 毫秒'),
      ),
    ),
  ),
)

触发区

只放文字和图标。<summary> 本身已经是可交互的，在里面再塞按钮或链接，就是在只有一个动作的地方套了两个控件——menu() 遵循的也是同一条规则。

折叠面板还是手风琴？

单独一处展开用 collapsible()。成组、带边框、可选一次只开一个，用 accordion()。

属性

属性类型默认值说明
triggerChild—摘要行的内容。只放文字和图标。
openbooleanfalse是否一开始就展开。