mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
🎬 improve Tree showLine demo
This commit is contained in:
afc163
偏右
parent
0a5ec6713c
commit
b02d80d60f
@ -1538,302 +1538,462 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||||
<ul
|
<div>
|
||||||
class="ant-tree ant-tree-icon-hide ant-tree-show-line"
|
<div
|
||||||
role="tree"
|
style="margin-bottom:16px"
|
||||||
unselectable="on"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="ant-tree-treenode-switcher-open"
|
|
||||||
role="treeitem"
|
|
||||||
>
|
>
|
||||||
<span
|
showLine:
|
||||||
class="ant-tree-switcher ant-tree-switcher_open"
|
<button
|
||||||
>
|
aria-checked="true"
|
||||||
<i
|
checked=""
|
||||||
aria-label="icon: minus-square"
|
class="ant-switch ant-switch-checked"
|
||||||
class="anticon anticon-minus-square ant-tree-switcher-line-icon"
|
role="switch"
|
||||||
>
|
type="button"
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
data-icon="minus-square"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
|
||||||
title="parent 1"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-tree-title"
|
class="ant-switch-inner"
|
||||||
>
|
/>
|
||||||
parent 1
|
</button>
|
||||||
</span>
|
<br />
|
||||||
</span>
|
<br />
|
||||||
<ul
|
showIcon:
|
||||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
<button
|
||||||
data-expanded="true"
|
aria-checked="false"
|
||||||
role="group"
|
class="ant-switch"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<li
|
<span
|
||||||
class="ant-tree-treenode-switcher-open"
|
class="ant-switch-inner"
|
||||||
role="treeitem"
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul
|
||||||
|
class="ant-tree ant-tree-icon-hide ant-tree-show-line"
|
||||||
|
role="tree"
|
||||||
|
unselectable="on"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-open"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher_open"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: minus-square"
|
||||||
|
class="anticon anticon-minus-square ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="minus-square"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
||||||
|
title="parent 1"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-tree-switcher ant-tree-switcher_open"
|
class="ant-tree-title"
|
||||||
>
|
>
|
||||||
<i
|
parent 1
|
||||||
aria-label="icon: minus-square"
|
|
||||||
class="anticon anticon-minus-square ant-tree-switcher-line-icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
data-icon="minus-square"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</span>
|
||||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
<ul
|
||||||
title="parent 1-0"
|
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||||
>
|
data-expanded="true"
|
||||||
<span
|
role="group"
|
||||||
class="ant-tree-title"
|
|
||||||
>
|
|
||||||
parent 1-0
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<ul
|
|
||||||
class="ant-tree-child-tree ant-tree-child-tree-open"
|
|
||||||
data-expanded="true"
|
|
||||||
role="group"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="ant-tree-treenode-switcher-close"
|
|
||||||
role="treeitem"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
aria-label="icon: file"
|
|
||||||
class="anticon anticon-file ant-tree-switcher-line-icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
data-icon="file"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
|
||||||
title="leaf"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tree-title"
|
|
||||||
>
|
|
||||||
leaf
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="ant-tree-treenode-switcher-close"
|
|
||||||
role="treeitem"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
aria-label="icon: file"
|
|
||||||
class="anticon anticon-file ant-tree-switcher-line-icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
data-icon="file"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
|
||||||
title="leaf"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tree-title"
|
|
||||||
>
|
|
||||||
leaf
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="ant-tree-treenode-switcher-close"
|
|
||||||
role="treeitem"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
aria-label="icon: file"
|
|
||||||
class="anticon anticon-file ant-tree-switcher-line-icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
data-icon="file"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
|
||||||
title="leaf"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tree-title"
|
|
||||||
>
|
|
||||||
leaf
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="ant-tree-treenode-switcher-close"
|
|
||||||
role="treeitem"
|
|
||||||
>
|
>
|
||||||
<span
|
<li
|
||||||
class="ant-tree-switcher ant-tree-switcher_close"
|
class="ant-tree-treenode-switcher-open"
|
||||||
>
|
role="treeitem"
|
||||||
<i
|
|
||||||
aria-label="icon: plus-square"
|
|
||||||
class="anticon anticon-plus-square ant-tree-switcher-line-icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
data-icon="plus-square"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</i>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
|
|
||||||
title="parent 1-1"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-tree-title"
|
class="ant-tree-switcher ant-tree-switcher_open"
|
||||||
>
|
>
|
||||||
parent 1-1
|
<i
|
||||||
</span>
|
aria-label="icon: minus-square"
|
||||||
</span>
|
class="anticon anticon-minus-square ant-tree-switcher-line-icon"
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="ant-tree-treenode-switcher-close"
|
|
||||||
role="treeitem"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tree-switcher ant-tree-switcher_close"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
aria-label="icon: plus-square"
|
|
||||||
class="anticon anticon-plus-square ant-tree-switcher-line-icon"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class=""
|
|
||||||
data-icon="plus-square"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
aria-hidden="true"
|
||||||
/>
|
class=""
|
||||||
<path
|
data-icon="minus-square"
|
||||||
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
fill="currentColor"
|
||||||
/>
|
focusable="false"
|
||||||
</svg>
|
height="1em"
|
||||||
</i>
|
viewBox="64 64 896 896"
|
||||||
</span>
|
width="1em"
|
||||||
<span
|
>
|
||||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close"
|
<path
|
||||||
title="parent 1-2"
|
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
||||||
|
title="parent 1-0"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
parent 1-0
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<ul
|
||||||
|
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||||
|
data-expanded="true"
|
||||||
|
role="group"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-close"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: file"
|
||||||
|
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="file"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||||
|
title="leaf"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
leaf
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-close"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: file"
|
||||||
|
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="file"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||||
|
title="leaf"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
leaf
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-close"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: file"
|
||||||
|
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="file"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||||
|
title="leaf"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
leaf
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-open"
|
||||||
|
role="treeitem"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-tree-title"
|
class="ant-tree-switcher ant-tree-switcher_open"
|
||||||
>
|
>
|
||||||
parent 1-2
|
<i
|
||||||
|
aria-label="icon: minus-square"
|
||||||
|
class="anticon anticon-minus-square ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="minus-square"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
<span
|
||||||
</li>
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
||||||
</ul>
|
title="parent 1-1"
|
||||||
</li>
|
>
|
||||||
</ul>
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
parent 1-1
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<ul
|
||||||
|
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||||
|
data-expanded="true"
|
||||||
|
role="group"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-close"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: file"
|
||||||
|
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="file"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||||
|
title="leaf"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
leaf
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-open"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher_open"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: minus-square"
|
||||||
|
class="anticon anticon-minus-square ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="minus-square"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
|
||||||
|
title="parent 1-2"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
parent 1-2
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<ul
|
||||||
|
class="ant-tree-child-tree ant-tree-child-tree-open"
|
||||||
|
data-expanded="true"
|
||||||
|
role="group"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-close"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: file"
|
||||||
|
class="anticon anticon-file ant-tree-switcher-line-icon"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="file"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||||
|
title="leaf"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
leaf
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="ant-tree-treenode-switcher-close"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
aria-label="icon: form"
|
||||||
|
class="anticon anticon-form"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="form"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M904 512h-56c-4.4 0-8 3.6-8 8v320H184V184h320c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V520c0-4.4-3.6-8-8-8z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M355.9 534.9L354 653.8c-.1 8.9 7.1 16.2 16 16.2h.4l118-2.9c2-.1 4-.9 5.4-2.3l415.9-415c3.1-3.1 3.1-8.2 0-11.3L785.4 114.3c-1.6-1.6-3.6-2.3-5.7-2.3s-4.1.8-5.7 2.3l-415.8 415a8.3 8.3 0 0 0-2.3 5.6zm63.5 23.6L779.7 199l45.2 45.1-360.5 359.7-45.7 1.1.7-46.4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
|
||||||
|
title="leaf"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tree-title"
|
||||||
|
>
|
||||||
|
leaf
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/tree/demo/search.md correctly 1`] = `
|
exports[`renders ./components/tree/demo/search.md correctly 1`] = `
|
||||||
|
|||||||
@ -7,40 +7,67 @@ title:
|
|||||||
|
|
||||||
## zh-CN
|
## zh-CN
|
||||||
|
|
||||||
节点之间带连接线的树，常用于文件目录结构展示。
|
节点之间带连接线的树，常用于文件目录结构展示。使用 `showLine` 开启，可以用 `switcherIcon` 修改默认图标。
|
||||||
|
|
||||||
## en-US
|
## en-US
|
||||||
|
|
||||||
Tree with connected line between nodes.
|
Tree with connected line between nodes, turn on by `showLine`, customize the preseted icon by `switcherIcon`.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { Tree, Icon } from 'antd';
|
import { Tree, Icon, Switch } from 'antd';
|
||||||
|
|
||||||
const { TreeNode } = Tree;
|
const { TreeNode } = Tree;
|
||||||
|
|
||||||
class Demo extends React.Component {
|
class Demo extends React.Component {
|
||||||
onSelect = (selectedKeys, info) => {
|
state = {
|
||||||
console.log('selected', selectedKeys, info);
|
showLine: true,
|
||||||
};
|
showIcon: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
onShowLineChange = showLine => {
|
||||||
|
this.setState({ showLine });
|
||||||
|
}
|
||||||
|
|
||||||
|
onShowIconChange = showIcon => {
|
||||||
|
this.setState({ showIcon });
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { showIcon, showLine } = this.state;
|
||||||
return (
|
return (
|
||||||
<Tree showLine defaultExpandedKeys={['0-0-0']} onSelect={this.onSelect}>
|
<div>
|
||||||
<TreeNode title="parent 1" key="0-0">
|
<div style={{ marginBottom: 16 }}>
|
||||||
<TreeNode title="parent 1-0" key="0-0-0">
|
showLine: <Switch checked={showLine} onChange={this.onShowLineChange} />
|
||||||
<TreeNode title="leaf" key="0-0-0-0" />
|
<br />
|
||||||
<TreeNode title="leaf" key="0-0-0-1" />
|
<br />
|
||||||
<TreeNode title="leaf" key="0-0-0-2" />
|
showIcon: <Switch checked={showIcon} onChange={this.onShowIconChange} />
|
||||||
|
</div>
|
||||||
|
<Tree
|
||||||
|
showLine={showLine}
|
||||||
|
showIcon={showIcon}
|
||||||
|
defaultExpandedKeys={['0-0-0', '0-0-1', '0-0-2']}
|
||||||
|
>
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="parent 1" key="0-0">
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="parent 1-0" key="0-0-0">
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="leaf" key="0-0-0-0" />
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="leaf" key="0-0-0-1" />
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="leaf" key="0-0-0-2" />
|
||||||
|
</TreeNode>
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="parent 1-1" key="0-0-1">
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="leaf" key="0-0-1-0" />
|
||||||
|
</TreeNode>
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="parent 1-2" key="0-0-2">
|
||||||
|
<TreeNode icon={<Icon type="carry-out" />} title="leaf" key="0-0-2-0" />
|
||||||
|
<TreeNode
|
||||||
|
switcherIcon={<Icon type="form" />}
|
||||||
|
icon={<Icon type="carry-out" />}
|
||||||
|
title="leaf"
|
||||||
|
key="0-0-2-1"
|
||||||
|
/>
|
||||||
|
</TreeNode>
|
||||||
</TreeNode>
|
</TreeNode>
|
||||||
<TreeNode title="parent 1-1" key="0-0-1">
|
</Tree>
|
||||||
<TreeNode title="leaf" key="0-0-1-0" />
|
</div>
|
||||||
</TreeNode>
|
|
||||||
<TreeNode title="parent 1-2" key="0-0-2">
|
|
||||||
<TreeNode title="leaf" key="0-0-2-0" />
|
|
||||||
<TreeNode switcherIcon={<Icon type="form" />} title="leaf" key="0-0-2-1" />
|
|
||||||
</TreeNode>
|
|
||||||
</TreeNode>
|
|
||||||
</Tree>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user