mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-09 23:51:17 +08:00
e17cd4ae27
* feat: snap * feat: up snap
1514 lines
32 KiB
Plaintext
1514 lines
32 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`renders components/grid/demo/basic.tsx extend context 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/basic.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/flex.tsx extend context 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.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/flex-align.tsx extend context 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-align.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/flex-order.tsx extend context 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-order.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/flex-stretch.tsx extend context 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-basis: 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: 0 0 auto; min-width: 0;"
|
|
>
|
|
<div
|
|
style="padding: 0px 16px;"
|
|
>
|
|
none
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col"
|
|
style="flex-basis: auto; min-width: 0;"
|
|
>
|
|
auto with no-wrap
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/grid/demo/flex-stretch.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/gutter.tsx extend context 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: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
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: -4px; margin-right: -4px;"
|
|
>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 4px; padding-right: 4px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 4px; padding-right: 4px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 4px; padding-right: 4px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 4px; padding-right: 4px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
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: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col ant-col-6 gutter-row"
|
|
style="padding-left: 8px; padding-right: 8px;"
|
|
>
|
|
<div
|
|
style="background: rgb(0, 146, 255); padding: 8px 0px;"
|
|
>
|
|
col-6
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/grid/demo/gutter.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/offset.tsx extend context 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/offset.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/playground.tsx extend context 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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-tooltip-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-tooltip-content"
|
|
>
|
|
<div
|
|
class="ant-tooltip-inner"
|
|
role="tooltip"
|
|
>
|
|
16
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-tooltip-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-tooltip-content"
|
|
>
|
|
<div
|
|
class="ant-tooltip-inner"
|
|
role="tooltip"
|
|
>
|
|
16
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-tooltip-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-tooltip-content"
|
|
>
|
|
<div
|
|
class="ant-tooltip-inner"
|
|
role="tooltip"
|
|
>
|
|
4
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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"
|
|
>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
</Row>
|
|
</pre>,
|
|
<pre
|
|
class="demo-code"
|
|
>
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
<Col span={6} />
|
|
</Row>
|
|
</pre>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/grid/demo/playground.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/responsive.tsx extend context 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.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/responsive-flex.tsx extend context 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-flex.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/responsive-more.tsx extend context 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/responsive-more.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/sort.tsx extend context 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/sort.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 1`] = `
|
|
Array [
|
|
Current break point: ,
|
|
<span
|
|
class="ant-tag ant-tag-blue"
|
|
>
|
|
xs
|
|
</span>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 2`] = `[]`;
|