企业官网建设流程全解析

• 前端
• UI组件
• 设计系统

导读

Segmented（分段控制器）是 ant-design-blazor 自v0.12.0版本起提供的单选型分段选择组件。与许多 Ant Design 组件一样，它内置了**大（large）、默认（default）、小（small）**三种尺寸，高度分别对应40px、32px和24px。本文将围绕 官方尺寸演示文档 展开，先给出三种尺寸的标准用法，再深入组件源码与 Less 样式，剖析尺寸类名ant-segmented-lg/ant-segmented-sm的生成逻辑、行高与内边距的计算方式，并给出与Block、Disabled等参数组合使用的实战建议。读完本文，你将能够精准控制分段控制器在表单、筛选区、内容切换等场景下的视觉尺寸。

一、三种尺寸速览：40px / 32px / 24px

根据官方演示文档的定义，ant-design-blazor 为<Segmented />组件提供了三种尺寸：

三种尺寸的高度分别对应 Less 主题变量@height-lg: 40px、@height-base: 32px、@height-sm: 24px（定义见 default.less），与 Ant Design 设计体系中的标准控件高度保持一致。也就是说，Segmented 可以直接与同尺寸的Input、Button等控件并排对齐使用。

二、实战用法：通过 Size 参数切换三种尺寸

尺寸由组件的Size参数控制，类型为SegmentedSize枚举。最直接的使用方式来自 Size.razor 演示代码：

<Segmented Size="SegmentedSize.Large" @bind-Value="value" Labels="@(new[]{"Daily", "Weekly", "Monthly", "Quarterly", "Yearly"})" /> <br /> <Segmented @bind-Value="value" Labels="@(new[]{"Daily", "Weekly", "Monthly", "Quarterly", "Yearly"})" /> <br /> <Segmented Size="SegmentedSize.Small" @bind-Value="value" Labels="@(new[]{"Daily", "Weekly", "Monthly", "Quarterly", "Yearly"})" /> @code { string value; }

要点说明：

• 不设置Size时即为默认尺寸（32px），因此示例中间一行直接省略了该属性；
• Labels参数接受string[]，每个字符串同时作为选项的展示文本（label）与选中值（Value），适合选项无需与值分离的简单场景；
• @bind-Value实现双向绑定，选中项变化时会同步触发ValueChanged回调。

如果需要“文本与值分离”的选项，可以使用Options参数（SegmentedOption<TValue>列表，定义见 SegmentedOption.cs），或通过ChildContent自由组合多个SegmentedItem子组件：

<Segmented @bind-Value="selectedSize"> <SegmentedItem Value="@("large")" Label="大" /> <SegmentedItem Value="@("default")" Label="默认" /> <SegmentedItem Value="@("small")" Label="小" /> </Segmented>

Options、Labels、ChildContent三者的优先级从渲染逻辑（见 Segmented.razor）可以确认：ChildContent 优先于 Options，Options 优先于 Labels。

三、SegmentedSize 枚举与类名映射原理

尺寸参数的底层定义位于 SegmentedSize.cs，这是一个包含Default、Small、Large三个成员的简单枚举：

public enum SegmentedSize { Default, Small, Large, }

在 Segmented.razor.cs 的OnInitialized中，组件通过ClassMapper把枚举值映射为实际的 CSS 类名：

ClassMapper.Add(PrefixCls) .If($"{PrefixCls}-lg", () => Size == SegmentedSize.Large) .If($"{PrefixCls}-sm", () => Size == SegmentedSize.Small) .If($"{PrefixCls}-disabled", () => Disabled) .If($"{PrefixCls}-block", () => Block) .If($"{PrefixCls}-rtl", () => RTL);

其中PrefixCls为"ant-segmented"。由此可得最终的类名映射关系：

• SegmentedSize.Large→ 根元素追加ant-segmented-lg
• SegmentedSize.Small→ 根元素追加ant-segmented-sm
• SegmentedSize.Default（或不设置）→ 不追加任何尺寸类，使用默认样式

这段代码同时说明了另外两个视觉相关参数的工作方式：Disabled会追加ant-segmented-disabled，Block会追加ant-segmented-block。

四、样式层实现：行高、内边距与字号如何随尺寸变化

尺寸类名最终作用于样式文件 index.less 中的两段规则：

&&-lg &-item-label { min-height: @input-height-lg - @segmented-container-padding * 2; padding: 0 @input-padding-horizontal-lg; font-size: @font-size-lg; line-height: @input-height-lg - @segmented-container-padding * 2; } &&-sm &-item-label { min-height: @input-height-sm - @segmented-container-padding * 2; padding: 0 @input-padding-horizontal-sm; line-height: @input-height-sm - @segmented-container-padding * 2; }

结合主题变量（均定义于 default.less）可以精确推算出三种尺寸的视觉规格：

大尺寸（lg）

• 容器内边距@segmented-container-padding: 2px；
• @input-height-lg=@height-lg=40px，因此单个选项的 label 行高与最小高度均为40 - 2*2 = 36px；
• 水平内边距@input-padding-horizontal-lg=@input-padding-horizontal=@control-padding-horizontal - 1px=@padding-sm - 1px=11px；
• 字号@font-size-lg=@font-size-base + 2px=16px。

默认尺寸（base）

• @input-height-base=@height-base=32px，label 行高/最小高度为32 - 4 = 28px；
• 水平内边距@input-padding-horizontal-base=11px；
• 字号为基准字号14px。

小尺寸（sm）

• @input-height-sm=@height-sm=24px，label 行高/最小高度为24 - 4 = 20px；
• 水平内边距@input-padding-horizontal-sm=@control-padding-horizontal-sm - 1px=@padding-xs - 1px=7px；
• 字号仍为14px（&-sm 规则中未改写字号）。

从源码结构可以看出：三种尺寸的整体高度（40/32/24px）由主题变量直接决定，而选项文字的行高、左右留白则基于该高度减去容器 2px 内边距后计算得出，小尺寸同时收窄了水平内边距以适配紧凑空间。由于字号仅在大尺寸下提升，若需要在小尺寸下使用更小字号，需要通过Style参数或全局主题定制覆盖。

另外，选中滑块的动画同样感知尺寸：ant-segmented-thumb的高度为容器高度的 100%（见 index.less），transform/width的变化由 Segmented.razor.cs 中的ThumbAnimation借助 DOM 测量驱动，因此在任何尺寸下滑块都能贴合所选选项。

五、与 Block、Disabled 等参数的组合使用

尺寸并非孤立生效，它与组件的其他视觉参数可以自由组合：

1. 尺寸 + Block

Block让组件宽度撑满父容器（追加ant-segmented-block类，对应样式见 index.less，内部选项flex: 1均分宽度）：

<Segmented Block Size="SegmentedSize.Large" Labels="@new[]{"全部", "待处理", "已完成"}" @bind-Value="status" />

此时高度仍受Size控制，只是宽度变为 100%，适合作为页面顶部的状态筛选条。

2. 尺寸 + Disabled

Disabled在组件与选项两个层面均可设置：组件级Disabled会同时给根元素追加ant-segmented-disabled并通知所有子项刷新（见 Segmented.razor.cs）；选项级Disabled定义在SegmentedOption<TValue>中，点击时会在 SegmentedItem.razor.cs 的OnClick中被拦截。三尺寸均支持禁用态。

3. 尺寸 + 图标选项

SegmentedItem支持Icon与ChildContent（见 SegmentedItem.razor.cs），图标与文字并排时会自动添加8px间距（@margin-sm / 2）。在小尺寸下建议仅使用图标以保持紧凑。

六、测试验证：三种尺寸的行为由 bUnit 用例保障

仓库为 Segmented 提供了 bUnit 测试用例 SegmentedTests.razor，其中Renders_basic_segmented断言了默认渲染结构：根元素div.ant-segmented+ 分组容器div.ant-segmented-group+ 若干label.ant-segmented-item，首个选项默认带ant-segmented-item-selected与checked的 radio input。测试还覆盖了Options/SegmentedItem子组件方式的渲染与默认选中逻辑。这些用例与本文讨论的Size参数同属组件渲染管线，说明三种尺寸共用同一套结构与选中机制，尺寸差异纯粹来自追加的-lg/-sm类。

七、小结

ant-design-blazor 的 Segmented 三种尺寸本质上是“一个枚举 + 两个 CSS 类 + 主题变量驱动的行高/内边距”的组合：

• 用法层：Size="SegmentedSize.Large | Default | Small"一行即可切换，默认值为Default；
• 实现层：尺寸映射为ant-segmented-lg/ant-segmented-sm，高度分别对应主题变量@height-lg（40px）、@height-base（32px）、@height-sm（24px）；
• 交互层：选中滑块动画、禁用态、Block 均与尺寸正交，可自由组合。

在页面设计时，建议遵循 Ant Design 的“场景决定尺寸”原则：大尺寸用于突出型筛选主入口，默认尺寸用于常规业务表单，小尺寸用于表格行内或工具条等紧凑区域。若需查看完整 API 与更多演示，可参考 Segmented 官方文档 以及同目录下的 Basic、Block 等演示说明。

• 前端
• UI组件
• 设计系统