mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
feat: layout token (#44174)
* feat: layout token * feat: layout component token
This commit is contained in:
MadCcc
GitHub
parent
1c1ebbe36d
commit
a5203ebb80
@ -159,6 +159,965 @@ exports[`renders components/layout/demo/basic.tsx extend context correctly 1`] =
|
|||||||
|
|
||||||
exports[`renders components/layout/demo/basic.tsx extend context correctly 2`] = `[]`;
|
exports[`renders components/layout/demo/basic.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
|
exports[`renders components/layout/demo/component-token.tsx extend context correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-layout"
|
||||||
|
>
|
||||||
|
<header
|
||||||
|
class="ant-layout-header"
|
||||||
|
style="display: flex; align-items: center;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="demo-logo"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="margin-left: 24px; font-size: 24px;"
|
||||||
|
>
|
||||||
|
Ant Design
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div
|
||||||
|
class="ant-layout ant-layout-has-sider"
|
||||||
|
>
|
||||||
|
<aside
|
||||||
|
class="ant-layout-sider ant-layout-sider-dark"
|
||||||
|
style="background: rgb(255, 255, 255); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-layout-sider-children"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||||
|
data-menu-list="true"
|
||||||
|
role="menu"
|
||||||
|
style="height: 100%; border-right: 0;"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-controls="rc-menu-uuid-test-sub1-popup"
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
data-menu-id="rc-menu-uuid-test-sub1"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 24px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="user"
|
||||||
|
class="anticon anticon-user ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="user"
|
||||||
|
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
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
subnav 1
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-inline"
|
||||||
|
data-menu-list="true"
|
||||||
|
id="rc-menu-uuid-test-sub1-popup"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-1"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option1
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-2"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option2
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-3"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option3
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-4"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option4
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-inline"
|
||||||
|
data-menu-list="true"
|
||||||
|
id="rc-menu-uuid-test-sub1-popup"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-1"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option1
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-2"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option2
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-3"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option3
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-4"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option4
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-controls="rc-menu-uuid-test-sub2-popup"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
data-menu-id="rc-menu-uuid-test-sub2"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 24px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="laptop"
|
||||||
|
class="anticon anticon-laptop ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="laptop"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
subnav 2
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-inline"
|
||||||
|
data-menu-list="true"
|
||||||
|
id="rc-menu-uuid-test-sub2-popup"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-5"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option5
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-6"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option6
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-7"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option7
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-8"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option8
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-controls="rc-menu-uuid-test-sub3-popup"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
data-menu-id="rc-menu-uuid-test-sub3"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 24px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="notification"
|
||||||
|
class="anticon anticon-notification ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="notification"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
subnav 3
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-inline"
|
||||||
|
data-menu-list="true"
|
||||||
|
id="rc-menu-uuid-test-sub3-popup"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-9"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option9
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-10"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option10
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-11"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option11
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
data-menu-id="rc-menu-uuid-test-12"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left: 48px;"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option12
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
style="display: none;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; top: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<div
|
||||||
|
class="ant-layout"
|
||||||
|
style="padding: 0px 24px 24px;"
|
||||||
|
>
|
||||||
|
<nav
|
||||||
|
class="ant-breadcrumb"
|
||||||
|
style="margin: 16px 0px;"
|
||||||
|
>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
class="ant-breadcrumb-link"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-breadcrumb-separator"
|
||||||
|
>
|
||||||
|
/
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
class="ant-breadcrumb-link"
|
||||||
|
>
|
||||||
|
List
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-breadcrumb-separator"
|
||||||
|
>
|
||||||
|
/
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
class="ant-breadcrumb-link"
|
||||||
|
>
|
||||||
|
App
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<main
|
||||||
|
class="ant-layout-content"
|
||||||
|
style="padding: 24px; margin: 0px; min-height: 280px; background: rgb(255, 255, 255);"
|
||||||
|
>
|
||||||
|
Content
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/layout/demo/component-token.tsx extend context correctly 2`] = `
|
||||||
|
[
|
||||||
|
"Warning: [antd: Breadcrumb] \`Breadcrumb.Item and Breadcrumb.Separator\` is deprecated. Please use \`items\` instead.",
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders components/layout/demo/custom-trigger.tsx extend context correctly 1`] = `
|
exports[`renders components/layout/demo/custom-trigger.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-layout ant-layout-has-sider"
|
class="ant-layout ant-layout-has-sider"
|
||||||
|
|||||||
@ -157,6 +157,279 @@ exports[`renders components/layout/demo/basic.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-layout"
|
||||||
|
>
|
||||||
|
<header
|
||||||
|
class="ant-layout-header"
|
||||||
|
style="display:flex;align-items:center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="demo-logo"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="margin-left:24px;font-size:24px"
|
||||||
|
>
|
||||||
|
Ant Design
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div
|
||||||
|
class="ant-layout"
|
||||||
|
>
|
||||||
|
<aside
|
||||||
|
class="ant-layout-sider ant-layout-sider-dark"
|
||||||
|
style="background:#ffffff;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-layout-sider-children"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
|
||||||
|
data-menu-list="true"
|
||||||
|
role="menu"
|
||||||
|
style="height:100%;border-right:0"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="user"
|
||||||
|
class="anticon anticon-user ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="user"
|
||||||
|
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
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
subnav 1
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="ant-menu ant-menu-sub ant-menu-inline"
|
||||||
|
data-menu-list="true"
|
||||||
|
role="menu"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:48px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option1
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:48px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option2
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:48px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option3
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-item ant-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:48px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
option4
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="laptop"
|
||||||
|
class="anticon anticon-laptop ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="laptop"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
subnav 2
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-menu-submenu ant-menu-submenu-inline"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true"
|
||||||
|
class="ant-menu-submenu-title"
|
||||||
|
role="menuitem"
|
||||||
|
style="padding-left:24px"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="notification"
|
||||||
|
class="anticon anticon-notification ant-menu-item-icon"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
data-icon="notification"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-menu-title-content"
|
||||||
|
>
|
||||||
|
subnav 3
|
||||||
|
</span>
|
||||||
|
<i
|
||||||
|
class="ant-menu-submenu-arrow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
style="display:none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<div
|
||||||
|
class="ant-layout"
|
||||||
|
style="padding:0 24px 24px"
|
||||||
|
>
|
||||||
|
<nav
|
||||||
|
class="ant-breadcrumb"
|
||||||
|
style="margin:16px 0"
|
||||||
|
>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
class="ant-breadcrumb-link"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-breadcrumb-separator"
|
||||||
|
>
|
||||||
|
/
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
class="ant-breadcrumb-link"
|
||||||
|
>
|
||||||
|
List
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
aria-hidden="true"
|
||||||
|
class="ant-breadcrumb-separator"
|
||||||
|
>
|
||||||
|
/
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span
|
||||||
|
class="ant-breadcrumb-link"
|
||||||
|
>
|
||||||
|
App
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<main
|
||||||
|
class="ant-layout-content"
|
||||||
|
style="padding:24px;margin:0;min-height:280px;background:#ffffff"
|
||||||
|
>
|
||||||
|
Content
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders components/layout/demo/custom-trigger.tsx correctly 1`] = `
|
exports[`renders components/layout/demo/custom-trigger.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-layout"
|
class="ant-layout"
|
||||||
|
|||||||
7
components/layout/demo/component-token.md
Normal file
7
components/layout/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
组件 Token
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Component Token
|
||||||
86
components/layout/demo/component-token.tsx
Normal file
86
components/layout/demo/component-token.tsx
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
|
||||||
|
import type { MenuProps } from 'antd';
|
||||||
|
import { Breadcrumb, ConfigProvider, Layout, Menu, theme } from 'antd';
|
||||||
|
|
||||||
|
const { Header, Content, Sider } = Layout;
|
||||||
|
|
||||||
|
const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
|
||||||
|
(icon, index) => {
|
||||||
|
const key = String(index + 1);
|
||||||
|
|
||||||
|
return {
|
||||||
|
key: `sub${key}`,
|
||||||
|
icon: React.createElement(icon),
|
||||||
|
label: `subnav ${key}`,
|
||||||
|
|
||||||
|
children: new Array(4).fill(null).map((_, j) => {
|
||||||
|
const subKey = index * 4 + j + 1;
|
||||||
|
return {
|
||||||
|
key: subKey,
|
||||||
|
label: `option${subKey}`,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
const {
|
||||||
|
token: { colorBgContainer },
|
||||||
|
} = theme.useToken();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
components: {
|
||||||
|
Layout: {
|
||||||
|
bodyBg: '#fff',
|
||||||
|
headerBg: '#1677ff',
|
||||||
|
headerHeight: 64,
|
||||||
|
headerPadding: `0 24px`,
|
||||||
|
headerColor: '#fff',
|
||||||
|
siderBg: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Layout>
|
||||||
|
<Header style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<div className="demo-logo" />
|
||||||
|
<div style={{ marginLeft: 24, fontSize: 24 }}>Ant Design</div>
|
||||||
|
</Header>
|
||||||
|
<Layout>
|
||||||
|
<Sider width={200} style={{ background: colorBgContainer }}>
|
||||||
|
<Menu
|
||||||
|
mode="inline"
|
||||||
|
defaultSelectedKeys={['1']}
|
||||||
|
defaultOpenKeys={['sub1']}
|
||||||
|
style={{ height: '100%', borderRight: 0 }}
|
||||||
|
items={items2}
|
||||||
|
/>
|
||||||
|
</Sider>
|
||||||
|
<Layout style={{ padding: '0 24px 24px' }}>
|
||||||
|
<Breadcrumb style={{ margin: '16px 0' }}>
|
||||||
|
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>List</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Item>App</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>
|
||||||
|
<Content
|
||||||
|
style={{
|
||||||
|
padding: 24,
|
||||||
|
margin: 0,
|
||||||
|
minHeight: 280,
|
||||||
|
background: colorBgContainer,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Content
|
||||||
|
</Content>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
@ -69,6 +69,7 @@ Style of a navigation should conform to its level.
|
|||||||
<code src="./demo/fixed.tsx" iframe="360">Fixed Header</code>
|
<code src="./demo/fixed.tsx" iframe="360">Fixed Header</code>
|
||||||
<code src="./demo/fixed-sider.tsx" iframe="360">Fixed Sider</code>
|
<code src="./demo/fixed-sider.tsx" iframe="360">Fixed Sider</code>
|
||||||
<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>Custom trigger debug</code>
|
<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>Custom trigger debug</code>
|
||||||
|
<code src="./demo/component-token.tsx" compact background="grey" debug>Component Token</code>
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
|
|||||||
@ -70,6 +70,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
|
|||||||
<code src="./demo/fixed.tsx" iframe="360">固定头部</code>
|
<code src="./demo/fixed.tsx" iframe="360">固定头部</code>
|
||||||
<code src="./demo/fixed-sider.tsx" iframe="360">固定侧边栏</code>
|
<code src="./demo/fixed-sider.tsx" iframe="360">固定侧边栏</code>
|
||||||
<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>自定义触发器 Debug</code>
|
<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>自定义触发器 Debug</code>
|
||||||
|
<code src="./demo/component-token.tsx" compact background="grey" debug>组件 Token</code>
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
|
|||||||
@ -1,43 +1,123 @@
|
|||||||
import type { CSSObject } from '@ant-design/cssinjs';
|
import type { CSSObject } from '@ant-design/cssinjs';
|
||||||
|
import type { CSSProperties } from 'react';
|
||||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
import { genComponentStyleHook } from '../../theme/internal';
|
||||||
import genLayoutLightStyle from './light';
|
import genLayoutLightStyle from './light';
|
||||||
|
|
||||||
export interface ComponentToken {
|
export interface ComponentToken {
|
||||||
|
/** @deprecated Use headerBg instead */
|
||||||
colorBgHeader: string;
|
colorBgHeader: string;
|
||||||
|
/** @deprecated Use bodyBg instead */
|
||||||
colorBgBody: string;
|
colorBgBody: string;
|
||||||
|
/** @deprecated Use triggerBg instead */
|
||||||
colorBgTrigger: string;
|
colorBgTrigger: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @desc 主体部分背景色
|
||||||
|
* @descEN Background Color of body
|
||||||
|
*/
|
||||||
|
bodyBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 顶部背景色
|
||||||
|
* @descEN Background Color of header
|
||||||
|
*/
|
||||||
|
headerBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 顶部高度
|
||||||
|
* @descEN Height of header
|
||||||
|
*/
|
||||||
|
headerHeight: number;
|
||||||
|
/**
|
||||||
|
* @desc 顶部内边距
|
||||||
|
* @descEN Padding of header
|
||||||
|
*/
|
||||||
|
headerPadding: CSSProperties['padding'];
|
||||||
|
/**
|
||||||
|
* @desc 顶部文字颜色
|
||||||
|
* @descEN Text color of header
|
||||||
|
*/
|
||||||
|
headerColor: string;
|
||||||
|
/**
|
||||||
|
* @desc 页脚内边距
|
||||||
|
* @descEN Padding of footer
|
||||||
|
*/
|
||||||
|
footerPadding: CSSProperties['padding'];
|
||||||
|
/**
|
||||||
|
* @desc 页脚背景色
|
||||||
|
* @descEN Background Color of footer
|
||||||
|
*/
|
||||||
|
footerBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 侧边栏背景色
|
||||||
|
* @descEN Background Color of sider
|
||||||
|
*/
|
||||||
|
siderBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 侧边栏开关高度
|
||||||
|
* @descEN Height of sider trigger
|
||||||
|
*/
|
||||||
|
triggerHeight: number;
|
||||||
|
/**
|
||||||
|
* @desc 侧边栏开关背景色
|
||||||
|
* @descEN Background Color of sider trigger
|
||||||
|
*/
|
||||||
|
triggerBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 侧边栏开关颜色
|
||||||
|
* @descEN Color of sider trigger
|
||||||
|
*/
|
||||||
|
triggerColor: string;
|
||||||
|
/**
|
||||||
|
* @desc collapse 为 0 时侧边栏开关宽度
|
||||||
|
* @descEN Width of sider trigger when collapse is 0
|
||||||
|
*/
|
||||||
|
zeroTriggerWidth: number;
|
||||||
|
/**
|
||||||
|
* @desc collapse 为 0 时侧边栏开关高度
|
||||||
|
* @descEN Height of sider trigger when collapse is 0
|
||||||
|
*/
|
||||||
|
zeroTriggerHeight: number;
|
||||||
|
/**
|
||||||
|
* @desc 亮色主题侧边栏背景色
|
||||||
|
* @descEN Background Color of light theme sider
|
||||||
|
*/
|
||||||
|
lightSiderBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 亮色主题侧边栏开关背景色
|
||||||
|
* @descEN Background Color of light theme sider trigger
|
||||||
|
*/
|
||||||
|
lightTriggerBg: string;
|
||||||
|
/**
|
||||||
|
* @desc 亮色主题侧边栏开关颜色
|
||||||
|
* @descEN Color of light theme sider trigger
|
||||||
|
*/
|
||||||
|
lightTriggerColor: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LayoutToken extends FullToken<'Layout'> {
|
export interface LayoutToken extends FullToken<'Layout'> {}
|
||||||
// Layout
|
|
||||||
layoutHeaderHeight: number;
|
|
||||||
layoutHeaderPaddingInline: number;
|
|
||||||
layoutHeaderColor: string;
|
|
||||||
layoutFooterPadding: string;
|
|
||||||
layoutTriggerHeight: number;
|
|
||||||
layoutZeroTriggerSize: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||||
const {
|
const {
|
||||||
antCls, // .ant
|
antCls, // .ant
|
||||||
componentCls, // .ant-layout
|
componentCls, // .ant-layout
|
||||||
colorText,
|
colorText,
|
||||||
colorTextLightSolid,
|
triggerColor,
|
||||||
colorBgHeader,
|
footerBg,
|
||||||
colorBgBody,
|
triggerBg,
|
||||||
colorBgTrigger,
|
headerHeight,
|
||||||
layoutHeaderHeight,
|
headerPadding,
|
||||||
layoutHeaderPaddingInline,
|
headerColor,
|
||||||
layoutHeaderColor,
|
footerPadding,
|
||||||
layoutFooterPadding,
|
triggerHeight,
|
||||||
layoutTriggerHeight,
|
zeroTriggerHeight,
|
||||||
layoutZeroTriggerSize,
|
zeroTriggerWidth,
|
||||||
motionDurationMid,
|
motionDurationMid,
|
||||||
motionDurationSlow,
|
motionDurationSlow,
|
||||||
fontSize,
|
fontSize,
|
||||||
borderRadius,
|
borderRadius,
|
||||||
|
bodyBg,
|
||||||
|
headerBg,
|
||||||
|
siderBg,
|
||||||
} = token;
|
} = token;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -48,7 +128,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
|
|
||||||
/* fix firefox can't set height smaller than content on flex item */
|
/* fix firefox can't set height smaller than content on flex item */
|
||||||
minHeight: 0,
|
minHeight: 0,
|
||||||
background: colorBgBody,
|
background: bodyBg,
|
||||||
|
|
||||||
'&, *': {
|
'&, *': {
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
@ -71,7 +151,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
|
|
||||||
// fix firefox can't set width smaller than content on flex item
|
// fix firefox can't set width smaller than content on flex item
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
background: colorBgHeader,
|
background: siderBg,
|
||||||
transition: `all ${motionDurationMid}, background 0s`,
|
transition: `all ${motionDurationMid}, background 0s`,
|
||||||
|
|
||||||
'&-children': {
|
'&-children': {
|
||||||
@ -88,7 +168,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
},
|
},
|
||||||
|
|
||||||
'&-has-trigger': {
|
'&-has-trigger': {
|
||||||
paddingBottom: layoutTriggerHeight,
|
paddingBottom: triggerHeight,
|
||||||
},
|
},
|
||||||
|
|
||||||
'&-right': {
|
'&-right': {
|
||||||
@ -99,11 +179,11 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
height: layoutTriggerHeight,
|
height: triggerHeight,
|
||||||
color: colorTextLightSolid,
|
color: triggerColor,
|
||||||
lineHeight: `${layoutTriggerHeight}px`,
|
lineHeight: `${triggerHeight}px`,
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
background: colorBgTrigger,
|
background: triggerBg,
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
transition: `all ${motionDurationMid}`,
|
transition: `all ${motionDurationMid}`,
|
||||||
},
|
},
|
||||||
@ -115,17 +195,17 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
|
|
||||||
'&-trigger': {
|
'&-trigger': {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: layoutHeaderHeight,
|
top: headerHeight,
|
||||||
insetInlineEnd: -layoutZeroTriggerSize,
|
insetInlineEnd: -zeroTriggerWidth,
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
width: layoutZeroTriggerSize,
|
width: zeroTriggerWidth,
|
||||||
height: layoutZeroTriggerSize,
|
height: zeroTriggerHeight,
|
||||||
color: colorTextLightSolid,
|
color: triggerColor,
|
||||||
fontSize: token.fontSizeXL,
|
fontSize: token.fontSizeXL,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
background: colorBgHeader,
|
background: siderBg,
|
||||||
borderStartStartRadius: 0,
|
borderStartStartRadius: 0,
|
||||||
borderStartEndRadius: borderRadius,
|
borderStartEndRadius: borderRadius,
|
||||||
borderEndEndRadius: borderRadius,
|
borderEndEndRadius: borderRadius,
|
||||||
@ -143,12 +223,11 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
},
|
},
|
||||||
|
|
||||||
'&:hover::after': {
|
'&:hover::after': {
|
||||||
// FIXME: Hardcode, but seems no need to create a token for this
|
|
||||||
background: `rgba(255, 255, 255, 0.2)`,
|
background: `rgba(255, 255, 255, 0.2)`,
|
||||||
},
|
},
|
||||||
|
|
||||||
'&-right': {
|
'&-right': {
|
||||||
insetInlineStart: -layoutZeroTriggerSize,
|
insetInlineStart: -zeroTriggerWidth,
|
||||||
borderStartStartRadius: borderRadius,
|
borderStartStartRadius: borderRadius,
|
||||||
borderStartEndRadius: 0,
|
borderStartEndRadius: 0,
|
||||||
borderEndEndRadius: 0,
|
borderEndEndRadius: 0,
|
||||||
@ -167,11 +246,11 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
|
|
||||||
// ==================== Header ====================
|
// ==================== Header ====================
|
||||||
[`${componentCls}-header`]: {
|
[`${componentCls}-header`]: {
|
||||||
height: layoutHeaderHeight,
|
height: headerHeight,
|
||||||
paddingInline: layoutHeaderPaddingInline,
|
padding: headerPadding,
|
||||||
color: layoutHeaderColor,
|
color: headerColor,
|
||||||
lineHeight: `${layoutHeaderHeight}px`,
|
lineHeight: `${headerHeight}px`,
|
||||||
background: colorBgHeader,
|
background: headerBg,
|
||||||
|
|
||||||
// Other components/menu/style/index.less line:686
|
// Other components/menu/style/index.less line:686
|
||||||
// Integration with header element so menu items have the same height
|
// Integration with header element so menu items have the same height
|
||||||
@ -182,10 +261,10 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
|
|
||||||
// ==================== Footer ====================
|
// ==================== Footer ====================
|
||||||
[`${componentCls}-footer`]: {
|
[`${componentCls}-footer`]: {
|
||||||
padding: layoutFooterPadding,
|
padding: footerPadding,
|
||||||
color: colorText,
|
color: colorText,
|
||||||
fontSize,
|
fontSize,
|
||||||
background: colorBgBody,
|
background: footerBg,
|
||||||
},
|
},
|
||||||
|
|
||||||
// =================== Content ====================
|
// =================== Content ====================
|
||||||
@ -201,29 +280,50 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
|||||||
// ============================== Export ==============================
|
// ============================== Export ==============================
|
||||||
export default genComponentStyleHook(
|
export default genComponentStyleHook(
|
||||||
'Layout',
|
'Layout',
|
||||||
|
(token) => [genLayoutStyle(token)],
|
||||||
(token) => {
|
(token) => {
|
||||||
const { colorText, controlHeightSM, controlHeight, controlHeightLG, marginXXS } = token;
|
const {
|
||||||
const layoutHeaderPaddingInline = controlHeightLG * 1.25;
|
colorBgLayout,
|
||||||
|
controlHeight,
|
||||||
|
controlHeightLG,
|
||||||
|
colorText,
|
||||||
|
controlHeightSM,
|
||||||
|
marginXXS,
|
||||||
|
colorTextLightSolid,
|
||||||
|
colorBgContainer,
|
||||||
|
} = token;
|
||||||
|
|
||||||
const layoutToken = mergeToken<LayoutToken>(token, {
|
const paddingInline = controlHeightLG * 1.25;
|
||||||
// Layout
|
|
||||||
layoutHeaderHeight: controlHeight * 2,
|
|
||||||
layoutHeaderPaddingInline,
|
|
||||||
layoutHeaderColor: colorText,
|
|
||||||
layoutFooterPadding: `${controlHeightSM}px ${layoutHeaderPaddingInline}px`,
|
|
||||||
layoutTriggerHeight: controlHeightLG + marginXXS * 2, // = item height + margin
|
|
||||||
layoutZeroTriggerSize: controlHeightLG,
|
|
||||||
});
|
|
||||||
|
|
||||||
return [genLayoutStyle(layoutToken)];
|
|
||||||
},
|
|
||||||
(token) => {
|
|
||||||
const { colorBgLayout } = token;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
// Deprecated
|
||||||
colorBgHeader: '#001529',
|
colorBgHeader: '#001529',
|
||||||
colorBgBody: colorBgLayout,
|
colorBgBody: colorBgLayout,
|
||||||
colorBgTrigger: '#002140',
|
colorBgTrigger: '#002140',
|
||||||
|
|
||||||
|
bodyBg: colorBgLayout,
|
||||||
|
headerBg: '#001529',
|
||||||
|
headerHeight: controlHeight * 2,
|
||||||
|
headerPadding: `0 ${paddingInline}px`,
|
||||||
|
headerColor: colorText,
|
||||||
|
footerPadding: `${controlHeightSM}px ${paddingInline}px`,
|
||||||
|
footerBg: colorBgLayout,
|
||||||
|
siderBg: '#001529',
|
||||||
|
triggerHeight: controlHeightLG + marginXXS * 2,
|
||||||
|
triggerBg: '#002140',
|
||||||
|
triggerColor: colorTextLightSolid,
|
||||||
|
zeroTriggerWidth: controlHeightLG,
|
||||||
|
zeroTriggerHeight: controlHeightLG,
|
||||||
|
lightSiderBg: colorBgContainer,
|
||||||
|
lightTriggerBg: colorBgContainer,
|
||||||
|
lightTriggerColor: colorText,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
deprecatedTokens: [
|
||||||
|
['colorBgBody', 'bodyBg'],
|
||||||
|
['colorBgHeader', 'headerBg'],
|
||||||
|
['colorBgTrigger', 'triggerBg'],
|
||||||
|
],
|
||||||
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
@ -3,21 +3,21 @@ import type { LayoutToken } from '.';
|
|||||||
import type { GenerateStyle } from '../../theme/internal';
|
import type { GenerateStyle } from '../../theme/internal';
|
||||||
|
|
||||||
const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||||
const { componentCls, colorBgContainer, colorBgBody, colorText } = token;
|
const { componentCls, bodyBg, lightSiderBg, lightTriggerBg, lightTriggerColor } = token;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
[`${componentCls}-sider-light`]: {
|
[`${componentCls}-sider-light`]: {
|
||||||
background: colorBgContainer,
|
background: lightSiderBg,
|
||||||
|
|
||||||
[`${componentCls}-sider-trigger`]: {
|
[`${componentCls}-sider-trigger`]: {
|
||||||
color: colorText,
|
color: lightTriggerColor,
|
||||||
background: colorBgContainer,
|
background: lightTriggerBg,
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${componentCls}-sider-zero-width-trigger`]: {
|
[`${componentCls}-sider-zero-width-trigger`]: {
|
||||||
color: colorText,
|
color: lightTriggerColor,
|
||||||
background: colorBgContainer,
|
background: lightTriggerBg,
|
||||||
border: `1px solid ${colorBgBody}`, // Safe to modify to any other color
|
border: `1px solid ${bodyBg}`, // Safe to modify to any other color
|
||||||
borderInlineStart: 0,
|
borderInlineStart: 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -276,7 +276,27 @@ export default App;
|
|||||||
|
|
||||||
<!-- ### Input -->
|
<!-- ### Input -->
|
||||||
|
|
||||||
<!-- ### Layout -->
|
### Layout
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
| Less variables | Component Token | Note |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `@layout-body-background` | `bodyBg` | - |
|
||||||
|
| `@layout-header-background` | `headerBg` | - |
|
||||||
|
| `@layout-header-height` | `headerHeight` | - |
|
||||||
|
| `@layout-header-padding` | `headerPadding` | - |
|
||||||
|
| `@layout-header-color` | `headerColor` | - |
|
||||||
|
| `@layout-footer-padding` | `footerPadding` | - |
|
||||||
|
| `@layout-footer-background` | `footerBg` | - |
|
||||||
|
| `@layout-sider-background` | `siderBg` | - |
|
||||||
|
| `@layout-trigger-height` | `triggerHeight` | - |
|
||||||
|
| `@layout-trigger-background` | `triggerBg` | - |
|
||||||
|
| `@layout-trigger-color` | `triggerColor` | - |
|
||||||
|
| `@layout-zero-trigger-width` | `zeroTriggerWidth` | - |
|
||||||
|
| `@layout-zero-trigger-height` | `zeroTriggerHeight` | - |
|
||||||
|
| `@layout-sider-background-light` | `lightSiderBg` | - |
|
||||||
|
| `@layout-trigger-background-light` | `lightTriggerBg` | - |
|
||||||
|
| `@layout-trigger-color-light` | `lightTriggerColor` | - |
|
||||||
|
|
||||||
### List
|
### List
|
||||||
|
|
||||||
|
|||||||
@ -273,7 +273,27 @@ export default App;
|
|||||||
|
|
||||||
<!-- ### Input 输入框 -->
|
<!-- ### Input 输入框 -->
|
||||||
|
|
||||||
<!-- ### Layout 布局 -->
|
### Layout 布局
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
| less 变量 | Component Token | 备注 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `@layout-body-background` | `bodyBg` | - |
|
||||||
|
| `@layout-header-background` | `headerBg` | - |
|
||||||
|
| `@layout-header-height` | `headerHeight` | - |
|
||||||
|
| `@layout-header-padding` | `headerPadding` | - |
|
||||||
|
| `@layout-header-color` | `headerColor` | - |
|
||||||
|
| `@layout-footer-padding` | `footerPadding` | - |
|
||||||
|
| `@layout-footer-background` | `footerBg` | - |
|
||||||
|
| `@layout-sider-background` | `siderBg` | - |
|
||||||
|
| `@layout-trigger-height` | `triggerHeight` | - |
|
||||||
|
| `@layout-trigger-background` | `triggerBg` | - |
|
||||||
|
| `@layout-trigger-color` | `triggerColor` | - |
|
||||||
|
| `@layout-zero-trigger-width` | `zeroTriggerWidth` | - |
|
||||||
|
| `@layout-zero-trigger-height` | `zeroTriggerHeight` | - |
|
||||||
|
| `@layout-sider-background-light` | `lightSiderBg` | - |
|
||||||
|
| `@layout-trigger-background-light` | `lightTriggerBg` | - |
|
||||||
|
| `@layout-trigger-color-light` | `lightTriggerColor` | - |
|
||||||
|
|
||||||
### List 列表
|
### List 列表
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user