Next UI Component API Guide (Standard Interface)

本指南定义了 Next UI 组件的标准接口。我们的目标是 API 兼容优先，确保与 Microsoft Fluent UI Blazor 库的命名习惯对齐。

1. 基础原则

  1. 生态兼容性 (Ecosystem Alignment): 所有组件参数 [Parameter] 必须优先参考 Microsoft Fluent UI Blazor 的 API 定义。
  2. 命名一致性: 属性名采用 PascalCase 风格，布尔值应使用形容词或动词（如 Disabled, Loading, Fluid）。
  3. 样式解耦: 禁止在 [Parameter] 中暴露具体的颜色值或间距像素，必须通过 Appearance, Size, Shape 等语义化参数控制。
  4. 继承 SxComponentBase: 核心 UI 组件必须继承自 SxComponentBase。

2. 基础组件基类 (SxComponentBase)

参数名 类型 描述
Id string 根元素的 HTML ID
Class string 自定义 CSS 类名
Style string 自定义内联样式
Disabled bool 禁用状态
Loading bool 加载状态
AdditionalAttributes IEnumerable<KeyValuePair<string, object>> 透传至根元素的额外属性

3. 组件分类索引

基础交互 (Actions & Inputs)

状态 组件名 描述 对应 Fluent UI
[x] SxButton 按钮 FluentButton
[x] SxSplitButton 拆分按钮 FluentSplitButton
[ ] SxToggleButton 切换按钮 FluentToggleButton
[ ] SxAnchor 超链接 FluentAnchor
[x] SxFab 悬浮按钮 -

表单输入 (Forms)

状态 组件名 描述 对应 Fluent UI
[x] SxInput 单行输入 FluentTextField
[x] SxTextArea 文本域 FluentTextArea
[x] SxNumberInput 数字输入 FluentNumberField
[x] SxCheckbox 复选框 FluentCheckbox
[x] SxRadioGroup 单选框组 FluentRadioGroup
[x] SxSwitch 开关 FluentSwitch
[x] SxSlider 滑块 FluentSlider
[x] SxSelect 选择器 FluentSelect
[x] SxAutoComplete 自动完成 FluentAutocomplete
[x] SxDatePicker 日期选择 FluentDatePicker
[x] SxDateRangePicker 日期范围选择 -
[x] SxTimePicker 时间选择 FluentTimePicker
[x] SxTimeRangePicker 时间范围选择 -
[x] SxDateTimePicker 日期时间选择 FluentDateTimePicker
[x] SxColorPicker 颜色选择 FluentColorPicker
[x] SxRating 评分 FluentRating
[ ] SxSearch 搜索框 FluentSearch
[x] SxSecurityCode 验证码输入 -

数据展示 (Data Display)

状态 组件名 描述 对应 Fluent UI
[x] SxTable 表格 FluentDataGrid
[x] SxTree 树形 FluentTreeView
[x] SxList 列表 FluentList
[x] SxBadge 徽标 FluentBadge
[x] SxTag 标签 FluentTag
[x] SxAvatar 头像 FluentAvatar
[x] SxProgress 进度条 FluentProgress
[x] SxTimeline 时间轴 -
[x] SxImage 图片 FluentImage
[x] SxQRCode 二维码 -
[ ] SxSkeleton 骨架屏 FluentSkeleton
状态 组件名 描述 对应 Fluent UI
[x] SxNavBar 导航栏 FluentToolbar
[x] SxTabs 标签页 FluentTabs
[x] SxMenu 基础菜单 FluentMenu
[x] SxMenuButton 菜单按钮 FluentMenuButton
[x] SxDialog 对话框 FluentDialog
[x] SxDrawer 抽屉 FluentDrawer
[x] SxToast 通知 FluentToast
[x] SxTooltip 文字提示 FluentTooltip
[ ] SxBreadcrumb 面包屑 FluentBreadcrumb
[ ] SxPagination 分页器 FluentPagination
[ ] SxAccordion 折叠面板 FluentAccordion
[ ] SxMessageBar 信息栏 FluentMessageBar
[ ] SxContextMenu 右键菜单 -

布局 (Layout)

状态 组件名 描述 对应 Fluent UI
[x] SxAppShell 应用外壳 -
[x] SxStack 堆叠布局 FluentStack
[x] SxGrid 网格布局 FluentGrid
[x] SxCard 卡片 FluentCard
[x] SxSection 布局分段 -
[x] SxPageBox 页面盒子 -
[x] SxSpacer 弹性间距 FluentSpacer
[x] SxSplitter 分割器 FluentSplitter
[x] SxMultiSplitter 多栏分割器 -

高级与特殊 (Advanced)

状态 组件名 描述 备注
[x] SxTypography 排版 FluentTypography
[x] SxIcon 图标 FluentIcon
[x] SxChart 基础图表 集成 Chart.js / ECharts
[x] SxCodeSnippet 代码片段 -
[x] SxInfiniteList 无限滚动列表 -
[ ] SxMarkdownEditor MD 编辑器 -
[ ] SxHtmlEditor HTML 编辑器 -
[x] SxPropertyInspector 属性检查器 内部工具