ion-segment

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4Tab切换组件ion-segment对项目进行布局。

ion-segment官方文档地址:https://ionicframework.com/docs/api/segment

Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content.

Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.

ion-segment 用法(Usage)


<ion-segment (ionChange)="segmentChanged($event)">
  <ion-segment-button value="friends">
    <ion-label>Friendsion-label>
  ion-segment-button>
  <ion-segment-button value="enemies">
    <ion-label>Enemiesion-label>
  ion-segment-button>
ion-segment>


<ion-segment (ionChange)="segmentChanged($event)" disabled>
  <ion-segment-button value="sunny" checked>
    <ion-label>Sunnyion-label>
  ion-segment-button>
  <ion-segment-button value="rainy">
    <ion-label>Rainyion-label>
  ion-segment-button>
ion-segment>


<ion-segment (ionChange)="segmentChanged($event)">
  <ion-segment-button href="#dogs" value="dogs">
    <ion-label>Dogsion-label>
  ion-segment-button>
  <ion-segment-button href="#cats" value="cats">
    <ion-label>Catsion-label>
  ion-segment-button>
ion-segment>


<ion-segment scrollable>
  <ion-segment-button>
    <ion-icon name="home">ion-icon>
  ion-segment-button>
  <ion-segment-button checked>
    <ion-icon name="heart">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="pin">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="star">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="call">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="globe">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="basket">ion-icon>
  ion-segment-button>
ion-segment>


<ion-segment (ionChange)="segmentChanged($event)" color="secondary">
  <ion-segment-button value="standard">
    <ion-label>Standardion-label>
  ion-segment-button>
  <ion-segment-button value="hybrid">
    <ion-label>Hybridion-label>
  ion-segment-button>
  <ion-segment-button value="sat">
    <ion-label>Satelliteion-label>
  ion-segment-button>
ion-segment>


<ion-toolbar>
  <ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="camera">
      <ion-icon name="camera">ion-icon>
    ion-segment-button>
    <ion-segment-button value="bookmark">
      <ion-icon name="bookmark">ion-icon>
    ion-segment-button>
  ion-segment>
ion-toolbar>


<ion-segment (ionChange)="segmentChanged($event)" value="javascript">
  <ion-segment-button value="python">
    <ion-label>Pythonion-label>
  ion-segment-button>
  <ion-segment-button value="javascript">
    <ion-label>Javascription-label>
  ion-segment-button>
ion-segment>
import { Component } from '@angular/core';

@Component({
  selector: 'segment-example',
  templateUrl: 'segment-example.html',
  styleUrls: ['./segment-example.css'],
})
export class SegmentExample {
  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }
}

<ion-segment>
  <ion-segment-button value="friends">
    <ion-label>Friendsion-label>
  ion-segment-button>
  <ion-segment-button value="enemies">
    <ion-label>Enemiesion-label>
  ion-segment-button>
ion-segment>


<ion-segment disabled>
  <ion-segment-button value="sunny" checked>
    <ion-label>Sunnyion-label>
  ion-segment-button>
  <ion-segment-button value="rainy">
    <ion-label>Rainyion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button href="#dogs" value="dogs">
    <ion-label>Dogsion-label>
  ion-segment-button>
  <ion-segment-button href="#cats" value="cats">
    <ion-label>Catsion-label>
  ion-segment-button>
ion-segment>


<ion-segment scrollable>
  <ion-segment-button>
    <ion-icon name="home">ion-icon>
  ion-segment-button>
  <ion-segment-button checked>
    <ion-icon name="heart">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="pin">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="star">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="call">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="globe">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-icon name="basket">ion-icon>
  ion-segment-button>
ion-segment>


<ion-segment color="secondary">
  <ion-segment-button value="standard">
    <ion-label>Standardion-label>
  ion-segment-button>
  <ion-segment-button value="hybrid">
    <ion-label>Hybridion-label>
  ion-segment-button>
  <ion-segment-button value="sat">
    <ion-label>Satelliteion-label>
  ion-segment-button>
ion-segment>


<ion-toolbar>
  <ion-segment>
    <ion-segment-button value="camera">
      <ion-icon name="camera">ion-icon>
    ion-segment-button>
    <ion-segment-button value="bookmark">
      <ion-icon name="bookmark">ion-icon>
    ion-segment-button>
  ion-segment>
ion-toolbar>


<ion-segment value="javascript">
  <ion-segment-button value="python">
    <ion-label>Pythonion-label>
  ion-segment-button>
  <ion-segment-button value="javascript">
    <ion-label>Javascription-label>
  ion-segment-button>
ion-segment>
// Listen for ionChange on all segments
const segments = document.querySelectorAll('ion-segment')
for (let i = 0; i < segments.length; i++) {
  segments[i].addEventListener('ionChange', (ev) => {
    console.log('Segment changed', ev);
  })
}
import React from 'react';

import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    {/*-- Default Segment --*/}
    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
      <IonSegmentButton value="friends">
        <IonLabel>FriendsIonLabel>
      IonSegmentButton>
      <IonSegmentButton value="enemies">
        <IonLabel>EnemiesIonLabel>
      IonSegmentButton>
    IonSegment>

    {/*-- Disabled Segment --*/}
    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} disabled>
      <IonSegmentButton value="sunny" checked>
        <IonLabel>SunnyIonLabel>
      IonSegmentButton>
      <IonSegmentButton value="rainy">
        <IonLabel>RainyIonLabel>
      IonSegmentButton>
    IonSegment>

    {/*-- Segment with anchors --*/}
    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
      <IonSegmentButton value="dogs">
        <IonLabel>DogsIonLabel>
      IonSegmentButton>
      <IonSegmentButton value="cats">
        <IonLabel>CatsIonLabel>
      IonSegmentButton>
    IonSegment>

    {/*-- Scrollable Segment --*/}
    <IonSegment scrollable>
      <IonSegmentButton>
        <IonIcon name="home" />
      IonSegmentButton>
      <IonSegmentButton checked>
        <IonIcon name="heart" />
      IonSegmentButton>
      <IonSegmentButton>
        <IonIcon name="pin" />
      IonSegmentButton>
      <IonSegmentButton>
        <IonIcon name="star" />
      IonSegmentButton>
      <IonSegmentButton>
        <IonIcon name="call" />
      IonSegmentButton>
      <IonSegmentButton>
        <IonIcon name="globe" />
      IonSegmentButton>
      <IonSegmentButton>
        <IonIcon