shadow
Back Buttonは、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 defaultHref が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。
デフォルトでは、Back Buttonはテキスト "Back" と共に、ios では "chevron-back" アイコン、md では "arrow-back-sharp" アイコンを表示します。これは、iconまたはtextプロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の backButtonIcon または backButtonText プロパティを使用して、グローバルに設定することもできます。詳しくは、Config docs を参照してください。
時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの defaultHref をパスに設定することで実現できます。 defaultHref を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
| Description | 履歴がない場合に、デフォルトで戻るためのURL。 |
| Attribute | default-href |
| Type | string ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザはボタンと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | 戻るボタンに使用する内蔵の名前付きSVGアイコン名またはSVGファイルの正確なsrcを指定します。 |
| Attribute | icon |
| Type | null ｜ string ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。 |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
text
| Description | バックボタンに表示するテキストです。 |
| Attribute | text |
| Type | null ｜ string ｜ undefined |
| Default | undefined |
| Description | ボタンの種類です。 |
| Attribute | type |
| Type | "button" ｜ "reset" ｜ "submit" |
| Default | 'button' |
No events available for this component.
No public methods available for this component.
| Name | Description |
|---|
icon | 戻るボタンのアイコン（ion-iconを使用）。 |
native | すべての子要素を包むネイティブ HTML ボタン要素。 |
text | 戻るボタンのテキストです。 |
| Name | Description |
|---|
--background | ボタンの背景 |
--background-focused | タブキーでフォーカスしたときのボタンの背景 |
--background-focused-opacity | タブキーでフォーカスしたときのボタンの背景の不透明度 |
--background-hover | ホバー時のボタンの背景 |
--background-hover-opacity | ホバー時の背景の不透明度 |
--border-radius | ボタンの境界半径 |
--color | ボタンの文字色 |
--color-focused | タブキーでフォーカスしたときのボタンの文字色 |
--color-hover | ホバー時のボタンの文字色 |
--icon-font-size | ボタンアイコンのFont Size |
--icon-font-weight | ボタンアイコンのFont Weight |
--icon-margin-bottom | ボタンアイコンのBottom Margin |
--icon-margin-end | ボタンアイコンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin |
--icon-margin-start | ボタンアイコンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin |
--icon-margin-top | ボタンアイコンのTop Margin |
--icon-padding-bottom | ボタンアイコンのBottom Padding |
--icon-padding-end | ボタンアイコンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。 |
--icon-padding-start | ボタンアイコンの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。 |
--icon-padding-top | ボタンアイコンのTop Padding |
--margin-bottom | ボタンのBottom Margin |
--margin-end | ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin |
--margin-start | ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin |
--margin-top | ボタンのTop Margin |
--min-height | ボタンの最小高さ |
--min-width | ボタンの最小幅 |
--opacity | ボタンの不透明度 |
--padding-bottom | ボタンのBottom Padding |
--padding-end | ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | ボタンのTop Padding |
--ripple-color | ボタンリプルエフェクトの色 |
--transition | ボタンの遷移 |
| Name | Description |
|---|
--background | ボタンの背景 |
--background-focused | タブキーでフォーカスしたときのボタンの背景 |
--background-focused-opacity | タブキーでフォーカスしたときのボタンの背景の不透明度 |
--background-hover | ホバー時のボタンの背景 |
--background-hover-opacity | ホバー時の背景の不透明度 |
--border-radius | ボタンの境界半径 |
--color | ボタンの文字色 |
--color-focused | タブキーでフォーカスしたときのボタンの文字色 |
--color-hover | ホバー時のボタンの文字色 |
--icon-font-size | ボタンアイコンのFont Size |
--icon-font-weight | ボタンアイコンのFont Weight |
--icon-margin-bottom | ボタンアイコンのBottom Margin |
--icon-margin-end | ボタンアイコンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin |
--icon-margin-start | ボタンアイコンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin |
--icon-margin-top | ボタンアイコンのTop Margin |
--icon-padding-bottom | ボタンアイコンのBottom Padding |
--icon-padding-end | ボタンアイコンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingを使用します。 |
--icon-padding-start | ボタンアイコンの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingを使用します。 |
--icon-padding-top | ボタンアイコンのTop Padding |
--margin-bottom | ボタンのBottom Margin |
--margin-end | ボタンの向きが左から右の場合はRight Margin、右から左の場合はLeft Margin |
--margin-start | ボタンの向きが左から右の場合はLeft Margin、右から左の場合はRight Margin |
--margin-top | ボタンのTop Margin |
--min-height | ボタンの最小高さ |
--min-width | ボタンの最小幅 |
--opacity | ボタンの不透明度 |
--padding-bottom | ボタンのBottom Padding |
--padding-end | ボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。 |
--padding-start | ボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。 |
--padding-top | ボタンのTop Padding |
--ripple-color | ボタンリプルエフェクトの色 |
--transition | ボタンの遷移 |
No slots available for this component.