telecomtheme
v0.0.6
Published
本工程覆盖antd3/4组件变量实现换肤,并提供变量到项目工程使用,主要生产以下文件。 > bin\default * modalWidth.js // 导出的弹窗或抽屉宽度变量,方便统一控制页面弹窗及抽屉宽度 * theme.js // 用于导入到webpack配置文件的lessOptions-->modifyVars实现组件换肤 * theme.less // 针对于使用less的工程项目提供的less变量,在工程内全局引入,并在编写样式时使用其内部变量 * theme.scss // 针对于使用sc
Downloads
22
Readme
简介
本工程覆盖antd3/4组件变量实现换肤,并提供变量到项目工程使用,主要生产以下文件。
bin\default
- modalWidth.js // 导出的弹窗或抽屉宽度变量,方便统一控制页面弹窗及抽屉宽度
- theme.js // 用于导入到webpack配置文件的lessOptions-->modifyVars实现组件换肤
- theme.less // 针对于使用less的工程项目提供的less变量,在工程内全局引入,并在编写样式时使用其内部变量
- theme.scss // 针对于使用scss的工程项目提供的scss变量,在工程内全局引入,并在编写样式时使用其内部变量
安装配置
先安装本工程包,对应项目的中找到webpack.config.js文件,给antd组件库引入包里的的theme.js,实现组件换肤。这是你应该就能正常使用里面的变量了。
+ import theme from 'telecomtheme/bin/default/theme';
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
+ options: {
+ lessOptions: { // 如果使用less-loader@5,请移除 lessOptions 这一级直接配置选项。
+ modifyVars: theme,
+ javascriptEnabled: true,
+ },
+ },
}],
// ...other rules
}],
// ...other config
}
umi3/4工程则直接替换配置的theme即可
+ import theme from 'telecomtheme/bin/default/theme';
// .umirc.js 或 config/config.js
export default {
theme,
}
如果项目使用的是scss编写样式,则需要全局导入scss/less变量 先安装sass-resources-loader
+ import themeScss from 'telecomtheme/bin/default/theme.scss';
module: {
rules: [
// Apply loader
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [themeScss]
},
},
],
},
],
},
变量使用规则
变量内提供色板,文字大小,移入等效果变量值,需要按规则使用
- 文字/图标颜色
'heading-color': 标题,
'text-color': 正文,
'text-color-paragraph': 段落,
'text-color-secondary': 说明,
'disabled-color': 禁用文字,
// 反色文字,深色背景中使用
'text-color-inverse': 标题,
'text-color-dark': 正文,
'text-color-paragraph-dark': 段落),
'text-color-secondary-dark': 说明,
'disabled-color-dark': 禁用文字,
// 图标
'icon-color-hover': 移入
'icon-color-secondary': 说明
'icon-color-heading': 标题
- 行移入或活动颜色
'item-hover-bg': 移入行,
'item-active-bg': 活动行,
- 背景
'body-background': 页面背景
'component-background': 组件背景
'background-color-base': 深色背景
'background-color-light': 浅色背景
'disabled-bg': 禁用背景
'modal-mask-bg': 遮罩背景
- 边线
'border-color-base': 控件轮廓线,
'dividing-color': 分割器组件,不同层级的右边线、左边线、下边线,
'border-color-split': 同层信息分隔:选择器、表格、卡片、滑块、大纲、步骤轴、时间轴导线,
- 内间距与外间距,根据实际情况使用
'padding-lg'
'padding-md'
'padding-sm'
'padding-xs'
'padding-xxs'
'padding-xxxs'
'margin-lg'
'margin-md'
'margin-sm'
'margin-xs'
'margin-xxs'
'margin-xxxs'
- 文字大小
'font-size-sm': 小号文字
'font-size-md': 中号文字
'font-size-base': 默认文字(比中号大或相等)
'font-size-lg': 大号文字
'font-weight': 字重(一般是500)
'heading-1-size': 对应H1标签
'heading-2-size': 对应H2标签
'heading-3-size': 对应H3标签
'heading-4-size': 对应H4标签
'heading-5-size': 对应H5标签
'heading-6-size': 对应H6标签
- 色板使用 提供了色板使用,每个色值分1-10级,可根据需要自行组合使用。需要实现情景内容交互效果,大原则如下: 背景色:xxx-1 移入文字颜色: xxx-5 默认文字颜色: xxx-6 点击文字颜色: xxx-7 如:
.box {
color: @blue-6;
background-color: @blue-1;
&:hover {
color: @blue-5;
}
&:active {
color: @blue-7;
}
}
这里只做示例参考,具体选值由UI确定
- 弹窗宽度 为了方便统一弹窗及抽屉的宽度控制,统一由包引入宽度,如下面使用
import React from 'react';
import { Modal } from 'antd';
+ import modalWidth from 'telecomtheme/bin/default/modalWidth';
const Demo = () => {
return (
<Modal title="测试弹窗" width={modalWidth?.md}>111</Modal>
)
}
- 包内提供全局样式 包内提供全局样式, 对部分组件样式进行了调整,可以在src下创建global.less/global.scss文件,引入包内的全局样式
@import '~telecomtheme/bin/default/global.less';