Win Design

Breadcrumb 面包屑

代码演示

基础用法

面包屑组件最基础用法。

查看代码 < />

<template>
  <w-breadcrumb separator="/">
    <w-breadcrumb-item :jump-to="{ path: '/' }">首页</w-breadcrumb-item>
    <w-breadcrumb-item><a href="/">列表页面</a></w-breadcrumb-item>
    <w-breadcrumb-item>详情页面</w-breadcrumb-item>
  </w-breadcrumb>
</template>

图标分隔符

separator-icon-class 可以指定icon, 用于取代默认的分隔符。

查看代码 < />

<template>
  <w-breadcrumb separator-icon-class="w-icon-arrow-right">
    <w-breadcrumb-item :jump-to="{ path: '/' }">首页</w-breadcrumb-item>
    <w-breadcrumb-item><a href="/">列表页面</a></w-breadcrumb-item>
    <w-breadcrumb-item>详情页面</w-breadcrumb-item>
  </w-breadcrumb>
</template>

API

参数 说明 类型 可选值 默认值 Version
separator 分隔符号 String — /
separator-icon-class 分割图标class String — —
参数 说明 类型 可选值 默认值 Version
jump-to 跳转的路由信息, 同vue-router的to String/Object — —

贡献者

类型 参与者
设计者 UED视觉组
维护者 UED前端组
上次更新: 3/17/2020, 8:46:00 PM

← Dropdown 下拉菜单 →