Breadcrumb

您所在的位置：网站首页 › breadcrumbsvue › Breadcrumb

Breadcrumb

2024-04-20 22:21| 来源: 网络整理| 查看: 265

API

Common props ref：Common props

BreadcrumbPropertyDescriptionTypeDefaultVersionitemRenderCustom item renderer(route, params, routes, paths) => ReactNode-paramsRouting parametersobject-itemsThe routing stack information of routerItemType[]-5.3.0separatorCustom separatorReactNode/ItemType

type ItemType = Omit | SeparatorType

RouteItemTypePropertyDescriptionTypeDefaultVersionclassNameThe additional css classstring-dropdownPropsThe dropdown propsDropdown-hrefTarget of hyperlink. Can not work with pathstring-pathConnected path. Each path will connect with prev one. Can not work with hrefstring-menuThe menu propsMenuProps-4.24.0onClickSet the handler to handle click event(e:MouseEvent) => void-titleitem nameReactNode-SeparatorTypeconst item = { type: 'separator', // Must have separator: '/',};PropertyDescriptionTypeDefaultVersiontypeMark as separatorseparator5.3.0separatorCustom separatorReactNode/5.3.0Use with browserHistory

The link of Breadcrumb item targets # by default, you can use itemRender to make a browserHistory Link.

import { Link } from 'react-router'; const items = [ { path: '/index', title: 'home', }, { path: '/first', title: 'first', children: [ { path: '/general', title: 'General', }, { path: '/layout', title: 'Layout', }, { path: '/navigation', title: 'Navigation', }, ], }, { path: '/second', title: 'second', },]; function itemRender(currentRoute, params, items, paths) { const isLast = currentRoute?.path === items[items.length - 1]?.path; return isLast ? ( {currentRoute.title} ) : ( {currentRoute.title} );} return ;Design Token

【本文地址】

今日新闻

breadcrumbsvue

Breadcrumb

Breadcrumb

今日新闻

推荐新闻