Ionic段segment _Ionic段segment

段是在水平行中显示的相关按钮的集合。可以将其放置在工具栏或主要内容内。 Ionic段的功能与Ionic选项卡相同, 在其中选择一个选项卡将取消选择所有其他选项卡。
当用户在内容内部的不同视图之间切换时, 细分组件非常有用。单击控件时, 应使用选项卡栏而不是句段, 应在应用程序的页面之间导航。段可以充当过滤器, 该过滤器根据段的值显示或隐藏元素。我们可以使用标准的< ion-segment> 元素访问“离子段”。
以下示例提供了有关如何在Ionic应用程序中使用段的详细说明。
例
Home.page.html
此页面用于显示用户视图的内容。在这里, 我们将在< ion-content> 元素内使用< ion-segment> 。段中的选项（例如ionChange）调用事件以更改段选项卡, 而ngModel是一个角度指令, 它将HTML控件的值绑定到应用程序数据。

< ion-header> < ion-toolbar> < ion-buttons slot="start"> < ion-menu-button> < /ion-menu-button> < /ion-buttons> < ion-title> Ionic Segment< /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="ion-padding" color="light"> < ion-toolbar> < ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" color="primary"> < ion-segment-button value="http://www.srcmini.com/0"> < ion-label> Contact< /ion-label> < ion-icon name="contact"> < /ion-icon> < /ion-segment-button> < ion-segment-button value="http://www.srcmini.com/1"> < ion-label> Camera< /ion-label> < ion-icon name="camera"> < /ion-icon> < /ion-segment-button> < ion-segment-button value="http://www.srcmini.com/2"> < ion-label> Map< /ion-label> < ion-icon name="pin"> < /ion-icon> < /ion-segment-button> < /ion-segment> < /ion-toolbar> < ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="true"> < ion-slide> First Segment< /ion-slide> < ion-slide> Second Segment< /ion-slide> < ion-slide> Third Segment< /ion-slide> < /ion-slides> < /ion-content>

Home.page.ts
【Ionic段segment】该页面包含用于更改细分标签和幻灯片选项的代码。

import { Component, ViewChild} from '@angular/core'; import {IonSlides } from '@ionic/angular'; @Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })export class HomePage {@ViewChild('slides', { static: true }) slider: IonSlides; segment = 0; constructor() { }async segmentChanged(ev: any) {await this.slider.slideTo(this.segment); }async slideChanged() {this.segment = await this.slider.getActiveIndex(); }}

Home.page.scss