WeChat Mini Program UI Components

Button

button.wxml:

<button class="primary">BUTTON</button>

button.wxss:

.primary {
background-color: #B11F24;
color: white;
align-items: center;
border-radius: 0;
padding-inline-start: 14px;
width: 100px;
}

---

Checkbox

checkbox.wxml:

<view>
  <checkbox> normal</checkbox>
</view>

<view>
  <checkbox checked> checked</checkbox>
</view>

<view>
  <checkbox disabled> disabled</checkbox>
</view>

<view>
  <checkbox checked disabled> checked disabled</checkbox>
</view>

checkbox.wxss:

checkbox .wx-checkbox-input {
  width: 40rpx;
  height: 40rpx; 
   border-color: #D1C4C3;
}

checkbox .wx-checkbox-input.wx-checkbox-input-disabled {
  border-color: #D1C4C3;
  background: transparent;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #B11F24;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked.wx-checkbox-input-disabled {
  background: #D1C4C3;
} 

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  line-height: 40rpx;
  text-align: center;
  color: #fff;
  background: transparent;
}

---

Slider

slider.wxml:

<view>
<slider step='10' max='100' value='50' activeColor='#B11F24' show-value/>
</view>

---

Switch

switch.wxml:

<view>
  <switch checked/>
</view>

<view>
  <switch />
</view>

switch.wxss:

.wx-switch-input{
    width:80rpx !important;
    height:36rpx !important;
    background: #B11F24 !important;
    border: #B11F24 !important; 
}

.wx-switch-input::before{
    width:80rpx !important;
    height: 36rpx !important;
}
.wx-switch-input::after{
    width: 40rpx !important;
    height: 36rpx !important;
}