feat: 按钮增加white类型
This commit is contained in:
@@ -3,6 +3,12 @@
|
||||
@button-default-font-size: 32rpx;
|
||||
@button-default-color: #fff;
|
||||
|
||||
wx-button:not([size=mini]) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.toy-button {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
@@ -13,6 +19,9 @@
|
||||
border-radius: @button-border-radius;
|
||||
font-size: @button-default-font-size;
|
||||
color: @button-default-color;
|
||||
padding: 0 44rpx;
|
||||
width: auto !important;
|
||||
|
||||
|
||||
&--primary {
|
||||
background: rgba(255, 215, 25, 1);
|
||||
@@ -46,6 +55,32 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--white {
|
||||
color: rgba(34, 36, 37, 0.9);
|
||||
background: #fff;
|
||||
box-shadow: 0 10rpx 0 rgba(255, 255, 255, 0.7);
|
||||
|
||||
&.disabled {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
&.plain {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 1);
|
||||
box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.88);
|
||||
|
||||
// &.disabled {
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
// border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
// box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.6);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.loading-class,
|
||||
&__icon {
|
||||
margin-right: 24rpx;
|
||||
|
||||
@@ -10,6 +10,10 @@ Component({
|
||||
type: String,
|
||||
value: 'default', // primary, green, white
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
value: false, // 是否朴素按钮
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: 'normal', // large, normal, small, mini
|
||||
@@ -88,4 +92,5 @@ Component({
|
||||
this.triggerEvent('click', e);
|
||||
},
|
||||
},
|
||||
externalClasses: ['custom-class'],
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<button
|
||||
data-id="test-toy-button-id"
|
||||
class="toy-button toy-button--{{type}} {{ disabled ? 'toy-button--disabled' : '' }} {{Utils.classNames({disabled: disabled, loading: loading })}}"
|
||||
class="toy-button toy-button--{{type}} {{Utils.classNames({disabled: disabled, loading: loading, plain: plain })}} custom-class"
|
||||
data-disabled="{{disabled}}"
|
||||
data-loading="{{loading}}"
|
||||
style="{{style}};{{width ? 'width:' + width + ';' : ''}};{{height ? 'height:' + height + ';' : ''}}"
|
||||
|
||||
Reference in New Issue
Block a user