Alune 组件

PanelHeader

组合标题、数量、说明与操作，不接入业务状态。

使用方式

面板标题由宿主传入状态和回调，适合在不同应用和文档中复用。先完成快速开始中的 Provider 与样式配置。

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

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

运行示例

运行与复制源码来自同一 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

PanelHeader

PanelHeader 是通用组合成员，具体属性见关联 Props 表，运行效果见上方示例。

查看 PanelHeader 实现 ↗

PanelHeaderProps

属性 / 方法	类型	默认值	必填	说明
`title`	`string`	`—`	是	标题或主文案。
`count`	`number`	`—`	否	数量，0 也会显示。
`description`	`string`	`—`	否	辅助说明。
`icon`	`ReactNode`	`—`	否	图标内容或图标名。
`extra`	`ReactNode`	`—`	否	额外内容或操作。

查看 PanelHeaderProps 实现 ↗

交互与使用限制

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

宿主负责状态、业务操作、错误处理与真实内容。组件不读取业务 store、路由或 Electron。示例中的反馈和等待均为本地模拟。

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

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