Skip to main content

Headless UI

一般来说，构建用户界面是一个非常定制化的体验，取决于构建的具体场景。每个公司都有不同的需求。那么如何实现呢？

有很多已经成熟、已经样式化、准备投入生产的库，比如 MUI、Mantine、Chakra、Antd 等。这些库可以让你在项目初期非常快速地交付功能，并且拥有庞大且支持的社区。

无头组件提供了创建用户界面的基本构件，它带来了样式自由，同时保持了可访问性、功能性以及所有跨浏览器的特性，使得在构建自定义用户界面时更轻松。

可以认为无样式组件是常规组件的无样式版本，但提供了组件的基本逻辑，开发只需自定义样式即可创建自己的组件。

Radix​

Radix 是一个 Headless UI 的实现，专注于可访问性、定制化和开发者体验。Radix 主要解决逻辑层面的问题，开发者可以将这些组件作为设计系统的基础层，逐步采用它们。

大多数的用户界面模式，如手风琴、复选框、组合框、对话框、下拉菜单、选择框、滑块和工具提示，分享类似的定义。这些用户界面模式由 WAI-ARIA 记录，并被社区普遍理解。

然而，有时候提供给的实现不够完善，要么不存在，要么功能不足，或者无法进行足够的自定义。因此，开发者被迫构建自定义组件，这是一项极其困难的任务。

Radix 的目标是创建一个开源组件库，供社区使用，以构建可访问的设计系统。

  • 组件在可能的情况下遵循 WAI-ARIA 设计模式。
  • 组件默认没有样式，开发这可以完全自定义样式，也可使用现有的样式解决方案进行自定义。
  • 组件可以根据需求定制，比如可以封装并添加自己的事件监听器、属性或引用。
  • 提供最佳的开发体验。
  • RadixUI Course。
pnpm add radix-ui

每个组件也可以单独安装：

pnpm add @radix-ui/react-dialog
pnpm add @radix-ui/react-dropdown-menu
pnpm add @radix-ui/react-tooltip

React Aria​

React Aria 是一个未样式化的 React 组件和钩子的库，帮助开发者为应用程序或设计系统构建可访问的高质量 UI 组件。它提供了常见 UI 模式的组件，内置可访问性、国际化、交互和行为，使开发这能够专注于独特的设计和样式，而不是重新构建这些具有挑战性的方面。React Aria 已在各种设备、交互方式和辅助技术上进行了细致的测试，以确保为所有用户提供最佳体验。

pnpm add react-aria-components

React Aria 将许多常见 UI 组件的行为和可访问性实现分离为无样式的 React 组件和钩子，这使得它们可以在设计系统和应用程序之间轻松重用。开发者可以完全控制组件的渲染和样式方面，可以免费获得大部分行为、可访问性、国际化等功能。

与其仅从零开始并自己构建所有内容，不如从具有语义意义、内置行为和交互的元素开始。这使开发这能够更快地构建组件，并确保它们在鼠标、触摸和键盘交互以及屏幕阅读器和其他辅助技术中都能良好工作。

很多情况下，开发者需要从头开始创建自己的组件库的主要原因是样式。内置的浏览器 UI 控件不够可定制，并且在许多情况下根本不存在。React Aria 默认不包含任何样式，内置 CSS 类名、状态和渲染属性，使样式设置变得轻而易举。

大多数组件的行为在不同的设计系统中是一致的。W3C 发布的 ARIA 作者实践指南规定了大多数常见组件的预期键盘和可访问性行为。此外，触摸和鼠标行为通常也相当一致，无论设计如何。按钮仍然是按钮，即使它看起来有些不同。

React Aria 也提供了一种独特的高层组件组合，提供易于使用的 API，以及低层钩子，支持高级自定义用例。这使开发者能够在需要时自定义 DOM 结构、拦截事件以实现自定义行为、覆盖内部状态管理等，同时在不需要时保持简单。

import {
  Button,
  Label,
  ListBox,
  ListBoxItem,
  Popover,
  Select,
  SelectValue
} from 'react-aria-components';

<Select>
  <Label>Favorite Animal</Label>
  <Button>
    <SelectValue />
    <span aria-hidden="true">▼</span>
  </Button>
  <Popover>
    <ListBox>
      <ListBoxItem>Cat</ListBoxItem>
      <ListBoxItem>Dog</ListBoxItem>
      <ListBoxItem>Kangaroo</ListBoxItem>
    </ListBox>
  </Popover>
</Select>

Ark UI​

Ark UI 是一种适用于各种 JavaScript 框架的无头组件库，旨在简化构建美观和响应式用户界面的过程。它提供了一整套预设计的组件、样式和工具，使开发者能够轻松创建一致且视觉上吸引人的 UI。Ark UI 遵循模块化和可扩展的架构，允许开发者根据特定项目需求自定义和扩展框架。

  • 丰富的组件库。提供了一系列丰富的 UI 组件，涵盖了广泛的使用场景
  • 响应式设计变得简单。通过提供响应式网格系统和媒体查询断点简化了响应式设计。
  • 定制和主题。通过主题系统提供灵活性，使开发者能够自定义组件的外观和感觉，以匹配项目的品牌或风格指南。
  • 开发者友好的 API。框架的 API 文档全面且用户友好，使得理解和实现组件和功能变得简单。
pnpm add @ark-ui/react

Shadcn UI​

Shadcn UI 是新一代组件库解决方案，更精确地说，其并不是一个单纯的组件库，而是如何构建自己的组件库。

大多数的传统组件库，当要使用时，从 NPM 安装一个包，导入组件，然后在应用中使用它们。这种方通常没有什么问题，但当需要定制一个组件以适应特定的设计系统，或者需要一个库中没有的组件。这种情况下，通常会对组件进行二次包装，编写变通方法来覆盖样式，或者混合来自不同库的具有不兼容 API 的组件。而这正是 Shadcn UI 要解决的问题。

Shadcn UI 的本质是 RadixUI 和 Tailwind CSS 的集成。

目前 Shadcn UI 对 React 生态更加友好，例如 Next.js、Remix等。

运行 shadcn-ui init 命令以设置项目，配置之前，需要先安装 PostCSS 相关库：

pnpm add -D tailwindcss postcss autoprefixer

pnpm dlx shadcn@latest init

添加组件到项目，会下载对应组件到项目中，成为源码的一部分：

pnpm dlx shadcn@latest add button

使用组件：

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

StoryBook​

Storybook 是一个前端工作坊，用于独立构建 UI 组件和页面。它帮助您开发和分享难以触及的状态和边缘情况，而无需运行整个应用程序。成千上万的团队使用它进行 UI 开发、测试和文档编写。

  • 组件环境和应用环境是隔离开的，专注于单个组件的开发和测试。
  • 文档化。
  • 交互式测试。
  • 插件生态。
  • 多框架支持：React、Vue、Angular 等。
pmpm add storybook@latest init
Last updated on