Skip to main content
Version: v5

ion-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 setting the value of the segment to the value of the segment button. Only one segment button can be selected at a time.

Usage​

<!-- Segment buttons with text and click listener -->
<ion-segment (ionChange)="segmentChanged($event)">
  <ion-segment-button>
    <ion-label>Friends</ion-label>
  </ion-segment-button>
  <ion-segment-button>
    <ion-label>Enemies</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Segment buttons with the first checked and the last disabled -->
<ion-segment value="paid">
  <ion-segment-button value="paid">
    <ion-label>Paid</ion-label>
  </ion-segment-button>
  <ion-segment-button value="free">
    <ion-label>Free</ion-label>
  </ion-segment-button>
  <ion-segment-button disabled value="top">
    <ion-label>Top</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Segment buttons with values and icons -->
<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>

<!-- Segment with a value that checks the last button -->
<ion-segment value="shared">
  <ion-segment-button value="bookmarks">
    <ion-label>Bookmarks</ion-label>
  </ion-segment-button>
  <ion-segment-button value="reading">
    <ion-label>Reading List</ion-label>
  </ion-segment-button>
  <ion-segment-button value="shared">
    <ion-label>Shared Links</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Label only -->
<ion-segment value="1">
  <ion-segment-button value="1">
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Icon only -->
<ion-segment value="heart">
  <ion-segment-button value="call">
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart">
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin">
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon top -->
<ion-segment value="2">
  <ion-segment-button value="1">
    <ion-label>Item One</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Item Two</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Item Three</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon bottom -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-bottom">
    <ion-icon name="call"></ion-icon>
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2" layout="icon-bottom">
    <ion-icon name="heart"></ion-icon>
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-bottom">
    <ion-icon name="pin"></ion-icon>
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Icon start -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-start">
    <ion-label>Item One</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="2" layout="icon-start">
    <ion-label>Item Two</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-start">
    <ion-label>Item Three</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon end -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-end">
    <ion-icon name="call"></ion-icon>
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2" disabled layout="icon-end">
    <ion-icon name="heart"></ion-icon>
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-end">
    <ion-icon name="pin"></ion-icon>
    <ion-label>Item Three</ion-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 {
  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }
}

Properties​

disabled​

Descriptiontrueの場合、ユーザーはセグメントボタンを操作することができません。
Attributedisabled
Typeboolean
Defaultfalse

layout​

Descriptionセグメント内のテキストとアイコンのレイアウトを設定します。
Attributelayout
Type"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined
Default'icon-top'

mode​

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" ｜ "md"
Defaultundefined

type​

Descriptionボタンの種類です。
Attributetype
Type"button" ｜ "reset" ｜ "submit"
Default'button'

value​

Descriptionセグメントボタンの値です。
Attributevalue
Typestring
Default'ion-sb-' + (ids++)

Events​

No events available for this component.

Methods​

No public methods available for this component.

CSS Shadow Parts​

NameDescription
indicatorチェックしたセグメントボタンに表示されるインジケーターです。
indicator-backgroundチェックしたセグメントボタンに表示されるインジケータの背景要素です。
nativeすべての子要素を包むネイティブ HTML ボタン要素。

CSS Custom Properties​

NameDescription
--backgroundセグメントボタンの背景
--background-checkedチェックしたセグメントボタンの背景
--background-focusedタブキーでフォーカスされたときのセグメントボタンの背景
--background-focused-opacityタブキーでフォーカスしたときのセグメントボタンの背景の不透明度
--background-hoverセグメントボタンがホバーされたときの背景
--background-hover-opacityホバー時のセグメントボタンの背景の不透明度
--border-colorセグメントボタンのボーダーの色
--border-radiusセグメントボタンのボーダーの半径
--border-styleセグメントボタンのボーダーのスタイル
--border-widthセグメントボタンの枠の幅
--colorセグメントボタンの色
--color-checkedチェックしたセグメントボタンの色
--color-focusedタブキーでフォーカスしたときのセグメントボタンの色
--color-hoverホバー時のセグメントボタンの色
--indicator-box-shadowチェックしたセグメントボタンのインジケーターにボックスシャドウを付ける
--indicator-colorチェックしたセグメントボタンのインジケーターの色
--indicator-heightチェックしたセグメントボタンのインジケータの高さ
--indicator-transformチェックされたセグメントボタンのインジケータのトランスフォーム
--indicator-transitionチェックしたセグメントボタンのインジケーターの遷移
--margin-bottomセグメントボタンのBottom Margin
--margin-endセグメントボタンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin
--margin-startセグメントボタンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin
--margin-topセグメントボタンのTop Margin
--padding-bottomセグメントボタンのBottom Padding
--padding-endセグメントボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-startセグメントボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-topセグメントボタンのTop Padding
--transitionセグメントボタンの遷移

Slots​

No slots available for this component.

Contents

Edit this page