帮助 AI 正确使用 UDesign Breadcrumb 组件（面包屑组件，配合子组件 Item 使用）。当需要使用 Breadcrumb 时加载此技能。
面包屑组件，配合子组件 Item 使用
<!-- MANUAL_END: overview -->import { Breadcrumb } from '@ucloud-fe/react-components';
<!-- AUTO_END: import --> <!-- AUTO_START: basic-usage -->⚠️ 全局规范 - 所有组件通用:
- 生成纯 JavaScript (JSX) 代码，不要使用 TypeScript 类型注解
- 禁止使用
@alicloud/*、@aliyun/*、antd等外部组件库- 优先使用 UDesign 组件，不要用 HTML 原生标签替代
class Demo extends React.Component {
render() {
return (
<div>
{['', '>', '>>', '->', <Icon key="icon" type="caret-right" />].map((separator, i) => (
<div className="demo-wrap" key={i}>
<Breadcrumb separator={separator}>
<Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
<Breadcrumb.Item noAction>
<Icon type="home" />
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>
<Icon type="uhost" />
</Breadcrumb.Item>
<Breadcrumb.Item href="https://www.google.com" target="_blank">
google
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
<Breadcrumb.Item current>current</Breadcrumb.Item>
</Breadcrumb>
</div>
))}
</div>
);
}
}
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| separator | any | '/' | - | 自定义分隔符 |
| styleType | `"block-hover" | "hover" | "active"` | 'block-hover' |
const itemLayout = {
labelCol: {
span: 3
},
controllerCol: {
span: 9
}
};
const StyleType = ['block-hover', 'hover', 'active'];
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
separator: '/',
styleType: 'block-hover'
};
}
render() {
const { separator, styleType } = this.state;
return (
<div>
<Form className="demo-form">
<Form.Item label="separator" {...itemLayout}>
<Input value={separator} onChange={e => this.setState({ separator: e.target.value })} />
</Form.Item>
<Form.Item label="styleType" {...itemLayout}>
<Radio.Group
options={StyleType.map(styleType => ({ value: styleType }))}
value={styleType}
onChange={styleType => this.setState({ styleType })}
/>
</Form.Item>
</Form>
<div className="demo-wrap">
<Breadcrumb separator={separator} styleType={styleType}>
<Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
<Breadcrumb.Item noAction>
<Icon type="home" />
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>
<Icon type="uhost" />
</Breadcrumb.Item>
<Breadcrumb.Item href="https://www.google.com" target="_blank">
google
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
<Breadcrumb.Item current>current</Breadcrumb.Item>
</Breadcrumb>
</div>
</div>
);
}
}
class Demo extends React.Component {
render() {
return (
<div>
{['', '>', '>>', '->', <Icon key="icon" type="caret-right" />].map((separator, i) => (
<div className="demo-wrap" key={i}>
<Breadcrumb separator={separator}>
<Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
<Breadcrumb.Item noAction>
<Icon type="home" />
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>
<Icon type="uhost" />
</Breadcrumb.Item>
<Breadcrumb.Item href="https://www.google.com" target="_blank">
google
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
<Breadcrumb.Item current>current</Breadcrumb.Item>
</Breadcrumb>
</div>
))}
</div>
);
}
}
class Demo extends React.Component {
render() {
return (
<div>
{Breadcrumb.StyleType.map((styleType, i) => (
<div className="demo-wrap" key={i}>
<Breadcrumb styleType={styleType}>
<Breadcrumb.BackButton type="left" onClick={() => window.history.back()} />
<Breadcrumb.Item noAction>
<Icon type="home" />
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>
<Icon type="uhost" />
</Breadcrumb.Item>
<Breadcrumb.Item href="https://www.google.com" target="_blank">
google
</Breadcrumb.Item>
<Breadcrumb.Item onClick={() => window.location.reload()}>reload</Breadcrumb.Item>
<Breadcrumb.Item current>current</Breadcrumb.Item>
</Breadcrumb>
</div>
))}
</div>
);
}
}
current 或 noAction：当前页面的面包屑项不应可点击<Breadcrumb>
<Breadcrumb.Item onClick={() => navigate('/uhost')}>云主机</Breadcrumb.Item>
<Breadcrumb.Item current>uhost-xxxx</Breadcrumb.Item>
</Breadcrumb>
A: 使用 noAction 属性标记无需跳转的项目，或使用 current 标记当前页。
（待补充）