mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00

* refactor(components): el-alert icon (#3441)

* refactor(components): el-alert icon

* fix: el-alert test

* fix: [el-alert] lint error

* feat(utils): add icon util

* refactor(components): el-alert icon

* refactor(utils): icon

* test: update alert test

* refactor: remove el-icon in util

* refactor(components): el-notification icon (#3512)

* chore: temp save changes

* refactor: update icon

* fix: var

* docs: update icon

* fix: type class error

* style: remove unused class

* fix: update icon type

* docs: update icon

* fix: update iconComponent

* refactor(components): el-dialog icon (#3505)

* refactor(components): [el-dialog] icon

* fix: typo

* refactor: dialog icon ref

* refactor: dialog icon

* style: update close button size

* refactor(components): el-message-box icon (#3507)

* refactor(components): message-box icon

* refactor(components): message icon

* fix: test

* refactor: update ref

* fix: test

* docs: update icon

* fix: delete unused code

* docs: update type

* fix: update close button size

* fix: type

* fix: icon type class

* fix: icon type

* fix: update type class

* refactor(components): el-popconfirm icon (#3513)

* refactor(components): el-popconfirm icon

* fix: space styles

* docs: update example

* docs: update example for trigger event

* refactor(components): el-page-header icon (#3518)

* refactor(components): el-page-header icon

* docs: update icon

* fix: space errors

* refactor(components): el-steps icon (#3520)

* refactor(components): el-backtop icon (#3514)

* refactor(components): el-backtop icon

* fix: update font size

* refactor(components): el-button icon (#3536)

* refactor(components): el-button icon

* fix: update example

* refactor(components): el-button icon

* refactor: style simplify

Co-authored-by: imswk <syfzxx@vip.qq.com>

* refactor(components): el-tree icon (#3590)

Co-authored-by: qianjie <qianjie@patsnap.com>

* refactor(components): el-avatar icon (#3599)

Co-authored-by: qianjie <qianjie@patsnap.com>

* refactor(components): el-carousel icon (#3602)

Co-authored-by: qianjie <qianjie@patsnap.com>

* refactor(components): el-progress icon (#3607)

Co-authored-by: qianjie <qianjie@patsnap.com>

* refactor(components): el-result icon (#3609)

Co-authored-by: qianjie <qianjie@patsnap.com>

* refactor(components): el-timeline icon (#3646)

Co-authored-by: qianjie <qianjie@patsnap.com>

* refactor(components): el-table icon (#3611)

Co-authored-by: qianjie <qianjie@patsnap.com>

* chore: add vue to gitignore

* fix: buildProp error

* refactor(components): el-pagination icon (#3605)

* test: el-menu deprecated icon font (#3794)

* test: el-loading deprecated icon font (#3795)

* chore: Update changelog 1.1.0-beta.20 (#3838)

* fix: about custom extension of table column (#3437)

* refactor(components): el-autocomplete icon (#3783)

* refactor(components): el-dropdown icon (#3517)

* refactor(components): el-dropdown icon

* fix: arrow down icon size

* style: revert

* fix: font-size

* refactor(components): el-link icon (#3538)

* refactor(components): el-link icon

* refactor: update example

* fix: import icons

* docs: add tip

* refactor: update link icon

* fix: icon align

* fix: typo

* refactor(components): el-select icon (#3780)

* refactor(components): el-input icon (#3565)

* refactor(components): input icon

* docs: update example

* refactor(components): el-select icon

* docs: icon usage

* fix: input style

* fix: add scoped

* docs: fix icon

* fix: icon align

* fix: icon align

* fix: typo

* fix: typo

* refactor(components): el-input-number icon (#3566)

* refactor(components): el-input-number icon

* fix: icon align

* refactor(components): el-tag icon (#3793)

* refactor(components): el-tag icon

* fix: icon align

* fix: icon margin

* refactor(components): el-switch icon (#3787)

* refactor(components): el-switch icon

* fix: icon align

* docs: add icon usage

* refactor(components): el-collapse icon (#3788)

* refactor(components): el-collapse icon

* docs: update icon demo

* fix: typo

* refactor(components): el-uplod icon (#3598)

* refactor(components): el-uplod icon

* docs: update icon useage

* docs: fix icon

* docs: fix icon

* docs: update upload-filled icon

* fix: icon align

* fix: item icon align

* refactor(components): el-select-v2 icon (#3781)

* refactor(components): el-select-v2 icon

* revert: play/main.ts

* fix: icon style

* fix: icon solt

* refactor(components): el-cascader icon (#3785)

* refactor(components): input icon

* docs: update example

* refactor(components): el-select icon

* refactor(components): el-cascader icon

* refactor(components): el-tag icon

* fix: icon align

* fix: icon margin

* docs: icon usage

* fix: input style

* fix: add scoped

* test: remove unuesd code

* fix: cascader-panel

* fix: icon style

* fix: icon animation

* refactor(components): el-drawer icon (#3796)

* refactor(components): el-drawer icon

* fix: close icon size

* fix: close icon align

* refactor(components): el-transfer icon (#3792)

* refactor(components): el-transfer icon

* fix: icon align

* refactor(components): el-image-viewer icon (#3797)

* refactor(components): el-image-view icon

* fix: icon size

* docs: update domo

* style: format vue

* fix: fullscreen icon

* Add cursor for icons

Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

* refactor(components): rate-icon (#3891)

* refactor(components): el-rate icon

* docs: update example

* docs: update

* test: update

* docs: update

* fix: variable rename

* fix: demo update

* fix: allow half bug

* refactor(components): el-time-picker icon (#3834)

* refactor(components): el-button icon

* refactor(components): date-picker icon

* refactor(components): input icon

* docs: update example

* refactor(components): el-select icon

* refactor(components): el-time-select icon

* fix: icon width

* docs: icon usage

* fix: input style

* fix: add scoped

* fix: icon size

* docs: icon display

* fix: icon in button

* docs: fix error

* refactor(components): el-time-picker icon

* fix: var

* fix: icon align

* test: delete unused code

* test: fix error

* fix: remove unused code

* docs: fix typo

* docs: update icon

* fix: default prefix icon

* fix: range picker icon align

* Update cursor for picker

Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

* fix(components): el-input close icon

* chore: delete fonts

* fix: copy full style

Co-authored-by: imswk <syfzxx@vip.qq.com>
Co-authored-by: bastarder <85257684@qq.com>
Co-authored-by: qianjie <qianjie@patsnap.com>
Co-authored-by: Element <wallement@gmail.com>
Co-authored-by: Alan Wang <948467222@qq.com>
Co-authored-by: jeremywuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

2021-10-27 23:17:13 +08:00

4.1 KiB

Raw Blame History

title	lang
Button	en-US

Button

Commonly used button.

Basic usage

:::demo Use type, plain, round and circle to define Button's style.

button/basic

:::

Disabled Button

The disabled attribute determines if the button is disabled.

:::demo Use disabled attribute to determine whether a button is disabled. It accepts a Boolean value.

button/disabled

:::

Text Button

Buttons without border and background.

:::demo

button/text

:::

Icon Button

Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.

:::demo Use the icon attribute to add icon. You can find the icon list in Element Plus icon component. Adding icons to the right side of the text is achievable with an <i> tag. Custom icons can be used as well.

button/icon

:::

Button Group

Displayed as a button group, can be used to group a series of similar operations.

:::demo Use tag <el-button-group> to group your buttons.

button/group

:::

Loading Button

Click the button to load data, then the button displays a loading state.

:::demo Set loading attribute to true to display loading state.

button/loading

:::

Sizes

Besides default size, Button component provides three additional sizes for you to choose among different scenarios.

:::demo Use attribute size to set additional sizes with medium, small or mini.

button/size

:::

Button Attributes

Attribute	Description	Type	Accepted Values	Default
size	button size	string	medium / small / mini	—
type	button type	string	primary / success / warning / danger / info / text	—
plain	determine whether it's a plain 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
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

Button Slots

Name	Description
—	customize default content

Button-Group Attributes

Attribute	Description	Type	Accepted Values	Default
size	control the size of buttons in this button-group	string	medium / small / mini	—

Button-Group Slots

Name	Description	Subtags
-	customize button group content	Button

4.1 KiB Raw Blame History