{"id":17531268,"url":"https://github.com/MoomFE/unocss-preset-extra","last_synced_at":"2025-03-06T10:32:22.137Z","repository":{"id":40995587,"uuid":"488552381","full_name":"MoomFE/unocss-preset-extra","owner":"MoomFE","description":"UnoCSS 扩展, 提供类名简写及额外一些样式预设","archived":false,"fork":false,"pushed_at":"2024-10-29T17:41:25.000Z","size":1075,"stargazers_count":57,"open_issues_count":10,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-10-29T18:59:38.307Z","etag":null,"topics":["animate-css","animations","unocss","unocss-preset","unocss-preset-extra"],"latest_commit_sha":null,"homepage":"https://unocss-preset-extra.moomfe.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MoomFE.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-04T10:56:50.000Z","updated_at":"2024-10-01T06:41:10.000Z","dependencies_parsed_at":"2023-02-17T14:00:55.198Z","dependency_job_id":"111db500-db9a-4820-8bf5-9c09f1577088","html_url":"https://github.com/MoomFE/unocss-preset-extra","commit_stats":{"total_commits":100,"total_committers":2,"mean_commits":50.0,"dds":"0.030000000000000027","last_synced_commit":"62aceb0a0781f8fc367fbe508ab8336f789d6a4e"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoomFE%2Funocss-preset-extra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoomFE%2Funocss-preset-extra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoomFE%2Funocss-preset-extra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoomFE%2Funocss-preset-extra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoomFE","download_url":"https://codeload.github.com/MoomFE/unocss-preset-extra/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242191602,"owners_count":20087010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animate-css","animations","unocss","unocss-preset","unocss-preset-extra"],"created_at":"2024-10-20T17:23:24.176Z","updated_at":"2025-03-06T10:32:21.772Z","avatar_url":"https://github.com/MoomFE.png","language":"TypeScript","funding_links":[],"categories":["Community","Presets"],"sub_categories":["Presets"],"readme":"# [unocss-preset-extra](https://unocss-preset-extra.moomfe.com/)\n\n[UnoCSS](https://github.com/unocss/unocss) 扩展, 提供类名简写及额外一些样式预设\n\n[![npm](https://img.shields.io/npm/v/unocss-preset-extra.svg)](https://www.npmjs.com/package/unocss-preset-extra)\n[![Downloads](https://img.shields.io/npm/dm/unocss-preset-extra.svg)](https://www.npmjs.com/package/unocss-preset-extra)\n\n\u003cbr\u003e\n\n## 文档\n\n[https://unocss-preset-extra.moomfe.com/](https://unocss-preset-extra.moomfe.com/)\n\n\u003cbr\u003e\n\n## 内置规则\n\n\u003cdetails\u003e\n  \u003csummary\u003esize - 同时设置 `width` 和 `height` 样式\u003c/summary\u003e\n  \u003cbr\u003e\n\n  ```html\n  \u003cdiv class=\"size-auto\" /\u003e\n  \u003cdiv class=\"size-full\" /\u003e\n  \u003cdiv class=\"min-size-1/2\" /\u003e\n  \u003cdiv class=\"min-size-xs\" /\u003e\n  \u003cdiv class=\"max-size-1\" /\u003e\n  \u003cdiv class=\"max-size-[1px]\" /\u003e\n  ```\n\n  这将生成以下 css 代码\n\n  ```css\n  .size-auto { width: auto; height: auto }\n  .size-full { width: 100%; height: 100% }\n  .min-size-1\\/2 { min-width: 50%; min-height: 50% }\n  .min-size-xs { min-width: 20rem; min-height: 20rem }\n  .max-size-1 { max-width: 0.25rem; max-height: 0.25rem }\n  .max-size-\\[1px\\] { max-width: 1px; max-height: 1px }\n  ```\n\n  \u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eelevation - Vuetify 海拔样式\u003c/summary\u003e\n  \u003cbr\u003e\n\n\u003e  1. 类名 `elevation` 可简写为 `el`\n\u003e  2. 可选的前缀 `shadow-`\n\u003e  3. 透明度支持 `(el|elevation)-(op|opacity)-(0~100)` 或 `shadow-(op|opacity)-(0~100)` 的方式\n\n  ```html\n  \u003c!-- 正常使用 --\u003e\n  \u003cdiv class=\"el-1\" /\u003e\n  \u003cdiv class=\"elevation-2\" /\u003e\n  \u003cdiv class=\"shadow-el-3\" /\u003e\n  \u003cdiv class=\"shadow-elevation-4\" /\u003e\n  \u003c!-- 透明度 --\u003e\n  \u003cdiv class=\"el-5 el-op-50\" /\u003e\n  \u003cdiv class=\"el-6 shadow-op-50\" /\u003e\n  ```\n\n  在 [Variant Group](https://unocss.dev/transformers/variant-group) 或 [Attributify Mode](https://unocss.dev/presets/attributify) 下使用\n\n  ```html\n  \u003c!-- Variant Group --\u003e\n  \u003cdiv class=\"el-(1 op-50)\" /\u003e\n  \u003cdiv class=\"elevation-(1 op-50)\" /\u003e\n  \u003cdiv class=\"shadow-elevation-(1 op-50)\" /\u003e\n\n  \u003c!-- Attributify Mode --\u003e\n  \u003cdiv el=\"1 op-50\" /\u003e\n  \u003cdiv elevation=\"1 op-50\" /\u003e\n  \u003cdiv shadow-elevation=\"1 op-50\" /\u003e\n  ```\n\n  \u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eanimated - \u003ca href=\"https://animate.style\" target=\"_blank\"\u003eanimate.css\u003c/a\u003e 的 Unocss 版本\u003c/summary\u003e\n  \u003cbr\u003e\n\n  样式名称\n\n  ```html\n  \u003c!-- 动画名称 ( 动画名称可在 https://animate.style 查阅, 使用时需转为 `kebabCase` 短横线隔开的格式 ) --\u003e\n  \u003cdiv class=\"animated animated-bounce\" /\u003e\n  \u003cdiv class=\"animated animated-fade-in\" /\u003e\n  \u003cdiv class=\"animated animated-fade-out\" /\u003e\n\n  \u003c!-- 动画运行次数 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-infinite\" /\u003e \u003c!-- 无限循环 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-repeat-6\" /\u003e \u003c!-- 循环 6 次 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-repeat-666\" /\u003e \u003c!-- 循环 666 次 --\u003e\n\n  \u003c!-- 动画延迟 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-delay-6\" /\u003e \u003c!-- 延迟 6 毫秒 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-delay-6s\" /\u003e \u003c!-- 延迟 6 秒 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-delay-6ms\" /\u003e \u003c!-- 延迟 6 毫秒 --\u003e\n\n  \u003c!-- 动画周期 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-faster\" /\u003e \u003c!-- 很快 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-fast\" /\u003e \u003c!-- 快 --\u003e\n  \u003cdiv class=\"animated animated-bounce\" /\u003e \u003c!-- 不设置, 默认 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-slow\" /\u003e \u003c!-- 慢 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-slower\" /\u003e \u003c!-- 很慢 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-duration-6\" /\u003e \u003c!-- 时长为 6 毫秒 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-duration-6s\" /\u003e \u003c!-- 时长为 6 秒 --\u003e\n  \u003cdiv class=\"animated animated-bounce animated-duration-6ms\" /\u003e \u003c!-- 时长为 6 毫秒 --\u003e\n  ```\n\n  在 [Variant Group](https://unocss.dev/transformers/variant-group) 或 [Attributify Mode](https://unocss.dev/presets/attributify) 下使用\n\n  ```html\n  \u003c!-- Variant Group --\u003e\n  \u003cdiv class=\"animated-(~ bounce infinite)\" /\u003e\n  \u003cdiv class=\"animated-(~ bounce faster delay-6s)\" /\u003e\n\n  \u003c!-- Attributify Mode --\u003e\n  \u003cdiv animated=\"~ bounce infinite\" /\u003e\n  \u003cdiv animated=\"~ bounce faster delay-6s\" /\u003e\n  ```\n\n  在 Vue 3 中使用\n\n  ```html\n  \u003cTransition class=\"animated animated-faster\" enter-active-class=\"animated-rotate-in\" leave-active-class=\"animated-rotate-out\" mode=\"out-in\"\u003e\n    ...\n  \u003c/Transition\u003e\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e额外的可在分组中使用的规则\u003c/summary\u003e\n  \u003cbr\u003e\n\n  可在 [Variant Group](https://unocss.dev/transformers/variant-group) 或 [Attributify Mode](https://unocss.dev/presets/attributify) 下使用\n\n  ```html\n  \u003c!-- 使用之前 --\u003e\n  \u003cdiv class=\"flex-(~ col none) justify-center\" /\u003e\n  \u003cdiv class=\"justify-center\" flex=\"~ col none\" /\u003e\n  \u003c!-- 使用之后 --\u003e\n  \u003cdiv class=\"flex-(~ col none justify-center)\" /\u003e\n  \u003cdiv flex=\"~ col none justify-center\" /\u003e\n\n  \u003c!-- ↓↓↓ 以下是所有规则 ↓↓↓ --\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-justify-* --\u003e\n  \u003cdiv class=\"flex-(~ justify-start)\" /\u003e\n  \u003cdiv class=\"grid-(~ justify-center)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ justify-between)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ justify-end)\" /\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-order-* --\u003e\n  \u003cdiv class=\"flex-(~ order-first)\" /\u003e\n  \u003cdiv class=\"grid-(~ order-1)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ order-2)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ order-last)\" /\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-content-* --\u003e\n  \u003cdiv class=\"flex-(~ content-start)\" /\u003e\n  \u003cdiv class=\"grid-(~ content-center)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ content-between)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ content-end)\" /\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-items-* --\u003e\n  \u003cdiv class=\"flex-(~ items-start)\" /\u003e\n  \u003cdiv class=\"grid-(~ items-center)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ items-baseline)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ items-end)\" /\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-self-* --\u003e\n  \u003cdiv class=\"flex-(~ self-start)\" /\u003e\n  \u003cdiv class=\"grid-(~ self-center)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ self-baseline)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ self-end)\" /\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-place-content-* --\u003e\n  \u003cdiv class=\"flex-(~ place-content-start)\" /\u003e\n  \u003cdiv class=\"grid-(~ place-content-center)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ place-content-between)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ place-content-end)\" /\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-place-items-* --\u003e\n  \u003cdiv class=\"flex-(~ place-items-start)\" /\u003e\n  \u003cdiv class=\"grid-(~ place-items-center)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ place-items-stretch)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ place-items-end)\" /\u003e\n\n  \u003c!-- (inline-)?(flex|grid)-place-self-* --\u003e\n  \u003cdiv class=\"flex-(~ place-self-start)\" /\u003e\n  \u003cdiv class=\"grid-(~ place-self-center)\" /\u003e\n  \u003cdiv class=\"inline-flex-(~ place-self-stretch)\" /\u003e\n  \u003cdiv class=\"inline-grid-(~ place-self-end)\" /\u003e\n  ```\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n## 安装\n\n```bash\nnpm install unocss-preset-extra -D\n```\n\n\u003cbr\u003e\n\n## 使用\n\n```js\n// unocss.config.ts\nimport { defineConfig, presetAttributify, presetUno } from 'unocss';\nimport { presetExtra } from 'unocss-preset-extra';\n\nexport default defineConfig({\n  presets: [\n    presetUno(),\n    presetAttributify(),\n    presetExtra(),\n  ],\n});\n```\n\n\u003cbr\u003e\n\n## License\n\nunocss-preset-extra is licensed under a [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMoomFE%2Funocss-preset-extra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMoomFE%2Funocss-preset-extra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMoomFE%2Funocss-preset-extra/lists"}