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

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

exports[`renders ./components/card/demo/basic.md correctly 1`] = `
<div class="ant-card ant-card-bordered">
  <div class="ant-card-head">
    <div class="ant-card-head-wrapper">
      <div class="ant-card-head-title">Card Title</div>
      <div class="ant-card-extra"><a href="#">more</a></div>
    </div>
  </div>
  <div class="ant-card-body">
    <p>card content</p>
    <p>card content</p>
    <p>card content</p>
  </div>
</div>
`;

exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
<div style="background: rgb(236, 236, 236); padding: 30px;">
  <div class="ant-card" style="width: 300px;">
    <div class="ant-card-head">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">Card title</div>
      </div>
    </div>
    <div class="ant-card-body">
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </div>
  </div>
</div>
`;

exports[`renders ./components/card/demo/concise.md correctly 1`] = `
<div class="ant-card ant-card-bordered" style="width: 300px;">
  <div class="ant-card-body">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </div>
</div>
`;

exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = `
<div class="ant-card ant-card-bordered ant-card-hoverable" style="width: 240px;">
  <div class="ant-card-cover"><img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"></div>
  <div class="ant-card-body">
    <div class="ant-card-meta">
      <div class="ant-card-meta-detail">
        <div class="ant-card-meta-title">Europe Street beat</div>
        <div class="ant-card-meta-description">www.instagram.com</div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
<div class="ant-card ant-card-bordered ant-card-contain-grid">
  <div class="ant-card-head">
    <div class="ant-card-head-wrapper">
      <div class="ant-card-head-title">Card Title</div>
    </div>
  </div>
  <div class="ant-card-body">
    <div class="ant-card-grid" style="width: 25%; text-align: 'center';">Content</div>
    <div class="ant-card-grid" style="width: 25%; text-align: 'center';">Content</div>
    <div class="ant-card-grid" style="width: 25%; text-align: 'center';">Content</div>
    <div class="ant-card-grid" style="width: 25%; text-align: 'center';">Content</div>
    <div class="ant-card-grid" style="width: 25%; text-align: 'center';">Content</div>
    <div class="ant-card-grid" style="width: 25%; text-align: 'center';">Content</div>
    <div class="ant-card-grid" style="width: 25%; text-align: 'center';">Content</div>
  </div>
</div>
`;

exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
<div style="background-color: rgb(236, 236, 236); padding: 20px;">
  <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
    <div class="ant-col-8" style="padding-left: 8px; padding-right: 8px;">
      <div class="ant-card">
        <div class="ant-card-head">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">Card title</div>
          </div>
        </div>
        <div class="ant-card-body">
          <p>card content</p>
        </div>
      </div>
    </div>
    <div class="ant-col-8" style="padding-left: 8px; padding-right: 8px;">
      <div class="ant-card">
        <div class="ant-card-head">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">Card title</div>
          </div>
        </div>
        <div class="ant-card-body">
          <p>card content</p>
        </div>
      </div>
    </div>
    <div class="ant-col-8" style="padding-left: 8px; padding-right: 8px;">
      <div class="ant-card">
        <div class="ant-card-head">
          <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">Card title</div>
          </div>
        </div>
        <div class="ant-card-body">
          <p>card content</p>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/card/demo/inner.md correctly 1`] = `
<div class="ant-card ant-card-bordered">
  <div class="ant-card-head">
    <div class="ant-card-head-wrapper">
      <div class="ant-card-head-title">Card title</div>
    </div>
  </div>
  <div class="ant-card-body">
    <p style="font-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500;">
      Group title
    </p>
    <div class="ant-card ant-card-bordered">
      <div class="ant-card-head">
        <div class="ant-card-head-wrapper">
          <div class="ant-card-head-title">Inner card title</div>
          <div class="ant-card-extra"><a href="#">More</a></div>
        </div>
      </div>
      <div class="ant-card-body">
        Inner Card content
      </div>
    </div>
    <div class="ant-card ant-card-bordered" style="margin-top: 16px;">
      <div class="ant-card-head">
        <div class="ant-card-head-wrapper">
          <div class="ant-card-head-title">Inner card title</div>
          <div class="ant-card-extra"><a href="#">More</a></div>
        </div>
      </div>
      <div class="ant-card-body">
        Inner Card content
      </div>
    </div>
  </div>
</div>
`;

exports[`renders ./components/card/demo/loading.md correctly 1`] = `
<div>
  <div class="ant-card ant-card-loading ant-card-bordered">
    <div class="ant-card-head">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">Card title</div>
      </div>
    </div>
    <div class="ant-card-body">
      <div class="ant-card-loading-content">
        <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
          <div class="ant-col-22" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
        </div>
        <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
          <div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
          <div class="ant-col-15" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
        </div>
        <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
          <div class="ant-col-6" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
          <div class="ant-col-18" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
        </div>
        <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
          <div class="ant-col-13" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
          <div class="ant-col-9" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
        </div>
        <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
          <div class="ant-col-4" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
          <div class="ant-col-3" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
          <div class="ant-col-16" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
        </div>
        <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
          <div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
          <div class="ant-col-6" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
          <div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
            <div class="ant-card-loading-block"></div>
          </div>
        </div>
      </div>
    </div>
  </div> <button type="button" class="ant-btn ant-btn-default" style="margin-top: 16px;"><span>Toggle loading</span></button>
</div>
`;

exports[`renders ./components/card/demo/meta.md correctly 1`] = `
<div class="ant-card ant-card-bordered ant-card-hoverable" style="width: 300px;">
  <div class="ant-card-cover"><img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"></div>
  <div class="ant-card-body">
    <div class="ant-card-meta">
      <div class="ant-card-meta-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
      <div class="ant-card-meta-detail">
        <div class="ant-card-meta-title">Card title</div>
        <div class="ant-card-meta-description">This is the description</div>
      </div>
    </div>
  </div>
  <ul class="ant-card-actions">
    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-setting"></i></span></li>
    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-edit"></i></span></li>
    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-ellipsis"></i></span></li>
  </ul>
</div>
`;

exports[`renders ./components/card/demo/simple.md correctly 1`] = `
<div class="ant-card ant-card-bordered" style="width: 300px;">
  <div class="ant-card-body">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </div>
</div>
`;

exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
<div>
  <div class="ant-card ant-card-bordered ant-card-contain-tabs" style="width: 100%;">
    <div class="ant-card-head">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">Card title</div>
        <div class="ant-card-extra"><a href="#">More</a></div>
      </div>
      <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs no-flex">
        <div role="tablist" tabindex="0" class="ant-tabs-bar">
          <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
            <div class="ant-tabs-nav-wrap">
              <div class="ant-tabs-nav-scroll">
                <div class="ant-tabs-nav ant-tabs-nav-animated">
                  <div>
                    <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab"><span><i class="anticon anticon-home"></i>tab1
    </span></div>
                    <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">tab2</div>
                  </div>
                  <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: block; transform: translate3d(0px,0,0); -webkit-transform: translate3d(0px,0,0); width: 0px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left: 0%;">
          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
          <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
        </div>
      </div>
    </div>
    <div class="ant-card-body">
      content1
    </div>
  </div> <br><br>
  <div class="ant-card ant-card-bordered ant-card-contain-tabs" style="width: 100%;">
    <div class="ant-card-head">
      <div class="ant-card-head-wrapper"></div>
      <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs no-flex">
        <div role="tablist" tabindex="0" class="ant-tabs-bar">
          <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
            <div class="ant-tabs-nav-wrap">
              <div class="ant-tabs-nav-scroll">
                <div class="ant-tabs-nav ant-tabs-nav-animated">
                  <div>
                    <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">article</div>
                    <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">app</div>
                    <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">project</div>
                  </div>
                  <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="display: block; transform: translate3d(0px,0,0); -webkit-transform: translate3d(0px,0,0); width: 0px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left: -100%;">
          <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
          <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
        </div>
      </div>
    </div>
    <div class="ant-card-body">
      <p>app content</p>
    </div>
  </div>
</div>
`;