优化button默认大小;完成radio的调整
parent
9617a7000a
commit
b754f13e44
|
@ -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]) {
|
||||||
|
|
|
@ -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 })
|
||||||
)
|
)
|
||||||
|
|
|
@ -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'))
|
||||||
})
|
})
|
||||||
|
|
Reference in New Issue