|
|
|
exports[`test renders ./components/grid/demo/basic.md correctly 1`] = `
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-12">
|
|
|
|
col-12
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-12">
|
|
|
|
col-12
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-8">
|
|
|
|
col-8
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-8">
|
|
|
|
col-8
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-8">
|
|
|
|
col-8
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-6">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/flex.md correctly 1`] = `
|
|
|
|
<div>
|
|
|
|
<p>
|
|
|
|
sub-element align left
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-start">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
sub-element align center
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-center">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
sub-element align right
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-end">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
sub-element monospaced arrangement
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-space-between">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
sub-element align full
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-space-around">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
col-4
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
|
|
|
<div>
|
|
|
|
<p>
|
|
|
|
Align Top
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-center ant-row-flex-top">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-100">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-50">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-120">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-80">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
Align Center
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-100">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-50">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-120">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-80">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
Align Bottom
|
|
|
|
</p>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom">
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-100">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-50">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-120">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-4">
|
|
|
|
<p
|
|
|
|
class="height-80">
|
|
|
|
col-4
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/flex-order.md correctly 1`] = `
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
class="ant-row-flex">
|
|
|
|
<div
|
|
|
|
class="ant-col-6 ant-col-order-4">
|
|
|
|
1 col-order-4
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 ant-col-order-3">
|
|
|
|
2 col-order-3
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 ant-col-order-2">
|
|
|
|
3 col-order-2
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 ant-col-order-1">
|
|
|
|
4 col-order-1
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/gutter.md correctly 1`] = `
|
|
|
|
<div
|
|
|
|
class="gutter-example">
|
|
|
|
<div
|
|
|
|
class="ant-row"
|
|
|
|
style="margin-left:-8px;margin-right:-8px;">
|
|
|
|
<div
|
|
|
|
class="ant-col-6 gutter-row"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div
|
|
|
|
class="gutter-box">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 gutter-row"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div
|
|
|
|
class="gutter-box">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 gutter-row"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div
|
|
|
|
class="gutter-box">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 gutter-row"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div
|
|
|
|
class="gutter-box">
|
|
|
|
col-6
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/offset.md correctly 1`] = `
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-8">
|
|
|
|
col-8
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-8 ant-col-offset-8">
|
|
|
|
col-8
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-6 ant-col-offset-6">
|
|
|
|
col-6 col-offset-6
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 ant-col-offset-6">
|
|
|
|
col-6 col-offset-6
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-12 ant-col-offset-6">
|
|
|
|
col-12 col-offset-6
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/playground.md correctly 1`] = `
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
style="margin-bottom:16px;">
|
|
|
|
<span
|
|
|
|
style="margin-right:6px;">
|
|
|
|
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 ant-slider-track-1"
|
|
|
|
style="visibility:visible;left:0%;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
|
|
|
|
class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
|
|
|
|
style="left:20%;" />
|
|
|
|
<div
|
|
|
|
class="ant-slider-mark">
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text ant-slider-mark-text-active"
|
|
|
|
style="width:18%;margin-left:-9%;left:0%;">
|
|
|
|
8
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text ant-slider-mark-text-active"
|
|
|
|
style="width:18%;margin-left:-9%;left:20%;">
|
|
|
|
16
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text"
|
|
|
|
style="width:18%;margin-left:-9%;left:40%;">
|
|
|
|
24
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text"
|
|
|
|
style="width:18%;margin-left:-9%;left:60%;">
|
|
|
|
32
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text"
|
|
|
|
style="width:18%;margin-left:-9%;left:80%;">
|
|
|
|
40
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text"
|
|
|
|
style="width:18%;margin-left:-9%;left:100%;">
|
|
|
|
48
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span
|
|
|
|
style="margin-right:6px;">
|
|
|
|
Column Count:
|
|
|
|
</span>
|
|
|
|
<div
|
|
|
|
style="width:50%;">
|
|
|
|
<div
|
|
|
|
class="ant-slider ant-slider-with-marks">
|
|
|
|
<div
|
|
|
|
class="ant-slider-rail" />
|
|
|
|
<div
|
|
|
|
class="ant-slider-track ant-slider-track-1"
|
|
|
|
style="visibility:visible;left:0%;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
|
|
|
|
class="ant-slider-handle ant-slider-handle-2 ant-slider-handle-upper"
|
|
|
|
style="left:40%;" />
|
|
|
|
<div
|
|
|
|
class="ant-slider-mark">
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text ant-slider-mark-text-active"
|
|
|
|
style="width:18%;margin-left:-9%;left:0%;">
|
|
|
|
2
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text ant-slider-mark-text-active"
|
|
|
|
style="width:18%;margin-left:-9%;left:20%;">
|
|
|
|
3
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text ant-slider-mark-text-active"
|
|
|
|
style="width:18%;margin-left:-9%;left:40%;">
|
|
|
|
4
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text"
|
|
|
|
style="width:18%;margin-left:-9%;left:60%;">
|
|
|
|
6
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text"
|
|
|
|
style="width:18%;margin-left:-9%;left:80%;">
|
|
|
|
8
|
|
|
|
</span>
|
|
|
|
<span
|
|
|
|
class="ant-slider-mark-text"
|
|
|
|
style="width:18%;margin-left:-9%;left:100%;">
|
|
|
|
12
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-row"
|
|
|
|
style="margin-left:-8px;margin-right:-8px;">
|
|
|
|
<div
|
|
|
|
class="ant-col-6"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div>
|
|
|
|
Column
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div>
|
|
|
|
Column
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div>
|
|
|
|
Column
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6"
|
|
|
|
style="padding-left:8px;padding-right:8px;">
|
|
|
|
<div>
|
|
|
|
Column
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<pre>
|
|
|
|
<Row gutter={16}>
|
|
|
|
<Col span={6} />
|
|
|
|
<Col span={6} />
|
|
|
|
<Col span={6} />
|
|
|
|
<Col span={6} />
|
|
|
|
</Row>
|
|
|
|
</pre>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/reponsive.md correctly 1`] = `
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8">
|
|
|
|
Col
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8">
|
|
|
|
Col
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8">
|
|
|
|
Col
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/reponsive-more.md correctly 1`] = `
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2">
|
|
|
|
Col
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2">
|
|
|
|
Col
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2">
|
|
|
|
Col
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
exports[`test renders ./components/grid/demo/sort.md correctly 1`] = `
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
class="ant-row">
|
|
|
|
<div
|
|
|
|
class="ant-col-18 ant-col-push-6">
|
|
|
|
col-18 col-push-6
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="ant-col-6 ant-col-pull-18">
|
|
|
|
col-6 col-pull-18
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|