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

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders ./components/grid/demo/basic.vue correctly 1`] = `
<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.vue correctly 1`] = `
<div id="components-grid-demo-flex">
  <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 full</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>
</div>
`;

exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
<div id="components-grid-demo-flex-align">
  <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>
</div>
`;

exports[`renders ./components/grid/demo/flex-order.vue correctly 1`] = `
<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-2"> 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-1"> 4 col-order-responsive </div>
</div>
`;

exports[`renders ./components/grid/demo/flex-stretch.vue correctly 1`] = `
<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;">auto</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/gutter.vue correctly 1`] = `
<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 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 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 class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding-left: 16px; padding-right: 16px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding-left: 16px; padding-right: 16px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding-left: 16px; padding-right: 16px;">
    <div class="gutter-box">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: -12px -8px -12px -8px;">
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
  <div class="ant-col ant-col-6 gutter-row" style="padding: 12px 8px 12px 8px;">
    <div class="gutter-box">col-6</div>
  </div>
</div>
`;

exports[`renders ./components/grid/demo/offset.vue 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 ./components/grid/demo/playfround.vue 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 ant-slider-horizontal">
        <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 ant-slider-horizontal">
        <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 ant-slider-horizontal">
        <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 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> Another Row: <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><br><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 ./components/grid/demo/responsive.vue 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.vue 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.vue 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/use-breakpoint.vue correctly 1`] = `" Current break point:"`;