ant-design/components/breadcrumb/demo/component-token.tsx

81 lines
1.6 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, ConfigProvider } from 'antd';
const menuItems = [
{
key: '1',
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
General
</a>
),
},
{
key: '2',
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
Layout
</a>
),
},
{
key: '3',
label: (
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
Navigation
</a>
),
},
];
export default () => (
<ConfigProvider
theme={{
components: {
Breadcrumb: {
itemColor: '#b02121',
lastItemColor: '#0f3a88',
iconFontSize: 28,
linkColor: '#979a42',
linkHoverColor: '#9450c0',
separatorColor: '#b41b60',
separatorMargin: 22,
},
},
}}
>
<Breadcrumb
separator=">"
items={[
{
title: 'Home',
},
{
title: <a href="">Application Center</a>,
},
{
title: <a href="">General</a>,
menu: { items: menuItems },
},
{
title: 'Application Center',
href: '',
},
{
href: '',
title: <HomeOutlined />,
},
{
href: '',
title: (
<>
<UserOutlined />
<span>Application List</span>
</>
),
},
]}
/>
</ConfigProvider>
);