跳过至主要内容
版本: v8

ion-back-button

阴影

后退按钮在点击时会导航回应用程序的历史记录。它只在导航堆栈中存在历史记录时显示,除非设置了 defaultHref。后退按钮根据模式显示不同的文本和图标,但可以进行自定义。

基本用法

自定义后退按钮

默认情况下,后退按钮将显示带有 "chevron-back" 图标的文本 "后退"(在 ios 上),以及带有 "arrow-back-sharp" 图标的文本(在 md 上)。可以通过设置 icontext 属性,为每个后退按钮组件进行自定义。或者,也可以使用全局配置中的 backButtonIconbackButtonText 属性,在全局范围内进行设置。有关更多信息,请参阅 配置文档

默认后退历史记录

有时应用程序可能需要显示后退按钮,并在没有历史记录时导航回上一步。可以通过在后退按钮上设置 defaultHref 到一个路径来完成此操作。为了使用 defaultHref,应用程序必须包含一个设置了路径的路由器。

属性

color

描述要从应用程序的颜色调色板中使用的颜色。默认选项有:"primary""secondary""tertiary""success""warning""danger""light""medium""dark"。有关颜色的更多信息,请参阅 主题
属性color
类型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
默认值undefined

defaultHref

描述当没有历史记录时,默认导航回的 URL。
属性default-href
类型string | undefined
默认值undefined

disabled

描述如果为 true,用户将无法与按钮进行交互。
属性disabled
类型boolean
默认值false

icon

描述用于后退按钮的内置命名 SVG 图标名称或 SVG 文件的准确 src
属性icon
类型null | string | undefined
默认值undefined

mode

描述模式决定使用哪个平台样式。
属性mode
类型"ios" | "md"
默认值undefined

routerAnimation

描述当使用路由器时,它指定导航到另一个页面时的过渡动画。
属性undefined
类型((baseEl: any, opts?: any) => Animation) | undefined
默认值undefined

text

描述要在后退按钮中显示的文本。
属性text
类型null | string | undefined
默认值undefined

type

描述按钮的类型。
属性type
类型"button" | "reset" | "submit"
默认值'button'

事件

此组件没有可用事件。

方法

此组件没有可用的公共方法。

CSS 阴影部分

名称描述
icon后退按钮图标(使用 ion-icon)。
native包装所有子元素的原生 HTML 按钮元素。
text后退按钮文本。

CSS 自定义属性

名称描述
--background按钮的背景
--background-focused使用 Tab 键聚焦时按钮的背景
--background-focused-opacity使用 Tab 键聚焦时按钮背景的不透明度
--background-hover悬停时按钮的背景
--background-hover-opacity悬停时背景的不透明度
--border-radius按钮的边框半径
--color按钮的文本颜色
--color-focused使用 Tab 键聚焦时按钮的文本颜色
--color-hover悬停时按钮的文本颜色
--icon-font-size按钮图标的字体大小
--icon-font-weight按钮图标的字体粗细
--icon-margin-bottom按钮图标的底部边距
--icon-margin-end如果方向为从左到右,则为按钮图标的右侧边距,如果方向为从右到左,则为左侧边距
--icon-margin-start如果方向为从左到右,则为按钮图标的左侧边距,如果方向为从右到左,则为右侧边距
--icon-margin-top按钮图标的顶部边距
--icon-padding-bottom按钮图标的底部内边距
--icon-padding-end如果方向为从左到右,则为按钮图标的右侧内边距,如果方向为从右到左,则为左侧内边距
--icon-padding-start如果方向为从左到右,则为按钮图标的左侧内边距,如果方向为从右到左,则为右侧内边距
--icon-padding-top按钮图标的顶部内边距
--margin-bottom按钮的底部边距
--margin-end如果方向为从左到右,则为按钮的右侧边距,如果方向为从右到左,则为左侧边距
--margin-start如果方向为从左到右,则为按钮的左侧边距,如果方向为从右到左,则为右侧边距
--margin-top按钮的顶部边距
--min-height按钮的最小高度
--min-width按钮的最小宽度
--opacity按钮的不透明度
--padding-bottom按钮的底部内边距
--padding-end如果方向为从左到右,则为按钮的右侧内边距,如果方向为从右到左,则为左侧内边距
--padding-start如果方向为从左到右,则为按钮的左侧内边距,如果方向为从右到左,则为右侧内边距
--padding-top按钮的顶部内边距
--ripple-color按钮涟漪效果的颜色
--transition按钮的过渡

插槽

此组件没有可用插槽。