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
价值
＝
＂
狗
＂
>
<
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-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
价值
＝
＂
狗
＂
>
<
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-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”
,
（
电动汽车
）
＝＞
｛
控制台
．
日志
（
“段改变”
,
电动汽车
）
；
｝
）
｝
复制
复制
进口
反应
从
“反应”
；
进口
｛
IonContent
,
IonHeader
,
IonPage
,
IonTitle
,
IonToolbar
,
IonSegment
,
IonSegmentButton
,
IonLabel
,
betway东盟体育appIonIcon
｝
从
“@betway东盟体育appionic /反应”
；
进口
｛
调用
,
首页
,
心
,
销
,
明星
,
全球
,
篮子
,
相机
,
书签
｝
从
“betway东盟体育appionicons /图标”
；
出口
常量
SegmentExamples
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
返回
（
<
IonPage
>
<
IonHeader
>
<
IonToolbar
>
<
IonTitle
>
SegmentExamples
IonTitle
>
IonToolbar
>
IonHeader
>
<
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
>
IonPage
>
）
；
｝
；
复制
复制
进口
｛
组件
,
h
｝
从
“@stencil /核心”
；
＠
组件
（
｛
标签
：
“segment-example”
,
styleUrl
：
“segment-example.css”
｝
）
出口
类
SegmentExample
｛
segmentChanged
（
电动汽车
：
任何
）
｛
控制台
．
日志
（
“段改变”
,
电动汽车
）
；
｝
渲染
（
）
｛
返回
［
/ /默认段
<
ion-segment
onIonChange
＝
｛
（
电动汽车
）
＝＞
这
．
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
onIonChange
＝
｛
（
电动汽车
）
＝＞
这
．
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
onIonChange
＝
｛
（
电动汽车
）
＝＞
这
．
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
可滚动
价值
＝
＂
心
＂
>
<
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
onIonChange
＝
｛
（
电动汽车
）
＝＞
这
．
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
onIonChange
＝
｛
（
电动汽车
）
＝＞
这
．
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
onIonChange
＝
｛
（
电动汽车
）
＝＞
这
．
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
>
］
；
｝
｝
复制
复制
<
模板
>
<！——默认段——>
<
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
价值
＝
＂
狗
＂
>
<
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-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
＂
>
进口
｛
IonSegment
,
IonSegmentButton
,
IonToolbar
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从
“vue”
；
出口
默认的
defineComponent
（
｛
组件
：
｛
IonSegment
,
IonSegmentButton
,
IonToolbar
｝
,
方法
：
｛
segmentChanged
（
电动汽车
：
CustomEvent
）
｛
控制台
．
日志
（
“段改变”
,
电动汽车
）
；
｝
｝
｝
）
；
脚本
>
复制
复制
属性
颜色 |
|
|---|---|
| 描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
| 属性 |
颜色 |
| 类型 |
字符串|未定义 |
禁用 |
|
| 描述 |
如果 |
| 属性 |
禁用 |
| 类型 |
布尔 |
| 默认的 |
假 |
模式 |
|
| 描述 |
模式决定使用哪种平台样式。 |
| 属性 |
模式 |
| 类型 |
“ios”|“医学博士” |
可滚动 |
|
| 描述 |
如果 |
| 属性 |
可滚动 |
| 类型 |
布尔 |
| 默认的 |
假 |
swipeGesture |
|
| 描述 |
如果 |
| 属性 |
滑动手势 |
| 类型 |
布尔 |
| 默认的 |
真正的 |
价值 |
|
| 描述 |
段的值。 |
| 属性 |
价值 |
| 类型 |
Null | string | undefined |
事件
| 的名字 | 描述 |
|---|---|
ionChange |
当value属性发生改变且任何拖动指针从' ion-segment '释放时触发。 |
CSS自定义属性
| 的名字 | 描述 |
|---|---|
——背景 |
段按钮的背景 |