Skip to Content
@anker-in/headless-ui 2.0 is released 🎉
原子组件原子组件

原子组件

欢迎来到原子组件文档页面！原子组件是我们设计系统的基础构建块，遵循 Atomic Design 原则，为构建复杂的用户界面提供最小的、可重用的组件单元。

设计理念

原子组件基于以下核心理念设计：

🎯 单一职责

每个原子组件都专注于解决一个特定的用户界面需求，确保功能的纯粹性和可预测性。

🔧 高度可组合

原子组件可以像乐高积木一样组合，构建出更复杂的业务组件和页面布局。

🎨 一致的设计语言

所有组件遵循统一的设计规范，包括颜色、间距、字体和交互模式，确保整体用户体验的一致性。

♿ 无障碍优先

内置完善的无障碍支持，包括键盘导航、屏幕阅读器支持和 ARIA 标签。

组件分类

📝 文本组件

  • Text - 灵活的文本组件，支持多种尺寸和样式
  • Heading - 语义化的标题组件，支持 h1-h6 层级

🎛️ 输入组件

  • Input - 文本输入框，支持多种类型和状态
  • InputNumber - 数字输入框，内置数值校验
  • Checkbox - 复选框，支持受控和非受控模式
  • Radio - 单选按钮，提供优雅的选择体验

🔘 交互组件

  • Button - 按钮组件，支持多种变体和状态
  • Link - 链接组件，兼容内部和外部导航
  • Tabs - 标签页组件，用于内容切换
  • Dialog - 对话框组件，支持模态和非模态
  • Drawer - 抽屉组件，提供侧边栏体验
  • Popover - 弹出层组件，用于临时内容展示
  • DropDown - 下拉菜单组件

🖼️ 媒体组件

  • Picture - 响应式图片组件，支持多种格式和优化
  • Avatar - 头像组件，支持图片和文字显示
  • Carousel - 轮播图组件

📦 容器组件

  • Card - 卡片容器，用于内容分组
  • Container - 布局容器，提供一致的内容宽度
  • Grid - 网格布局组件
  • Board - 面板组件，用于内容展示

🎨 装饰组件

  • Badge - 徽章组件，用于状态标识
  • Alert - 提示信息组件
  • Skeleton - 骨架屏组件，优化加载体验
  • LoadingDots - 加载动画组件

🎯 工具组件

技术特性

🚀 现代化技术栈

  • TypeScript - 完整的类型定义，提供优秀的开发体验
  • React 18+ - 支持最新的 React 特性和性能优化
  • Tailwind CSS - 原子化 CSS，高度可定制的样式系统
  • Radix UI - 基于 Radix 原语，确保组件的可访问性和交互质量

🎛️ 灵活的定制能力

  • 主题系统 - 支持亮色/暗色主题切换
  • 样式变体 - 每个组件提供多种预设样式
  • 自定义属性 - 通过 props 轻松定制组件行为
  • CSS 变量 - 支持动态主题和样式覆盖

📱 响应式设计

所有组件都针对不同屏幕尺寸进行了优化：

  • Mobile - 手机端优化（< 768px）
  • Tablet - 平板端适配（768px - 1024px）
  • Desktop - 桌面端体验（> 1024px）

开始使用

安装

npm install @anker-in/headless-ui
# 或
yarn add @anker-in/headless-ui

基本使用

import { Button, Text, Card } from '@anker-in/headless-ui'
 
export default function MyComponent() {
  return (
    <Card className="p-6">
      <Text size={4} className="mb-4">
        欢迎使用 Anker Design System
      </Text>
      <Button variant="primary" size="lg">
        开始探索
      </Button>
    </Card>
  )
}

组件导航

从左侧导航中选择具体的组件来查看详细的使用说明、API 文档和交互示例。每个组件页面都包含：

  • 📋 基本用法 - 快速开始的代码示例
  • 🎨 样式变体 - 不同的视觉样式选择
  • 🔗 storybook - storybook 链接，在这里你可以看到更详细的API 和 交互示例

贡献指南

我们欢迎社区贡献！如果您有任何建议或发现问题，请：

  1. 查看我们的 Coding 仓库 .
  2. 提交 Issue 报告问题或建议新功能.
  3. 创建 Pull Request 贡献代码.
  4. 参与讨论和代码审查.

让我们一起构建更好的设计系统！🚀

Last updated on
Alert