分段器

由至少 2 个分段控件组成，用作显示不同视图的显示；是 iOS 的推荐组件。

规则

和标签页功能相似，尽可能避免一个页面中同时出现这两个组件。
可以搭配导航栏一起使用，用于显示多个视图，分段数一般为 2 个。
单独放置一行时，分段数最多为 5 个；文案需要精简，一般 2-4 个字。
尽可能保持文案长度一致。

代码演示

分段器

最简

筛选一

筛选二

选中

筛选一

筛选二

筛选三

禁用

筛选一

筛选二

筛选三

四项

筛选一

筛选二

筛选三

筛选四

默认

通栏

<div class="segment-wrapper">
	<div class="segment">
		<div class="segment-item segment-item-action">筛选一</div>
		<div class="segment-item">筛选二</div>
	</div>
</div>
<div class="segment-wrapper">
	<div class="segment">
		<div class="segment-item segment-item-action">筛选一</div>
		<div class="segment-item">筛选二</div>
		<div class="segment-item">筛选三</div>
	</div>
</div>
<div class="segment-wrapper">
	<div class="segment segment-disabled">
		<div class="segment-item segment-item-action">筛选一</div>
		<div class="segment-item">筛选二</div>
		<div class="segment-item">筛选三</div>
	</div>
</div>
<div class="segment-wrapper">
	<div class="segment">
		<div class="segment-item segment-item-action">筛选一</div>
		<div class="segment-item">筛选二</div>
		<div class="segment-item">筛选三</div>
		<div class="segment-item">筛选四</div>
	</div>
</div>