ion-back-button
返回按钮在点击时会在应用的历史记录中向后导航。除非设置了 defaultHref，否则仅在导航堆栈中存在历史记录时才会显示。返回按钮根据模式显示不同的文本和图标，但这是可以自定义的。
基本用法
自定义返回按钮
默认情况下，返回按钮在 ios 上显示文本 "Back" 和 "chevron-back" 图标，在 md 上显示 "arrow-back-sharp" 图标。可以通过设置 icon 或 text 属性来为每个返回按钮组件自定义。或者，可以使用全局配置中的 backButtonIcon 或 backButtonText 属性进行全局设置。更多信息请参见配置文档。
默认返回历史
有时应用可能需要在没有历史记录时显示返回按钮并导航返回。可以通过将返回按钮的 defaultHref 设置为路径来实现。要使用 defaultHref，应用必须包含一个设置了路径的路由器。
Properties
color
| 说明 | 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. |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | undefined |
defaultHref
| 说明 | The url to navigate back to by default when there is no history. |
| 属性 | default-href |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
disabled
| 说明 | If true, the user cannot interact with the button. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
icon
| 说明 | The built-in named SVG icon name or the exact src of an SVG file to use for the back button. |
| 属性 | icon |
| 类型 | null ｜ string ｜ undefined |
| 默认值 | undefined |
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
routerAnimation
| 说明 | When using a router, it specifies the transition animation when navigating to another page. |
| 属性 | undefined |
| 类型 | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| 默认值 | undefined |
text
| 说明 | The text to display in the back button. |
| 属性 | text |
| 类型 | null ｜ string ｜ undefined |
| 默认值 | undefined |
type
| 说明 | The type of the button. |
| 属性 | type |
| 类型 | "button" ｜ "reset" ｜ "submit" |
| 默认值 | 'button' |
Events
该组件没有可用的事件。
Methods
该组件没有可用的公共方法。
CSS Shadow Parts
| Name | 说明 |
|---|---|
icon | The back button icon (uses ion-icon). |
native | The native HTML button element that wraps all child elements. |
text | The back button text. |
CSS Custom Properties
- iOS
- MD
| Name | 说明 |
|---|---|
--background | Background of the button |
--background-focused | Background of the button when focused with the tab key |
--background-focused-opacity | Opacity of the button background when focused with the tab key |
--background-hover | Background of the button on hover |
--background-hover-opacity | Opacity of the background on hover |
--border-radius | Border radius of the button |
--color | Text color of the button |
--color-focused | Text color of the button when focused with the tab key |
--color-hover | Text color of the button on hover |
--icon-font-size | Font size of the button icon |
--icon-font-weight | Font weight of the button icon |
--icon-margin-bottom | Bottom margin of the button icon |
--icon-margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon |
--icon-margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon |
--icon-margin-top | Top margin of the button icon |
--icon-padding-bottom | Bottom padding of the button icon |
--icon-padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
--icon-padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
--icon-padding-top | Top padding of the button icon |
--margin-bottom | Bottom margin of the button |
--margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button |
--margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button |
--margin-top | Top margin of the button |
--min-height | Minimum height of the button |
--min-width | Minimum width of the button |
--opacity | Opacity of the button |
--padding-bottom | Bottom padding of the button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
--padding-top | Top padding of the button |
--ripple-color | Color of the button ripple effect |
--transition | Transition of the button |
| Name | 说明 |
|---|---|
--background | Background of the button |
--background-focused | Background of the button when focused with the tab key |
--background-focused-opacity | Opacity of the button background when focused with the tab key |
--background-hover | Background of the button on hover |
--background-hover-opacity | Opacity of the background on hover |
--border-radius | Border radius of the button |
--color | Text color of the button |
--color-focused | Text color of the button when focused with the tab key |
--color-hover | Text color of the button on hover |
--icon-font-size | Font size of the button icon |
--icon-font-weight | Font weight of the button icon |
--icon-margin-bottom | Bottom margin of the button icon |
--icon-margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon |
--icon-margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon |
--icon-margin-top | Top margin of the button icon |
--icon-padding-bottom | Bottom padding of the button icon |
--icon-padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
--icon-padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
--icon-padding-top | Top padding of the button icon |
--margin-bottom | Bottom margin of the button |
--margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button |
--margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button |
--margin-top | Top margin of the button |
--min-height | Minimum height of the button |
--min-width | Minimum width of the button |
--opacity | Opacity of the button |
--padding-bottom | Bottom padding of the button |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
--padding-top | Top padding of the button |
--ripple-color | Color of the button ripple effect |
--transition | Transition of the button |
Slots
该组件没有可用的插槽。