定价

ExpandButton

Figma 源代码

在展开与收起之间切换，用一致的按钮反馈表达状态，适合折叠内容和详情入口。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于展开或还原内容。宿主 CodeBlock 等已内置同类操作时优先配置宿主，避免两套展开状态。

  • 通过 bind:expanded 或 onExpandedChange 接收状态；defaultExpanded 提供初始值。

  • 组件只提供展开操作，不创建或控制内容面板；由页面把状态连接到实际内容。

导入

import { ExpandButton } from '@snowui-design-system/components';

用法

变体

API 参考

属性 类型 默认值 示例 描述
expanded boolean — expanded 当前展开状态，支持 bind:expanded；未定义时使用 defaultExpanded。点击后写入新布尔值；内容区域由调用方显示或隐藏。
defaultExpanded boolean false defaultExpanded expanded 未定义时的回退状态；首次点击后使用组件写入的 expanded，不再由此值驱动。
ariaLabel string — ariaLabel="Example" 未展开时按钮的可访问名称，应描述将要执行的展开动作；默认随 LocaleProvider 使用中文“展开”或英文“Expand”。
collapseAriaLabel string — collapseAriaLabel="Example" 已展开时按钮的可访问名称，应描述将要执行的收起动作；默认随 LocaleProvider 使用中文“收起”或英文“Collapse”。
icon Snippet —（arrows-out-simple） icon={iconContent} 未展开时的自定义图标；只替换图形，展开状态与 aria-expanded 仍由组件管理。
collapseIcon Snippet —（arrows-in-simple） collapseIcon={collapseIconContent} 已展开时的自定义图标；使用组件现有内容替换动效。
children Snippet — <ExpandButton>Content</ExpandButton> 图标后的自定义内容；不提供时启用 Button.iconOnly。组件不自动创建或控制展开面板。
onExpandedChange (expanded: boolean) => void — onExpandedChange={(value) => { /* handle value */ }} 点击切换后接收新状态，先于 onclick 调用；外部赋值不会触发。
onclick (event: MouseEvent) => void — onclick={(value) => { /* handle value */ }} 状态写入及 onExpandedChange 之后调用，不能取消已经完成的切换；禁用时不调用。