ion-segment

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4Tab切换组件ion-segment对项目进行布局。ion-segment中有ionic ion-segment 用法(Usage) ,ionic ion-segment 属性(Properties) ,ionic ion-segment 事件(Events)等

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)

angular javascript

<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>
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>
// 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);
  })
}

ion-segment 属性(Properties)

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

disabled

Description

If true, the user cannot interact with the segment.

Attribute disabled
Type boolean

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

scrollable

Description

If true, the segment buttons will overflow and the user can swipe to see them.

Attribute scrollable
Type boolean

value

Description

the value of the segment.

Attribute value
Type null | string | undefined

ion-segment 事件(Events)

Name Description
ionChange Emitted when the value property has changed.
ionStyle Emitted when the styles change.