mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: Breadcrumb accessibility improvements (#34082)

Browse Source 
* add accessibility to the breadcrumb component

* feat: add accessibility to the breadcrumb component

* test: breadcrumb accessibility
This commit is contained in:
Uladzimir Atroshchanka 2022-03-10 07:46:42 +04:00 committed by GitHub
parent 895280971c
commit 662f3ade06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 1898 additions and 1807 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/breadcrumb/Breadcrumb.tsx
View File

@ -143,9 +143,11 @@ const Breadcrumb: BreadcrumbInterface = ({
); );
return ( return (
<div className={breadcrumbClassName} style={style} {...restProps}> <nav className={breadcrumbClassName} style={style} {...restProps}>
{crumbs} <ol>
</div> {crumbs}
</ol>
</nav>
); );
}; };

10
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -30,7 +30,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => { const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
if (overlay) { if (overlay) {
return ( return (
<DropDown overlay={overlay} placement="bottom" {...dropdownProps}> <DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
<span className={`${prefixCls}-overlay-link`}> <span className={`${prefixCls}-overlay-link`}>
{breadcrumbItem} {breadcrumbItem}
<DownOutlined /> <DownOutlined />
@ -60,10 +60,12 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
link = renderBreadcrumbNode(link); link = renderBreadcrumbNode(link);
if (children) { if (children) {
return ( return (
<span> <li>
{link} {link}
{separator && <span className={`${prefixCls}-separator`}>{separator}</span>} {separator && (
</span> <span className={`${prefixCls}-separator`}>{separator}</span>
)}
</li>
); );
} }
return null; return null;

2
components/breadcrumb/__tests__/Breadcrumb.test.js
View File

@ -3,10 +3,12 @@ import { mount, render } from 'enzyme';
import Breadcrumb from '../index'; import Breadcrumb from '../index';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import accessibilityTest from "../../../tests/shared/accessibilityTest";
describe('Breadcrumb', () => { describe('Breadcrumb', () => {
mountTest(Breadcrumb); mountTest(Breadcrumb);
rtlTest(Breadcrumb); rtlTest(Breadcrumb);
accessibilityTest(Breadcrumb)
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

544
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View File

@ -1,307 +1,325 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb filter React.Fragment 1`] = ` exports[`Breadcrumb filter React.Fragment 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</li>
<span <span
class="ant-breadcrumb-link" class="ant-breadcrumb-separator"
> >
Location :
</span> </span>
</span> <li>
<span <a
class="ant-breadcrumb-separator" class="ant-breadcrumb-link"
> href=""
: >
</span> Application Center
<span> </a>
<a </li>
class="ant-breadcrumb-link" <span
href="" class="ant-breadcrumb-separator"
> >
Application Center /
</a> </span>
</span> </ol>
<span </nav>
class="ant-breadcrumb-separator"
>
/
</span>
</div>
`; `;
exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = ` exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
<div <nav
class="ant-breadcrumb ant-breadcrumb-rtl" class="ant-breadcrumb ant-breadcrumb-rtl"
/> >
<ol />
</nav>
`; `;
exports[`Breadcrumb should accept undefined routes 1`] = ` exports[`Breadcrumb should accept undefined routes 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
/> >
<ol />
</nav>
`; `;
exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = ` exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link"
>
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should render a menu 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
>
home
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span <span
class="ant-breadcrumb-link" class="ant-breadcrumb-link"
> >
<a Home
href="#/index/first"
>
first
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first/second"
>
second
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span />
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Location
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span>
<span
class="ant-breadcrumb-link"
>
Mock Node
</span> </span>
<span <span
class="ant-breadcrumb-separator" class="ant-breadcrumb-separator"
> >
/ /
</span> </span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
xxx
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
yyy
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should render a menu 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index"
>
home
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
first
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first/second"
>
second
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span />
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<span>
<li>
<span
class="ant-breadcrumb-link"
>
Mock Node
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</span> </span>
</span> <li>
<span> <span
<span class="ant-breadcrumb-link"
class="ant-breadcrumb-link" >
> Application Center
Application Center </span>
</span> <span
<span class="ant-breadcrumb-separator"
class="ant-breadcrumb-separator" >
> /
/ </span>
</span> </li>
</span> </ol>
</div> </nav>
`; `;
exports[`Breadcrumb should support React.Fragment and falsy children 1`] = ` exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
yyy >
</span> yyy
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
yyy >
</span> yyy
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
yyy >
</span> yyy
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
0 </li>
</div> 0
</ol>
</nav>
`; `;
exports[`Breadcrumb should support custom attribute 1`] = ` exports[`Breadcrumb should support custom attribute 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
data-custom="custom" data-custom="custom"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
data-custom="custom-item" class="ant-breadcrumb-link"
> data-custom="custom-item"
xxx >
</span> xxx
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
yyy >
</span> yyy
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
`; `;

932
components/breadcrumb/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

602
components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,343 +1,353 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = ` exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
> >
Application Center Home
</a> </span>
</span> <span
<span class="ant-breadcrumb-separator"
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
> >
Application List /
</a> </span>
</span> </li>
<span <li>
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;
exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span <span
class="ant-breadcrumb-link" class="ant-breadcrumb-link"
> >
<a <a
href="" href=""
> >
General Application Center
</a> </a>
</span> </span>
<span <span
aria-label="down" class="ant-breadcrumb-separator"
class="anticon anticon-down"
role="img"
> >
<svg /
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span> </span>
</span> </li>
<span <li>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-link"
/ >
</span> <a
</span> href=""
<span> >
<span Application List
class="ant-breadcrumb-link" </a>
> </span>
Button <span
</span> class="ant-breadcrumb-separator"
<span >
class="ant-breadcrumb-separator" /
> </span>
/ </li>
</span> <li>
</span> <span
</div> class="ant-breadcrumb-link"
>
An Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`;
exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<nav
class="ant-breadcrumb"
>
<ol>
<li>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
General
</a>
</span>
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
Button
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
`; `;
exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = ` exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
&gt; >
</span> &gt;
</span> </span>
<span> </li>
<a <li>
class="ant-breadcrumb-link" <a
href="" class="ant-breadcrumb-link"
> href=""
Application Center >
</a> Application Center
<span </a>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
&gt; >
</span> &gt;
</span> </span>
<span> </li>
<a <li>
class="ant-breadcrumb-link" <a
href="" class="ant-breadcrumb-link"
> href=""
Application List >
</a> Application List
<span </a>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
&gt; >
</span> &gt;
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
An Application >
</span> An Application
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
&gt; >
</span> &gt;
</span> </span>
</div> </li>
</ol>
</nav>
`; `;
exports[`renders ./components/breadcrumb/demo/separator-component.md correctly 1`] = ` exports[`renders ./components/breadcrumb/demo/separator-component.md correctly 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<li>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</li>
<span <span
class="ant-breadcrumb-link" class="ant-breadcrumb-separator"
> >
Location :
</span> </span>
</span> <li>
<span <a
class="ant-breadcrumb-separator" class="ant-breadcrumb-link"
> href=""
: >
</span> Application Center
<span> </a>
<a </li>
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<span <span
class="ant-breadcrumb-link" class="ant-breadcrumb-separator"
> >
An Application /
</span> </span>
</span> <li>
</div> <a
class="ant-breadcrumb-link"
href=""
>
Application List
</a>
</li>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<li>
<span
class="ant-breadcrumb-link"
>
An Application
</span>
</li>
</ol>
</nav>
`; `;
exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = ` exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<a <li>
class="ant-breadcrumb-link" <a
href="" class="ant-breadcrumb-link"
> href=""
<span
aria-label="home"
class="anticon anticon-home"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="home"
data-icon="home" class="anticon anticon-home"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
> >
<path <svg
d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" aria-hidden="true"
/> data-icon="home"
</svg> fill="currentColor"
</span> focusable="false"
</a> height="1em"
<span viewBox="64 64 896 896"
class="ant-breadcrumb-separator" width="1em"
> >
/ <path
</span> d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
</span> />
<span> </svg>
<a </span>
class="ant-breadcrumb-link" </a>
href=""
>
<span <span
aria-label="user" class="ant-breadcrumb-separator"
class="anticon anticon-user"
role="img"
> >
<svg /
aria-hidden="true" </span>
data-icon="user" </li>
fill="currentColor" <li>
focusable="false" <a
height="1em" class="ant-breadcrumb-link"
viewBox="64 64 896 896" href=""
width="1em" >
<span
aria-label="user"
class="anticon anticon-user"
role="img"
> >
<path <svg
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" aria-hidden="true"
/> data-icon="user"
</svg> fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
</span>
<span>
Application List
</span>
</a>
<span
class="ant-breadcrumb-separator"
>
/
</span> </span>
<span> </li>
Application List <li>
<span
class="ant-breadcrumb-link"
>
Application
</span> </span>
</a> <span
<span class="ant-breadcrumb-separator"
class="ant-breadcrumb-separator" >
> /
/ </span>
</span> </li>
</span> </ol>
<span> </nav>
<span
class="ant-breadcrumb-link"
>
Application
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`; `;

166
components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
View File

@ -74,91 +74,93 @@ exports[`react router react router 3 1`] = `
] ]
} }
> >
<div <nav
className="ant-breadcrumb" className="ant-breadcrumb"
> >
<BreadcrumbItem <ol>
key="Home" <BreadcrumbItem
separator="/" key="Home"
> separator="/"
<span> >
<span <li>
className="ant-breadcrumb-link" <span
> className="ant-breadcrumb-link"
<a
href="#/"
> >
Home <a
</a> href="#/"
</span> >
<span Home
className="ant-breadcrumb-separator" </a>
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="apps"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps"
>
Application List
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="1"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps/1"
>
Application1
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</span>
</BreadcrumbItem>
<BreadcrumbItem
key="detail"
separator="/"
>
<span>
<span
className="ant-breadcrumb-link"
>
<span>
Detail
</span> </span>
</span> <span
<span className="ant-breadcrumb-separator"
className="ant-breadcrumb-separator" >
> /
/ </span>
</span> </li>
</span> </BreadcrumbItem>
</BreadcrumbItem> <BreadcrumbItem
</div> key="apps"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps"
>
Application List
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="1"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<a
href="#/apps/1"
>
Application1
</a>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
<BreadcrumbItem
key="detail"
separator="/"
>
<li>
<span
className="ant-breadcrumb-link"
>
<span>
Detail
</span>
</span>
<span
className="ant-breadcrumb-separator"
>
/
</span>
</li>
</BreadcrumbItem>
</ol>
</nav>
</Breadcrumb> </Breadcrumb>
`; `;

9
components/breadcrumb/style/index.less
View File

@ -13,6 +13,11 @@
font-size: @breadcrumb-icon-font-size; font-size: @breadcrumb-icon-font-size;
} }
ol {
display: flex;
flex-wrap: wrap;
}
a { a {
color: @breadcrumb-link-color; color: @breadcrumb-link-color;
transition: color 0.3s; transition: color 0.3s;
@ -22,7 +27,7 @@
} }
} }
& > span:last-child { li:last-child {
color: @breadcrumb-last-item-color; color: @breadcrumb-last-item-color;
a { a {
@ -30,7 +35,7 @@
} }
} }
& > span:last-child &-separator { li:last-child &-separator {
display: none; display: none;
} }

324
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -985,189 +985,201 @@ exports[`ConfigProvider components Badge prefixCls 1`] = `
`; `;
exports[`ConfigProvider components Breadcrumb configProvider 1`] = ` exports[`ConfigProvider components Breadcrumb configProvider 1`] = `
<div <nav
class="config-breadcrumb" class="config-breadcrumb"
> >
<span> <ol>
<span <li>
class="config-breadcrumb-link" <span
> class="config-breadcrumb-link"
Bamboo >
</span> Bamboo
<span </span>
class="config-breadcrumb-separator" <span
> class="config-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="config-breadcrumb-link" <span
> class="config-breadcrumb-link"
Light >
</span> Light
<span </span>
class="config-breadcrumb-separator" <span
> class="config-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
`; `;
exports[`ConfigProvider components Breadcrumb configProvider componentSize large 1`] = ` exports[`ConfigProvider components Breadcrumb configProvider componentSize large 1`] = `
<div <nav
class="config-breadcrumb" class="config-breadcrumb"
> >
<span> <ol>
<span <li>
class="config-breadcrumb-link" <span
> class="config-breadcrumb-link"
Bamboo >
</span> Bamboo
<span </span>
class="config-breadcrumb-separator" <span
> class="config-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="config-breadcrumb-link" <span
> class="config-breadcrumb-link"
Light >
</span> Light
<span </span>
class="config-breadcrumb-separator" <span
> class="config-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
`; `;
exports[`ConfigProvider components Breadcrumb configProvider componentSize middle 1`] = ` exports[`ConfigProvider components Breadcrumb configProvider componentSize middle 1`] = `
<div <nav
class="config-breadcrumb" class="config-breadcrumb"
> >
<span> <ol>
<span <li>
class="config-breadcrumb-link" <span
> class="config-breadcrumb-link"
Bamboo >
</span> Bamboo
<span </span>
class="config-breadcrumb-separator" <span
> class="config-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="config-breadcrumb-link" <span
> class="config-breadcrumb-link"
Light >
</span> Light
<span </span>
class="config-breadcrumb-separator" <span
> class="config-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
`; `;
exports[`ConfigProvider components Breadcrumb configProvider virtual and dropdownMatchSelectWidth 1`] = ` exports[`ConfigProvider components Breadcrumb configProvider virtual and dropdownMatchSelectWidth 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Bamboo >
</span> Bamboo
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Light >
</span> Light
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
`; `;
exports[`ConfigProvider components Breadcrumb normal 1`] = ` exports[`ConfigProvider components Breadcrumb normal 1`] = `
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Bamboo >
</span> Bamboo
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Light >
</span> Light
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
`; `;
exports[`ConfigProvider components Breadcrumb prefixCls 1`] = ` exports[`ConfigProvider components Breadcrumb prefixCls 1`] = `
<div <nav
class="prefix-Breadcrumb" class="prefix-Breadcrumb"
> >
<span> <ol>
<span <li>
class="prefix-Breadcrumb-link" <span
> class="prefix-Breadcrumb-link"
Bamboo >
</span> Bamboo
<span </span>
class="prefix-Breadcrumb-separator" <span
> class="prefix-Breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="prefix-Breadcrumb-link" <span
> class="prefix-Breadcrumb-link"
Light >
</span> Light
<span </span>
class="prefix-Breadcrumb-separator" <span
> class="prefix-Breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
`; `;
exports[`ConfigProvider components Button configProvider 1`] = ` exports[`ConfigProvider components Button configProvider 1`] = `

366
components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -658,47 +658,49 @@ exports[`renders ./components/layout/demo/fixed.md extend context correctly 1`]
class="ant-layout-content site-layout" class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px" style="padding:0 50px;margin-top:64px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<div <div
class="site-layout-background" class="site-layout-background"
style="padding:24px;min-height:380px" style="padding:24px;min-height:380px"
@ -2497,35 +2499,37 @@ exports[`renders ./components/layout/demo/side.md extend context correctly 1`] =
class="ant-layout-content" class="ant-layout-content"
style="margin:0 16px" style="margin:0 16px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
User >
</span> User
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Bill >
</span> Bill
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<div <div
class="site-layout-background" class="site-layout-background"
style="padding:24px;min-height:360px" style="padding:24px;min-height:360px"
@ -3458,47 +3462,49 @@ exports[`renders ./components/layout/demo/top.md extend context correctly 1`] =
class="ant-layout-content" class="ant-layout-content"
style="padding:0 50px" style="padding:0 50px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<div <div
class="site-layout-content" class="site-layout-content"
> >
@ -3757,47 +3763,49 @@ exports[`renders ./components/layout/demo/top-side.md extend context correctly 1
class="ant-layout-content" class="ant-layout-content"
style="padding:0 50px" style="padding:0 50px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<section <section
class="ant-layout site-layout-background" class="ant-layout site-layout-background"
style="padding:24px 0" style="padding:24px 0"
@ -6053,47 +6061,49 @@ exports[`renders ./components/layout/demo/top-side-2.md extend context correctly
class="ant-layout" class="ant-layout"
style="padding:0 24px 24px" style="padding:0 24px 24px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<main <main
class="ant-layout-content site-layout-background" class="ant-layout-content site-layout-background"
style="padding:24px;margin:0;min-height:280px" style="padding:24px;margin:0;min-height:280px"

366
components/layout/__tests__/__snapshots__/demo.test.js.snap
View File

@ -381,47 +381,49 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
class="ant-layout-content site-layout" class="ant-layout-content site-layout"
style="padding:0 50px;margin-top:64px" style="padding:0 50px;margin-top:64px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<div <div
class="site-layout-background" class="site-layout-background"
style="padding:24px;min-height:380px" style="padding:24px;min-height:380px"
@ -1253,35 +1255,37 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
class="ant-layout-content" class="ant-layout-content"
style="margin:0 16px" style="margin:0 16px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
User >
</span> User
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Bill >
</span> Bill
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<div <div
class="site-layout-background" class="site-layout-background"
style="padding:24px;min-height:360px" style="padding:24px;min-height:360px"
@ -1542,47 +1546,49 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
class="ant-layout-content" class="ant-layout-content"
style="padding:0 50px" style="padding:0 50px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<div <div
class="site-layout-content" class="site-layout-content"
> >
@ -1697,47 +1703,49 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
class="ant-layout-content" class="ant-layout-content"
style="padding:0 50px" style="padding:0 50px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<section <section
class="ant-layout site-layout-background" class="ant-layout site-layout-background"
style="padding:24px 0" style="padding:24px 0"
@ -2255,47 +2263,49 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
class="ant-layout" class="ant-layout"
style="padding:0 24px 24px" style="padding:0 24px 24px"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
style="margin:16px 0" style="margin:16px 0"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
Home >
</span> Home
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
List >
</span> List
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
<span> </li>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
App >
</span> App
<span </span>
class="ant-breadcrumb-separator" <span
> class="ant-breadcrumb-separator"
/ >
</span> /
</span> </span>
</div> </li>
</ol>
</nav>
<main <main
class="ant-layout-content site-layout-background" class="ant-layout-content site-layout-background"
style="padding:24px;margin:0;min-height:280px" style="padding:24px;margin:0;min-height:280px"

188
components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -455,56 +455,58 @@ exports[`renders ./components/page-header/demo/breadcrumb.md extend context corr
<div <div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost" class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
<a
href="#/index"
> >
First-level Menu <a
</a> href="#/index"
</span> >
<span First-level Menu
class="ant-breadcrumb-separator" </a>
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span> </span>
</span> <span
<span class="ant-breadcrumb-separator"
class="ant-breadcrumb-separator" >
> /
/ </span>
</span> </li>
</span> <li>
</div> <span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div <div
class="ant-page-header-heading" class="ant-page-header-heading"
> >
@ -532,56 +534,58 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
<div <div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost" class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
<a
href="#/index"
> >
First-level Menu <a
</a> href="#/index"
</span> >
<span First-level Menu
class="ant-breadcrumb-separator" </a>
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span> </span>
</span> <span
<span class="ant-breadcrumb-separator"
class="ant-breadcrumb-separator" >
> /
/ </span>
</span> </li>
</span> <li>
</div> <span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div <div
class="ant-page-header-heading" class="ant-page-header-heading"
> >

188
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -455,56 +455,58 @@ exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
<div <div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost" class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
<a
href="#/index"
> >
First-level Menu <a
</a> href="#/index"
</span> >
<span First-level Menu
class="ant-breadcrumb-separator" </a>
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span> </span>
</span> <span
<span class="ant-breadcrumb-separator"
class="ant-breadcrumb-separator" >
> /
/ </span>
</span> </li>
</span> <li>
</div> <span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div <div
class="ant-page-header-heading" class="ant-page-header-heading"
> >
@ -532,56 +534,58 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
<div <div
class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost" class="ant-page-header site-page-header has-breadcrumb ant-page-header-ghost"
> >
<div <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
<span> <ol>
<span <li>
class="ant-breadcrumb-link" <span
> class="ant-breadcrumb-link"
<a
href="#/index"
> >
First-level Menu <a
</a> href="#/index"
</span> >
<span First-level Menu
class="ant-breadcrumb-separator" </a>
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span> </span>
</span> <span
<span class="ant-breadcrumb-separator"
class="ant-breadcrumb-separator" >
> /
/ </span>
</span> </li>
</span> <li>
</div> <span
class="ant-breadcrumb-link"
>
<a
href="#/index/first"
>
Second-level Menu
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
<li>
<span
class="ant-breadcrumb-link"
>
<span>
Third-level Menu
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</li>
</ol>
</nav>
<div <div
class="ant-page-header-heading" class="ant-page-header-heading"
> >