unocss-preset-extra

UnoCSS 扩展, 提供类名简写及额外一些样式预设

文档

https://unocss-preset-extra.moomfe.com/

内置规则

size - 同时设置 `width` 和 `height` 样式

```html

``` 这将生成以下 css 代码 ```css .size-auto { width: auto; height: auto } .size-full { width: 100%; height: 100% } .min-size-1\/2 { min-width: 50%; min-height: 50% } .min-size-xs { min-width: 20rem; min-height: 20rem } .max-size-1 { max-width: 0.25rem; max-height: 0.25rem } .max-size-\[1px\] { max-width: 1px; max-height: 1px } ```

elevation - Vuetify 海拔样式

> 1. 类名 `elevation` 可简写为 `el` > 2. 可选的前缀 `shadow-` > 3. 透明度支持 `(el|elevation)-(op|opacity)-(0~100)` 或 `shadow-(op|opacity)-(0~100)` 的方式 ```html

``` 在 [Variant Group](https://unocss.dev/transformers/variant-group) 或 [Attributify Mode](https://unocss.dev/presets/attributify) 下使用 ```html

```

animated - animate.css 的 Unocss 版本

样式名称 ```html

``` 在 [Variant Group](https://unocss.dev/transformers/variant-group) 或 [Attributify Mode](https://unocss.dev/presets/attributify) 下使用 ```html

``` 在 Vue 3 中使用 ```html ... ```

额外的可在分组中使用的规则

可在 [Variant Group](https://unocss.dev/transformers/variant-group) 或 [Attributify Mode](https://unocss.dev/presets/attributify) 下使用 ```html

```

安装

npm install unocss-preset-extra -D

使用

// unocss.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss';
import { presetExtra } from 'unocss-preset-extra';

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetExtra(),
  ],
});

License

unocss-preset-extra is licensed under a MIT License.

This site is open source. Improve this page.