mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [button] (#10594)

Browse Source 
* docs(components): [button]

* docs(components): [button]
This commit is contained in:
Xc 2022-11-14 10:46:38 +08:00 committed by GitHub
parent 6ab5d7c248
commit b3553a1cae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 102 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
docs/en-US/component/button.md
View File

@ -123,45 +123,59 @@ button/custom
:::
## Button Attributes
## Button API
| Name | Description | Type | Accepted Values | Default |
| ---------------------------------- | ----------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------- | ------- |
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / <del>text</del> | — |
| plain | determine whether it's a plain button | boolean | — | false |
| text<VersionTag version="2.2.0" /> | determine whether it's a text button | boolean | — | false |
| bg<VersionTag version="2.2.0" /> | determine whether the text button background color is always on | boolean | — | false |
| link<VersionTag version="2.2.1" /> | determine whether it's a link button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
| circle | determine whether it's a circle button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| loading-icon | customize loading icon component | `string \| Component` | — | Loading |
| disabled | disable the button | boolean | — | false |
| icon | icon component | `string \| Component` | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |
| auto-insert-space | automatically insert a space between two chinese characters | boolean | | — |
| color | custom button color, automatically calculate `hover` and `active` color | string | | — |
| dark | dark mode, which automatically converts `color` to dark mode colors | boolean | | false |
### Attributes
## Button Slots
| Name | Description | Type | Default |
| ---------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------- |
| size | button size | ^[string]`'large'\| 'default'\| 'small'` | — |
| type | button type | ^[string]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'\| 'text'(delte)` | — |
| plain | determine whether it's a plain button | ^[boolean] | false |
| text<VersionTag version="2.2.0" /> | determine whether it's a text button | ^[boolean] | false |
| bg<VersionTag version="2.2.0" /> | determine whether the text button background color is always on | ^[boolean] | false |
| link<VersionTag version="2.2.1" /> | determine whether it's a link button | ^[boolean] | false |
| round | determine whether it's a round button | ^[boolean] | false |
| circle | determine whether it's a circle button | ^[boolean] | false |
| loading | determine whether it's loading | ^[boolean] | false |
| loading-icon | customize loading icon component | ^[string] / ^[Component] | Loading |
| disabled | disable the button | ^[boolean] | false |
| icon | icon component | ^[string] / ^[Component] | — |
| autofocus | same as native button's `autofocus` | ^[boolean] | false |
| native-type | same as native button's `type` | ^[string]`'button'\| 'submit'\| 'reset'` | button |
| auto-insert-space | automatically insert a space between two chinese characters | ^[boolean] | — |
| color | custom button color, automatically calculate `hover` and `active` color | ^[string] | — |
| dark | dark mode, which automatically converts `color` to dark mode colors | ^[boolean] | false |
### Slots
| Name | Description |
| ------- | --------------------------- |
| — | customize default content |
| default | customize default content |
| loading | customize loading component |
| icon | customize icon component |
## Button-Group Attributes
### Exposes
| Name | Description | Type | Accepted Values | Default |
| ---- | ------------------------------------------------ | ------ | ------------------------------------------- | ------- |
| size | control the size of buttons in this button-group | string | large / default /small | — |
| type | control the type of buttons in this button-group | string | primary / success / warning / danger / info | — |
| Name | Description | Type |
| -------------- | -------------------- | -------------------------------------------------------------------------------------------------------------- |
| ref | button html element | ^[Object]`Ref<HTMLButtonElement>` |
| size | button size | ^[Object]`ComputedRef<'' \| 'small' \| 'default' \| 'large'>` |
| type | button type | ^[Object]`ComputedRef<'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'>` |
| disabled | button disabled | ^[Object]`ComputedRef<boolean>` |
| shouldAddSpace | whether adding space | ^[Object]`ComputedRef<boolean>` |
## Button-Group Slots
## Button-Group API
| Name | Description | Subtags |
| ---- | ------------------------------ | ------- |
| - | customize button group content | Button |
### Attributes
| Name | Description | Type | Default |
| ---- | ------------------------------------------------ | ---------------------------------------------------------------- | ------- |
| size | control the size of buttons in this button-group | ^[string]`'large'\| 'default'\| 'small'` | — |
| type | control the type of buttons in this button-group | ^[string]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'` | — |
### Slots
| Name | Description | Subtags |
| ------- | ------------------------------ | ------- |
| default | customize button group content | Button |

6
packages/components/button/src/button-group.ts
View File

@ -3,7 +3,13 @@ import { buttonProps } from './button'
import type { ExtractPropTypes } from 'vue'
export const buttonGroupProps = {
/**
* @description control the size of buttons in this button-group
*/
size: buttonProps.size,
/**
* @description control the type of buttons in this button-group
*/
type: buttonProps.type,
} as const
export type ButtonGroupProps = ExtractPropTypes<typeof buttonGroupProps>

51
packages/components/button/src/button.ts
View File

@ -20,35 +20,86 @@ export const buttonTypes = [
export const buttonNativeTypes = ['button', 'submit', 'reset'] as const
export const buttonProps = buildProps({
/**
* @description button size
*/
size: useSizeProp,
/**
* @description disable the button
*/
disabled: Boolean,
/**
* @description button type
*/
type: {
type: String,
values: buttonTypes,
default: '',
},
/**
* @description icon component
*/
icon: {
type: iconPropType,
},
/**
* @description native button type
*/
nativeType: {
type: String,
values: buttonNativeTypes,
default: 'button',
},
/**
* @description determine whether it's loading
*/
loading: Boolean,
/**
* @description customize loading icon component
*/
loadingIcon: {
type: iconPropType,
default: () => Loading,
},
/**
* @description determine whether it's a plain button
*/
plain: Boolean,
/**
* @description determine whether it's a text button
*/
text: Boolean,
/**
* @description determine whether it's a link button
*/
link: Boolean,
/**
* @description determine whether the text button background color is always on
*/
bg: Boolean,
/**
* @description native button autofocus
*/
autofocus: Boolean,
/**
* @description determine whether it's a round button
*/
round: Boolean,
/**
* @description determine whether it's a circle button
*/
circle: Boolean,
/**
* @description custom button color, automatically calculate `hover` and `active` color
*/
color: String,
/**
* @description dark mode, which automatically converts `color` to dark mode colors
*/
dark: Boolean,
/**
* @description automatically insert a space between two chinese characters
*/
autoInsertSpace: {
type: Boolean,
default: undefined,