Skip to content

Commit 9fdc297

Browse files
CCherry07CCherry07
authored
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
1 parent fded418 commit 9fdc297

File tree

11 files changed

+505
-383
lines changed

11 files changed

+505
-383
lines changed

‎components/button/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 338 additions & 188 deletions
Large diffs are not rendered by default.

‎components/button/demo/basic.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@ There are `primary` button, `default` button, `dashed` button, `text` button and
1717
</docs>
1818

1919
<template>
20-
<a-button type="primary">Primary Button</a-button>
21-
<a-button>Default Button</a-button>
22-
<a-button type="dashed">Dashed Button</a-button>
23-
<a-button type="text">Text Button</a-button>
24-
<a-button type="link">Link Button</a-button>
20+
<a-space wrap>
21+
<a-button type="primary">Primary Button</a-button>
22+
<a-button>Default Button</a-button>
23+
<a-button type="dashed">Dashed Button</a-button>
24+
<a-button type="text">Text Button</a-button>
25+
<a-button type="link">Link Button</a-button>
26+
</a-space>
2527
</template>

‎components/button/demo/block.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,11 @@ title:
1616
</docs>
1717

1818
<template>
19-
<a-button type="primary" block>Primary</a-button>
20-
<a-button block>Default</a-button>
21-
<a-button type="dashed" block>Dashed</a-button>
22-
<a-button danger block>Danger</a-button>
23-
<a-button type="link" block>Link</a-button>
19+
<a-space wrap>
20+
<a-button type="primary" block>Primary</a-button>
21+
<a-button block>Default</a-button>
22+
<a-button type="dashed" block>Dashed</a-button>
23+
<a-button danger block>Danger</a-button>
24+
<a-button type="link" block>Link</a-button>
25+
</a-space>
2426
</template>

‎components/button/demo/button-group.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ Debug usage
3434
<a-button>M</a-button>
3535
<a-button type="dashed">R</a-button>
3636
</a-button-group>
37-
3837
<h4>With Icon</h4>
3938
<a-button-group>
4039
<a-button type="primary">

‎components/button/demo/danger.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ danger is a property of button after antd 2.2.0.
1717
</docs>
1818

1919
<template>
20-
<div>
20+
<a-space warp>
2121
<a-button type="primary" danger>Primary</a-button>
2222
<a-button danger>Default</a-button>
2323
<a-button type="dashed" danger>Dashed</a-button>
2424
<a-button type="text" danger>Text</a-button>
2525
<a-button type="link" danger>Link</a-button>
26-
</div>
26+
</a-space>
2727
</template>

‎components/button/demo/disabled.vue‎

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -16,33 +16,44 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
1616
</docs>
1717

1818
<template>
19-
<a-button type="primary">Primary</a-button>
20-
<a-button type="primary" disabled>Primary(disabled)</a-button>
21-
<br />
22-
<a-button>Default</a-button>
23-
<a-button disabled>Default(disabled)</a-button>
24-
<br />
25-
<a-button type="dashed">Dashed</a-button>
26-
<a-button type="dashed" disabled>Dashed(disabled)</a-button>
27-
<br />
28-
<a-button type="text">Text</a-button>
29-
<a-button type="text" disabled>Text(disabled)</a-button>
30-
<br />
31-
<a-button type="link">Link</a-button>
32-
<a-button type="link" disabled>Link(disabled)</a-button>
33-
<br />
34-
<a-button danger>Danger Default</a-button>
35-
<a-button danger disabled>Danger Default(disabled)</a-button>
36-
<br />
37-
<a-button type="text" danger>Danger Text</a-button>
38-
<a-button type="text" danger disabled>Danger Text(disabled)</a-button>
39-
<br />
40-
<a-button type="link" danger>Danger Link</a-button>
41-
<a-button type="link" danger disabled>Danger Link(disabled)</a-button>
42-
<br />
43-
44-
<div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
45-
<a-button ghost>Ghost</a-button>
46-
<a-button ghost disabled>Ghost(disabled)</a-button>
47-
</div>
19+
<a-space direction="vertical">
20+
<a-space>
21+
<a-button type="primary">Primary</a-button>
22+
<a-button type="primary" disabled>Primary(disabled)</a-button>
23+
</a-space>
24+
<a-space>
25+
<a-button>Default</a-button>
26+
<a-button disabled>Default(disabled)</a-button>
27+
</a-space>
28+
<a-space>
29+
<a-button type="dashed">Dashed</a-button>
30+
<a-button type="dashed" disabled>Dashed(disabled)</a-button>
31+
</a-space>
32+
<a-space>
33+
<a-button type="text">Text</a-button>
34+
<a-button type="text" disabled>Text(disabled)</a-button>
35+
</a-space>
36+
<a-space>
37+
<a-button type="link">Link</a-button>
38+
<a-button type="link" disabled>Link(disabled)</a-button>
39+
</a-space>
40+
<a-space>
41+
<a-button danger>Danger Default</a-button>
42+
<a-button danger disabled>Danger Default(disabled)</a-button>
43+
</a-space>
44+
<a-space>
45+
<a-button danger type="text">Danger Text</a-button>
46+
<a-button danger type="text" disabled>Danger Text(disabled)</a-button>
47+
</a-space>
48+
<a-space>
49+
<a-button danger type="link">Danger Link</a-button>
50+
<a-button danger type="link" disabled>Danger Link(disabled)</a-button>
51+
</a-space>
52+
<div :style="{ padding: '8px', background: 'rgb(190, 200, 200)' }">
53+
<a-space>
54+
<a-button ghost>Ghost</a-button>
55+
<a-button ghost disabled>Ghost(disabled)</a-button>
56+
</a-space>
57+
</div>
58+
</a-space>
4859
</template>

‎components/button/demo/ghost.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@ title:
1717
</docs>
1818

1919
<template>
20-
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
21-
<a-button type="primary" ghost>Primary</a-button>
22-
<a-button ghost>Default</a-button>
23-
<a-button type="dashed" ghost>Dashed</a-button>
24-
<a-button type="primary" danger ghost>Danger</a-button>
20+
<div :style="{ background: 'rgb(190, 200, 200)', padding: '16px 16px' }">
21+
<a-space>
22+
<a-button type="primary" ghost>Primary</a-button>
23+
<a-button ghost>Default</a-button>
24+
<a-button type="dashed" ghost>Dashed</a-button>
25+
<a-button type="primary" danger ghost>Danger</a-button>
26+
</a-space>
2527
</div>
2628
</template>

‎components/button/demo/icon.vue‎

Lines changed: 25 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -20,82 +20,32 @@ If you want specific control over the positioning and placement of the `Icon`, t
2020
</docs>
2121

2222
<template>
23-
<a-button type="primary" shape="circle">
24-
<template #icon><SearchOutlined /></template>
25-
</a-button>
26-
<a-button type="primary" shape="circle">A</a-button>
27-
<a-button type="primary">
28-
<template #icon><SearchOutlined /></template>
29-
Search
30-
</a-button>
31-
<a-button shape="circle">
32-
<template #icon><SearchOutlined /></template>
33-
</a-button>
34-
<a-button>
35-
<template #icon><SearchOutlined /></template>
36-
Search
37-
</a-button>
38-
<a-button shape="circle">
39-
<template #icon><SearchOutlined /></template>
40-
</a-button>
41-
<a-button>
42-
<template #icon><SearchOutlined /></template>
43-
Search
44-
</a-button>
45-
<a-button type="dashed" shape="circle">
46-
<template #icon><SearchOutlined /></template>
47-
</a-button>
48-
<a-button type="dashed">
49-
<template #icon><SearchOutlined /></template>
50-
Search
51-
</a-button>
52-
<a-button href="https://www.google.com">
53-
<template #icon><SearchOutlined /></template>
54-
</a-button>
55-
<br />
56-
<br />
57-
<a-tooltip title="search">
58-
<a-button type="primary" shape="circle" size="large">
59-
<template #icon><SearchOutlined /></template>
60-
</a-button>
61-
</a-tooltip>
62-
<a-button type="primary" shape="circle" size="large">A</a-button>
63-
<a-button type="primary" size="large">
64-
<template #icon><SearchOutlined /></template>
65-
Search
66-
</a-button>
67-
<a-tooltip title="search">
68-
<a-button shape="circle" size="large">
69-
<template #icon><SearchOutlined /></template>
70-
</a-button>
71-
</a-tooltip>
72-
<a-button size="large">
73-
<template #icon><SearchOutlined /></template>
74-
Search
75-
</a-button>
76-
<br />
77-
<a-tooltip title="search">
78-
<a-button shape="circle" size="large">
79-
<template #icon><SearchOutlined /></template>
80-
</a-button>
81-
</a-tooltip>
82-
<a-button size="large">
83-
<template #icon><SearchOutlined /></template>
84-
Search
85-
</a-button>
86-
<a-tooltip title="search">
87-
<a-button type="dashed" shape="circle" size="large">
88-
<template #icon><SearchOutlined /></template>
89-
</a-button>
90-
</a-tooltip>
91-
<a-button type="dashed" size="large">
92-
<template #icon><SearchOutlined /></template>
93-
Search
94-
</a-button>
95-
<a-button size="large" href="https://www.google.com">
96-
<template #icon><SearchOutlined /></template>
97-
</a-button>
23+
<a-space direction="vertical">
24+
<a-space warp>
25+
<a-tooltip title="search">
26+
<a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
27+
</a-tooltip>
28+
<a-button type="primary" shape="circle">A</a-button>
29+
<a-button type="primary" :icon="h(SearchOutlined)">Search</a-button>
30+
<a-tooltip title="search">
31+
<a-button shape="circle" :icon="h(SearchOutlined)" />
32+
</a-tooltip>
33+
<a-button :icon="h(SearchOutlined)">Search</a-button>
34+
</a-space>
35+
<a-space warp>
36+
<a-tooltip title="search">
37+
<a-button shape="circle" :icon="h(SearchOutlined)" />
38+
</a-tooltip>
39+
<a-button :icon="h(SearchOutlined)">Search</a-button>
40+
<a-tooltip title="search">
41+
<a-button type="dashed" shape="circle" :icon="h(SearchOutlined)" />
42+
</a-tooltip>
43+
<a-button type="dashed" :icon="h(SearchOutlined)">Search</a-button>
44+
<a-button :icon="h(SearchOutlined)" href="https://www.google.com" />
45+
</a-space>
46+
</a-space>
9847
</template>
9948
<script lang="ts" setup>
49+
import { h } from 'vue';
10050
import { SearchOutlined } from '@ant-design/icons-vue';
10151
</script>

‎components/button/demo/loading.vue‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,25 @@ A loading indicator can be added to a button by setting the `loading` property o
1616
</docs>
1717

1818
<template>
19-
<a-space style="width: 100%">
20-
<a-button type="primary" loading>Loading</a-button>
21-
<a-button type="primary" size="small" loading>Loading</a-button>
22-
</a-space>
23-
<a-space style="width: 100%">
24-
<a-button type="primary" :loading="loading" @mouseenter="loading = true">
25-
mouseenter me!
26-
</a-button>
27-
<a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
28-
<template #icon><PoweroffOutlined /></template>
29-
延迟1s
30-
</a-button>
31-
</a-space>
32-
<a-space style="width: 100%">
33-
<a-button type="primary" loading />
34-
<a-button type="primary" shape="circle" loading />
35-
<a-button danger shape="round" loading />
19+
<a-space direction="vertical">
20+
<a-space>
21+
<a-button type="primary" loading>Loading</a-button>
22+
<a-button type="primary" size="small" loading>Loading</a-button>
23+
</a-space>
24+
<a-space>
25+
<a-button type="primary" :loading="loading" @mouseenter="loading = true">
26+
mouseenter me!
27+
</a-button>
28+
<a-button type="primary" :loading="iconLoading" @click="enterIconLoading">
29+
<template #icon><PoweroffOutlined /></template>
30+
延迟1s
31+
</a-button>
32+
</a-space>
33+
<a-space>
34+
<a-button type="primary" loading />
35+
<a-button type="primary" shape="circle" loading />
36+
<a-button danger shape="round" loading />
37+
</a-space>
3638
</a-space>
3739
</template>
3840
<script lang="ts" setup>

‎components/button/demo/multiple.vue‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,23 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
1616
</docs>
1717

1818
<template>
19-
<a-button type="primary">Primary</a-button>
20-
<a-button>secondary</a-button>
21-
<a-dropdown>
22-
<template #overlay>
23-
<a-menu @click="handleMenuClick">
24-
<a-menu-item key="1">1st item</a-menu-item>
25-
<a-menu-item key="2">2nd item</a-menu-item>
26-
<a-menu-item key="3">3rd item</a-menu-item>
27-
</a-menu>
28-
</template>
29-
<a-button>
30-
Actions
31-
<DownOutlined />
32-
</a-button>
33-
</a-dropdown>
19+
<a-space>
20+
<a-button type="primary">Primary</a-button>
21+
<a-button>secondary</a-button>
22+
<a-dropdown>
23+
<template #overlay>
24+
<a-menu @click="handleMenuClick">
25+
<a-menu-item key="1">1st item</a-menu-item>
26+
<a-menu-item key="2">2nd item</a-menu-item>
27+
<a-menu-item key="3">3rd item</a-menu-item>
28+
</a-menu>
29+
</template>
30+
<a-button>
31+
Actions
32+
<DownOutlined />
33+
</a-button>
34+
</a-dropdown>
35+
</a-space>
3436
</template>
3537

3638
<script lang="ts" setup>

0 commit comments

Comments
 (0)