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自定义属性
的名字 | 描述 |
---|---|
——背景 |
段按钮的背景 |