Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@uiw/react-breadcrumb
Advanced tools
Readme
显示当前页面的路径,快速返回之前的任意页面。
import { Breadcrumb } from 'uiw';
// or
import Breadcrumb from '@uiw/react-breadcrumb';
适用广泛的基础用法,在 Breadcrumb
中使用 Breadcrumb.Item
标签表示从首页开始的每一级。
import React from 'react';
import { Breadcrumb } from 'uiw';
export default function Demo() {
return(
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item separator=">">活动管理</Breadcrumb.Item>
<Breadcrumb.Item>活动列表</Breadcrumb.Item>
<Breadcrumb.Item active>活动详情</Breadcrumb.Item>
</Breadcrumb>
);
}
使用 separator=">"
可以自定义分隔符,分隔符也可以是图标。
import React from 'react';
import { Breadcrumb, Divider, Icon } from 'uiw';
export default function Demo() {
return(
<div>
<Breadcrumb>
<Breadcrumb.Item><a href="#">Home</a></Breadcrumb.Item>
<Breadcrumb.Item separator=">"><a href="#">Library</a></Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
<Divider />
<Breadcrumb separator="#">
<Breadcrumb.Item><a href="#">Home</a></Breadcrumb.Item>
<Breadcrumb.Item separator={<span>+</span>}><a href="#">Home</a></Breadcrumb.Item>
<Breadcrumb.Item separator={<Icon type="home" verticalAlign="baseline" />}><a href="#">Icon</a></Breadcrumb.Item>
<Breadcrumb.Item separator=">"><a href="#">Library</a></Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
);
}
图标放在文字前面。注意文字要使用 span
包裹起来,图标 <Icon />
需要跟 span
同级。Breadcrumb.Item
定义 href
参数的话,Item
上的参数就全部是超链原始属性。
import React from 'react';
import { Breadcrumb, Icon } from 'uiw';
const stylIcon = { marginRight: 3, top: 2, display: 'inline-flex' }
export default function Demo() {
return(
<div>
<Breadcrumb>
<Breadcrumb.Item>
<a href="#"><Icon style={stylIcon} type="home"/></a>
</Breadcrumb.Item>
<Breadcrumb.Item separator=">">
<a href="#"><Icon style={stylIcon} type="apple"/>Library</a>
</Breadcrumb.Item>
<Breadcrumb.Item separator=">">
<a href="#"><Icon style={stylIcon} type="pie-chart"/>Chart</a>
</Breadcrumb.Item>
<Breadcrumb.Item separator="">
<a href="#"><Icon style={{...stylIcon, marginRight: 0}} type="star-on"/> Chart</a>
</Breadcrumb.Item>
<Breadcrumb.Item separator="" active>Data</Breadcrumb.Item>
</Breadcrumb>
</div>
);
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
style | 样式 | String | - |
className | 样式名称 | String | w-breadcrumb |
tagName | 设置子节点标签名,默认 <a /> 标签,也可以指定路由 <Link /> | String | a |
separator | 分隔符自定义,定义所有子组件的分隔符。 | String | / |
其它参数可根据 tagName
来设置,默认 <a />
标签时,可设置 href="https://wwww.google.com"
或者 target="_blank"
等参数,你可以设置 react-router-dom 路由 <Link />
,例如:
import { Breadcrumb, Icon } from 'uiw';
import { Link } from 'react-router-dom';
const Demo = () => {
return (
<Breadcrumb>
<Breadcrumb.Item tagName={Link} to="/home">
<Icon type="apple"/> Home
</Breadcrumb.Item>
</Breadcrumb>
)
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 样式名称 | String | w-breadcrumb-itme |
separator | 分隔符自定义,子组件可以单独定义不同的分隔符。 | String | - |
active | 激活。 | String | - |
FAQs
Breadcrumb component
The npm package @uiw/react-breadcrumb receives a total of 306 weekly downloads. As such, @uiw/react-breadcrumb popularity was classified as not popular.
We found that @uiw/react-breadcrumb demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.