Skip to main content
Version: v7

ion-segment-button

shadow

セグメントボタンは、segmentの中にある、関連するボタンのグループです。それらは横一列に表示されます。セグメントの value をセグメントボタンの value に設定することで、デフォルトでセグメントボタンを選択することができます。一度に選択できるセグメントボタンは1つだけです。

基本的な使い方

<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

layoutプロパティは、デフォルトで "icon-top" に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は layout プロパティを "icon-bottom", "icon-start", "icon-end" に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、ラベルの末尾（LTRでは右、RTLでは左）に表示することができます。

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

テーマ

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カスタムプロパティ

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

プロパティ

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
Typenumber ｜ string
Default'ion-sb-' + ids++

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

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.