github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs(button): update demo with space (#6536) 

* feat(button): demo space

* test(button): update demo snap

* chore(button): disabled demo Ghost space

* test(button): update disabled demo snap
pull/6541/head
Cherry7 2023-05-07 20:33:24 +08:00 committed by GitHub
parent fded418b8a
commit 9fdc297686
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 507 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
components/button/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,39 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/button/demo/basic.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary Button</span>
</button>
<button class="ant-btn ant-btn-default" type="button">
<!----><span>Default Button</span>
</button>
<button class="ant-btn ant-btn-dashed" type="button">
<!----><span>Dashed Button</span>
</button>
<button class="ant-btn ant-btn-text" type="button">
<!----><span>Text Button</span>
</button>
<button class="ant-btn ant-btn-link" type="button">
<!----><span>Link Button</span>
</button>
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary Button</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-default" type="button">
<!----><span>Default Button</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-dashed" type="button">
<!----><span>Dashed Button</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-text" type="button">
<!----><span>Text Button</span>
</button></div>
<!---->
<div class="ant-space-item" style="padding-bottom: 8px;"><button class="ant-btn ant-btn-link" type="button">
<!----><span>Link Button</span>
</button></div>
<!---->
</div>
`;
exports[`renders ./components/button/demo/block.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary ant-btn-block" type="button">
<!----><span>Primary</span>
</button>
<button class="ant-btn ant-btn-default ant-btn-block" type="button">
<!----><span>Default</span>
</button>
<button class="ant-btn ant-btn-dashed ant-btn-block" type="button">
<!----><span>Dashed</span>
</button>
<button class="ant-btn ant-btn-default ant-btn-block ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button>
<button class="ant-btn ant-btn-link ant-btn-block" type="button">
<!----><span>Link</span>
</button>
<div class="ant-space ant-space-horizontal ant-space-align-center" style="flex-wrap: wrap; margin-bottom: -8px;">
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-primary ant-btn-block" type="button">
<!----><span>Primary</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-default ant-btn-block" type="button">
<!----><span>Default</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-block" type="button">
<!----><span>Dashed</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px; padding-bottom: 8px;"><button class="ant-btn ant-btn-default ant-btn-block ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button></div>
<!---->
<div class="ant-space-item" style="padding-bottom: 8px;"><button class="ant-btn ant-btn-link ant-btn-block" type="button">
<!----><span>Link</span>
</button></div>
<!---->
</div>
`;
exports[`renders ./components/button/demo/button-group.vue correctly 1`] = `
@ -71,186 +85,322 @@ exports[`renders ./components/button/demo/button-group.vue correctly 1`] = `
`;
exports[`renders ./components/button/demo/danger.vue correctly 1`] = `
<div><button class="ant-btn ant-btn-primary ant-btn-dangerous" type="button">
<!----><span>Primary</span>
</button><button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Default</span>
</button><button class="ant-btn ant-btn-dashed ant-btn-dangerous" type="button">
<!----><span>Dashed</span>
</button><button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
<!----><span>Text</span>
</button><button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
<!----><span>Link</span>
</button></div>
<div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-dangerous" type="button">
<!----><span>Primary</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Default</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-dangerous" type="button">
<!----><span>Dashed</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
<!----><span>Text</span>
</button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
<!----><span>Link</span>
</button></div>
<!---->
</div>
`;
exports[`renders ./components/button/demo/disabled.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary</span>
</button>
<button disabled="" class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-default" type="button">
<!----><span>Default</span>
</button>
<button disabled="" class="ant-btn ant-btn-default" type="button">
<!----><span>Default(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-dashed" type="button">
<!----><span>Dashed</span>
</button>
<button disabled="" class="ant-btn ant-btn-dashed" type="button">
<!----><span>Dashed(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-text" type="button">
<!----><span>Text</span>
</button>
<button disabled="" class="ant-btn ant-btn-text" type="button">
<!----><span>Text(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-link" type="button">
<!----><span>Link</span>
</button>
<button disabled="" class="ant-btn ant-btn-link" type="button">
<!----><span>Link(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Danger Default</span>
</button>
<button disabled="" class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Danger Default(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
<!----><span>Danger Text</span>
</button>
<button disabled="" class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
<!----><span>Danger Text(disabled)</span>
</button>
<br>
<button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
<!----><span>Danger Link</span>
</button>
<button disabled="" class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
<!----><span>Danger Link(disabled)</span>
</button>
<br>
<div style="padding: 8px 8px 0px 8px; background: rgb(190, 200, 200);"><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Ghost</span>
</button><button disabled="" class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Ghost(disabled)</span>
</button></div>
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
<!----><span>Default</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-default" type="button">
<!----><span>Default(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed" type="button">
<!----><span>Dashed</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-dashed" type="button">
<!----><span>Dashed(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-text" type="button">
<!----><span>Text</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-text" type="button">
<!----><span>Text(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-link" type="button">
<!----><span>Link</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-link" type="button">
<!----><span>Link(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Danger Default</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-default ant-btn-dangerous" type="button">
<!----><span>Danger Default(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
<!----><span>Danger Text</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-text ant-btn-dangerous" type="button">
<!----><span>Danger Text(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
<!----><span>Danger Link</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-link ant-btn-dangerous" type="button">
<!----><span>Danger Link(disabled)</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item">
<div style="padding: 8px; background: rgb(190, 200, 200);">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Ghost</span>
</button></div>
<!---->
<div class="ant-space-item"><button disabled="" class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Ghost(disabled)</span>
</button></div>
<!---->
</div>
</div>
</div>
<!---->
</div>
`;
exports[`renders ./components/button/demo/ghost.vue correctly 1`] = `
<div style="background: rgb(190, 200, 200); padding: 26px 16px 16px;"><button class="ant-btn ant-btn-primary ant-btn-background-ghost" type="button">
<!----><span>Primary</span>
</button><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Default</span>
</button><button class="ant-btn ant-btn-dashed ant-btn-background-ghost" type="button">
<!----><span>Dashed</span>
</button><button class="ant-btn ant-btn-primary ant-btn-background-ghost ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button></div>
<div style="background: rgb(190, 200, 200); padding: 16px 16px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-background-ghost" type="button">
<!----><span>Primary</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-background-ghost" type="button">
<!----><span>Default</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-background-ghost" type="button">
<!----><span>Dashed</span>
</button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-background-ghost ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button></div>
<!---->
</div>
</div>
`;
exports[`renders ./components/button/demo/icon.vue correctly 1`] = `
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-primary" type="button">
<!----><span>A</span>
</button>
<button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-dashed" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<a class="ant-btn ant-btn-default ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
<br>
<br>
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg" type="button">
<!----><span>A</span>
</button>
<button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<br>
<button class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-default ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
<button class="ant-btn ant-btn-dashed ant-btn-lg" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button>
<a class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a>
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;">
<!----><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
</div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary" type="button">
<!----><span>A</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;">
<!----><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
</div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item">
<div warp="" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;">
<!----><button class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
</div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;">
<!----><button class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button>
</div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span><span>Search</span></button></div>
<!---->
<div class="ant-space-item"><a class="ant-btn ant-btn-default ant-btn-icon-only" href="https://www.google.com"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></a></div>
<!---->
</div>
</div>
<!---->
</div>
`;
exports[`renders ./components/button/demo/loading.vue correctly 1`] = `
<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Loading</span></button></div>
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>mouseenter me!</span>
</button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><svg focusable="false" class="" data-icon="poweroff" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path></svg></span><span>延迟1s</span></button></div>
<!---->
</div>
</div>
<!---->
</div>
<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>mouseenter me!</span>
</button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="poweroff" class="anticon anticon-poweroff"><svg focusable="false" class="" data-icon="poweroff" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path></svg></span><span>延迟1s</span></button></div>
<!---->
</div>
<div style="width: 100%;" class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-round ant-btn-default ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<div class="ant-space-item">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-loading ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-round ant-btn-default ant-btn-loading ant-btn-dangerous ant-btn-icon-only" type="button"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></button></div>
<!---->
</div>
</div>
<!---->
</div>
`;
exports[`renders ./components/button/demo/multiple.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary</span>
</button>
<button class="ant-btn ant-btn-default" type="button">
<!----><span>secondary</span>
</button>
<button class="ant-btn ant-btn-default ant-dropdown-trigger" type="button">
<!----><span>Actions</span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
</button>
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
<!----><span>secondary</span>
</button></div>
<!---->
<div class="ant-space-item">
<!----><button class="ant-btn ant-btn-default ant-dropdown-trigger" type="button">
<!----><span>Actions</span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
</button>
</div>
<!---->
</div>
`;
exports[`renders ./components/button/demo/size.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
<br>
<br>
<button class="ant-btn ant-btn-primary ant-btn-lg" type="button">
<!----><span>Primary</span>
</button>
<button class="ant-btn ant-btn-default ant-btn-lg" type="button">
<!----><span>Normal</span>
</button>
<button class="ant-btn ant-btn-dashed ant-btn-lg" type="button">
<!----><span>Dashed</span>
</button>
<button class="ant-btn ant-btn-default ant-btn-lg ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button>
<button class="ant-btn ant-btn-link ant-btn-lg" type="button">
<!----><span>Link</span>
</button>
<br>
<button class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button>
<button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button>
<button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button>
<br>
<div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-lg" type="button">
<!----><span>Primary</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-lg" type="button">
<!----><span>Normal</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-dashed ant-btn-lg" type="button">
<!----><span>Dashed</span>
</button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default ant-btn-lg ant-btn-dangerous" type="button">
<!----><span>Danger</span>
</button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-link ant-btn-lg" type="button">
<!----><span>Link</span>
</button></div>
<!---->
</div>
</div>
<!---->
<div class="ant-space-item">
<div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button></div>
<!---->
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg ant-btn-icon-only" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span></button></div>
<!---->
<div class="ant-space-item"><button class="ant-btn ant-btn-primary ant-btn-lg" type="button"><span role="img" aria-label="download" class="anticon anticon-download"><svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Download</span></button></div>
<!---->
</div>
</div>
<!---->
</div>
`;

12
components/button/demo/basic.vue
View File

@ -17,9 +17,11 @@ There are `primary` button, `default` button, `dashed` button, `text` button and
</docs>
<template>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
<a-button type="text">Text Button</a-button>
<a-button type="link">Link Button</a-button>
<a-space wrap>
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
<a-button type="text">Text Button</a-button>
<a-button type="link">Link Button</a-button>
</a-space>
</template>

12
components/button/demo/block.vue
View File

@ -16,9 +16,11 @@ title:
</docs>
<template>
<a-button type="primary" block>Primary</a-button>
<a-button block>Default</a-button>
<a-button type="dashed" block>Dashed</a-button>
<a-button danger block>Danger</a-button>
<a-button type="link" block>Link</a-button>
<a-space wrap>
<a-button type="primary" block>Primary</a-button>
<a-button block>Default</a-button>
<a-button type="dashed" block>Dashed</a-button>
<a-button danger block>Danger</a-button>
<a-button type="link" block>Link</a-button>
</a-space>
</template>

1
components/button/demo/button-group.vue
View File

@ -34,7 +34,6 @@ Debug usage
<a-button>M</a-button>
<a-button type="dashed">R</a-button>
</a-button-group>
<h4>With Icon</h4>
<a-button-group>
<a-button type="primary">

4
components/button/demo/danger.vue
View File

@ -17,11 +17,11 @@ danger is a property of button after antd 2.2.0.
</docs>
<template>
<div>
<a-space warp>
<a-button type="primary" danger>Primary</a-button>
<a-button danger>Default</a-button>
<a-button type="dashed" danger>Dashed</a-button>
<a-button type="text" danger>Text</a-button>
<a-button type="link" danger>Link</a-button>
</div>
</a-space>
</template>

69
components/button/demo/disabled.vue
View File

@ -16,33 +16,44 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
</docs>
<template>
<a-button type="primary">Primary</a-button>
<a-button type="primary" disabled>Primary(disabled)</a-button>
<br />
<a-button>Default</a-button>
<a-button disabled>Default(disabled)</a-button>
<br />
<a-button type="dashed">Dashed</a-button>
<a-button type="dashed" disabled>Dashed(disabled)</a-button>
<br />
<a-button type="text">Text</a-button>
<a-button type="text" disabled>Text(disabled)</a-button>
<br />
<a-button type="link">Link</a-button>
<a-button type="link" disabled>Link(disabled)</a-button>
<br />
<a-button danger>Danger Default</a-button>
<a-button danger disabled>Danger Default(disabled)</a-button>
<br />
<a-button type="text" danger>Danger Text</a-button>
<a-button type="text" danger disabled>Danger Text(disabled)</a-button>
<br />
<a-button type="link" danger>Danger Link</a-button>
<a-button type="link" danger disabled>Danger Link(disabled)</a-button>
<br />
<div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
<a-button ghost>Ghost</a-button>
<a-button ghost disabled>Ghost(disabled)</a-button>
</div>
<a-space direction="vertical">
<a-space>
<a-button type="primary">Primary</a-button>
<a-button type="primary" disabled>Primary(disabled)</a-button>
</a-space>
<a-space>
<a-button>Default</a-button>
<a-button disabled>Default(disabled)</a-button>
</a-space>
<a-space>
<a-button type="dashed">Dashed</a-button>
<a-button type="dashed" disabled>Dashed(disabled)</a-button>
</a-space>
<a-space>
<a-button type="text">Text</a-button>
<a-button type="text" disabled>Text(disabled)</a-button>
</a-space>
<a-space>
<a-button type="link">Link</a-button>
<a-button type="link" disabled>Link(disabled)</a-button>
</a-space>
<a-space>
<a-button danger>Danger Default</a-button>
<a-button danger disabled>Danger Default(disabled)</a-button>
</a-space>
<a-space>
<a-button danger type="text">Danger Text</a-button>
<a-button danger type="text" disabled>Danger Text(disabled)</a-button>
</a-space>
<a-space>
<a-button danger type="link">Danger Link</a-button>
<a-button danger type="link" disabled>Danger Link(disabled)</a-button>
</a-space>
<div :style="{ padding: '8px', background: 'rgb(190, 200, 200)' }">
<a-space>
<a-button ghost>Ghost</a-button>
<a-button ghost disabled>Ghost(disabled)</a-button>
</a-space>
</div>
</a-space>
</template>

12
components/button/demo/ghost.vue
View File

@ -17,10 +17,12 @@ title:
</docs>
<template>
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
<a-button type="primary" ghost>Primary</a-button>
<a-button ghost>Default</a-button>
<a-button type="dashed" ghost>Dashed</a-button>
<a-button type="primary" danger ghost>Danger</a-button>
<div :style="{ background: 'rgb(190, 200, 200)', padding: '16px 16px' }">
<a-space>
<a-button type="primary" ghost>Primary</a-button>
<a-button ghost>Default</a-button>
<a-button type="dashed" ghost>Dashed</a-button>
<a-button type="primary" danger ghost>Danger</a-button>
</a-space>
</div>
</template>

100
components/button/demo/icon.vue
View File

@ -20,82 +20,32 @@ If you want specific control over the positioning and placement of the `Icon`, t
</docs>
<template>
<a-button type="primary" shape="circle">
<template #icon><SearchOutlined /></template>
</a-button>
<a-button type="primary" shape="circle">A</a-button>
<a-button type="primary">
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-button shape="circle">
<template #icon><SearchOutlined /></template>
</a-button>
<a-button>
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-button shape="circle">
<template #icon><SearchOutlined /></template>
</a-button>
<a-button>
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-button type="dashed" shape="circle">
<template #icon><SearchOutlined /></template>
</a-button>
<a-button type="dashed">
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-button href="https://www.google.com">
<template #icon><SearchOutlined /></template>
</a-button>
<br />
<br />
<a-tooltip title="search">
<a-button type="primary" shape="circle" size="large">
<template #icon><SearchOutlined /></template>
</a-button>
</a-tooltip>
<a-button type="primary" shape="circle" size="large">A</a-button>
<a-button type="primary" size="large">
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-tooltip title="search">
<a-button shape="circle" size="large">
<template #icon><SearchOutlined /></template>
</a-button>
</a-tooltip>
<a-button size="large">
<template #icon><SearchOutlined /></template>
Search
</a-button>
<br />
<a-tooltip title="search">
<a-button shape="circle" size="large">
<template #icon><SearchOutlined /></template>
</a-button>
</a-tooltip>
<a-button size="large">
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-tooltip title="search">
<a-button type="dashed" shape="circle" size="large">
<template #icon><SearchOutlined /></template>
</a-button>
</a-tooltip>
<a-button type="dashed" size="large">
<template #icon><SearchOutlined /></template>
Search
</a-button>
<a-button size="large" href="https://www.google.com">
<template #icon><SearchOutlined /></template>
</a-button>
<a-space direction="vertical">
<a-space warp>
<a-tooltip title="search">
<a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
</a-tooltip>
<a-button type="primary" shape="circle">A</a-button>
<a-button type="primary" :icon="h(SearchOutlined)">Search</a-button>
<a-tooltip title="search">
<a-button shape="circle" :icon="h(SearchOutlined)" />
</a-tooltip>
<a-button :icon="h(SearchOutlined)">Search</a-button>
</a-space>
<a-space warp>
<a-tooltip title="search">
<a-button shape="circle" :icon="h(SearchOutlined)" />
</a-tooltip>
<a-button :icon="h(SearchOutlined)">Search</a-button>
<a-tooltip title="search">
<a-button type="dashed" shape="circle" :icon="h(SearchOutlined)" />
</a-tooltip>
<a-button type="dashed" :icon="h(SearchOutlined)">Search</a-button>
<a-button :icon="h(SearchOutlined)" href="https://www.google.com" />
</a-space>
</a-space>
</template>
<script lang="ts" setup>
import { h } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
</script>

36
components/button/demo/loading.vue
View File

@ -16,23 +16,25 @@ A loading indicator can be added to a button by setting the `loading` property o
</docs>
<template>
<a-space style="width: 100%">
<a-button type="primary" loading>Loading</a-button>
<a-button type="primary" size="small" loading>Loading</a-button>
</a-space>
<a-space style="width: 100%">
<a-button type="primary" :loading="loading" @mouseenter="loading = true">
mouseenter me!
</a-button>
<a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
<template #icon><PoweroffOutlined /></template>
延迟1s
</a-button>
</a-space>
<a-space style="width: 100%">
<a-button type="primary" loading />
<a-button type="primary" shape="circle" loading />
<a-button danger shape="round" loading />
<a-space direction="vertical">
<a-space>
<a-button type="primary" loading>Loading</a-button>
<a-button type="primary" size="small" loading>Loading</a-button>
</a-space>
<a-space>
<a-button type="primary" :loading="loading" @mouseenter="loading = true">
mouseenter me!
</a-button>
<a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
<template #icon><PoweroffOutlined /></template>
延迟1s
</a-button>
</a-space>
<a-space>
<a-button type="primary" loading />
<a-button type="primary" shape="circle" loading />
<a-button danger shape="round" loading />
</a-space>
</a-space>
</template>
<script lang="ts" setup>

32
components/button/demo/multiple.vue
View File

@ -16,21 +16,23 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
</docs>
<template>
<a-button type="primary">Primary</a-button>
<a-button>secondary</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1">1st item</a-menu-item>
<a-menu-item key="2">2nd item</a-menu-item>
<a-menu-item key="3">3rd item</a-menu-item>
</a-menu>
</template>
<a-button>
Actions
<DownOutlined />
</a-button>
</a-dropdown>
<a-space>
<a-button type="primary">Primary</a-button>
<a-button>secondary</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1">1st item</a-menu-item>
<a-menu-item key="2">2nd item</a-menu-item>
<a-menu-item key="3">3rd item</a-menu-item>
</a-menu>
</template>
<a-button>
Actions
<DownOutlined />
</a-button>
</a-dropdown>
</a-space>
</template>
<script lang="ts" setup>

84
components/button/demo/size.vue
View File

@ -20,47 +20,49 @@ If a large or small button is desired, set the `size` property to either `large`
</docs>
<template>
<a-radio-group v-model:value="size">
<a-radio-button value="large">Large</a-radio-button>
<a-radio-button value="default">Default</a-radio-button>
<a-radio-button value="small">Small</a-radio-button>
</a-radio-group>
<br />
<br />
<a-button type="primary" :size="size">Primary</a-button>
<a-button :size="size">Normal</a-button>
<a-button type="dashed" :size="size">Dashed</a-button>
<a-button danger :size="size">Danger</a-button>
<a-button type="link" :size="size">Link</a-button>
<br />
<a-button type="primary" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" shape="circle" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" shape="round" :size="size">
<template #icon>
<DownloadOutlined />
</template>
Download
</a-button>
<a-button type="primary" shape="round" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" :size="size">
<template #icon>
<DownloadOutlined />
</template>
Download
</a-button>
<br />
<a-space direction="vertical">
<a-radio-group v-model:value="size">
<a-radio-button value="large">Large</a-radio-button>
<a-radio-button value="default">Default</a-radio-button>
<a-radio-button value="small">Small</a-radio-button>
</a-radio-group>
<a-space>
<a-button type="primary" :size="size">Primary</a-button>
<a-button :size="size">Normal</a-button>
<a-button type="dashed" :size="size">Dashed</a-button>
<a-button danger :size="size">Danger</a-button>
<a-button type="link" :size="size">Link</a-button>
</a-space>
<a-space>
<a-button type="primary" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" shape="circle" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" shape="round" :size="size">
<template #icon>
<DownloadOutlined />
</template>
Download
</a-button>
<a-button type="primary" shape="round" :size="size">
<template #icon>
<DownloadOutlined />
</template>
</a-button>
<a-button type="primary" :size="size">
<template #icon>
<DownloadOutlined />
</template>
Download
</a-button>
</a-space>
</a-space>
</template>
<script lang="ts" setup>
import { DownloadOutlined } from '@ant-design/icons-vue';