ivyDesign

Appearance

Breadcrumb 面包屑 ​

基础用法 ​

基础用法当然是最基础的用法

首页产品动态动态1
html
<ivy-breadcrumb>
    <ivy-breadcrumb-item href="http://www.baidu.com">首页</ivy-breadcrumb-item>
    <ivy-breadcrumb-item href="http://www.baidu.com">产品动态</ivy-breadcrumb-item>
    <ivy-breadcrumb-item>动态1</ivy-breadcrumb-item>
</ivy-breadcrumb>

自定义分隔符 ​

通过 separator 属性设置分隔符

首页产品动态动态1
html
<ivy-breadcrumb separator=">">
    <ivy-breadcrumb-item href="http://www.baidu.com">首页</ivy-breadcrumb-item>
    <ivy-breadcrumb-item>产品动态</ivy-breadcrumb-item>
    <ivy-breadcrumb-item>动态1</ivy-breadcrumb-item>
</ivy-breadcrumb>

可用的 CSS 变量 ​

点击展开
css
:host {
    --ivy-breadcrumb-color: var(--ivy-text-color-primary, #303133);
    --ivy-breadcrumb-hover-color: var(--ivy-color-primary, #409eff);
    --ivy-breadcrumb-separator-color: var(--ivy-text-color-regular, #606266);
}
属性名说明可选值默认值
separator分隔符-/
属性名说明可选值默认值
separator分隔符-/
href跳转的链接--
blank新窗口打开--