mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
feat(components): [button] update text button (#7515)
This commit is contained in:
JeremyWuuuuu
@@ -12,13 +12,13 @@ const { shouldShow, scrollToTop } = useBackTop()
|
||||
<div class="sub-nav py-3 flex items-center">
|
||||
<ToggleSidebarBtn v-if="hasSidebar" @click="$emit('open-menu')" />
|
||||
<Transition name="shifting">
|
||||
<ElButton
|
||||
type="text"
|
||||
<ElLink
|
||||
:class="{ 'go-back-top': true, show: shouldShow }"
|
||||
:underline="false"
|
||||
class="height-5"
|
||||
size="small"
|
||||
:class="{ 'go-back-top': true, show: shouldShow }"
|
||||
@click.prevent.stop="scrollToTop"
|
||||
>{{ 'Back to top' }}</ElButton
|
||||
>{{ 'Back to top' }}</ElLink
|
||||
>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
@@ -27,6 +27,16 @@ button/disabled
|
||||
|
||||
## Text Button
|
||||
|
||||
:::tip
|
||||
|
||||
Text button has been upgraded with a new design since <el-tag round effect="plain" size="small">2.2.0</el-tag> , if you want to use the
|
||||
previous version like button, you might want to check [Link](./link.md#basic) out.
|
||||
|
||||
The API is also updated, because the `type` attribute also represents the button's style. So we have to make a new API
|
||||
`text: boolean` for text button.
|
||||
|
||||
:::
|
||||
|
||||
Buttons without border and background.
|
||||
|
||||
:::demo
|
||||
@@ -99,20 +109,22 @@ button/custom
|
||||
|
||||
## Button Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ----------------- | ----------------------------------------------------------- | ------------------ | -------------------------------------------------- | ------- |
|
||||
| size | button size | string | large / default /small | — |
|
||||
| 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 |
|
||||
| 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 | | — |
|
||||
| Attribute | 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 |
|
||||
| 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 | | — |
|
||||
|
||||
## Button Slots
|
||||
|
||||
|
||||
@@ -1,4 +1,47 @@
|
||||
<template>
|
||||
<el-button type="text">Text Button</el-button>
|
||||
<el-button type="text" disabled>Text Button</el-button>
|
||||
<p>Basic text button</p>
|
||||
<div class="flex justify-space-between mb-4">
|
||||
<el-button
|
||||
v-for="button in buttons"
|
||||
:key="button.text"
|
||||
:type="button.type"
|
||||
text
|
||||
>{{ button.text }}</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<p>Background color always on</p>
|
||||
<div class="flex justify-space-between mb-4">
|
||||
<el-button
|
||||
v-for="button in buttons"
|
||||
:key="button.text"
|
||||
:type="button.type"
|
||||
text
|
||||
bg
|
||||
>{{ button.text }}</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<p>Disabled text button</p>
|
||||
<div class="flex justify-space-between">
|
||||
<el-button
|
||||
v-for="button in buttons"
|
||||
:key="button.text"
|
||||
:type="button.type"
|
||||
text
|
||||
disabled
|
||||
>{{ button.text }}</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const buttons = [
|
||||
{ type: '', text: 'plain' },
|
||||
{ type: 'primary', text: 'primary' },
|
||||
{ type: 'success', text: 'success' },
|
||||
{ type: 'info', text: 'info' },
|
||||
{ type: 'warning', text: 'warning' },
|
||||
{ type: 'danger', text: 'danger' },
|
||||
] as const
|
||||
</script>
|
||||
|
||||
@@ -60,6 +60,18 @@ describe('Button.vue', () => {
|
||||
expect(wrapper.classes()).toContain('is-circle')
|
||||
})
|
||||
|
||||
it('text', async () => {
|
||||
const wrapper = mount(Button, {
|
||||
props: { text: true },
|
||||
})
|
||||
|
||||
expect(wrapper.classes()).toContain('is-text')
|
||||
await wrapper.setProps({
|
||||
bg: true,
|
||||
})
|
||||
expect(wrapper.classes()).toContain('is-has-bg')
|
||||
})
|
||||
|
||||
test('render text', () => {
|
||||
const wrapper = mount(Button, {
|
||||
slots: {
|
||||
|
||||
@@ -11,7 +11,6 @@ export const buttonTypes = [
|
||||
'warning',
|
||||
'info',
|
||||
'danger',
|
||||
'text',
|
||||
'',
|
||||
] as const
|
||||
export const buttonNativeTypes = ['button', 'submit', 'reset'] as const
|
||||
@@ -39,6 +38,8 @@ export const buttonProps = buildProps({
|
||||
default: () => Loading,
|
||||
},
|
||||
plain: Boolean,
|
||||
text: Boolean,
|
||||
bg: Boolean,
|
||||
autofocus: Boolean,
|
||||
round: Boolean,
|
||||
circle: Boolean,
|
||||
|
||||
@@ -10,7 +10,10 @@
|
||||
ns.is('plain', plain),
|
||||
ns.is('round', round),
|
||||
ns.is('circle', circle),
|
||||
ns.is('text', text),
|
||||
ns.is('has-bg', bg),
|
||||
]"
|
||||
:aria-disabled="_disabled || loading"
|
||||
:disabled="_disabled || loading"
|
||||
:autofocus="autofocus"
|
||||
:type="nativeType"
|
||||
|
||||
@@ -30,11 +30,7 @@ $button-icon-span-gap: map.merge(
|
||||
height: map.get($input-height, 'default');
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: getCssVar('button', 'bg-color');
|
||||
border: getCssVar('border');
|
||||
border-color: getCssVar('button', 'border-color');
|
||||
color: getCssVar('button', 'text-color');
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
@@ -42,6 +38,28 @@ $button-icon-span-gap: map.merge(
|
||||
font-weight: getCssVar('button', 'font-weight');
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:not(.is-text) {
|
||||
background-color: getCssVar('button', 'bg-color');
|
||||
border: getCssVar('border');
|
||||
border-color: getCssVar('button', 'border-color');
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: getCssVar('button', 'hover', 'text-color');
|
||||
border-color: getCssVar('button', 'hover', 'border-color');
|
||||
background-color: getCssVar('button', 'hover', 'bg-color');
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: getCssVar('button', 'active', 'text-color');
|
||||
border-color: getCssVar('button', 'active', 'border-color');
|
||||
background-color: getCssVar('button', 'active', 'bg-color');
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: inline-flex;
|
||||
@@ -59,21 +77,6 @@ $button-icon-span-gap: map.merge(
|
||||
map.get($button-border-radius, 'default')
|
||||
);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: getCssVar('button', 'hover', 'text-color');
|
||||
border-color: getCssVar('button', 'hover', 'border-color');
|
||||
background-color: getCssVar('button', 'hover', 'bg-color');
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: getCssVar('button', 'active', 'text-color');
|
||||
border-color: getCssVar('button', 'active', 'border-color');
|
||||
background-color: getCssVar('button', 'active', 'bg-color');
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
@@ -93,11 +96,11 @@ $button-icon-span-gap: map.merge(
|
||||
('color', 'primary')
|
||||
);
|
||||
@include css-var-from-global(
|
||||
('button', 'hover-bg-color'),
|
||||
('button', 'hover', 'bg-color'),
|
||||
('fill-color', 'blank')
|
||||
);
|
||||
@include css-var-from-global(
|
||||
('button', 'hover-border-color'),
|
||||
('button', 'hover', 'border-color'),
|
||||
('color', 'primary')
|
||||
);
|
||||
}
|
||||
@@ -147,7 +150,39 @@ $button-icon-span-gap: map.merge(
|
||||
padding: map.get($button-padding-vertical, 'default') - $button-border-width;
|
||||
}
|
||||
|
||||
@include e(text) {
|
||||
@include when(text) {
|
||||
color: getCssVar('button', 'text-color');
|
||||
border: 0 solid transparent;
|
||||
background-color: transparent;
|
||||
|
||||
@include when(disabled) {
|
||||
color: getCssVar('button', 'disabled', 'text-color');
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&:not(.is-disabled) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: getCssVar('fill-color', 'light');
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: getCssVar('fill-color');
|
||||
}
|
||||
|
||||
@include when(has-bg) {
|
||||
background-color: getCssVar('fill-color', 'light');
|
||||
|
||||
&:hover {
|
||||
background-color: getCssVar('fill-color');
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: getCssVar('fill-color', 'dark');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(expand) {
|
||||
letter-spacing: 0.3em;
|
||||
margin-right: -0.3em;
|
||||
@@ -188,30 +223,4 @@ $button-icon-span-gap: map.merge(
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(text) {
|
||||
border-color: transparent;
|
||||
color: getCssVar('color', 'primary');
|
||||
background: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: getCssVar('color', 'primary', 'light-3');
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:active {
|
||||
color: getCssVar('color', 'primary', 'dark-2');
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&.is-disabled:hover,
|
||||
&.is-disabled:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,7 +130,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
&.is-plain,
|
||||
&.is-text {
|
||||
@include button-plain($type);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user