mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +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/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`] = `
|
||||
<div
|
||||
class="ant-layout ant-layout-has-sider"
|
||||
|
||||
@ -157,6 +157,279 @@ exports[`renders components/layout/demo/basic.tsx correctly 1`] = `
|
||||
</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`] = `
|
||||
<div
|
||||
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-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/component-token.tsx" compact background="grey" debug>Component Token</code>
|
||||
|
||||
## 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-sider.tsx" iframe="360">固定侧边栏</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
|
||||
|
||||
|
||||
@ -1,43 +1,123 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook } from '../../theme/internal';
|
||||
import genLayoutLightStyle from './light';
|
||||
|
||||
export interface ComponentToken {
|
||||
/** @deprecated Use headerBg instead */
|
||||
colorBgHeader: string;
|
||||
/** @deprecated Use bodyBg instead */
|
||||
colorBgBody: string;
|
||||
/** @deprecated Use triggerBg instead */
|
||||
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'> {
|
||||
// Layout
|
||||
layoutHeaderHeight: number;
|
||||
layoutHeaderPaddingInline: number;
|
||||
layoutHeaderColor: string;
|
||||
layoutFooterPadding: string;
|
||||
layoutTriggerHeight: number;
|
||||
layoutZeroTriggerSize: number;
|
||||
}
|
||||
export interface LayoutToken extends FullToken<'Layout'> {}
|
||||
|
||||
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
const {
|
||||
antCls, // .ant
|
||||
componentCls, // .ant-layout
|
||||
colorText,
|
||||
colorTextLightSolid,
|
||||
colorBgHeader,
|
||||
colorBgBody,
|
||||
colorBgTrigger,
|
||||
layoutHeaderHeight,
|
||||
layoutHeaderPaddingInline,
|
||||
layoutHeaderColor,
|
||||
layoutFooterPadding,
|
||||
layoutTriggerHeight,
|
||||
layoutZeroTriggerSize,
|
||||
triggerColor,
|
||||
footerBg,
|
||||
triggerBg,
|
||||
headerHeight,
|
||||
headerPadding,
|
||||
headerColor,
|
||||
footerPadding,
|
||||
triggerHeight,
|
||||
zeroTriggerHeight,
|
||||
zeroTriggerWidth,
|
||||
motionDurationMid,
|
||||
motionDurationSlow,
|
||||
fontSize,
|
||||
borderRadius,
|
||||
bodyBg,
|
||||
headerBg,
|
||||
siderBg,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -48,7 +128,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
minHeight: 0,
|
||||
background: colorBgBody,
|
||||
background: bodyBg,
|
||||
|
||||
'&, *': {
|
||||
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
|
||||
minWidth: 0,
|
||||
background: colorBgHeader,
|
||||
background: siderBg,
|
||||
transition: `all ${motionDurationMid}, background 0s`,
|
||||
|
||||
'&-children': {
|
||||
@ -88,7 +168,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
},
|
||||
|
||||
'&-has-trigger': {
|
||||
paddingBottom: layoutTriggerHeight,
|
||||
paddingBottom: triggerHeight,
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
@ -99,11 +179,11 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
zIndex: 1,
|
||||
height: layoutTriggerHeight,
|
||||
color: colorTextLightSolid,
|
||||
lineHeight: `${layoutTriggerHeight}px`,
|
||||
height: triggerHeight,
|
||||
color: triggerColor,
|
||||
lineHeight: `${triggerHeight}px`,
|
||||
textAlign: 'center',
|
||||
background: colorBgTrigger,
|
||||
background: triggerBg,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationMid}`,
|
||||
},
|
||||
@ -115,17 +195,17 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
|
||||
'&-trigger': {
|
||||
position: 'absolute',
|
||||
top: layoutHeaderHeight,
|
||||
insetInlineEnd: -layoutZeroTriggerSize,
|
||||
top: headerHeight,
|
||||
insetInlineEnd: -zeroTriggerWidth,
|
||||
zIndex: 1,
|
||||
width: layoutZeroTriggerSize,
|
||||
height: layoutZeroTriggerSize,
|
||||
color: colorTextLightSolid,
|
||||
width: zeroTriggerWidth,
|
||||
height: zeroTriggerHeight,
|
||||
color: triggerColor,
|
||||
fontSize: token.fontSizeXL,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: colorBgHeader,
|
||||
background: siderBg,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
@ -143,12 +223,11 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
},
|
||||
|
||||
'&:hover::after': {
|
||||
// FIXME: Hardcode, but seems no need to create a token for this
|
||||
background: `rgba(255, 255, 255, 0.2)`,
|
||||
},
|
||||
|
||||
'&-right': {
|
||||
insetInlineStart: -layoutZeroTriggerSize,
|
||||
insetInlineStart: -zeroTriggerWidth,
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
@ -167,11 +246,11 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
|
||||
// ==================== Header ====================
|
||||
[`${componentCls}-header`]: {
|
||||
height: layoutHeaderHeight,
|
||||
paddingInline: layoutHeaderPaddingInline,
|
||||
color: layoutHeaderColor,
|
||||
lineHeight: `${layoutHeaderHeight}px`,
|
||||
background: colorBgHeader,
|
||||
height: headerHeight,
|
||||
padding: headerPadding,
|
||||
color: headerColor,
|
||||
lineHeight: `${headerHeight}px`,
|
||||
background: headerBg,
|
||||
|
||||
// Other components/menu/style/index.less line:686
|
||||
// Integration with header element so menu items have the same height
|
||||
@ -182,10 +261,10 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
|
||||
// ==================== Footer ====================
|
||||
[`${componentCls}-footer`]: {
|
||||
padding: layoutFooterPadding,
|
||||
padding: footerPadding,
|
||||
color: colorText,
|
||||
fontSize,
|
||||
background: colorBgBody,
|
||||
background: footerBg,
|
||||
},
|
||||
|
||||
// =================== Content ====================
|
||||
@ -201,29 +280,50 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Layout',
|
||||
(token) => [genLayoutStyle(token)],
|
||||
(token) => {
|
||||
const { colorText, controlHeightSM, controlHeight, controlHeightLG, marginXXS } = token;
|
||||
const layoutHeaderPaddingInline = controlHeightLG * 1.25;
|
||||
const {
|
||||
colorBgLayout,
|
||||
controlHeight,
|
||||
controlHeightLG,
|
||||
colorText,
|
||||
controlHeightSM,
|
||||
marginXXS,
|
||||
colorTextLightSolid,
|
||||
colorBgContainer,
|
||||
} = token;
|
||||
|
||||
const layoutToken = mergeToken<LayoutToken>(token, {
|
||||
// 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;
|
||||
const paddingInline = controlHeightLG * 1.25;
|
||||
|
||||
return {
|
||||
// Deprecated
|
||||
colorBgHeader: '#001529',
|
||||
colorBgBody: colorBgLayout,
|
||||
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';
|
||||
|
||||
const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
|
||||
const { componentCls, colorBgContainer, colorBgBody, colorText } = token;
|
||||
const { componentCls, bodyBg, lightSiderBg, lightTriggerBg, lightTriggerColor } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-sider-light`]: {
|
||||
background: colorBgContainer,
|
||||
background: lightSiderBg,
|
||||
|
||||
[`${componentCls}-sider-trigger`]: {
|
||||
color: colorText,
|
||||
background: colorBgContainer,
|
||||
color: lightTriggerColor,
|
||||
background: lightTriggerBg,
|
||||
},
|
||||
|
||||
[`${componentCls}-sider-zero-width-trigger`]: {
|
||||
color: colorText,
|
||||
background: colorBgContainer,
|
||||
border: `1px solid ${colorBgBody}`, // Safe to modify to any other color
|
||||
color: lightTriggerColor,
|
||||
background: lightTriggerBg,
|
||||
border: `1px solid ${bodyBg}`, // Safe to modify to any other color
|
||||
borderInlineStart: 0,
|
||||
},
|
||||
},
|
||||
|
||||
@ -276,7 +276,27 @@ export default App;
|
||||
|
||||
<!-- ### 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
|
||||
|
||||
|
||||
@ -273,7 +273,27 @@ export default App;
|
||||
|
||||
<!-- ### 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 列表
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user