企业官网建设流程全解析

• UI组件
• 前端

分段控制器（Segmented）是 ant-design-blazor（自v0.12.0起提供）中的一种数据展示组件，用于在多个选项中单选一项。本文聚焦该组件的Block属性——一个看似简单、却能显著影响布局行为的开关：开启后Segmented将不再按内容收缩，而是自动撑满父元素的宽度。读完本文，你将掌握Block的用法、它在渲染层与样式层的完整实现链路，以及它与尺寸、禁用、选项数据化等 API 的组合技巧。

什么是 Block 模式

官方示例文档对block属性的定义非常精炼：

block属性使其适合父元素宽度。 (原文:blockproperty will make theSegmentedfit to its parent width.)

也就是说，默认情况下Segmented是一个宽度随内容收缩的控件（内部样式为display: inline-block），而一旦设置Block属性，组件就会切换到 Flex 布局，把可用宽度平均分配给每一个分段选项，形成"通栏"效果。这在表单行、工具栏、移动端底部切换等需要占满一行的场景中非常实用。

最小可用示例：一行代码开启 Block

仓库中对应官方演示的源码位于 Block.razor，完整代码只有一行：

<Segmented Block Labels=@(new[] {"123", "456", "longtext-longtext-longtext-longtext"}) />

使用要点：

• 通过Block布尔属性（默认false）开启块级布局；
• 通过Labels传入字符串数组，数组中的每个字符串同时充当选项的显示文本（Label）与选中值（Value）；
• 示例特意加入了超长文本"longtext-longtext-longtext-longtext"，用于验证在 Block 模式下，即使某个选项文字很长，容器也不会被撑破，而是通过均分宽度与文本截断保持整体协调。

打开该演示页面即可看到：三个分段从左到右平均铺满父容器宽度，长文本选项在空间不足时自动省略显示（鼠标悬停可查看title提示的完整文本）。

源码视角：Block 的完整实现链路

参数定义与 CSS 类映射

在 Segmented.razor.cs 中，Block是一个普通的布尔参数：

/// <summary> /// Make the component the width of the parent /// </summary> [Parameter] public bool Block { get; set; }

组件初始化时，Block的值会通过ClassMapper转化为 CSS 类ant-segmented-block（见 Segmented.razor.cs）：

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"（Segmented.razor.cs）。渲染时，这些类会出现在组件根节点<div>上（见 Segmented.razor）：

<div class="@ClassMapper.Class" style="@Style" @ref="@Ref" id="@Id">

因此设置Block后，最终 DOM 根节点类名会形如ant-segmented ant-segmented-block。

样式层：Flex 均分与文本截断

Block 模式的视觉行为由 LESS 样式驱动，定义在 style/index.less：

// block styles &&-block { display: flex; } &&-block &-item { flex: 1; min-width: 0; }

两段规则的作用分别是：

1. &&-block { display: flex; }：把组件根节点从默认的display: inline-block（见 style/index.less）切换为 Flex 容器，使其宽度自动扩展至父元素宽度；
2. &&-block &-item { flex: 1; min-width: 0; }：让每个分段项均分剩余空间（flex: 1），同时通过min-width: 0允许子项收缩，为长文本截断创造条件。

文本的截断处理复用了 mixin.segmented-text-ellipsis()（定义于 style/mixins.less），它设置了overflow: hidden、white-space: nowrap、text-overflow: ellipsis与word-break: keep-all，这正是 Block 模式下长文本选项能优雅省略的原因。配合 SegmentedItem.razor 中title="@Label"的属性绑定，用户悬停时仍能看到完整文案。

从源码结构看，Block 只影响外部布局（容器与项级 flex），组件内部的选中滑块（thumb）动画、单选逻辑均不受影响，因此开启 Block 不会带来功能上的取舍。

与默认模式的对比

与周边 API 的组合实践

Block通常不会单独使用，而是与Segmented的其余参数配合。以下参数表摘自官方文档 index.zh-CN.md，可用于规划组合方案：

几种常见组合：

@* 通栏 + 大尺寸 *@ <Segmented Block Size="SegmentedSize.Large" Labels=@(new[]{"周", "月", "年"}) /> @* 通栏 + 数据化配置 + 局部禁用 + 选中回调 *@ <Segmented Block Options="@(new[] { new SegmentedOption<string>("Daily", "每日"), new SegmentedOption<string>("Weekly", "每周", true), new SegmentedOption<string>("Monthly", "每月"), })" OnChange="@(v => Console.WriteLine($"selected: {v}"))" /> @* 通栏 + 双向绑定当前值 *@ <Segmented @bind-Value="_current" Block Labels=@(new[]{"A", "B", "C"}) />

几点说明：

• Size可选值来自枚举 SegmentedSize.cs，包含Default、Small、Large三档，官方文档给出高度分别为 24px、32px、40px；与Block叠加时，均分逻辑不变，仅每个分段项的高度随之变化；
• Options使用SegmentedOption<TValue>数据化配置，该类型定义于 SegmentedOption.cs，支持Value、Label（缺省时取Value.ToString()）与Disabled，且Options的优先级高于Labels（见 Segmented.razor 的渲染分支）；每个选项的禁用与整体Disabled在渲染时会合并（Disabled="@(option.Disabled || Disabled)"）；
• 若需要更灵活的项内容（如图标、自定义模板），可通过ChildContent手写SegmentedItem，此时子项优先级最高。

测试验证与组件实现补充

仓库为 Segmented 提供了组件级测试，见 tests/AntDesign.Tests/Segmented/SegmentedTests.razor。测试用例覆盖了通过Labels渲染的基本形态（首个选项默认选中、输出ant-segmented-item-selected与隐藏的 radio input）以及通过ChildContent+SegmentedItem渲染并配合@bind-Value的场景，可作为理解组件行为的参考。

需要留意的是，Block 相关测试目前未在SegmentedTests.razor中显式断言ant-segmented-block类名，但结合 Segmented.razor.cs 的ClassMapper与 style/index.less 的样式规则，可以确认：只要Block为true，根节点就会带ant-segmented-block类，并进入 Flex 均分布局。

小结

Block是 Segmented 组件中"一行代码改变布局"的典型开关：参数层面它只是一个布尔值，渲染层由ClassMapper输出ant-segmented-block类，样式层则通过display: flex与flex: 1实现宽度占满与均分。它在与Size、Disabled、Options、ChildContent组合使用时表现稳定，非常适合需要通栏单选切换的界面。实际使用中，建议结合官方演示（Block.razor）与组件源码，根据父容器宽度和选项文本长度自行验证截断与均分效果。

• UI组件
• 前端