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;}|标题|