https://github.com/MoomFE/unocss-preset-extra

UnoCSS 扩展, 提供类名简写及额外一些样式预设
https://github.com/MoomFE/unocss-preset-extra

animate-css animations unocss unocss-preset unocss-preset-extra

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/MoomFE/unocss-preset-extra
• Owner: MoomFE
• License: mit
• Created: 2022-05-04T10:56:50.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-13T17:33:14.000Z (10 months ago)
• Last Synced: 2024-04-14T08:02:42.478Z (10 months ago)
• Topics: animate-css, animations, unocss, unocss-preset, unocss-preset-extra
• Language: TypeScript
• Homepage: https://unocss-preset-extra.moomfe.com
• Size: 751 KB
• Stars: 43
• Watchers: 1
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-unocss - unocss-preset-extra - [Animate.css](https://animate.style) Preset and some other rules. (Presets)
• awesome-unocss - unocss-preset-extra - [Animate.css](https://animate.style) Preset and some other rules. (Presets)

README

        
# [unocss-preset-extra](https://unocss-preset-extra.moomfe.com/)

[UnoCSS](https://github.com/unocss/unocss) 扩展, 提供类名简写及额外一些样式预设

[![npm](https://img.shields.io/npm/v/unocss-preset-extra.svg)](https://www.npmjs.com/package/unocss-preset-extra)

[![Downloads](https://img.shields.io/npm/dm/unocss-preset-extra.svg)](https://www.npmjs.com/package/unocss-preset-extra)




## 文档

[https://unocss-preset-extra.moomfe.com/](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

  

  


  


  

  


  


  

  

  


  


  


  


  

  


  


  


  


  

  


  


  


  


  

  


  


  


  


  

  


  


  


  


  

  


  


  


  


  

  


  


  


  


  

  


  


  


  


  ```





## 安装

```bash

npm install unocss-preset-extra -D

```




## 使用

```js

// 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](./LICENSE).