mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-03 20:47:56 +08:00
2ee3d43534
* style: affix & util * feat(alert): add customIcon slot * feat(anchor): ts type * style: auto-complete * feat: avatar add crossOrigin & maxPopoverTrigger * style(backTop): v-show instead v-if * style: badge * style: breadcrumb * feat: button add global size * feat: update i18n * feat: picker add disabledTime * test: update snap * doc: update img url * style: fix Card tabs of left position * doc: update cascader doc * feat: collapse * style: comment * style: configprovider * feat: date-picker add soem icon slot * style: update descriptions style * feat: add divider orientationMargin * doc: update drawer * feat: dropdown add destroyPopupOnHide & loading * style: update empty * feat: form add labelWrap * style: update grid * test: update grid snap * fix: image ts error * fix: mentions cannot select, close #5233 * doc: update pagination change info, close #5293 * fix: table dynamic expand error, close #5295 * style: remove not use * release 3.0.0-beta.11 * doc: update typo * feat: input add showCount * feat: inputNumber add prefix slot * style: update layout * style: update list * feat: add locale i18 * style: update locale ts * style: update mentions * feat: menu divider add dashed * perf: menu * perf: menu animate * feat: modal method add wrapClassName * style: update pageheader * feat: update pagination ts * feat: confirm add showCancel & promise * doc: update popover * style: update progress * style: radio * style: update rate、result、row * feat: select add fieldNames * feat: add skeleton button & input * feat: spin tip support slot * style: slider & space * stype: update steps ts type * style: update switch * feat: table add tree filter * test: update input sanp * feat: table add filterMode... * fix: tree autoExpandParent bug * test: update input snap * doc: tabs add destroyInactiveTabPane * style: update tag * style: update timeline & time-picker * fix: Tooltip arrowPointAtCenter 1px shift bug * feat: typography add enterEnterIcon triggerType * doc: update tree-select * fix: deps and TypeScript types * style: udpate transfer * style: update style * doc: add colorScheme * chore: add css var builg * doc: sort api * style: lint code * doc: add css var * test: update snap * chore: add pre script * chore: update lint * perf: collapse animate * perf: collapse tree * perf: typography shaking when edit * doc: update auto-complete demo * fix: table tree not have animate * feat: deprecated dropdown center placement * feat: deprecated dropdown center placement * test: update snap
3.1 KiB
3.1 KiB
| category | type | title | cover |
|---|---|---|---|
| Components | General | Button | https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg |
To trigger an operation.
When To Use
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
In Ant Design Vue we provide 5 types of button.
- Primary button: indicate the main action, one primary button at most in one section.
- Default button: indicate a series of actions without priority.
- Dashed button: used for adding action commonly.
- Text button: used for the most secondary action.
- Link button: used for external links.
And 4 other properties additionally.
danger: used for actions of risk, like deletion or authorization.ghost: used in situations with complex background, home pages usually.disabled: when actions are not available.loading: add loading spinner in button, avoiding multiple submits too.
API
Different button styles can be generated by setting Button properties. The recommended order is: type -> shape -> size -> loading -> disabled.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| block | option to fit button width to its parent width | boolean | false |
|
| danger | set the danger status of button | boolean | false |
2.2.0 |
| disabled | disabled state of button | boolean | false |
|
| ghost | make background transparent and invert text and border colors | boolean | false |
|
| href | redirect url of link button | string | - | |
| htmlType | set the original html type of button, see: MDN |
string | button |
|
| icon | set the icon of button, see: Icon component | v-slot | - | |
| loading | set the loading status of button | boolean | { delay: number } | false |
|
| shape | Can be set button shape | default | circle | round |
'default' | |
| size | set the size of button | large | middle | small |
middle |
|
| target | same as target attribute of a, works when href is specified | string | - | |
| type | can be set button type | primary | ghost | dashed | link | text | default |
default |
events
| Events Name | Description | Arguments | Version |
|---|---|---|---|
| click | set the handler to handle click event |
(event) => void |
It accepts all props which native buttons support.
FAQ
How to remove space between 2 chinese characters
Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use ConfigProvider to set autoInsertSpaceInButton as false.
