ion-segment-button
Ionic4项目中我们可以使用Ionic4Tab切换组件ion-segment-button对项目进行布局。 ion-segment-button官方文档地址:https://ionicframework.com/docs/api/segment-buttonSegment buttons are groups of related buttons inside of a 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>