Skip to main content
Version: v6

ion-segment-button

shadow

Segment buttons are groups of related buttons inside of a segment. They are displayed in a horizontal row. A segment button can be selected 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.

Basic Usage

<ion-segment value="buttons">
  <ion-segment-button value="default">
    <ion-label>Default</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
  <ion-segment-button value="buttons">
    <ion-label>Button</ion-label>
  </ion-segment-button>
</ion-segment>

<ion-segment value="buttons">
  <ion-segment-button value="disabled" [disabled]="true">
    <ion-label>Disabled</ion-label>
  </ion-segment-button>
  <ion-segment-button value="segment">
    <ion-label>Segment</ion-label>
  </ion-segment-button>
  <ion-segment-button value="buttons">
    <ion-label>Button</ion-label>
  </ion-segment-button>
</ion-segment>

Layout

The layout property is set to "icon-top" by default. When a segment button has both an icon and a label, it will display the icon on top of the label. This behavior can be changed by setting the layout property to "icon-bottom", "icon-start", or "icon-end" which will show the icon below the label, to the start of the label (left in LTR and right in RTL) or to the end of the label (right in LTR and left in RTL), respectively.

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

<ion-segment value="heart">
  <ion-segment-button value="call">
    <ion-label>Call</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart">
    <ion-label>Heart</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin">
    <ion-label>Pin</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<ion-segment value="heart">
  <ion-segment-button value="call" layout="icon-bottom">
    <ion-label>Call</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart" layout="icon-bottom">
    <ion-label>Heart</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin" layout="icon-bottom">
    <ion-label>Pin</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<ion-segment value="heart">
  <ion-segment-button value="call" layout="icon-start">
    <ion-label>Call</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart" layout="icon-start">
    <ion-label>Heart</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin" layout="icon-start">
    <ion-label>Pin</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<ion-segment value="heart">
  <ion-segment-button value="call" layout="icon-end">
    <ion-label>Call</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart" layout="icon-end">
    <ion-label>Heart</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin" layout="icon-end">
    <ion-label>Pin</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

Theming

CSS Shadow Parts

ion-segment-button::part(indicator-background) {
  background: #08a391;
}

/* Material Design styles */
ion-segment-button.md::part(native) {
  color: #000;
}

.segment-button-checked.md::part(native) {
  color: #08a391;
}

ion-segment-button.md::part(indicator-background) {
  height: 4px;
}

/* iOS styles */
ion-segment-button.ios::part(native) {
  color: #08a391;
}

.segment-button-checked.ios::part(native) {
  color: #fff;
}

ion-segment-button.ios::part(indicator-background) {
  border-radius: 20px;
}

CSS Custom Properties

ion-segment-button {
  --indicator-color: #08a391;
}

/* Material Design styles */
ion-segment-button.md {
  --color: #000;
  --color-checked: #08a391;
  --indicator-height: 4px;
}

/* iOS styles */
ion-segment-button.ios {
  --color: #08a391;
  --color-checked: #fff;
  --border-radius: 20px;
}

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

Micro Frontends for any React Native, Android, or iOS mobile apps.