Alune 组件

FolderIcon

区分普通文件夹、已展开、仓库与符号链接。

使用方式

variant 支持 folder / repository / link。open 仅影响普通文件夹；图标为装饰内容，配套文本由宿主提供。

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

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

运行示例

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

查看运行源码

源码文件

import { FileIcon, FolderIcon, DialogIcon } from '@alune/ui';

export default function Example() {
  return (
    <div className="example">
      <section className="example-group">
        <h2 className="example-title">文件类型</h2>
        <div className="example-icon-grid">
          {['main.ts', 'view.tsx', 'package.json', 'README.md', 'photo.png', 'unknown.file'].map(
            (path) => (
              <div key={path} className="example-icon-item">
                <FileIcon path={path} />
                <span>{path}</span>
              </div>
            ),
          )}
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">目录与仓库</h2>
        <div className="example-icon-grid">
          <div className="example-icon-item">
            <FolderIcon />
            <span>文件夹</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon open />
            <span>已展开</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon variant="repository" />
            <span>仓库</span>
          </div>
          <div className="example-icon-item">
            <FolderIcon variant="link" />
            <span>链接</span>
          </div>
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">操作图标</h2>
        <div className="example-icon-grid">
          {(['folder', 'clock', 'check', 'x', 'refresh'] as const).map((name) => (
            <div key={name} className="example-icon-item">
              <DialogIcon name={name} />
              <span>{name}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

API

FolderIcon

variant 支持 folder / repository / link。open 仅影响普通文件夹；图标为装饰内容，配套文本由宿主提供。

查看 FolderIcon 实现 ↗

FolderIconProps

属性 / 方法	类型	默认值	必填	说明
`open`	`boolean`	`false`	否	受控开启状态。
`variant`	`"folder" \| "link" \| "repository"`	`'folder'`	否	视觉或内容变体。

查看 FolderIconProps 实现 ↗

交互与使用限制

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

variant 支持 folder / repository / link。open 仅影响普通文件夹；图标为装饰内容，配套文本由宿主提供。

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

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