跳到正文
浏览文档

简介

基于 shadcn/ui 与 GPUI Kit 的 Avalonia 主题与控件,浅色、深色逐像素校验。

Avalonia UIKit 是为 Avalonia 打造的一套主题与控件,基于 shadcn/ui 的 Nova 风格与 GPUI Kit。它由三部分组成:

  • UIKitTheme:面向 Avalonia 原生控件的 Styles 主题,提供 GPUI Kit 的 Default Light、Default Dark 以及其同捆的 36 套配色主题(Aurora、Ayu、Catppuccin、Tokyo Night 等),覆盖 Button、TextBox、ComboBox、TabControl、Calendar、ListBox、TreeView、TableView、Menu、ToolTip 等控件。主题会替换每个控件的 ControlTheme,因此改变的不只是配色,还包括内边距、轮廓、内部布局、状态与动画。
  • 新控件:位于 uikit: 命名空间,外观与主题一致。其中一些是 Avalonia 没有对应物的小型组件:Badge、TagLabel、Alert、Avatar、Breadcrumb、Kbd、Clipboard、Rating、EmptyState、Skeleton、StatusBar、DescriptionList、Stepper、Form、HoverCard、ShimmerText、Marker、Bubble 和 Message。另一些则实现了 Avalonia 控件做不到的事:带搜索框和多选的 Select、带分组的 ListView、虚拟化的 Tree、支持多月份和区间的 CalendarView,以及 DateField、TimeField、Table、ColorSelect、Sidebar、Sheet、NotificationList、TitleBar 等。每个控件在 组件 的 UIKit Controls 分组下都有自己的页面。
  • 附加属性:为 Avalonia 原生控件补充功能,例如按钮的加载状态(uikit:Buttons)、TextBox 的校验与输入掩码(uikit:Inputs)、标签栏的前缀与后缀(uikit:Tabs)、GroupBox 的页脚、Separator 的标签等。它们只在应用主动设置时生效。

每个组件都会与参考渲染图比对:浅色与深色下的每个变体、尺寸与状态,以及逐帧的动效。颜色令牌由生成器生成,包括组件为各种状态推导出的颜色,因此没有任何颜色需要手工近似。

本库面向 NativeAOT 构建。它只使用编译绑定,并在构建时禁止反射;每次改动都会运行 NativeAOT 冒烟测试,在两种主题下渲染每个控件。

它不是什么

本库是对 Avalonia 控件的补充,而不是替代:应用仍然编写 Button、TextBox 或 ComboBox,只在需要额外能力的地方使用 uikit: 控件或附加属性。需要自带引擎或平台服务的组件不在范围内,例如代码编辑器、多光标或文本框内联令牌、图表、对话框、命令面板、系统通知,以及 SVG 或动图。停靠布局由 Dock.Avalonia 提供,AvaloniaUIKit.Dock 为其提供主题。

下一步

  • 安装:添加包,并在 App.axaml 中启用主题。
  • 主题设置:Default Light、Default Dark 与 36 套同捆配色主题、颜色令牌、字体、尺寸与变体。
  • 图标:同捆的 Lucide 图标。
  • 组件:每个组件的演示及其 XAML。