shadow
The 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 | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see 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 | The built-in named SVG icon name or the exact src of an SVG file to use for the back button. |
| Attribute | icon |
| Type | null ｜ string ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | When using a router, it specifies the transition animation when navigating to another page. |
| 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.