test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-15 09:21:22 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity
1dab17eef0
ant-design/components/grid/__tests__/__snapshots__/demo.test.js.snap
偏右 1dab17eef0
feat: 💄 Divider support plain for lighter style (#23405) 
* 💄 Divider support `asHeading` for lighter style

* ✅ fix demo snapshot

* docs: 📖 Divider asHeading documentation

* fix tsd

* ✅ fix demo snapshot

* asHeading to plain

* ✅ fix demo snapshot

* fix css
2020-04-21 14:16:33 +08:00

1241 lines
24 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
Array [
<div
class="ant-row"
>
<div
class="ant-col ant-col-24"
>
col
</div>
</div>,
<div
class="ant-row"
>
<div
class="ant-col ant-col-12"
>
col-12
</div>
<div
class="ant-col ant-col-12"
>
col-12
</div>
</div>,
<div
class="ant-row"
>
<div
class="ant-col ant-col-8"
>
col-8
</div>
<div
class="ant-col ant-col-8"
>
col-8
</div>
<div
class="ant-col ant-col-8"
>
col-8
</div>
</div>,
<div
class="ant-row"
>
<div
class="ant-col ant-col-6"
>
col-6
</div>
<div
class="ant-col ant-col-6"
>
col-6
</div>
<div
class="ant-col ant-col-6"
>
col-6
</div>
<div
class="ant-col ant-col-6"
>
col-6
</div>
</div>,
]
`;
exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
sub-element align left
</span>
</div>,
<div
class="ant-row ant-row-start"
>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
sub-element align center
</span>
</div>,
<div
class="ant-row ant-row-center"
>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
sub-element align right
</span>
</div>,
<div
class="ant-row ant-row-end"
>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
sub-element monospaced arrangement
</span>
</div>,
<div
class="ant-row ant-row-space-between"
>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
sub-element align full
</span>
</div>,
<div
class="ant-row ant-row-space-around"
>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
<div
class="ant-col ant-col-4"
>
col-4
</div>
</div>,
]
`;
exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Align Top
</span>
</div>,
<div
class="ant-row ant-row-center ant-row-top"
>
<div
class="ant-col ant-col-4"
>
<p
class="height-100"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-50"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-120"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-80"
>
col-4
</p>
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Align Middle
</span>
</div>,
<div
class="ant-row ant-row-space-around ant-row-middle"
>
<div
class="ant-col ant-col-4"
>
<p
class="height-100"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-50"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-120"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-80"
>
col-4
</p>
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Align Bottom
</span>
</div>,
<div
class="ant-row ant-row-space-between ant-row-bottom"
>
<div
class="ant-col ant-col-4"
>
<p
class="height-100"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-50"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-120"
>
col-4
</p>
</div>
<div
class="ant-col ant-col-4"
>
<p
class="height-80"
>
col-4
</p>
</div>
</div>,
]
`;
exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col ant-col-6 ant-col-order-4"
>
1 col-order-4
</div>
<div
class="ant-col ant-col-6 ant-col-order-3"
>
2 col-order-3
</div>
<div
class="ant-col ant-col-6 ant-col-order-2"
>
3 col-order-2
</div>
<div
class="ant-col ant-col-6 ant-col-order-1"
>
4 col-order-1
</div>
</div>
`;
exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Percentage columns
</span>
</div>,
<div
class="ant-row"
>
<div
class="ant-col"
style="flex:2 2 auto"
>
2 / 5
</div>
<div
class="ant-col"
style="flex:3 3 auto"
>
3 / 5
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Fill rest
</span>
</div>,
<div
class="ant-row"
>
<div
class="ant-col"
style="flex:0 0 100px"
>
100px
</div>
<div
class="ant-col"
style="flex:auto"
>
Fill Rest
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Raw flex style
</span>
</div>,
<div
class="ant-row"
>
<div
class="ant-col"
style="flex:1 1 200px"
>
1 1 200px
</div>
<div
class="ant-col"
style="flex:0 1 300px"
>
0 1 300px
</div>
</div>,
]
`;
exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Horizontal
</span>
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Responsive
</span>
</div>,
<div
class="ant-row"
style="margin-left:-16px;margin-right:-16px"
>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:16px;padding-right:16px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:16px;padding-right:16px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:16px;padding-right:16px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:16px;padding-right:16px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
</div>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
style="color:#333;font-weight:normal"
>
<span
class="ant-divider-inner-text"
>
Vertical
</span>
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:12px"
>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
>
<div
style="background:#0092ff;padding:8px 0"
>
col-6
</div>
</div>
</div>,
]
`;
exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
Array [
<div
class="ant-row"
>
<div
class="ant-col ant-col-8"
>
col-8
</div>
<div
class="ant-col ant-col-8 ant-col-offset-8"
>
col-8
</div>
</div>,
<div
class="ant-row"
>
<div
class="ant-col ant-col-6 ant-col-offset-6"
>
col-6 col-offset-6
</div>
<div
class="ant-col ant-col-6 ant-col-offset-6"
>
col-6 col-offset-6
</div>
</div>,
<div
class="ant-row"
>
<div
class="ant-col ant-col-12 ant-col-offset-6"
>
col-12 col-offset-6
</div>
</div>,
]
`;
exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
Array [
<span
style="margin-right:6px"
>
Horizontal Gutter (px):
</span>,
<div
style="width:50%"
>
<div
class="ant-slider ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
/>
<span
class="ant-slider-dot"
style="left:40%"
/>
<span
class="ant-slider-dot"
style="left:60%"
/>
<span
class="ant-slider-dot"
style="left:80%"
/>
<span
class="ant-slider-dot"
style="left:100%"
/>
</div>
<div
aria-disabled="false"
aria-valuemax="5"
aria-valuemin="0"
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
>
16
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
>
24
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
>
32
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
>
40
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
>
48
</span>
</div>
</div>
</div>,
<span
style="margin-right:6px"
>
Vertical Gutter (px):
</span>,
<div
style="width:50%"
>
<div
class="ant-slider ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
/>
<span
class="ant-slider-dot"
style="left:40%"
/>
<span
class="ant-slider-dot"
style="left:60%"
/>
<span
class="ant-slider-dot"
style="left:80%"
/>
<span
class="ant-slider-dot"
style="left:100%"
/>
</div>
<div
aria-disabled="false"
aria-valuemax="5"
aria-valuemin="0"
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
>
16
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
>
24
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
>
32
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
>
40
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
>
48
</span>
</div>
</div>
</div>,
<span
style="margin-right:6px"
>
Column Count:
</span>,
<div
style="width:50%;margin-bottom:48px"
>
<div
class="ant-slider ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:40%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:40%"
/>
<span
class="ant-slider-dot"
style="left:60%"
/>
<span
class="ant-slider-dot"
style="left:80%"
/>
<span
class="ant-slider-dot"
style="left:100%"
/>
</div>
<div
aria-disabled="false"
aria-valuemax="5"
aria-valuemin="0"
aria-valuenow="2"
class="ant-slider-handle"
role="slider"
style="left:40%;right:auto;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
>
2
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
>
3
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
>
4
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
>
6
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
>
8
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
>
12
</span>
</div>
</div>
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
</div>,
<pre>
&lt;Row gutter={[16, 16]}&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;/Row&gt;
</pre>,
<pre>
&lt;Row gutter={[16, 16]}&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;/Row&gt;
</pre>,
]
`;
exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
>
Col
</div>
<div
class="ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
>
Col
</div>
<div
class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
>
Col
</div>
</div>
`;
exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
>
Col
</div>
<div
class="ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
>
Col
</div>
<div
class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
>
Col
</div>
</div>
`;
exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col ant-col-18 ant-col-push-6"
>
col-18 col-push-6
</div>
<div
class="ant-col ant-col-6 ant-col-pull-18"
>
col-6 col-pull-18
</div>
</div>
`;
exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col"
>
Current break point: 
</div>
</div>
`;
Reference in New Issue View Git Blame Copy Permalink