0.0.3 • Published 2 months ago
preset-hxz
花小猪的unocss的preset
安装
npm install preset-hxz
使用
// uno.config.js
const { defineConfig } = require('unocss')
const presetHxz = require('preset-hxz')
module.exports = defineConfig({
presets: [presetHxz()]
})
color
规则
属性 color
匹配 /^c-(.+)$/
举例 class="c-black"
属性 background-color
匹配 /^bc-(.+)$/
举例 class="bc-black"
全部示例
| 类名 | 样式 | 展示 |
|---|
| c-black | .c-black{color:#000000;} | 文字 |
| c-blue | .c-blue{color:#1A40FF;} | 文字 |
| c-darkBlue | .c-darkBlue{color:#000D33;} | 文字 |
| c-green | .c-green{color:#00CC77;} | 文字 |
| c-pink | .c-pink{color:#FF00AA;} | 文字 |
| c-purple | .c-purple{color:#9500FF;} | 文字 |
| c-red | .c-red{color:#FF002A;} | 文字 |
| c-white | .c-white{color:#FFFFFF;} | 文字 |
| c-yellow | .c-yellow{color:#FFD500;} | 文字 |
| c-gray-1 | .c-gray-1{color:#F4F5F6;} | 文字 |
| c-gray-2 | .c-gray-2{color:#F5F5F5;} | 文字 |
| c-gray-3 | .c-gray-3{color:#C1C4CE;} | 文字 |
| c-gray-4 | .c-gray-4{color:#91949E;} | 文字 |
| c-gray-5 | .c-gray-5{color:#60636D;} | 文字 |
| c-gray-6 | .c-gray-6{color:#2D3347;} | 文字 |
| bc-blue | .bc-blue{background-color:#1A40FF;} | |
| bc-darkBlue | .bc-darkBlue{background-color:#000D33;} | |
| bc-green | .bc-green{background-color:#00CC77;} | |
| bc-pink | .bc-pink{background-color:#FF00AA;} | |
| bc-purple | .bc-purple{background-color:#9500FF;} | |
| bc-red | .bc-red{background-color:#FF002A;} | |
| bc-white | .bc-white{background-color:#FFFFFF;} | |
| bc-yellow | .bc-yellow{background-color:#FFD500;} | |
| bc-gray-1 | .bc-gray-1{background-color:#F4F5F6;} | |
| bc-gray-2 | .bc-gray-2{background-color:#F5F5F5;} | |
| bc-gray-3 | .bc-gray-3{background-color:#C1C4CE;} | |
| bc-gray-4 | .bc-gray-4{background-color:#91949E;} | |
| bc-gray-5 | .bc-gray-5{background-color:#60636D;} | |
| bc-gray-6 | .bc-gray-6{background-color:#2D3347;} | |
font
规则
属性 font-size
匹配 /^t-(.+)$/
举例 class="t-20"
属性 font-family
匹配 /^f-(.+)$/
举例 class="f-pr"
全部示例
| 类名 | 样式 | 展示 |
|---|
| t-20 | .t-20{font-size:20rpx;} | 文字 |
| t-22 | .t-36{font-size:22rpx;} | 文字 |
| t-24 | .t-36{font-size:24rpx;} | 文字 |
| t-28 | .t-36{font-size:28rpx;} | 文字 |
| t-32 | .t-36{font-size:32rpx;} | 文字 |
| t-36 | .t-36{font-size:36rpx;} | 文字 |
| t-40 | .t-36{font-size:40rpx;} | 文字 |
| t-44 | .t-36{font-size:44rpx;} | 文字 |
| t-48 | .t-36{font-size:48rpx;} | 文字 |
| t-52 | .t-36{font-size:52rpx;} | 文字 |
| t-56 | .t-36{font-size:56rpx;} | 文字 |
| t-72 | .t-72{font-size:72rpx;} | 文字 |
| f-pr | .f-pr{font-family:PingFangSC-Regular;} | 文字 |
| f-pm | .f-pm{font-family:PingFangSC-Medium;} | 文字 |
| f-ps | .f-ps{font-family:PingFangSC-Semibold;} | 文字 |
border-radius
规则
属性 border-radius
匹配 /^brd-(.+)$/
举例 class="t-20"
全部示例
| 类名 | 样式 | 展示 |
|---|
| brd-8 | .brd-8{border-radius:8rpx;} | |
| brd-12 | .brd-12{border-radius:12rpx;} | |
| brd-16 | .brd-16{border-radius:16rpx;} | |
| brd-24 | .brd-24{border-radius:24rpx;} | |
| brd-32 | .brd-32{border-radius:32rpx;} | |
| brd-100 | .brd-100{border-radius:100rpx;} | |
shadow-box
规则
属性 box-shadow
匹配 /^sh-(.+)$/,
举例 class="sh-top"
属性 shadow-opacity
匹配 /^sh-op-(.+)$/,
举例 class="sh-op-20"
全部示例
| 类名 | 样式 | 展示 |
|---|
| sh-top | .sh-top{box-shadow:0px -10px 20px 0px rgba(0,13,51,var(--un-hxz-shadow-opacity));} | |
| sh-bottom | .sh-bottom{box-shadow:0px 10px 20px 0px rgba(0,13,51,var(--un-hxz-shadow-opacity));} | |
| sh-op-10 | .sh-op-10{--un-hxz-shadow-opacity:0.1;} | |
| sh-op-100 | .sh-op-100{--un-hxz-shadow-opacity:1;} | |
shortcuts
全部示例
| 类名 | 样式 | 展示 |
|---|
| line | .line{width:100%;height:1rpx;--un-bg-opacity:1;background-color:rgba(234,235,239,var(--un-bg-opacity));} | |
| flex-center | .flex-center{display:flex;justify-content:center;align-items:center;} | |
| flex-center-x | .flex-center-x{display:flex;justify-content:center;} | |
| flex-center-y | .flex-center-y{display:flex;align-items:center;} | |
| b1 | .b1{border-width:1rpx;border-style:solid;} | |
| text-content | .text-content{font-size:22rpx;color:#2D3347;} | 内容 |
| text-high | .text-high{font-size:22rpx;color:#FF00AA;} | 高亮 |
| text-title | .text-title{font-size:28rpx;color:#000D33;} | 标题 |