mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 21:18:01 +08:00
2b1bed42c9
* inner style Card * support `cover` `actions` `avatar` `description` and `extraContent` * improve * refactor
671 lines
13 KiB
Plaintext
671 lines
13 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`renders ./components/card/demo/basic.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-bordered"
|
|
style="width:300px;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-extra"
|
|
>
|
|
<a
|
|
href="#"
|
|
>
|
|
More
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
|
|
<div
|
|
style="background:#ECECEC;padding:30px;"
|
|
>
|
|
<div
|
|
class="ant-card"
|
|
style="width:300px;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-bordered ant-card-no-hovering ant-card-contain-grid"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
卡片标题
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-grid"
|
|
style="width:25%;text-align:center;"
|
|
>
|
|
卡片内容
|
|
</div>
|
|
<div
|
|
class="ant-card-grid"
|
|
style="width:25%;text-align:center;"
|
|
>
|
|
卡片内容
|
|
</div>
|
|
<div
|
|
class="ant-card-grid"
|
|
style="width:25%;text-align:center;"
|
|
>
|
|
卡片内容
|
|
</div>
|
|
<div
|
|
class="ant-card-grid"
|
|
style="width:25%;text-align:center;"
|
|
>
|
|
卡片内容
|
|
</div>
|
|
<div
|
|
class="ant-card-grid"
|
|
style="width:25%;text-align:center;"
|
|
>
|
|
卡片内容
|
|
</div>
|
|
<div
|
|
class="ant-card-grid"
|
|
style="width:25%;text-align:center;"
|
|
>
|
|
卡片内容
|
|
</div>
|
|
<div
|
|
class="ant-card-grid"
|
|
style="width:25%;text-align:center;"
|
|
>
|
|
卡片内容
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
|
|
<div
|
|
style="background:#ECECEC;padding:30px;"
|
|
>
|
|
<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>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
Card content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col-8"
|
|
style="padding-left:8px;padding-right:8px;"
|
|
>
|
|
<div
|
|
class="ant-card"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
Card content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-col-8"
|
|
style="padding-left:8px;padding-right:8px;"
|
|
>
|
|
<div
|
|
class="ant-card"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
Card content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/inner.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-bordered ant-card-no-hovering"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
<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 ant-card-no-hovering ant-card-type-inner"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Inner Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-extra"
|
|
>
|
|
<a
|
|
href="#"
|
|
>
|
|
More
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
Inner Card content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-card ant-card-bordered ant-card-no-hovering ant-card-type-inner"
|
|
style="margin-top:16px;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Inner Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-extra"
|
|
>
|
|
<a
|
|
href="#"
|
|
>
|
|
More
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
Inner Card content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/loading.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-loading ant-card-bordered"
|
|
style="width:34%;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div
|
|
class="ant-card-loading-content"
|
|
>
|
|
<p
|
|
class="ant-card-loading-block"
|
|
style="width:94%;"
|
|
/>
|
|
<p>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:28%;"
|
|
/>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:62%;"
|
|
/>
|
|
</p>
|
|
<p>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:22%;"
|
|
/>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:66%;"
|
|
/>
|
|
</p>
|
|
<p>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:56%;"
|
|
/>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:39%;"
|
|
/>
|
|
</p>
|
|
<p>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:21%;"
|
|
/>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:15%;"
|
|
/>
|
|
<span
|
|
class="ant-card-loading-block"
|
|
style="width:40%;"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/meta.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-bordered"
|
|
style="width:300px;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-cover"
|
|
>
|
|
<img
|
|
alt="example"
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="ant-card-meta"
|
|
>
|
|
<div
|
|
class="ant-card-meta-content"
|
|
>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul
|
|
class="ant-card-actions"
|
|
>
|
|
<li
|
|
style="width:33.333333333333336%;"
|
|
>
|
|
<span>
|
|
<i
|
|
class="anticon anticon-setting"
|
|
/>
|
|
</span>
|
|
</li>
|
|
<li
|
|
style="width:33.333333333333336%;"
|
|
>
|
|
<span>
|
|
<i
|
|
class="anticon anticon-edit"
|
|
/>
|
|
</span>
|
|
</li>
|
|
<li
|
|
style="width:33.333333333333336%;"
|
|
>
|
|
<span>
|
|
<i
|
|
class="anticon anticon-ellipsis"
|
|
/>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/no-padding.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-bordered"
|
|
style="width:240px;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-body"
|
|
style="padding:0;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="custom-image"
|
|
>
|
|
<img
|
|
alt="example"
|
|
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
|
|
width="100%"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="custom-card"
|
|
>
|
|
<h3>
|
|
Europe Street beat
|
|
</h3>
|
|
<p>
|
|
www.instagram.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/simple.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-bordered"
|
|
style="width:300px;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
<p>
|
|
Card content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
|
<div
|
|
class="ant-card ant-card-bordered"
|
|
style="width:300px;"
|
|
>
|
|
<div>
|
|
<div
|
|
class="ant-card-head"
|
|
>
|
|
<h3
|
|
class="ant-card-head-title"
|
|
>
|
|
Card title
|
|
</h3>
|
|
<div
|
|
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-line"
|
|
>
|
|
<div
|
|
class="ant-tabs-bar"
|
|
role="tablist"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="ant-tabs-nav-container"
|
|
>
|
|
<span
|
|
class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
|
|
unselectable="unselectable"
|
|
>
|
|
<span
|
|
class="ant-tabs-tab-prev-icon"
|
|
/>
|
|
</span>
|
|
<span
|
|
class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"
|
|
unselectable="unselectable"
|
|
>
|
|
<span
|
|
class="ant-tabs-tab-next-icon"
|
|
/>
|
|
</span>
|
|
<div
|
|
class="ant-tabs-nav-wrap"
|
|
>
|
|
<div
|
|
class="ant-tabs-nav-scroll"
|
|
>
|
|
<div
|
|
class="ant-tabs-nav ant-tabs-nav-animated"
|
|
>
|
|
<div
|
|
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
|
|
/>
|
|
<div
|
|
aria-disabled="false"
|
|
aria-selected="true"
|
|
class="ant-tabs-tab-active ant-tabs-tab"
|
|
role="tab"
|
|
>
|
|
tab1
|
|
</div>
|
|
<div
|
|
aria-disabled="false"
|
|
aria-selected="false"
|
|
class=" ant-tabs-tab"
|
|
role="tab"
|
|
>
|
|
tab2
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-tabs-content ant-tabs-content-animated"
|
|
style="margin-left:0%;"
|
|
>
|
|
<div
|
|
aria-hidden="false"
|
|
class="ant-tabs-tabpane ant-tabs-tabpane-active"
|
|
role="tabpanel"
|
|
/>
|
|
<div
|
|
aria-hidden="true"
|
|
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
|
|
role="tabpanel"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-card-extra"
|
|
>
|
|
<a
|
|
href="#"
|
|
>
|
|
More
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="ant-card-body"
|
|
>
|
|
<div>
|
|
<p>
|
|
content1
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|