ion-segment-button

概要(CONTENTS)

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

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)

angular javascript

<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>


<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>
// Listen for ionClick on all segment buttons
const segmentButtons = document.querySelectorAll('ion-segment-button')
for (let i = 0; i < segmentButtons.length; i++) {
  segmentButtons[i].addEventListener('ionSelect', (ev) => {
    console.log('Segment button clicked', ev);
  })
}

ion-segment-button 属性(Properties)

checked

Description

If true, the segment button is selected.

Attribute checked
Type boolean

disabled

Description

If true, the user cannot interact with the segment button.

Attribute disabled
Type boolean

layout

Description

Set the layout of the text and icon in the segment.

Attribute layout
Type "icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

value

Description

The value of the segment button.

Attribute value
Type string

ion-segment-button 事件(Events)

Name Description
ionSelect Emitted when the segment button is clicked.

ion-segment-button中的CSS 自定义属性

Name Description
--background Background of the segment button
--background-activated Background of the activated (pressed) segment button
--background-checked Background of the checked segment button
--background-hover Background of the segment button on hover
--border-color Color of the segment button border
--border-radius Radius of the segment button border
--border-style Style of the segment button border
--border-width Width of the segment button border
--color Color of the segment button
--color-activated Color of the activated segment button
--color-checked Color of the checked segment button
--color-checked-disabled Color of the checked & disabled segment button
--color-disabled Color of the disabled segment button
--indicator-color Color of the indicator (highlight) under the segment button
--indicator-color-checked Color of the indicator (highlight) under the checked segment button
--margin-bottom Bottom margin of the segment button
--margin-end End margin of the segment button
--margin-start Start margin of the segment button
--margin-top Top margin of the segment button
--padding-bottom Bottom padding of the segment button
--padding-end End padding of the segment button
--padding-start Start padding of the segment button
--padding-top Top padding of the segment button
--transition Transition of the segment button