ion-segment-button

概要(CONTENTS)

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

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

Segment buttons are groups of related buttons inside of a Segment. They are displayed in a horizontal row. A segment button can be checked by default by adding the checked attribute or by setting the value of the segment to the value of the segment button. Only one segment button should be selected at a time.

ion-segment-button　用法(Usage)


<ion-segment>
  <ion-segment-button (ionSelect)="segmentButtonClicked($event)">
    <ion-label>Friendsion-label>
  ion-segment-button>
  <ion-segment-button (ionSelect)="segmentButtonClicked($event)">
    <ion-label>Enemiesion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked>
    <ion-label>Paidion-label>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Freeion-label>
  ion-segment-button>
  <ion-segment-button disabled>
    <ion-label>Topion-label>
  ion-segment-button>
ion-segment>


<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-segment value="shared">
  <ion-segment-button value="bookmarks">
    <ion-label>Bookmarksion-label>
  ion-segment-button>
  <ion-segment-button value="reading">
    <ion-label>Reading Listion-label>
  ion-segment-button>
  <ion-segment-button value="shared">
    <ion-label>Shared Linksion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked>
    <ion-label>Item Oneion-label>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Item Twoion-label>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Item Threeion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button>
    <ion-icon name="call">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>


<ion-segment>
  <ion-segment-button>
    <ion-label>Item Oneion-label>
    <ion-icon name="call">ion-icon>
  ion-segment-button>
  <ion-segment-button checked>
    <ion-label>Item Twoion-label>
    <ion-icon name="heart">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Item Threeion-label>
    <ion-icon name="pin">ion-icon>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked layout="icon-bottom">
    <ion-icon name="call">ion-icon>
    <ion-label>Item Oneion-label>
  ion-segment-button>
  <ion-segment-button layout="icon-bottom">
    <ion-icon name="heart">ion-icon>
    <ion-label>Item Twoion-label>
  ion-segment-button>
  <ion-segment-button layout="icon-bottom">
    <ion-icon name="pin">ion-icon>
    <ion-label>Item Threeion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked layout="icon-start">
    <ion-label>Item Oneion-label>
    <ion-icon name="call">ion-icon>
  ion-segment-button>
  <ion-segment-button layout="icon-start">
    <ion-label>Item Twoion-label>
    <ion-icon name="heart">ion-icon>
  ion-segment-button>
  <ion-segment-button layout="icon-start">
    <ion-label>Item Threeion-label>
    <ion-icon name="pin">ion-icon>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked layout="icon-end">
    <ion-icon name="call">ion-icon>
    <ion-label>Item Oneion-label>
  ion-segment-button>
  <ion-segment-button disabled layout="icon-end">
    <ion-icon name="heart">ion-icon>
    <ion-label>Item Twoion-label>
  ion-segment-button>
  <ion-segment-button layout="icon-end">
    <ion-icon name="pin">ion-icon>
    <ion-label>Item Threeion-label>
  ion-segment-button>
ion-segment>

import { Component } from '@angular/core';

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


<ion-segment>
  <ion-segment-button>
    <ion-label>Friendsion-label>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Enemiesion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked>
    <ion-label>Paidion-label>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Freeion-label>
  ion-segment-button>
  <ion-segment-button disabled>
    <ion-label>Topion-label>
  ion-segment-button>
ion-segment>


<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-segment value="shared">
  <ion-segment-button value="bookmarks">
    <ion-label>Bookmarksion-label>
  ion-segment-button>
  <ion-segment-button value="reading">
    <ion-label>Reading Listion-label>
  ion-segment-button>
  <ion-segment-button value="shared">
    <ion-label>Shared Linksion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked>
    <ion-label>Item Oneion-label>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Item Twoion-label>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Item Threeion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button>
    <ion-icon name="call">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>


<ion-segment>
  <ion-segment-button>
    <ion-label>Item Oneion-label>
    <ion-icon name="call">ion-icon>
  ion-segment-button>
  <ion-segment-button checked>
    <ion-label>Item Twoion-label>
    <ion-icon name="heart">ion-icon>
  ion-segment-button>
  <ion-segment-button>
    <ion-label>Item Threeion-label>
    <ion-icon name="pin">ion-icon>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked layout="icon-bottom">
    <ion-icon name="call">ion-icon>
    <ion-label>Item Oneion-label>
  ion-segment-button>
  <ion-segment-button layout="icon-bottom">
    <ion-icon name="heart">ion-icon>
    <ion-label>Item Twoion-label>
  ion-segment-button>
  <ion-segment-button layout="icon-bottom">
    <ion-icon name="pin">ion-icon>
    <ion-label>Item Threeion-label>
  ion-segment-button>
ion-segment>


<ion-segment>
  <ion-segment-button checked layout="icon-start">
    <ion-label>Item Oneion-label>
    <ion-icon name="call">ion-icon>
  ion-segment-button>
  <ion-segment-button layout="icon-start">
    <ion-label>Item Twoion-label>
    <ion-icon name="heart">ion-icon>
  ion-segment-button>
  <ion-segment-button layout="icon-start">
    <ion-label>Item Threeion-label>
    <ion-icon name="pin">ion-icon>
  ion-segment-button>

ion-segment-button

ion-segment-button 用法(Usage)

ion-segment-button　用法(Usage)