shadowThe back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless defaultHref is set. The back button displays different text and icon based on the mode, but this can be customized.
By default, the back button will display the text "Back" with a "chevron-back" icon on ios, and an "arrow-back-sharp" icon on md. This can be customized per back button component by setting the icon or text properties. Alternatively, it can be set globally using the backButtonIcon or backButtonText properties in the global config. See the Config docs for more information.
Default Back History
Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the defaultHref on the back button to a path. In order to use defaultHref, the app must contain a router with paths set.
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ 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 | ボタンの遷移 |
No slots available for this component.