メインコンテンツまでスキップ
バージョン: v8 (beta)

ion-segment-button

shadow

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

基本的な使い方

Layout

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

テーマ

CSS Shadow Parts

CSSカスタムプロパティ

プロパティ

disabled

DescriptionIf true, the user cannot interact with the segment button.
Attributedisabled
Typeboolean
Defaultfalse

layout

DescriptionSet the layout of the text and icon in the segment.
Attributelayout
Type"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined
Default'icon-top'

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

type

DescriptionThe type of the button.
Attributetype
Type"button" | "reset" | "submit"
Default'button'

value

DescriptionThe value of the segment button.
Attributevalue
Typenumber | string
Default'ion-sb-' + ids++

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
indicatorThe indicator displayed on the checked segment button.
indicator-backgroundThe background element for the indicator displayed on the checked segment button.
nativeThe native HTML button element that wraps all child elements.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the segment button
--background-checkedBackground of the checked segment button
--background-focusedBackground of the segment button when focused with the tab key
--background-focused-opacityOpacity of the segment button background when focused with the tab key
--background-hoverBackground of the segment button on hover
--background-hover-opacityOpacity of the segment button background on hover
--border-colorColor of the segment button border
--border-radiusRadius of the segment button border
--border-styleStyle of the segment button border
--border-widthWidth of the segment button border
--colorColor of the segment button
--color-checkedColor of the checked segment button
--color-focusedColor of the segment button when focused with the tab key
--color-hoverColor of the segment button on hover
--indicator-box-shadowBox shadow on the indicator for the checked segment button
--indicator-colorColor of the indicator for the checked segment button
--indicator-heightHeight of the indicator for the checked segment button
--indicator-transformTransform of the indicator for the checked segment button
--indicator-transitionTransition of the indicator for the checked segment button
--margin-bottomBottom margin of the segment button
--margin-endRight margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
--margin-startLeft margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
--margin-topTop margin of the segment button
--padding-bottomBottom padding of the segment button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
--padding-topTop padding of the segment button
--transitionTransition of the segment button

Slots

No slots available for this component.