Alune 组件

PanelToggle

表达可控区域、展开状态和可用性，实际快捷键由宿主注册。

使用方式

controls 必须指向真实 DOM 元素，expanded 是受控值。组件提供 aria-keyshortcuts 说明；宿主负责实际快捷键注册与面板显隐。不可用时保留焦点用于说明原因。 

import { PanelToggle } from '@alune/ui';

接入要求见快速开始，选择依据见 交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档；所有回调只更新本地模拟数据。

真实示例 TSX 独立预览 ↗
查看运行源码
源码文件 
import { useState } from 'react';
import { PanelHeader, PanelToggle } from '@alune/ui';

export default function Example() {
  const [expanded, setExpanded] = useState(true);
  return (
    <div className="example">
      <div className="example-panel">
        <PanelHeader
          title="示例面板"
          count={3}
          description="可折叠的内容区域"
          extra={
            <PanelToggle
              side="right"
              expanded={expanded}
              controls="sample-panel"
              panelName="示例面板"
              onClick={() => setExpanded((v) => !v)}
            />
          }
        />
        <section id="sample-panel" hidden={!expanded} className="example-panel-body">
          面板内容
        </section>
      </div>
    </div>
  );
}

API

PanelToggle

controls 必须指向真实 DOM 元素，expanded 是受控值。组件提供 aria-keyshortcuts 说明；宿主负责实际快捷键注册与面板显隐。不可用时保留焦点用于说明原因。

查看 PanelToggle 实现 ↗

PanelToggleProps

属性 / 方法 类型 默认值 必填 说明
side "left" | "right" — 是 面板所在方向。
expanded boolean — 是 当前展开状态。
controls string — 是 被控制元素的 DOM id。
onClick () => void — 是 点击回调，由宿主执行操作。
disabled boolean false 否 禁用操作。
panelName string — 否 面板可访问名称。

查看 PanelToggleProps 实现 ↗

交互与使用限制

为每个操作提供可访问名称，为输入关联 label；使用语义化组件和清晰焦点。不要只靠颜色传达状态，禁用与等待时避免重复执行。

controls 必须指向真实 DOM 元素，expanded 是受控值。组件提供 aria-keyshortcuts 说明；宿主负责实际快捷键注册与面板显隐。不可用时保留焦点用于说明原因。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。

查看实现 ↗ 编辑文档 ↗ 设计与验收