-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:button): style update and group support gap (#1235)
- Loading branch information
Showing
57 changed files
with
766 additions
and
881 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,4 +6,4 @@ title: | |
|
||
## zh | ||
|
||
通过设置 `block` 将按钮宽度调整为自适应其父元素的宽度。 | ||
通过设置 `block` 将按钮宽度调整为自适应其父元素的宽度, 该按钮常见于移动端和一些表单场景中。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,9 @@ | ||
<template> | ||
<IxButton mode="primary" block>Primary</IxButton> | ||
<IxButton block>Default</IxButton> | ||
<IxButton mode="dashed" block>Dashed</IxButton> | ||
<IxButton mode="text" block>Text</IxButton> | ||
<IxButton mode="link" block href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
<IxSpace vertical block> | ||
<IxButton mode="primary" block>Primary</IxButton> | ||
<IxButton block>Default</IxButton> | ||
<IxButton mode="dashed" block>Dashed</IxButton> | ||
<IxButton mode="text" block>Text</IxButton> | ||
<IxButton mode="link" block href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
</IxSpace> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
--- | ||
order: 1 | ||
order: 6 | ||
title: | ||
zh: 危险按钮 | ||
--- | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,9 @@ | ||
<template> | ||
<IxButton mode="primary" danger>Primary</IxButton> | ||
<IxButton danger>Default</IxButton> | ||
<IxButton mode="dashed" danger>Dashed</IxButton> | ||
<IxButton mode="text" danger>Text</IxButton> | ||
<IxButton mode="link" danger href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
<IxSpace> | ||
<IxButton mode="primary" danger>Primary</IxButton> | ||
<IxButton danger>Default</IxButton> | ||
<IxButton mode="dashed" danger>Dashed</IxButton> | ||
<IxButton mode="text" danger>Text</IxButton> | ||
<IxButton mode="link" danger href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
</IxSpace> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,4 +6,4 @@ title: | |
|
||
## zh | ||
|
||
通过设置 `disabled` 将按钮设为禁用状态。 | ||
禁用状态下按钮不可点击。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,9 @@ | ||
<template> | ||
<IxButton mode="primary" disabled>Primary</IxButton> | ||
<IxButton disabled>Default</IxButton> | ||
<IxButton mode="dashed" disabled>Dashed</IxButton> | ||
<IxButton mode="text" disabled>Text</IxButton> | ||
<IxButton mode="link" disabled href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
<br /> | ||
<IxButton :disabled="disabled">Disabled: {{ disabled }}</IxButton> | ||
<IxButton @click="changeDisabled">Change Disabled</IxButton> | ||
<IxSpace> | ||
<IxButton mode="primary" disabled>Primary</IxButton> | ||
<IxButton disabled>Default</IxButton> | ||
<IxButton mode="dashed" disabled>Dashed</IxButton> | ||
<IxButton mode="text" disabled>Text</IxButton> | ||
<IxButton mode="link" disabled href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
</IxSpace> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, ref } from 'vue' | ||
export default defineComponent({ | ||
setup() { | ||
const disabled = ref(false) | ||
const changeDisabled = () => { | ||
disabled.value = !disabled.value | ||
} | ||
return { disabled, changeDisabled } | ||
}, | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
--- | ||
order: 2 | ||
order: 5 | ||
title: | ||
zh: 幽灵按钮 | ||
--- | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
order: 8 | ||
title: | ||
zh: 按钮组 | ||
--- | ||
|
||
## zh | ||
|
||
提供文字提示 + 操作行为。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<template> | ||
<IxSpace> | ||
<IxButtonGroup> | ||
<IxButton block>Default</IxButton> | ||
<IxButton icon="setting" shape="square"></IxButton> | ||
</IxButtonGroup> | ||
<IxButtonGroup> | ||
<IxButton block>Default</IxButton> | ||
<IxButton icon="down" shape="square"></IxButton> | ||
</IxButtonGroup> | ||
</IxSpace> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,9 @@ | ||
--- | ||
order: 5 | ||
order: 3 | ||
title: | ||
zh: 按钮图标 | ||
--- | ||
|
||
## zh | ||
|
||
通过设置 `icon` 给按钮设置图标。 | ||
图标按钮由图标 + 文字或图标构成,通过图标可增强识别性,以便直观理解。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,8 @@ | ||
<template> | ||
<IxButton icon="search">Search</IxButton> | ||
<IxButton icon="search"></IxButton> | ||
<IxButton icon="download">Download</IxButton> | ||
<IxButton icon="download"></IxButton> | ||
<IxSpace> | ||
<IxButton icon="search">Search</IxButton> | ||
<IxButton icon="search"></IxButton> | ||
<IxButton icon="download">Download</IxButton> | ||
<IxButton icon="download"></IxButton> | ||
</IxSpace> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,4 +6,4 @@ title: | |
|
||
## zh | ||
|
||
通过设置 `loading` 将按钮设为加载中状态, 此时设置的 icon 无效。 | ||
加载中状态下按钮不可点击,此时会显示加载图标,自定义设置的 `icon` 无效。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,9 @@ | ||
<template> | ||
<IxButton mode="primary" icon="search" loading>Primary</IxButton> | ||
<IxButton icon="search" loading>Default</IxButton> | ||
<IxButton mode="dashed" loading>Dashed</IxButton> | ||
<IxButton mode="text" loading>Text</IxButton> | ||
<IxButton mode="link" loading href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
<br /> | ||
<IxButton icon="search" :loading="isLoading">Loading: {{ isLoading }}</IxButton> | ||
<IxButton @click="changeLoading">Change Loading</IxButton> | ||
<IxSpace> | ||
<IxButton mode="primary" icon="search" loading>Primary</IxButton> | ||
<IxButton icon="search" loading>Default</IxButton> | ||
<IxButton mode="dashed" loading>Dashed</IxButton> | ||
<IxButton mode="text" loading>Text</IxButton> | ||
<IxButton mode="link" loading href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
</IxSpace> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, ref } from 'vue' | ||
export default defineComponent({ | ||
setup() { | ||
const isLoading = ref(false) | ||
const changeLoading = () => { | ||
isLoading.value = !isLoading.value | ||
} | ||
return { isLoading, changeLoading } | ||
}, | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,9 @@ | ||
<template> | ||
<IxButton mode="primary">Primary</IxButton> | ||
<IxButton>Default</IxButton> | ||
<IxButton mode="dashed">Dashed</IxButton> | ||
<IxButton mode="text">Text</IxButton> | ||
<IxButton mode="link" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
<IxSpace> | ||
<IxButton mode="primary">Primary</IxButton> | ||
<IxButton>Default</IxButton> | ||
<IxButton mode="dashed">Dashed</IxButton> | ||
<IxButton mode="text">Text</IxButton> | ||
<IxButton mode="link" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
</IxSpace> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,9 @@ | ||
--- | ||
order: 7 | ||
order: 6 | ||
title: | ||
zh: 按钮形状 | ||
--- | ||
|
||
## zh | ||
|
||
通过设置 `shape` 来改变按钮的形状。 | ||
除了默认的长方形按钮,还提供了圆角长方形、正方形、圆形等形状。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,8 @@ | ||
<template> | ||
<IxButton mode="primary" icon="search" shape="circle"></IxButton> | ||
<IxButton icon="download" shape="circle"></IxButton> | ||
<IxButton mode="dashed" icon="download" shape="circle"></IxButton> | ||
<IxButton mode="text" shape="circle">T</IxButton> | ||
<IxButton mode="link" shape="circle" href="https://github.com/IDuxFE/idux" target="_blank">A</IxButton> | ||
<br /> | ||
<IxButton mode="primary" icon="download" shape="round"></IxButton> | ||
<IxButton icon="search" shape="round"></IxButton> | ||
<IxButton mode="dashed" icon="download" shape="round">Download</IxButton> | ||
<IxButton mode="text" shape="round">Text</IxButton> | ||
<IxButton mode="link" shape="round" href="https://github.com/IDuxFE/idux" target="_blank">A</IxButton> | ||
<IxSpace> | ||
<IxButton>Button</IxButton> | ||
<IxButton shape="round">Button</IxButton> | ||
<IxButton icon="download" shape="square"></IxButton> | ||
<IxButton icon="download" shape="circle"></IxButton> | ||
</IxSpace> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,9 @@ | ||
--- | ||
order: 6 | ||
order: 2 | ||
title: | ||
zh: 按钮尺寸 | ||
--- | ||
|
||
## zh | ||
|
||
按钮共有 3 种尺寸:大、中、下,通过设置 `size` 来使用不同的尺寸,默认为中。 | ||
按钮共有 5 种尺寸:超小、小、中、大、超大,默认为中。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,28 @@ | ||
<template> | ||
<IxRadioGroup v-model:value="size"> | ||
<IxRadio value="xs">Extra Small</IxRadio> | ||
<IxRadio value="sm">Small</IxRadio> | ||
<IxRadio value="md">Medium</IxRadio> | ||
<IxRadio value="lg">Large</IxRadio> | ||
<IxRadio value="xl">Extra Large</IxRadio> | ||
</IxRadioGroup> | ||
|
||
<br /> | ||
<IxButton mode="primary" :size="size">Primary</IxButton> | ||
<IxButton :size="size">Default</IxButton> | ||
<IxButton mode="dashed" :size="size">Dashed</IxButton> | ||
<IxButton mode="text" :size="size">Text</IxButton> | ||
<IxButton mode="link" :size="size" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
<IxSpace vertical> | ||
<IxRadioGroup v-model:value="size" :dataSource="sizeData" /> | ||
<IxSpace> | ||
<IxButton mode="primary" :size="size">Primary</IxButton> | ||
<IxButton :size="size">Default</IxButton> | ||
<IxButton mode="dashed" :size="size">Dashed</IxButton> | ||
<IxButton mode="text" :size="size">Text</IxButton> | ||
<IxButton mode="link" :size="size" href="https://github.com/IDuxFE/idux" target="_blank">Link</IxButton> | ||
</IxSpace> | ||
</IxSpace> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
import { ButtonSize } from '@idux/components/button' | ||
const size = ref<ButtonSize>('lg') | ||
const sizeData = [ | ||
{ key: 'xs', label: 'Extra Small' }, | ||
{ key: 'sm', label: 'Small' }, | ||
{ key: 'md', label: 'Medium' }, | ||
{ key: 'lg', label: 'Large' }, | ||
{ key: 'xl', label: 'Extra Large' }, | ||
] | ||
const size = ref<ButtonSize>('md') | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,6 +3,7 @@ category: components | |
type: 通用 | ||
title: Button | ||
subtitle: 按钮 | ||
theme: true | ||
--- | ||
|
||
按钮用于执行一个即时操作。 |
Oops, something went wrong.