unocss-preset-el-plus

这是一个基于unocss预设主题，此预设将帮助您使element plus和unocss协同工作。

安装

npm i -D unocss-preset-el-plus

使用

uno.config.ts文件使用：

import { defineConfig, presetWind4 } from 'unocss';
import unocssPresetElPlus from 'unocss-preset-el-plus';

export default defineConfig({
  presets: [
    presetWind4(),
    // place after other presets, since it overrides some values by default
    unocssPresetElPlus({ ... }),
  ],
});

⚠️ 注意： 需使用presetWind4此预设才可使用。

在页面中使用：

<div class="p-1 bg-el-primary-light-3 rounded-el-base text-el-primary-text hover:bg-el-primary transition-el-all">bg-el-primary-light-3 rounded-el-base text-el-primary-text</div>

配置

| 配置名 | 描述 | 默认值 | 示例 | |----------------------|--------------|----------------------------------------------------------------------------------|----------------------------------------------------------------------------| | namespace | 前缀 | el | bg-el-primary | | types | 颜色类型 | ['primary', 'success', 'warning', 'error', 'danger', 'info'] | text-el-success,bg-el-primary | | bg | 背景颜色 | ['', 'page', 'overlay'] | bg-el-base-bg,bg-el-page-bg,text-el-page-bg | | text | 文字颜色 | ['primary', 'regular', 'secondary', 'placeholder', 'disabled'] | text-el-primary-text,bg-el-primary-text | | border | 边框颜色 | ['', 'light', 'lighter', 'extra-light', 'dark', 'darker'] | border-el-base-border ,bg-el-light-border | | fill | 填充颜色 | ['', 'light', 'lighter', 'extra-light', 'dark', 'darker'] | fill-el-base-fill,bg-el-light-fill | | overlay | 覆盖颜色 | ['', 'light', 'lighter'] | bg-el-base-overlay,text-el-light-overlay | | mask | 遮罩颜色 | ['', 'extra-light'] | bg-el-base-mask,text-el-light-mask | | zIndex | 层级 | ['normal', 'top', 'popper'] | z-el-normal | | duration | 过渡时长 | ['', 'fast'] | duration-el-base | | transition | 过渡效果 | ['all', 'fade', 'md-fade', 'fade-linear', 'border', 'box-shadow', 'color'] | transition-el-all | | transitionFunction | 过渡函数 | ['in-out', 'fast'] | ease-el-in-out | | componentSize | 组件大小 | ['', 'large', 'small'] | h-el-input,h-el-inpu-large,leading-el-input,leading-el-input-small | | borderRadius | 圆角 | ['base', 'small', 'round', 'circle'] | rounded-el-base | | fontSize | 文字大小 | ['extra-large', 'large', 'medium', 'base', 'small', 'extra-small'] | text-el-base | | boxShadow | 投影 | ['', 'light', 'lighter', 'dark'] | shadow-el-base,shadow-el-dark | | breakpoint | 替换wind4预设的断点 | {xs: '0px',sm: '768px',md: '992px',lg: '1200px',xl: '1920px','2xl': 'initial'} | md:bg-el-priamry |

注意

需使用presetWind4此预设才可使用。

使用前请确保已经安装了element-plus。