This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化button默认大小;完成radio的调整

old
宇天 2021-02-25 17:40:11 +08:00
parent 9617a7000a
commit b754f13e44
3 changed files with 41 additions and 90 deletions

View File

@ -9,7 +9,8 @@
:host { :host {
overflow: hidden; overflow: hidden;
display: inline-flex; display: inline-flex;
min-width: 76px; min-width: 72px;
width: 128px;
height: 36px; height: 36px;
border-radius: 6px; border-radius: 6px;
user-select: none; user-select: none;
@ -50,7 +51,7 @@
} }
:host([size='large']) { :host([size='large']) {
min-width: 212px; width: 212px;
height: 52px; height: 52px;
font-size: 18px; font-size: 18px;
@ -71,7 +72,7 @@
} }
} }
:host([size='medium']) { :host([size='medium']) {
min-width: 128px; width: 160px;
height: 44px; height: 44px;
button { button {
@ -82,13 +83,15 @@
min-width: 44px; min-width: 44px;
} }
:host([size='small']) { :host([size='small']) {
width: 96px;
height: 32px; height: 32px;
} }
:host([size='small'][circle]) { :host([size='small'][circle]) {
min-width: 32px; min-width: 32px;
width: 32px;
} }
:host([size='mini']) { :host([size='mini']) {
min-width: 32px; width: 72px;
height: 26px; height: 26px;
font-size: 12px; font-size: 12px;
@ -102,6 +105,7 @@
} }
:host([size='mini'][circle]) { :host([size='mini'][circle]) {
min-width: 26px; min-width: 26px;
width: 26px;
} }
:host([round]) { :host([round]) {

View File

@ -10,20 +10,20 @@
display: inline-flex; display: inline-flex;
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
cursor: pointer;
label { label {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-width: 32px; min-width: 32px;
height: 32px;
padding: 0 5px; padding: 0 5px;
line-height: 1; line-height: 1;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
cursor: inherit; cursor: inherit;
color: var(--color-grey-3); color: var(--color-dark-1);
&.checked .dot::after { &.checked .dot::after {
visibility: visible; visibility: visible;
@ -34,80 +34,26 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 18px; width: 14px;
height: 18px; height: 14px;
margin-right: 3px; margin-right: 3px;
border: 1px solid var(--color-grey-1); border: 2px solid var(--color-dark-1);
border-radius: 50%; border-radius: 50%;
background: #fff; background: #fff;
&::after { &::after {
display: block; display: block;
visibility: hidden; visibility: hidden;
width: 12px; width: 4px;
height: 12px; height: 4px;
border-radius: 50%; border-radius: 50%;
background: var(--color-grey-1); background: var(--color-dark-1);
content: ''; content: '';
} }
} }
} }
:host([readonly]) { :host([type='danger']) label {
opacity: 0.8;
}
:host([disabled]) {
cursor: not-allowed;
opacity: 0.6;
}
:host([size='large']) {
label {
min-width: 58px;
height: 32px;
}
.dot {
width: 26px;
height: 26px;
&::after {
width: 18px;
height: 18px;
}
}
}
:host([size='medium']) {
label {
min-width: 50px;
height: 28px;
}
.dot {
width: 22px;
height: 22px;
&::after {
width: 14px;
height: 14px;
}
}
}
:host([size='mini']) {
label {
height: 14px;
}
.dot {
width: 14px;
height: 14px;
&::after {
width: 8px;
height: 8px;
}
}
}
:host([type='danger']) label.checked {
color: var(--color-red-1); color: var(--color-red-1);
.dot { .dot {
border-color: var(--color-red-1); border-color: var(--color-red-1);
@ -117,7 +63,7 @@
} }
} }
:host([type='info']) label.checked { :host([type='info']) label {
color: var(--color-blue-1); color: var(--color-blue-1);
.dot { .dot {
border-color: var(--color-blue-1); border-color: var(--color-blue-1);
@ -127,7 +73,7 @@
} }
} }
:host([type='success']) label.checked { :host([type='success']) label {
color: var(--color-green-1); color: var(--color-green-1);
.dot { .dot {
border-color: var(--color-green-1); border-color: var(--color-green-1);
@ -137,7 +83,7 @@
} }
} }
:host([type='primary']) label.checked { :host([type='primary']) label {
color: var(--color-teal-1); color: var(--color-teal-1);
.dot { .dot {
border-color: var(--color-teal-1); border-color: var(--color-teal-1);
@ -147,7 +93,7 @@
} }
} }
:host([type='warning']) label.checked { :host([type='warning']) label {
color: var(--color-orange-1); color: var(--color-orange-1);
.dot { .dot {
border-color: var(--color-orange-1); border-color: var(--color-orange-1);
@ -157,23 +103,23 @@
} }
} }
:host([type='inverse']) label.checked { :host([readonly]) {
color: var(--color-dark-1); cursor: default;
.dot { opacity: 0.8;
border-color: var(--color-dark-1);
}
.dot::after {
background: var(--color-dark-1);
}
} }
:host([color='purple']) label.checked { :host([disabled]) {
color: var(--color-purple-1); cursor: not-allowed;
.dot { opacity: 0.6;
border-color: var(--color-purple-1);
} label {
.dot::after { color: var(--color-grey-2);
background: var(--color-purple-1); .dot {
border-color: var(--color-grey-1);
}
.dot::after {
background: var(--color-grey-1);
}
} }
} }
</style> </style>
@ -181,7 +127,7 @@
<script> <script>
import $ from '../utils' import $ from '../utils'
export default class RadioItem { export default class Radio {
props = { props = {
value: '', value: '',
checked: false, checked: false,
@ -259,6 +205,8 @@ export default class RadioItem {
return return
} }
this.checked = true
this.parentNode.dispatchEvent( this.parentNode.dispatchEvent(
new CustomEvent('child-picked', { detail: this.value }) new CustomEvent('child-picked', { detail: this.value })
) )

View File

@ -12,7 +12,7 @@
import $ from '../utils' import $ from '../utils'
import './radio-item' import './radio-item'
export default class Radio { export default class RadioGroup {
props = { props = {
value: null value: null
} }
@ -23,7 +23,7 @@ export default class Radio {
_updateChildrenStat() { _updateChildrenStat() {
Array.from(this.children).forEach(it => { Array.from(this.children).forEach(it => {
if (it.tagName === 'WC-RADIO-ITEM' && it.root) { if (it.tagName === 'WC-RADIO' && it.root) {
if (it.value === this.props.value) { if (it.value === this.props.value) {
it.checked = true it.checked = true
} else { } else {
@ -47,7 +47,6 @@ export default class Radio {
mounted() { mounted() {
this._pickedFn = $.bind(this, 'child-picked', ev => { this._pickedFn = $.bind(this, 'child-picked', ev => {
log('radio picked: ', ev.detail)
this.value = ev.detail this.value = ev.detail
this.dispatchEvent(new CustomEvent('input')) this.dispatchEvent(new CustomEvent('input'))
}) })