跳至主要内容
版本: v8

ion-breadcrumb

阴影

面包屑是面包屑组件的单个导航项。面包屑可以链接到应用中的其他位置，也可以是纯文本。每个面包屑在其与下一个面包屑之间都有一个分隔符，并且可以选择包含图标。

有关更多信息，请参见 面包屑 文档。

接口​

interface BreadcrumbCollapsedClickEventDetail {
  collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}

虽然不是必需的，但此接口可以在 CustomEvent 接口的位置使用，以实现更强的类型化。

interface BreadcrumbCustomEvent extends CustomEvent {
  detail: BreadcrumbCollapsedClickEventDetail;
  target: HTMLIonBreadcrumbElement;
}

属性​

active​

描述如果为 true，则面包屑将采用不同的外观以显示它是当前活动的面包屑。对于最后一个面包屑，如果未在任何面包屑上设置，则默认为 true。
属性active
类型布尔值
默认值false

color​

描述要从应用程序的调色板中使用的颜色。默认选项为："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。有关颜色的更多信息，请参见 主题。
属性color
类型"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ 字符串 ｜ 未定义
默认值未定义

disabled​

描述如果为 true，则用户无法与面包屑交互。
属性disabled
类型布尔值
默认值false

download​

描述此属性指示浏览器下载 URL 而不是导航到它，因此用户将被提示将其保存为本地文件。如果属性有值，则它用作保存提示中预填充的文件名（用户仍然可以更改文件名，如果他们想要的话）。
属性download
类型字符串 ｜ 未定义
默认值未定义

href​

描述包含超链接指向的 URL 或 URL 片段。如果设置此属性，则将渲染一个锚标记。
属性href
类型字符串 ｜ 未定义
默认值未定义

mode​

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

rel​

描述指定目标对象与链接对象的关系。该值是 链接类型 的空格分隔列表。
属性rel
类型字符串 ｜ 未定义
默认值未定义

routerAnimation​

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

routerDirection​

描述使用路由器时，它指定使用 href 导航到另一个页面时的过渡方向。
属性router-direction
类型"back" ｜ "forward" ｜ "root"
默认值'forward'

separator​

描述如果为 true，则在此面包屑与下一个面包屑之间显示一个分隔符。对于除最后一个之外的所有面包屑，默认为 true。
属性separator
类型布尔值 ｜ 未定义
默认值未定义

target​

描述指定在何处显示链接的 URL。仅在提供 href 时适用。特殊关键字："_blank"、"_self"、"_parent"、"_top"。
属性target
类型字符串 ｜ 未定义
默认值未定义

事件​

名称描述冒泡
ionBlur当面包屑失去焦点时发出。true
ionFocus当面包屑获得焦点时发出。true

方法​

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

CSS 阴影部分​

名称描述
collapsed-indicator显示面包屑已折叠的指示器元素。
native包装所有子元素的原生 HTML 锚或 div 元素。
separator每个面包屑之间的分隔符元素。

CSS 自定义属性​

名称描述
--background-focused获得焦点的面包屑的背景颜色
--color面包屑的文本颜色
--color-active活动面包屑的文本颜色
--color-focused获得焦点的面包屑的文本颜色
--color-hover悬停时面包屑的文本颜色

插槽​

此组件没有可用的插槽。

内容

编辑此页面