ion-segment
分段显示一组相关按钮，有时称为分段控件，在水平行中。它们可以显示在工具栏或主要内容中。
它们的功能类似于选项卡，选择一个将取消所有其他选项。段对于在内容内部的不同视图之间切换很有用。当点击控件在页面之间导航时，应该使用标签而不是段。
使用
<！——默认段——>
<
ion-segment
(ionChange)
＝
＂
segmentChanged(事件)
＂
>
<
ion-segment-button
价值
＝
＂
朋友
＂
>
<
ion-label
>
朋友
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
敌人
＂
>
<
ion-label
>
敌人
ion-label
>
ion-segment-button
>
ion-segment
>
<！——禁用段——>
<
ion-segment
(ionChange)
＝
＂
segmentChanged(事件)
＂
禁用
>
<
ion-segment-button
价值
＝
＂
阳光明媚的
＂
检查
>
<
ion-label
>
阳光明媚的
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
多雨的
＂
>
<
ion-label
>
多雨的
ion-label
>
ion-segment-button
>
ion-segment
>
<！——有主持人的片段——>
<
ion-segment
(ionChange)
＝
＂
segmentChanged(事件)
＂
>
<
ion-segment-button
href
＝
＂
#狗
＂
价值
＝
＂
狗
＂
>
<
ion-label
>
狗
ion-label
>
ion-segment-button
>
<
ion-segment-button
href
＝
＂
#猫
＂
价值
＝
＂
猫
＂
>
<
ion-label
>
猫
ion-label
>
ion-segment-button
>
ion-segment
>
<！——可滚动段——>
<
ion-segment
可滚动
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
首页
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
检查
>
<
ion-icon
的名字
＝
＂
心
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
销
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
明星
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
调用
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
全球
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
篮子
＂
>
ion-icon
>
ion-segment-button
>
ion-segment
>
<！——副色段——>
<
ion-segment
(ionChange)
＝
＂
segmentChanged(事件)
＂
颜色
＝
＂
二次
＂
>
<
ion-segment-button
价值
＝
＂
标准
＂
>
<
ion-label
>
标准
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
混合动力
＂
>
<
ion-label
>
混合动力
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
坐
＂
>
<
ion-label
>
卫星
ion-label
>
ion-segment-button
>
ion-segment
>
<！——工具栏中的段——>
<
ion-toolbar
>
<
ion-segment
(ionChange)
＝
＂
segmentChanged(事件)
＂
>
<
ion-segment-button
价值
＝
＂
相机
＂
>
<
ion-icon
的名字
＝
＂
相机
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
书签
＂
>
<
ion-icon
的名字
＝
＂
书签
＂
>
ion-icon
>
ion-segment-button
>
ion-segment
>
ion-toolbar
>
<！——段与默认选择——>
<
ion-segment
(ionChange)
＝
＂
segmentChanged(事件)
＂
价值
＝
＂
javascript
＂
>
<
ion-segment-button
价值
＝
＂
python
＂
>
<
ion-label
>
Python
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
javascript
＂
>
<
ion-label
>
Javascript
ion-label
>
ion-segment-button
>
ion-segment
>
进口
｛
组件
｝
从
“@angular /核心”
；
＠
组件
（
｛
选择器
：
“segment-example”
，
templateUrl
：
“segment-example.html”
，
styleUrls
：
［
”。/ segment-example.css '
］
，
｝
）
出口
类
SegmentExample
｛
segmentChanged
（
电动汽车
：
任何
）
｛
控制台
．
日志
（
“段改变”
，
电动汽车
）
；
｝
｝
<！——默认段——>
<
ion-segment
>
<
ion-segment-button
价值
＝
＂
朋友
＂
>
<
ion-label
>
朋友
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
敌人
＂
>
<
ion-label
>
敌人
ion-label
>
ion-segment-button
>
ion-segment
>
<！——禁用段——>
<
ion-segment
禁用
>
<
ion-segment-button
价值
＝
＂
阳光明媚的
＂
检查
>
<
ion-label
>
阳光明媚的
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
多雨的
＂
>
<
ion-label
>
多雨的
ion-label
>
ion-segment-button
>
ion-segment
>
<！——有主持人的片段——>
<
ion-segment
>
<
ion-segment-button
href
＝
＂
#狗
＂
价值
＝
＂
狗
＂
>
<
ion-label
>
狗
ion-label
>
ion-segment-button
>
<
ion-segment-button
href
＝
＂
#猫
＂
价值
＝
＂
猫
＂
>
<
ion-label
>
猫
ion-label
>
ion-segment-button
>
ion-segment
>
<！——可滚动段——>
<
ion-segment
可滚动
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
首页
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
检查
>
<
ion-icon
的名字
＝
＂
心
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
销
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
明星
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
调用
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
全球
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
篮子
＂
>
ion-icon
>
ion-segment-button
>
ion-segment
>
<！——副色段——>
<
ion-segment
颜色
＝
＂
二次
＂
>
<
ion-segment-button
价值
＝
＂
标准
＂
>
<
ion-label
>
标准
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
混合动力
＂
>
<
ion-label
>
混合动力
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
坐
＂
>
<
ion-label
>
卫星
ion-label
>
ion-segment-button
>
ion-segment
>
<！——工具栏中的段——>
<
ion-toolbar
>
<
ion-segment
>
<
ion-segment-button
价值
＝
＂
相机
＂
>
<
ion-icon
的名字
＝
＂
相机
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
书签
＂
>
<
ion-icon
的名字
＝
＂
书签
＂
>
ion-icon
>
ion-segment-button
>
ion-segment
>
ion-toolbar
>
<！——段与默认选择——>
<
ion-segment
价值
＝
＂
javascript
＂
>
<
ion-segment-button
价值
＝
＂
python
＂
>
<
ion-label
>
Python
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
javascript
＂
>
<
ion-label
>
Javascript
ion-label
>
ion-segment-button
>
ion-segment
>
//监听所有段的ionChange
常量
段
＝
文档
．
querySelectorAll
（
“ion-segment”
）
为
（
让
我
＝
0
；
我
<
段
．
长度
；
我
++
）
｛
段
［
我
］
．
addEventListener
（
“ionChange”
，
（
电动汽车
）
＝＞
｛
控制台
．
日志
（
“段改变”
，
电动汽车
）
；
｝
）
｝
进口
反应
从
“反应”
；
进口
｛
IonSegment
，
IonSegmentButton
，
IonLabel
，
betway东盟体育appIonIcon
，
IonToolbar
，
IonContent
｝
从
“@betway东盟体育appionic /反应”
；
出口
常量
SegmentExample
：
反应
．
足球俱乐部
＝
（
）
＝＞
（
<
IonContent
>
｛
/*——默认段——*/
｝
<
IonSegment
onIonChange
＝
｛
e
＝＞
控制台
．
日志
（
“段选择”
，
e
．
细节
．
价值
）
｝
>
<
IonSegmentButton
价值
＝
＂
朋友
＂
>
<
IonLabel
>
朋友
IonLabel
>
IonSegmentButton
>
<
IonSegmentButton
价值
＝
＂
敌人
＂
>
<
IonLabel
>
敌人
IonLabel
>
IonSegmentButton
>
IonSegment
>
｛
/*——禁用段——*/
｝
<
IonSegment
onIonChange
＝
｛
e
＝＞
控制台
．
日志
（
“段选择”
，
e
．
细节
．
价值
）
｝
禁用
>
<
IonSegmentButton
价值
＝
＂
阳光明媚的
＂
检查
>
<
IonLabel
>
阳光明媚的
IonLabel
>
IonSegmentButton
>
<
IonSegmentButton
价值
＝
＂
多雨的
＂
>
<
IonLabel
>
多雨的
IonLabel
>
IonSegmentButton
>
IonSegment
>
｛
/*——带有锚的片段——*/
｝
<
IonSegment
onIonChange
＝
｛
e
＝＞
控制台
．
日志
（
“段选择”
，
e
．
细节
．
价值
）
｝
>
<
IonSegmentButton
价值
＝
＂
狗
＂
>
<
IonLabel
>
狗
IonLabel
>
IonSegmentButton
>
<
IonSegmentButton
价值
＝
＂
猫
＂
>
<
IonLabel
>
猫
IonLabel
>
IonSegmentButton
>
IonSegment
>
｛
/*——可滚动段——*/
｝
<
IonSegment
可滚动
>
<
IonSegmentButton
>
<
betway东盟体育appIonIcon
的名字
＝
＂
首页
＂
/>
IonSegmentButton
>
<
IonSegmentButton
检查
>
<
betway东盟体育appIonIcon
的名字
＝
＂
心
＂
/>
IonSegmentButton
>
<
IonSegmentButton
>
<
betway东盟体育appIonIcon
的名字
＝
＂
销
＂
/>
IonSegmentButton
>
<
IonSegmentButton
>
<
betway东盟体育appIonIcon
的名字
＝
＂
明星
＂
/>
IonSegmentButton
>
<
IonSegmentButton
>
<
betway东盟体育appIonIcon
的名字
＝
＂
调用
＂
/>
IonSegmentButton
>
<
IonSegmentButton
>
<
betway东盟体育appIonIcon
的名字
＝
＂
全球
＂
/>
IonSegmentButton
>
<
IonSegmentButton
>
<
betway东盟体育appIonIcon
的名字
＝
＂
篮子
＂
/>
IonSegmentButton
>
IonSegment
>
｛
/*——副色段——*/
｝
<
IonSegment
onIonChange
＝
｛
e
＝＞
控制台
．
日志
（
“段选择”
，
e
．
细节
．
价值
）
｝
颜色
＝
＂
二次
＂
>
<
IonSegmentButton
价值
＝
＂
标准
＂
>
<
IonLabel
>
标准
IonLabel
>
IonSegmentButton
>
<
IonSegmentButton
价值
＝
＂
混合动力
＂
>
<
IonLabel
>
混合动力
IonLabel
>
IonSegmentButton
>
<
IonSegmentButton
价值
＝
＂
坐
＂
>
<
IonLabel
>
卫星
IonLabel
>
IonSegmentButton
>
IonSegment
>
｛
/*——工具栏中的段——*/
｝
<
IonToolbar
>
<
IonSegment
onIonChange
＝
｛
e
＝＞
控制台
．
日志
（
“段选择”
，
e
．
细节
．
价值
）
｝
>
<
IonSegmentButton
价值
＝
＂
相机
＂
>
<
betway东盟体育appIonIcon
的名字
＝
＂
相机
＂
/>
IonSegmentButton
>
<
IonSegmentButton
价值
＝
＂
书签
＂
>
<
betway东盟体育appIonIcon
的名字
＝
＂
书签
＂
/>
IonSegmentButton
>
IonSegment
>
IonToolbar
>
｛
/*——带有默认选择的段——*/
｝
<
IonSegment
onIonChange
＝
｛
e
＝＞
控制台
．
日志
（
“段选择”
，
e
．
细节
．
价值
）
｝
价值
＝
＂
javascript
＂
>
<
IonSegmentButton
价值
＝
＂
python
＂
>
<
IonLabel
>
Python
IonLabel
>
IonSegmentButton
>
<
IonSegmentButton
价值
＝
＂
javascript
＂
>
<
IonLabel
>
Javascript
IonLabel
>
IonSegmentButton
>
IonSegment
>
IonContent
>
）
；
<
模板
>
<！——默认段——>
<
ion-segment
@ionChange
＝
＂
segmentChanged(事件)
＂
>
<
ion-segment-button
价值
＝
＂
朋友
＂
>
<
ion-label
>
朋友
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
敌人
＂
>
<
ion-label
>
敌人
ion-label
>
ion-segment-button
>
ion-segment
>
<！——禁用段——>
<
ion-segment
@ionChange
＝
＂
segmentChanged(事件)
＂
禁用
>
<
ion-segment-button
价值
＝
＂
阳光明媚的
＂
检查
>
<
ion-label
>
阳光明媚的
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
多雨的
＂
>
<
ion-label
>
多雨的
ion-label
>
ion-segment-button
>
ion-segment
>
<！——有主持人的片段——>
<
ion-segment
@ionChange
＝
＂
segmentChanged(事件)
＂
>
<
ion-segment-button
href
＝
＂
#狗
＂
价值
＝
＂
狗
＂
>
<
ion-label
>
狗
ion-label
>
ion-segment-button
>
<
ion-segment-button
href
＝
＂
#猫
＂
价值
＝
＂
猫
＂
>
<
ion-label
>
猫
ion-label
>
ion-segment-button
>
ion-segment
>
<！——可滚动段——>
<
ion-segment
可滚动
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
首页
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
检查
>
<
ion-icon
的名字
＝
＂
心
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
销
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
明星
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
调用
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
全球
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
>
<
ion-icon
的名字
＝
＂
篮子
＂
>
ion-icon
>
ion-segment-button
>
ion-segment
>
<！——副色段——>
<
ion-segment
@ionChange
＝
＂
segmentChanged(事件)
＂
颜色
＝
＂
二次
＂
>
<
ion-segment-button
价值
＝
＂
标准
＂
>
<
ion-label
>
标准
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
混合动力
＂
>
<
ion-label
>
混合动力
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
坐
＂
>
<
ion-label
>
卫星
ion-label
>
ion-segment-button
>
ion-segment
>
<！——工具栏中的段——>
<
ion-toolbar
>
<
ion-segment
@ionChange
＝
＂
segmentChanged(事件)
＂
>
<
ion-segment-button
价值
＝
＂
相机
＂
>
<
ion-icon
的名字
＝
＂
相机
＂
>
ion-icon
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
书签
＂
>
<
ion-icon
的名字
＝
＂
书签
＂
>
ion-icon
>
ion-segment-button
>
ion-segment
>
ion-toolbar
>
<！——段与默认选择——>
<
ion-segment
@ionChange
＝
＂
segmentChanged(事件)
＂
价值
＝
＂
javascript
＂
>
<
ion-segment-button
价值
＝
＂
python
＂
>
<
ion-label
>
Python
ion-label
>
ion-segment-button
>
<
ion-segment-button
价值
＝
＂
javascript
＂
>
<
ion-label
>
Javascript
ion-label
>
ion-segment-button
>
ion-segment
>
模板
>
<
脚本
朗
＝
＂
ts
＂
>
进口
｛
组件
，
Vue
｝
从
“vue-property-decorator”
；
＠
组件
（
）
出口
默认的
类
例子
扩展
Vue
｛
segmentChanged
（
电动汽车
：
任何
）
｛
控制台
．
日志
（
“段改变”
，
电动汽车
）
；
｝
｝
脚本
>属性
颜色 |
|
|---|---|
| 描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
| 属性 |
颜色 |
| 类型 |
字符串|未定义 |
禁用 |
|
| 描述 |
如果 |
| 属性 |
禁用 |
| 类型 |
布尔 |
| 默认的 |
假 |
模式 |
|
| 描述 |
模式决定使用哪种平台样式。 |
| 属性 |
模式 |
| 类型 |
“ios”|“医学博士” |
可滚动 |
|
| 描述 |
如果 |
| 属性 |
可滚动 |
| 类型 |
布尔 |
| 默认的 |
假 |
价值 |
|
| 描述 |
段的值。 |
| 属性 |
价值 |
| 类型 |
Null | string | undefined |
事件
| 的名字 | 描述 |
|---|---|
ionChange |
当value属性更改时触发。 |