区段元素

基本结构

Segment 被定义为一个具有视觉边界的定位容器。在其最基本的形式中，Segment 提供：

白色背景
浅色阴影
1em 的内边距
1rem 的垂直外边距
微妙的圆角
1px 边框

来源： src/definitions/elements/segment.less24-32 src/themes/default/elements/segment.variables9-21

Segment 类型

Semantic UI 提供了多种专门的 Segment 类型以适应不同的使用场景。

标准 Segment

默认的 Segment 作为带有定义边界的内容容器。

Placeholder Segment

一种专门设计的 Segment，用于在加载状态期间容纳占位符内容。它被样式化为一个 flex 容器，并带有用于内容对齐的附加样式。

来源： src/definitions/elements/segment.less118-164 src/themes/default/elements/segment.variables51-58

Piled Segment

通过伪元素创建的，具有堆叠或“堆叠”外观的 Segment。

来源： src/definitions/elements/segment.less171-225 src/themes/default/elements/segment.variables61-66

Stacked Segment

通过伪元素创建的，具有堆叠外观的 Segment，在 Segment 下方创建图层。

来源： src/definitions/elements/segment.less231-269 src/themes/default/elements/segment.variables71-75

Circular Segment

具有圆形外观的 Segment，适用于圆形内容或个人资料图片。

来源： src/definitions/elements/segment.less312-318 src/themes/default/elements/segment.variables68-69

Raised Segment

通过使用阴影创建的，具有浮凸外观的 Segment。

来源： src/definitions/elements/segment.less324-327 src/themes/default/elements/segment.variables95-96

Segment 变体

Segment 可以通过各种样式变体进行修改，以改变其外观和行为。

内容变体

来源： src/definitions/elements/segment.less275-281 src/definitions/elements/segment.less293-296 src/definitions/elements/segment.less527-532 src/definitions/elements/segment.less550-666 src/definitions/elements/segment.less700-716

对齐变体

Segment 的文本内容可以以不同的方式对齐。

左对齐 (ui left aligned segment)
右对齐 (ui right aligned segment)
居中对齐 (ui center aligned segment)

来源： src/definitions/elements/segment.less671-679

浮动变体

Segment 可以浮动到左侧或右侧。

左浮动 (ui floated segment 或 ui left floated segment)
右浮动 (ui right floated segment)

来源： src/definitions/elements/segment.less685-693

强调变体

Segment 可以具有不同的强调级别。

Secondary (ui secondary segment) - 背景和颜色略有不同。
Tertiary (ui tertiary segment) - 另一个视觉区分级别。

来源： src/definitions/elements/segment.less727-745 src/themes/default/elements/segment.variables129-154

Attached Segments

Segment 可以附加到其他元素或彼此之间。

来源： src/definitions/elements/segment.less753-790 src/themes/default/elements/segment.variables102-112

尺寸变体

Segment 具有不同的尺寸。

Mini
Tiny
小型
Medium (默认)
大型
Big
Huge
Massive

来源： src/definitions/elements/segment.less796-827

Segment 状态

Segment可以有不同的状态来表示正在加载或禁用的内容。

禁用状态

Segment可以显示为禁用状态，降低不透明度并更改文本颜色。

来源: src/definitions/elements/segment.less456-459

加载状态

Segment可以显示加载状态，带有遮罩层和旋转动画。

来源: src/definitions/elements/segment.less465-506 src/themes/default/elements/segment.variables81-87

Segment组

多个Segment可以组合在一起，以创建具有一致样式的相关内容部分。

基本Segment组

ui segments 类创建一个包含多个相关Segment的容器。

来源: src/definitions/elements/segment.less335-348 src/themes/default/elements/segment.variables26-39

嵌套Segment

Segment可以包含其他Segment，从而创建分层结构。

来源: src/definitions/elements/segment.less352-361 src/definitions/elements/segment.less390-400

水平Segment

使用ui horizontal segments类可以水平排列Segment。

来源: src/definitions/elements/segment.less403-437

与其他组件的集成

Segment与其他的Semantic UI组件无缝集成

头

反转的Segment会自动适当地样式化包含的标题。

来源: src/definitions/elements/segment.less64-66

网格

Segment可以用于网格结构中，并具有适当的间距。

来源: src/definitions/elements/segment.less87-96 src/themes/default/elements/segment.variables44-46

表格

基本的表格可以与Segment的样式相结合。

来源: src/definitions/elements/segment.less99-106

使用示例

以下是一些常用的Segment使用模式

基本内容容器

分组内容区域

占位符加载状态

UI层级中的Segment元素

Segment元素在更广泛的Semantic UI架构中的位置如下

来源: src/definitions/elements/segment.less15-16

样式考虑

Segment元素的样式通过主题系统中的变量来定义。

关键样式变量包括：

可变	默认值	目的
@background	@white	背景颜色
@borderWidth	1px	边框宽度
@verticalPadding	1em	垂直内边距
@horizontalPadding	1em	水平内边距
@borderRadius	@defaultBorderRadius	边框圆角
@boxShadow	@subtleShadow	盒子阴影

来源: src/themes/default/elements/segment.variables9-21

最佳实践

内容分组：使用Segment来分组需要与内容其他部分在视觉上分隔开的相关内容。
合适的类型：为内容选择正确的Segment类型。
- 标准Segment用于常规内容
- 占位符Segment用于加载状态
- 堆叠/层叠Segment用于文档或类似纸张的内容
- 凸起Segment用于需要强调的重要内容
一致性：在整个界面中保持Segment变体的统一使用。
嵌套：不要过度嵌套Segment；使用内容结构所需的最低嵌套级别。
性能：请注意，具有高级样式的Segment（堆叠、层叠）使用伪元素和盒子阴影，如果过度使用，可能会影响渲染性能。