Skip to content

docs(button): update demo with space #6536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 7, 2023
Merged

docs(button): update demo with space #6536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
930ce7e
feat(button): demo space
CCherry07 May 6, 2023
2a67bf0
test(button): update demo snap
CCherry07 May 6, 2023
c09f015
chore(button): disabled demo Ghost space
CCherry07 May 6, 2023
a57c0f4
test(button): update disabled demo snap
CCherry07 May 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
526 changes: 338 additions & 188 deletions components/button/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 7 additions & 5 deletions components/button/demo/basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 7 additions & 5 deletions components/button/demo/block.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 change: 0 additions & 1 deletion components/button/demo/button-group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions components/button/demo/danger.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 40 additions & 29 deletions components/button/demo/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 7 additions & 5 deletions components/button/demo/ghost.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 25 additions & 75 deletions components/button/demo/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 19 additions & 17 deletions components/button/demo/loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
32 changes: 17 additions & 15 deletions components/button/demo/multiple.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading