ant-design-vue/components/grid/__tests__/__snapshots__/demo.test.js.snap

211 lines
14 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./antdv-demo/docs/grid/demo/basic.md correctly 1`] = `
<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 ./antdv-demo/docs/grid/demo/flex.md correctly 1`] = `
<p>sub-element align left</p>
<div class="ant-row-flex ant-row-flex-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>
<p>sub-element align center</p>
<div class="ant-row-flex ant-row-flex-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>
<p>sub-element align right</p>
<div class="ant-row-flex ant-row-flex-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>
<p>sub-element monospaced arrangement</p>
<div class="ant-row-flex ant-row-flex-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>
<p>sub-element align full</p>
<div class="ant-row-flex ant-row-flex-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 ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
<p>Align Top</p>
<div class="ant-row-flex ant-row-flex-center ant-row-flex-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>
<p>Align Center</p>
<div class="ant-row-flex ant-row-flex-space-around ant-row-flex-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>
<p>Align Bottom</p>
<div class="ant-row-flex ant-row-flex-space-between ant-row-flex-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 ./antdv-demo/docs/grid/demo/flex-fill.md correctly 1`] = `
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Percentage columns </span></div>
<div class="ant-row-flex">
<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-left" role="separator"><span class="ant-divider-inner-text"> Fill rest </span></div>
<div class="ant-row-flex">
<div class="ant-col" style="flex: 0 0 100px;">100px</div>
<div class="ant-col" style="flex-basis: auto;">auto</div>
</div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Raw flex style </span></div>
<div class="ant-row-flex">
<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 ./antdv-demo/docs/grid/demo/flex-order.md correctly 1`] = `
<div class="ant-row-flex">
<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 ./antdv-demo/docs/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 ant-col-6 gutter-row" style="padding-left: 8px; padding-right: 8px;">
<div class="gutter-box"> col-6 </div>
</div>
<div class="ant-col ant-col-6 gutter-row" style="padding-left: 8px; padding-right: 8px;">
<div class="gutter-box"> col-6 </div>
</div>
<div class="ant-col ant-col-6 gutter-row" style="padding-left: 8px; padding-right: 8px;">
<div class="gutter-box"> col-6 </div>
</div>
<div class="ant-col ant-col-6 gutter-row" style="padding-left: 8px; padding-right: 8px;">
<div class="gutter-box"> col-6 </div>
</div>
</div>
</div>
`;
exports[`renders ./antdv-demo/docs/grid/demo/offset.md correctly 1`] = `
<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 ./antdv-demo/docs/grid/demo/playfround.md correctly 1`] = `
"
<div id=\\"components-grid-demo-playground\\">
<div style=\\"margin-bottom: 16px;\\"><span style=\\"margin-right: 6px;\\">Horizontal Gutter (px): </span><div style=\\"width: 50%;\\"><div tabindex=\\"-1\\" class=\\"ant-slider ant-slider-with-marks\\"><div class=\\"ant-slider-rail\\"></div><div class=\\"ant-slider-track\\" style=\\"left: 0%; width: 20%;\\"></div><div class=\\"ant-slider-step\\"><span class=\\"ant-slider-dot ant-slider-dot-active\\" style=\\"left: 0%;\\"></span><span class=\\"ant-slider-dot ant-slider-dot-active\\" style=\\"left: 20%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 40%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 60%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 80%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 100%;\\"></span></div><!----><div class=\\"ant-slider-handle\\" style=\\"left: 20%; transform: translateX(-50%);\\" role=\\"slider\\" tabindex=\\"0\\" aria-valuemin=\\"0\\" aria-valuemax=\\"5\\" aria-valuenow=\\"1\\" aria-disabled=\\"false\\"></div><div class=\\"ant-slider-mark\\"><span class=\\"ant-slider-mark-text ant-slider-mark-text-active\\" style=\\"transform: translateX(-50%); left: 0%;\\">8</span><span class=\\"ant-slider-mark-text ant-slider-mark-text-active\\" style=\\"transform: translateX(-50%); left: 20%;\\">16</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 40%;\\">24</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 60%;\\">32</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 80%;\\">40</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 100%;\\">48</span></div></div></div><span style=\\"margin-right: 6px;\\">Vertical Gutter (px): </span><div style=\\"width: 50%;\\"><div tabindex=\\"-1\\" class=\\"ant-slider ant-slider-with-marks\\"><div class=\\"ant-slider-rail\\"></div><div class=\\"ant-slider-track\\" style=\\"left: 0%; width: 20%;\\"></div><div class=\\"ant-slider-step\\"><span class=\\"ant-slider-dot ant-slider-dot-active\\" style=\\"left: 0%;\\"></span><span class=\\"ant-slider-dot ant-slider-dot-active\\" style=\\"left: 20%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 40%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 60%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 80%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 100%;\\"></span></div><!----><div class=\\"ant-slider-handle\\" style=\\"left: 20%; transform: translateX(-50%);\\" role=\\"slider\\" tabindex=\\"0\\" aria-valuemin=\\"0\\" aria-valuemax=\\"5\\" aria-valuenow=\\"1\\" aria-disabled=\\"false\\"></div><div class=\\"ant-slider-mark\\"><span class=\\"ant-slider-mark-text ant-slider-mark-text-active\\" style=\\"transform: translateX(-50%); left: 0%;\\">8</span><span class=\\"ant-slider-mark-text ant-slider-mark-text-active\\" style=\\"transform: translateX(-50%); left: 20%;\\">16</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 40%;\\">24</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 60%;\\">32</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 80%;\\">40</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 100%;\\">48</span></div></div></div><span style=\\"margin-right: 6px;\\">Column Count:</span><div style=\\"width: 50%;\\"><div tabindex=\\"-1\\" class=\\"ant-slider ant-slider-with-marks\\"><div class=\\"ant-slider-rail\\"></div><div class=\\"ant-slider-track\\" style=\\"left: 0%; width: 40%;\\"></div><div class=\\"ant-slider-step\\"><span class=\\"ant-slider-dot ant-slider-dot-active\\" style=\\"left: 0%;\\"></span><span class=\\"ant-slider-dot ant-slider-dot-active\\" style=\\"left: 20%;\\"></span><span class=\\"ant-slider-dot ant-slider-dot-active\\" style=\\"left: 40%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 60%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 80%;\\"></span><span class=\\"ant-slider-dot\\" style=\\"left: 100%;\\"></span></div><!----><div class=\\"ant-slider-handle\\" style=\\"left: 40%; transform: translateX(-50%);\\" role=\\"slider\\" tabindex=\\"0\\" aria-valuemin=\\"0\\" aria-valuemax=\\"5\\" aria-valuenow=\\"2\\" aria-disabled=\\"false\\"></div><div class=\\"ant-slider-mark\\"><span class=\\"ant-slider-mark-text ant-slider-mark-text-active\\" style=\\"transform: translateX(-50%); left: 0%;\\">2</span><span class=\\"ant-slider-mark-text ant-slider-mark-text-active\\" style=\\"transform: translateX(-50%); left: 20%;\\">3</span><span class=\\"ant-slider-mark-text ant-slider-mark-text-active\\" style=\\"transform: translateX(-50%); left: 40%;\\">4</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 60%;\\">6</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 80%;\\">8</span><span class=\\"ant-slider-mark-text\\" style=\\"transform: translateX(-50%); left: 100%;\\">12</span></div></div></div></div>
<div class=\\"ant-row\\" style=\\"margin: -8px -8px -8px -8px;\\"><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div></div>
<div class=\\"ant-row\\" style=\\"margin: -8px -8px -8px -8px;\\"><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div><div class=\\"ant-col ant-col-6\\" style=\\"padding: 8px 8px 8px 8px;\\"><div>Column</div></div></div>
<pre>&lt;a-row :gutter=\\"[16,16]\\"&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;/a-row&gt;</pre>
<pre>&lt;a-row :gutter=\\"[16,16]\\"&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;a-col :span=\\"6\\"/&gt;
&lt;/a-row&gt;</pre>
</div>
"
`;
exports[`renders ./antdv-demo/docs/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 ./antdv-demo/docs/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 ./antdv-demo/docs/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>
`;