@helper-ui/styles
v2.0.3
Published
```shell npm install @helper-ui/styles # 或 yarn add @helper-ui/styles # 或 pnpm add @helper-ui/styles ```
Downloads
1
Readme
Helper UI 组件库支持的产线级UI规范,主题,以及样式工具等
npm install @helper-ui/styles
# 或
yarn add @helper-ui/styles
# 或
pnpm add @helper-ui/styles
Helper UI >= 2.0.0 ( 样式库 >= 2.0.0 )
需要sass:map与sass:math支持
uk3
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中uk3亮色主题,额外需要的一些样式定义
fx
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中fx主题,额外需要的一些样式定义
visualized(大屏)
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中visualized主题,额外需要的一些样式定义
@use 'sass:math';
@use 'sass:map';
// 使用方法(scss)
// 如果要修改默认的响应式或者rem配置,直接覆盖即可
// $features_respond: true;
// $features_rem: false;
// 非visualized引入方式如下
@import '<node_modules>/helper-ui/theme/scss/common/config';
@import '<node_modules>/@helper-ui/styles/2.x/fx/spec/config';
// visualized引入方式如下
// @import '<node_modules>/@helper-ui/styles/2.x/visualized/spec/config';
// @import '<node_modules>/helper-ui/theme/scss/common/colors';
@import '<node_modules>/helper-ui/theme/scss/components';
@import '<node_modules>/helper-business-ui/theme/scss/components'; // 可选
// (可选),需要Helper UI Pro中自定义主题时才需要引入
// **********重新指定imgPath与fontPath路径(必须):*************
$imgPath: '<node_modules>/@helper-ui/styles/images/';
$fontPath: '<node_modules>/@helper-ui/styles/fonts/'; // 只有大屏(visualized)主题需要字体配置
@import '<node_modules>/@helper-ui/styles/2.x/fx/themes/pro/index';
Helper UI >=2.0.0 && <2.2.0 ( 样式库 >=1.1.0 && <2.0.0)
需要sass:map与sass:math支持
uk2
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中uk2主题,额外需要的一些样式定义
uk2a
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中uk2a主题,额外需要的一些样式定义
uk3
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中uk3亮色主题,额外需要的一些样式定义
uk3-dark
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中uk3暗色主题,额外需要的一些样式定义
cecloud
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中cecloud主题,额外需要的一些样式定义
fx
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中fx主题,额外需要的一些样式定义
visualized(大屏)
- /spec 规范SCSS配置文件($features_respond: true; $features_rem: false;)
- /themes/pro 实现Helper UI Pro中visualized主题,额外需要的一些样式定义
@use 'sass:math';
@use 'sass:map';
// 使用方法(scss)
// 如果要修改默认的响应式或者rem配置,直接覆盖即可
// $features_respond: true;
// $features_rem: false;
// 方式引入如下
@import '<node_modules>/helper-ui/theme/scss/common/config'; // 如果使用暗色主题,这里需要换成config-dark
@import '<node_modules>/@helper-ui/styles/2.x/cecloud/spec/config';
@import '<node_modules>/helper-ui/theme/scss/components';
@import '<node_modules>/helper-business-ui/theme/scss/components'; // 可选
// (可选),需要Helper UI Pro中自定义主题时才需要引入
// **********重新指定imgPath与fontPath路径(必须):*************
$imgPath: '<node_modules>/@helper-ui/styles/images/';
$fontPath: '<node_modules>/@helper-ui/styles/fonts/'; // 只有大屏(visualized)主题需要字体配置
@import '<node_modules>/@helper-ui/styles/2.x/cecloud/themes/pro/index';
Helper UI 1.5.x(不推荐,请使用2.x)
需要sass:map与sass:math支持
uk2
- /spec 规范SCSS配置文件($conf-respond: true; $conf-rem: false;)
- /themes/pro 实现Helper UI Pro中uk2主题,额外需要的一些样式定义
uk2a
- /spec 规范SCSS配置文件($conf-respond: true; $conf-rem: false;)
- /themes/pro 实现Helper UI Pro中uk2a主题,额外需要的一些样式定义
ioc
- /spec 规范SCSS配置文件($conf-respond: true; $conf-rem: false;)
- /themes/pro 实现Helper UI Pro中ioc主题,额外需要的一些样式定义
cecloud
- /spec 规范SCSS配置文件($conf-respond: true; $conf-rem: false;)
- /themes/pro 实现Helper UI Pro中cecloud主题,额外需要的一些样式定义
fx
- /spec 规范SCSS配置文件($conf-respond: true; $conf-rem: false;)
- /themes/pro 实现Helper UI Pro中fx主题,额外需要的一些样式定义
visualized(大屏)
- /spec 规范SCSS配置文件($conf-respond: false; $conf-rem: true;)
- /themes/pro 实现Helper UI Pro中visualized主题,额外需要的一些样式定义
// 使用方法(scss)
// 如果要修改默认的响应式或者rem配置,直接覆盖即可
// $conf-respond: true;
// $conf-rem: false;
@import '<node_modules>/@helper-ui/styles/1.5.x/cecloud/spec/config';
@import '<node_modules>/helper-ui/theme/scss/index';
// 如果需要同时使用helper-business-ui,需要用下面方式引入
@import '<node_modules>/@helper-ui/styles/1.5.x/cecloud/spec/config';
@import '<node_modules>/helper-ui/theme/scss/common/config';
@import '<node_modules>/helper-ui/theme/scss/components';
@import '<node_modules>/helper-business-ui/theme/scss/components';
// (可选),需要Helper UI Pro中自定义主题时才需要引入
// **********重新指定imgPath与fontPath路径(必须):*************
$imgPath: '<node_modules>/@helper-ui/styles/images/';
$fontPath: '<node_modules>/@helper-ui/styles/fonts/'; // 只有大屏主题需要字体配置
@import '<node_modules>/@helper-ui/styles/1.5.x/cecloud/themes/pro/index';