shadow
セグメントボタンは、セグメント内の関連するボタンのグループです。水平方向の行に表示されます。セグメントのvalueをセグメントボタンのvalueに設定することで、セグメントボタンをデフォルトで選択できます。一度に選択できるセグメントボタンは1つだけです。
layoutプロパティはデフォルトで"icon-top"に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、ラベルの上にアイコンが表示されます。この動作は、layoutプロパティを"icon-bottom"、"icon-start"、または"icon-end"に設定することで変更できます。これにより、アイコンはラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、またはラベルの末尾（LTRでは右、RTLでは左）にそれぞれ表示されます。
contentId
| 説明 | セグメントコンテンツのid。 |
| 属性 | content-id |
| 型 | string ｜ undefined |
| デフォルト | undefined |
| 説明 | trueの場合、ユーザーはセグメントボタンを操作できません。 |
| 属性 | disabled |
| 型 | boolean |
| デフォルト | false |
| 説明 | セグメント内のテキストとアイコンのレイアウトを設定します。 |
| 属性 | layout |
| 型 | "icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined |
| デフォルト | 'icon-top' |
| 説明 | modeは、使用するプラットフォームスタイルを決定します。 |
| 属性 | mode |
| 型 | "ios" ｜ "md" |
| デフォルト | undefined |
| 説明 | ボタンの種類。 |
| 属性 | type |
| 型 | "button" ｜ "reset" ｜ "submit" |
| デフォルト | 'button' |
| 説明 | セグメントボタンの値。 |
| 属性 | value |
| 型 | number ｜ string |
| デフォルト | 'ion-sb-' + ids++ |
このコンポーネントで使用できるイベントはありません。
このコンポーネントで使用できる公開メソッドはありません。
| 名前 | 説明 |
|---|
indicator | 選択されたセグメントボタンに表示されるインジケーター。 |
indicator-background | 選択されたセグメントボタンに表示されるインジケーターの背景要素。 |
native | すべての子要素をラップするネイティブHTMLボタン要素。 |
| 名前 | 説明 |
|---|
--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 | セグメントボタンの下マージン |
--margin-end | セグメントボタンの右マージン（方向が左から右の場合）、左マージン（方向が右から左の場合） |
--margin-start | セグメントボタンの左マージン（方向が左から右の場合）、右マージン（方向が右から左の場合） |
--margin-top | セグメントボタンの上マージン |
--padding-bottom | セグメントボタンの下パディング |
--padding-end | セグメントボタンの右パディング（方向が左から右の場合）、左パディング（方向が右から左の場合） |
--padding-start | セグメントボタンの左パディング（方向が左から右の場合）、右パディング（方向が右から左の場合） |
--padding-top | セグメントボタンの上パディング |
--transition | セグメントボタンのトランジション |
| 名前 | 説明 |
|---|
--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 | セグメントボタンの下マージン |
--margin-end | セグメントボタンの右マージン（方向が左から右の場合）、左マージン（方向が右から左の場合） |
--margin-start | セグメントボタンの左マージン（方向が左から右の場合）、右マージン（方向が右から左の場合） |
--margin-top | セグメントボタンの上マージン |
--padding-bottom | セグメントボタンの下パディング |
--padding-end | セグメントボタンの右パディング（方向が左から右の場合）、左パディング（方向が右から左の場合） |
--padding-start | セグメントボタンの左パディング（方向が左から右の場合）、右パディング（方向が右から左の場合） |
--padding-top | セグメントボタンの上パディング |
--transition | セグメントボタンのトランジション |
このコンポーネントで使用できるスロットはありません。