element-theme-se-v3

Hi! 首先感谢你使用 element-theme-se-v3。

element-theme-se-v3 是一套遵循施耐德已发布的最新UI设计规范正式版本 QDS UI Kit V3.16.0的主题。它基于element-theme-chalk V2.15.2，对大多数组件都进行了改版定制。

框架/插件/文档 (部分需要权限)

• UI框架为Element UI
• 主题定制方案参看官网的"命令行主题工具"
• 主题补丁同步方案为 patch-package
• 蓝湖设计稿
• Quartz Design-System
• SE UI Icon Font

文件

• element-variables.scss Element 的样式变量
• theme Element样式： 由element提供的主题生成工具编译得到的css文件
• pathes 补丁： 记录了对于node_modules/element-theme-chalk的修改
• se-icon 图标： 施耐德图标库 SE Icon Font
• web-ui.zip SE design token： 施耐德前端框架web-ui的变量和方法，可用于深浅色切换

使用方法

• 引入Element样式：

// ----main.js----
import 'element-theme-se-v3/theme/index.css'

• 引入icon图标：

// ----main.js----
import 'element-theme-se-v3/se-icon/se-icon-styles.css'

• 引入web-ui design token：

// -----自行解压web-ui.zip，在根样式文件(@/style/index.scss)中引入，并注册为css变量----
@import "./web-ui/_theme.scss";


// Theme
:root {

  @each $element,
  $value in $seTheme {
    @include define-custom-property($element, $value);
  };
}

.se-theme-dark,
html[data-theme='dark'] {

  @each $element,
  $value in $seThemeDark {
    @include define-custom-property($element, $value);
  };
}

• 页面内使用

.myElement{
  // add fallback for older browser
  color: map-get($seTheme, 'primary');
  background-color: map-get($seTheme, 'primary');
  border-color: map-get($seTheme, 'primary');
  // apply css variable
  background-color: var(--se-primary);
  color: var(--se-primary-contrast);
  border-color: var(--se-border);
}

二次定制主题

• 安装

// 安装element和补丁
npm install

// 仅安装补丁
npm run postinstall

• 调整样式 公共变量: 改动 element-variables.scss 组件: 改动 node_modules/element-theme-chalk 下对应组件的scss文件

• 编译

npm run build-theme

// 或

et

• 生成补丁

npm run build-node

// 编译并生成补丁
npm run build

联系我们

[email protected]