ant-design/components/grid/__tests__/__snapshots__/demo.test.ts.snap
叶枫 e17cd4ae27
test: keep spaces (#47024)
* feat: snap

* feat: up snap
2024-03-22 20:49:55 +08:00

1428 lines
29 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/grid/demo/basic.tsx 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.tsx correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<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"
>
<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"
>
<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"
>
<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"
>
<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>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
sub-element align evenly
</span>
</div>,
<div
class="ant-row ant-row-space-evenly"
>
<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.tsx correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<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"
>
<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"
>
<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.tsx correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Normal
</span>
</div>,
<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>,
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Responsive
</span>
</div>,
<div
class="ant-row"
>
<div
class="ant-col ant-col-6 ant-col-xs-order-1 ant-col-sm-order-2 ant-col-md-order-3 ant-col-lg-order-4"
>
1 col-order-responsive
</div>
<div
class="ant-col ant-col-6 ant-col-xs-order-2 ant-col-sm-order-1 ant-col-md-order-4 ant-col-lg-order-3"
>
2 col-order-responsive
</div>
<div
class="ant-col ant-col-6 ant-col-xs-order-3 ant-col-sm-order-4 ant-col-md-order-2 ant-col-lg-order-1"
>
3 col-order-responsive
</div>
<div
class="ant-col ant-col-6 ant-col-xs-order-4 ant-col-sm-order-3 ant-col-md-order-1 ant-col-lg-order-2"
>
4 col-order-responsive
</div>
</div>,
]
`;
exports[`renders components/grid/demo/flex-stretch.tsx correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<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"
>
<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"
>
<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>,
<div
class="ant-row ant-row-no-wrap"
>
<div
class="ant-col"
style="flex:none;min-width:0"
>
<div
style="padding:0 16px"
>
none
</div>
</div>
<div
class="ant-col"
style="flex:auto;min-width:0"
>
auto with no-wrap
</div>
</div>,
]
`;
exports[`renders components/grid/demo/gutter.tsx correctly 1`] = `
Array [
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
role="separator"
>
<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"
>
<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"
>
<span
class="ant-divider-inner-text"
>
Vertical
</span>
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;row-gap:24px"
>
<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
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>,
]
`;
exports[`renders components/grid/demo/offset.tsx 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.tsx correctly 1`] = `
Array [
<span>
Horizontal Gutter (px):
</span>,
<div
style="width:50%"
>
<div
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="5"
aria-valuemin="0"
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:20%;transform:translateX(-50%)"
>
16
</span>
<span
class="ant-slider-mark-text"
style="left:40%;transform:translateX(-50%)"
>
24
</span>
<span
class="ant-slider-mark-text"
style="left:60%;transform:translateX(-50%)"
>
32
</span>
<span
class="ant-slider-mark-text"
style="left:80%;transform:translateX(-50%)"
>
40
</span>
<span
class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%)"
>
48
</span>
</div>
</div>
</div>,
<span>
Vertical Gutter (px):
</span>,
<div
style="width:50%"
>
<div
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="5"
aria-valuemin="0"
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:20%;transform:translateX(-50%)"
>
16
</span>
<span
class="ant-slider-mark-text"
style="left:40%;transform:translateX(-50%)"
>
24
</span>
<span
class="ant-slider-mark-text"
style="left:60%;transform:translateX(-50%)"
>
32
</span>
<span
class="ant-slider-mark-text"
style="left:80%;transform:translateX(-50%)"
>
40
</span>
<span
class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%)"
>
48
</span>
</div>
</div>
</div>,
<span>
Column Count:
</span>,
<div
style="width:50%;margin-bottom:48px"
>
<div
class="ant-slider ant-slider-horizontal ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;width:40%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:40%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:60%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:80%;transform:translateX(-50%)"
/>
<span
class="ant-slider-dot"
style="left:100%;transform:translateX(-50%)"
/>
</div>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="5"
aria-valuemin="0"
aria-valuenow="2"
class="ant-slider-handle"
role="slider"
style="left:40%;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%)"
>
2
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:20%;transform:translateX(-50%)"
>
3
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:40%;transform:translateX(-50%)"
>
4
</span>
<span
class="ant-slider-mark-text"
style="left:60%;transform:translateX(-50%)"
>
6
</span>
<span
class="ant-slider-mark-text"
style="left:80%;transform:translateX(-50%)"
>
8
</span>
<span
class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%)"
>
12
</span>
</div>
</div>
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;row-gap:16px"
>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
</div>,
Another Row:,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;row-gap:16px"
>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div>
Column
</div>
</div>
</div>,
<pre
class="demo-code"
>
&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;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;/Row&gt;
</pre>,
<pre
class="demo-code"
>
&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.tsx 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-flex.tsx correctly 1`] = `
<div
class="ant-row"
>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
<div
class="ant-col ant-col-xs-flex ant-col-sm-flex ant-col-md-flex ant-col-lg-flex ant-col-xl-flex"
style="--ant-col-xs-flex:0 0 100%;--ant-col-sm-flex:0 0 50%;--ant-col-md-flex:0 0 40%;--ant-col-lg-flex:0 0 20%;--ant-col-xl-flex:0 0 10%"
>
Col
</div>
</div>
`;
exports[`renders components/grid/demo/responsive-more.tsx 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.tsx 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.tsx correctly 1`] = `
Array [
Current break point:,
<!-- -->,
,
]
`;