搜索文档 /
影子

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自定义属性

的名字 描述
——背景 段按钮的背景
查看源代码
Baidu