---
title: "组件"
description: "按类别分组的完整组件清单，以及目前已有文档的组件。"
url: "https://tanrei.chnotchy.com/zh-cn/components/"
last_updated: 2026-10-11T13:58:00.000Z
---

# 组件

> 按类别分组的完整组件清单，以及目前已有文档的组件。

Tanrei 的清单涵盖 96 个组件家族；各平台提供了哪些，请见[状态页面](https://tanrei.chnotchy.com/zh-cn/status/)。组件一有规格，就会在这里有一个页面。标为“计划中”的条目还没有规格，也不是链接。每个条目上的数字是已有实现的平台数。

每个组件页面都有同样的四个部分：

1. **概览**——组件的用途，以及在哪些平台上可用。
2. **规格**——构成、属性、状态、行为、令牌以及各平台的名称对应，由组件的规格文件渲染而来。
3. **指南**——何时使用、如何使用。
4. **无障碍**——角色、键盘交互和标签。

tanreicupertinom3-expressive-likem3-like

`tanrei` 中没有： [FAB menu](https://tanrei.chnotchy.com/zh-cn/components/fab-menu/)（请改用 [Main action button](https://tanrei.chnotchy.com/zh-cn/components/main-action-button/), [Bottom sheet](https://tanrei.chnotchy.com/zh-cn/components/bottom-sheet/)） · [Segmented button](https://tanrei.chnotchy.com/zh-cn/components/segmented-button/)（请改用 [Tabs](https://tanrei.chnotchy.com/zh-cn/components/tabs/), [Radio button](https://tanrei.chnotchy.com/zh-cn/components/radio-button/), [Button group](https://tanrei.chnotchy.com/zh-cn/components/button-group/)）

`cupertino` 中没有： [FAB menu](https://tanrei.chnotchy.com/zh-cn/components/fab-menu/)（请改用 [Main action button](https://tanrei.chnotchy.com/zh-cn/components/main-action-button/), [Bottom sheet](https://tanrei.chnotchy.com/zh-cn/components/bottom-sheet/)）

## 操作

Button 0/5 · 基础 Main action button 0/5 · 基础 Segmented button 0/5 · 基础 Button group 0/5 · 基础 Button with menu 0/5 · 组合 Toolbar 0/5 · 基础 Copy button 0/5 · 组合

## 选择

Checkbox 0/5 · 基础 Radio button 0/5 · 基础 Switch 0/5 · 基础 Chip 0/5 · 基础 Menu 0/5 · 基础 Slider 0/5 · 基础 Slider field 0/5 · 组合 Calendar 0/5 · 基础 DateTimePicker 0/5 · 组合 Field group 0/5 · 基础 Radio group 0/5 · 组合 Checkbox group 0/5 · 组合 Select 0/5 · 基础 Select field 0/5 · 组合 Menubar 0/5 · 组合 File upload 0/5 · 功能 File picker 0/5 · 基础 进阶 Drop zone 1/5 · 基础

## 文本输入

Text input 0/5 · 基础 进阶 Text field 0/5 · 组合 Chip field 0/5 · 组合 Field 0/5 · 基础 Combobox 0/5 · 基础 进阶 Combobox field 0/5 · 组合 Number input 0/5 · 基础 进阶 Number field 0/5 · 组合 Color input 0/5 · 基础 进阶 Color field 0/5 · 组合 One-time-code input 0/5 · 基础 进阶 One-time-code field 0/5 · 组合 Embedded text input 0/5 · 基础 进阶 Chat composer 0/5 · 功能

## 容器

Card 0/5 · 基础 Divider 0/5 · 基础 Modal layer 1/5 · 基础 进阶 Dialog 0/5 · 组合 List 1/5 · 基础 List row 1/5 · 基础 Bottom sheet 0/5 · 组合 Side sheet 0/5 · 组合 Carousel 0/5 · 基础 Code block 0/5 · 基础 Table 0/5 · 基础 Popover 0/5 · 基础 Steps 0/5 · 基础 Accordion 0/5 · 基础 Description list 0/5 · 基础 Figure 0/5 · 基础 App shell 0/5 · 基础 Page header 0/5 · 基础 Tree view 0/5 · 基础 Timeline 0/5 · 基础 Image preview 0/5 · 功能 Handle 1/5 · 基础 Resizable frame 1/5 · 组合 Scroll area 1/5 · 基础

## 信息传达

Badge 0/5 · 基础 Progress indicator 0/5 · 基础 Meter 1/5 · 基础 Number ticker 1/5 · 基础 Loading indicator 0/5 · 基础 Snackbar 0/5 · 基础 Tooltip 0/5 · 基础 Keyboard shortcut 0/5 · 基础 Tag 0/5 · 基础 Inline code 0/5 · 基础 Callout 0/5 · 基础 Avatar 0/5 · 基础 Empty state 0/5 · 基础 Tag group 0/5 · 基础 Skeleton 0/5 · 基础 File item 0/5 · 基础 Swatch 1/5 · 基础 Marquee text 1/5 · 基础

## 导航

Tabs 0/5 · 基础 Tab view 0/5 · 组合 App bar 0/5 · 基础 Navigation bar 0/5 · 基础 Navigation drawer 0/5 · 组合 Search 0/5 · 功能 Link 0/5 · 基础 Pagination 1/5 · 基础 Previous and next links 0/5 · 基础 Stepper 1/5 · 基础 Breadcrumbs 0/5 · 基础 Table of contents 0/5 · 基础 Link card 0/5 · 基础

## 基础

Prose 0/5 · 基础

## M3-like 组件

FAB menu 0/5 · 基础

生成自 `docs/status/status.json`, `specs/inventory.json`
