0.3.4 • Published 2 years ago
@ponya-ui/preset-unocss v0.3.4
시작하기
npm:
npm i -D unocss unocss-preset-ponya 가이드 문서
유닛 별칭
| class | Unit | example | CSS |
|---|---|---|---|
| p | % | w100p | width: 100% |
레이아웃
| class | CSS properties | default | example | CSS |
|---|---|---|---|---|
| w | width | w10 | width: 40px; | |
| h | height | h100vh | height: 100vh; | |
| m | margin | m4 | margin: 16px; | |
| mt | margin-top | mt1 | margin-top: 4px; | |
| mr | margin-right | mr1 | margin-right: 4px; | |
| mb | margin-bottom | mb1 | margin-bottom: 4px; | |
| ml | margin-left | ml1 | margin-left: 4px; | |
| mx | margin-left margin-right | mx-auto | margin-left: auto;margin-right: auto; | |
| my | margin-top margin-bottom | my0 | margin-top: 0;margin-bottom: 0; | |
| p | padding | p1 | padding: 4px; | |
| pt | padding-top | pt1 | padding-top: 4px; | |
| pr | padding-right | pr1 | padding-right: 4px; | |
| pb | padding-bottom | pb1 | padding-bottom: 4px; | |
| pl | padding-left | pl1 | padding-left: 4px; | |
| px | padding-left padding-right | px-auto | padding-left: auto;padding-right: auto; | |
| py | padding-top padding-bottom | py1 | padding-top: 4px;padding-bottom: 4px; | |
| b | border-width | b1 | border-width: 1px; |
길이
| class | CSS Properties | example |
|---|---|---|
| w~min | max-width | w~100p |
| wmax~ | min-width | w100p~ |
| wmin~max | min-width max-width | w100p~200p |
| h~min | max-height | h~100p |
| hmax~ | min-height | h100p~ |
| hmin~max | min-height max-height | h100p~200p |
0.3.4
2 years ago