UI SDK

Downcity UI SDK 的接入方式、样式入口和对外导出结构

@downcity/ui 是 Downcity 当前共享的 React + Tailwind 基础组件包，用来承载 Console UI 与其他宿主应用之间可复用的界面原语。

如果你想逐个查看组件文档，请继续阅读 组件总览。

如果你想先完成接入，再开始使用组件，请继续阅读 安装与接入。

包含内容

  • Console 风格的基础组件：Button、Badge、Card、Checkbox、Input、Label、Textarea、Separator、Dialog、Sheet、DropdownMenu、Popover、Tabs、Toggle、ToggleGroup、Tooltip、Skeleton、Toaster
  • 用于合并 Tailwind 类名的 cn 工具
  • source.css 与 styles.css 两个样式入口
  • 对外公开的基础类型：DowncityButtonVariant、DowncityButtonSize、DowncityCardSize、DowncityDropdownMenuItemVariant、DowncityToasterTheme

阅读入口

对外导出结构

工具与类型

  • cn
  • DowncityButtonVariant
  • DowncityButtonSize
  • DowncityCardSize
  • DowncityDropdownMenuItemVariant
  • DowncityToasterTheme

基础表单

  • Input
  • Textarea
  • Checkbox
  • Label

容器与信息展示

  • Card
  • CardHeader
  • CardTitle
  • CardDescription
  • CardAction
  • CardContent
  • CardFooter
  • Badge
  • Separator
  • Skeleton
  • Tabs

操作与状态切换

  • Button
  • Toggle
  • ToggleGroup

浮层与反馈

  • Dialog
  • Sheet
  • DropdownMenu
  • Popover
  • Tooltip
  • Toaster

组件范围

  • 动作：Button、Badge、Toggle、ToggleGroup
  • 表单：Input、Textarea、Checkbox、Label
  • 容器：Card、Separator、Skeleton、Tabs
  • 浮层：Dialog、DropdownMenu、Popover、Sheet、Tooltip、Toaster

下一步阅读