Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Overview

默认一次只展开一个条目，首项默认打开。点击标题收起或切换，也可以用 ↑ ↓ 键在条目间移动。

GPUI · Live previewTry it out

Installation

Accordion 是单个 Rust 文件（src/accordion.rs），构建在 gpui-base 的无样式原语之上。复制到你的 crate，或下载完整示例直接运行。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# accordion.rs builds on the unstyled primitives5# re-exported at gpui_kit::base:6#   Accordion, AccordionItem, AccordionHeader,7#   AccordionTrigger, AccordionPanel, MotionReveal

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --accordion34# Other demos:5cargo run --locked -- --accordion multiple6cargo run --locked -- --accordion disabled7cargo run --locked -- --accordion card

Usage

用 AccordionEntry 描述每一段内容，把实体保留在宿主视图上，渲染时放进任意容器。

Example.rs

1use justdo_command::accordion::{Accordion, AccordionEntry};23// Keep the entity on your host view.4let accordion = cx.new(|_| {5    Accordion::new()6        .entry(AccordionEntry::new("shipping", "What are your shipping options?")7            .content("We offer standard (5-7 days) and express shipping."))8        .entry(AccordionEntry::new("returns", "What is your return policy?")9            .content("Returns are accepted within 30 days of purchase."))10        .entry(AccordionEntry::new("support", "How can I contact support?")11            .content("Reach us through live chat or email."))12        .open("shipping")13});1415// In render: div().child(self.accordion.clone())

每个条目的 value 是稳定的标识符，open(value) 指定初始展开项。网页预览与桌面端运行同一份 Rust / GPUI 组件。

Composition

组合结构与 shadcn/ui 的 Base UI 版本一一对应。样式由组件实体统一提供，可访问性语义来自 gpui-base 原语。

Structure

1Accordion2├── AccordionItem3│   ├── AccordionHeader4│   │   └── AccordionTrigger     button · aria-expanded5│   └── AccordionPanel           region6└── AccordionItem7    ├── AccordionHeader8    │   └── AccordionTrigger9    └── AccordionPanel

Accessibility

Keyboard

↑ ↓ 在条目间循环移动焦点
Home End 跳到第一个 / 最后一个条目
Enter Space 展开或收起当前条目
Tab 沿页面 tab 序进入或离开组件

Semantics

标题携带 heading 语义（level 3），触发器是带 aria-expanded 的 button，面板是 region。焦点可见性、disabled 状态与 reduced-motion 由 GPUI 与浏览器偏好共同决定。

API Reference

组件实体暴露的方法与事件。结构原语由 gpui_kit::base 提供。

API	Signature	Notes
`Accordion::new()`	`-> Accordion`	Creates the entity content. Single-open and collapsible by default.
`.entry(..)`	`AccordionEntry`	Appends one item; call order is presentation order.
`.open(value)`	`&str`	Marks an entry expanded initially. Repeatable with multiple.
`.multiple(bool)`	`bool`	Allows several entries to stay open at once.
`.collapsible(bool)`	`bool`	Allows closing the last open entry (single mode).
`.dark(bool)`	`bool`	Dark color scheme for surfaces, text and borders.
`AccordionEntry::new(..)`	`value, title`	One row: stable value plus its heading.
`.content(..)`	`impl Into<SharedString>`	Panel copy revealed by the trigger.
`.disabled(bool)`	`bool`	Inert item: no clicks, skipped by arrow-key navigation.
`AccordionChange`	`{ value, open }`	Emitted on every toggle; subscribe with cx.subscribe.

Example.rs

1// AccordionChange { value, open } is emitted on every toggle.2cx.subscribe(&self.accordion, |view, _accordion, event, cx| {3    println!("{} -> {}", event.value, event.open);4    cx.notify();5});

Source & inspiration

结构与视觉参考 shadcn/ui Accordion （Base UI 组合方式）。本页交互由 Rust / GPUI 绘制，无样式原语来自 gpui-base 。