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="0">
        <ion-label>Contact</ion-label>
        <ion-icon name="contact"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-label>Camera</ion-label>
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="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

该页面包含用于更改细分标签和幻灯片选项的代码。

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

:root {
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 22px;
}
ion-slide {
  height: calc(100vh - 140px);
}

输出量

当你执行上面的Ionic应用程序时, 它将给出以下输出。在这里, 你可以查看细分受众群联系人, 相机和地图的三种类型。默认情况下, 始终选择第一段。

现在, 当你选择地图线段时, 屏幕上将显示以下输出。