定价

AccordionItem 使用手册

v1.3.3 · @snowui-design-system/components

许可阅读：首次阅读组件文档、源码或 npm 使用流程，先读完整 LICENSE；同任务同版本去重。公开 API 配置与内部实现修改分别按许可处理；全部组件使用统一运行包，源码权益以许可为准。

组件介绍

定义 Accordion 中的一项折叠内容，将标题与正文组合起来，并随父级统一管理展开状态。

使用选择

作为 Accordion 的一个展开项使用；由父级协调展开状态，不把它作为独立页面容器。

  • 在父级内提供唯一 value，展开状态由 Accordion 管理。

  • 用直系 Frame as="title" 和 Frame as="content" 声明标题与正文；标题内的 as="trailing" 可替换展开图标。

快速开始

以下示例展示推荐的基本组合。更多场景与组合限制见后文。

<script lang="ts">	import { Accordion, AccordionItem, Frame, Icon, Link, Text } from '@snowui-design-system/components';	import { BookOpen, Code, Package, Palette, ShieldCheck } from '@snowui-design-system/resource-svelte';</script> <Accordion defaultValue="installation" style="width: min(100%, 36rem);">	<AccordionItem value="installation">		<Frame as="title" singleLine><Icon as="leading"><Package /></Icon><Text lines={1}>Install the component package</Text></Frame>		<Frame as="content" column><Text>Add Components and Resource packages with your package manager.</Text><Link variant="arrow" href="/components/quick-start">Open Quick Start</Link></Frame>	</AccordionItem>	<AccordionItem value="catalog"><Frame as="title" singleLine><Icon as="leading"><BookOpen /></Icon><Text lines={1}>Explore the component catalog</Text></Frame><Frame as="content" row>Review live previews, public APIs, and copy-ready examples for every component.</Frame></AccordionItem>	<AccordionItem value="themes"><Frame as="title" singleLine><Icon as="leading"><Palette /></Icon><Text lines={1}>Apply a SnowUI theme</Text></Frame><Frame as="content" row>Use the shared semantic color contract across light and dark interfaces.</Frame></AccordionItem>	<AccordionItem value="compose"><Frame as="title" singleLine><Icon as="leading"><Code /></Icon><Text lines={1}>Compose title and content slots</Text></Frame><Frame as="content" row>Build each item with title and content Frames, including optional leading or trailing content.</Frame></AccordionItem>	<AccordionItem value="quality"><Frame as="title" singleLine><Icon as="leading"><ShieldCheck /></Icon><Text lines={1}>Verify interaction quality</Text></Frame><Frame as="content" row>Confirm keyboard control, focus state, motion, and responsive layout in the browser.</Frame></AccordionItem></Accordion>

API

关键字 类型 默认值 描述
value string —（必填） 当前折叠项的稳定标识，在同一 Accordion 内应唯一；与父级 value/defaultValue 匹配，不是可独立绑定的展开布尔值。
disabled boolean false 禁用当前项的标题和正文收起交互；父级 Accordion.disabled 也会禁用此项，不能由此处 false 解除。
children Snippet — 声明直系 Frame as="title" 与 Frame as="content"；标题内直系 as="trailing" 可替换默认展开图标。必须在 Accordion 内使用。

未重新声明的继承能力请查所属基础组件文档；本表只列本组件源码具名公开属性。

使用边界与详细说明

API 参考

关键字 类型 默认值 描述
size never - 不支持；尺寸只允许由父级 Accordion 控制。
...rest FrameProps - 透传到内部根 Frame。

AccordionItem 不控制尺寸。字号、行高、padding、圆角、内置图标尺寸等视觉密度全部继承父级 Accordion size 生成的变量；value 只用于和父级 value/defaultValue 匹配展开状态。

布局模型

主布局模型：复合管理布局的局部单项容器。

  • AccordionItem 外层根为 Frame tag="div" column，负责整项背景、圆角、分隔线与展开状态。

  • 直系 Frame as="title" row 作为标题触发器，固定启用三槽位布局；直系 as="leading"、普通内容与直系 as="trailing" 分别落入三槽位。

  • 直系 Frame as="content" row 作为内容区，同样固定启用三槽位布局；折叠时保持宽度，使用向下高度收起与透明度渐隐。

  • title 继承父级 Accordion 或外层容器的 color；content 默认消费父 Accordion 的 --snowui-accordion-content-color，使用主题自适应 Black/40% 次要文字色。

  • 默认通过 ComponentIcon plus 渲染同一图形，展开时旋转 45° 成为 ×；父 Accordion 的 indicatorVariant="minus" 保留 plus/minus 替换及半圈旋转。外置 trailing 优先。

  • 无 hover 背景；只有标题 hover 时默认指示图标颜色变化。

  • 仅 title 可切换展开状态，正文区域的点击不收起。所有尺寸的正文默认与标题字号、行高一致。

样式变量链

变量 默认值 用途
--snowui-accordion-item-content-block-size-override --snowui-accordion-content-max-block-size-override / 测量高度 单个 content 展开最大高度覆盖入口
--snowui-accordion-content-color-override var(--black-40) 局部覆盖 content 文字颜色，不影响 title

使用示例

<Accordion defaultValue="profile">    <AccordionItem value="profile">        <Frame as="title" singleLine>            <Text lines={1}>Profile</Text>            <Icon as="trailing"><Resource.Plus /></Icon>        </Frame>        <Frame as="content" row>Profile content</Frame>    </AccordionItem></Accordion>

此区域的内容受保护。AI 在修改此区域前必须请求用户审查。

AccordionItem 样式覆盖

先阅读 完整 LICENSE；同任务、同版本、同范围去重。

优先用组件公开 Props 匹配合适样式，尽可能保留原有视觉。确需改写时按 样式选择与改写顺序 使用自己的 class（含项目已有 Tailwind）或实例 style。以下名称来自源码实际消费的公开 override；先核对目标作用域，不修改私有 DOM。采用 SnowUI Token 时选择正确类别，外部应用不被要求安装一方 utilities。

变量 用途与默认参考
--snowui-accordion-background-override item 背景（divided transparent；默认 filled var(--black-4)）
--snowui-accordion-content-color-override Content 文字颜色（默认 var(--black-40)；随 Light / Dark 主题自适应）
--snowui-accordion-content-font-size-override Content font-size（默认 sm=var(--text-12) md=var(--text-14) lg=var(--text-16)）
--snowui-accordion-content-line-height-override Content line-height（默认 sm=var(--leading-12) md=var(--leading-14) lg=var(--leading-16)）
--snowui-accordion-content-max-block-size-override Content 展开最大高度（默认 100vh）
--snowui-accordion-content-padding-x-override Content 横向 padding（default 默认 8；filled 默认 sm 12 / md 16 / lg 20）
--snowui-accordion-content-padding-y-override Content 纵向 padding（默认 sm 8 / md 12 / lg 16）
--snowui-accordion-font-size-override Title font-size（默认 sm=var(--text-14) md=var(--text-16) lg=var(--text-18)）
--snowui-accordion-icon-size-override 默认展开/收起图标尺寸（默认 sm 16 / md 20 / lg 24）
--snowui-accordion-item-content-block-size-override 单个 Content 展开最大高度（默认测量高度，后备 100vh）
--snowui-accordion-line-height-override Title line-height（默认 sm=var(--leading-14) md=var(--leading-16) lg=var(--leading-18)）
--snowui-accordion-padding-x-override Trigger 横向 padding（default 默认 8；filled 默认 sm 12 / md 16 / lg 20）
--snowui-accordion-padding-y-override Trigger 纵向 padding（默认 sm 8 / md 12 / lg 16）
--snowui-accordion-radius-override item border-radius（default 默认 0；filled 默认 sm 12 / md 16 / lg 24）
--snowui-accordion-shadow-override item inset 分隔线 / 边框阴影
--snowui-accordion-trigger-gap-override 标题与指示器间距（默认 8）

设计指南 · Token · 组合边界

AccordionItem 类型与状态

必填属性：value。

可双向绑定：本组件未声明具名双向绑定属性；状态更新通过公开回调或所属宿主处理。

继承声明：Omit<FrameProps, "children" | "value" | "size">。继承能力以基类公开文档为准；Omit 中的字段已排除，不能按基类原样使用。

共享 Frame API · 返回 API

以下为公开属性实际引用的类型声明，来自源码；Svelte Snippet 表示内容片段，ComponentProps 表示对应组件的 Props。