Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@adomtheme/dict
Advanced tools
Readme
本工程覆盖 antd3/4 组件变量实现换肤,并提供变量到项目工程使用,主要生产以下文件。
先安装本工程包,对应项目的中找到 webpack.config.js 文件,给 antd 组件库引入包里的的 theme.js,实现组件换肤。这是你应该就能正常使用里面的变量了。
+ import theme from '@adomtheme/dict';
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 '@adomtheme/dict';
// .umirc.js 或 config/config.js
export default {
theme,
}
如果项目使用的是 scss 编写样式,则需要全局导入 scss/less 变量 先安装 sass-resources-loader
+ import themeScss from '@adomtheme/dict/scss/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': 禁用文字,
'item-hover-bg': 移入行,
'item-active-bg': 活动/选中行,
'color-fill-1': 白色填充
'color-fill-2': 亮灰色填充
'color-fill-3': 灰色填充或禁用背景
'color-fill-4': 暗灰色填充或标签背景
'color-fill-5': 图标或反色标签背景
'modal-mask-bg': 遮罩背景
'color-line-1': 较浅的轮廓线(页面卡片)
'color-line-2': 分割线,较重的轮廓线
'color-line-3': 按钮,表单空间边框,分割器
'color-line-4': 加重的线条,线条悬浮
// 区块内元素间距使用以下变量:
space-xxs: 2px;
space-xs: 4px;
space-sm: 8px;
space-md: 12px;
space-lg: 16px;
space-xl: 20px;
space-xxl: 24px;
// 页面一级区块(容器)的内容间距
'box-padding-base': 容器默认内间距,
'box-padding-sm': 容器小号内间距,
'page-space': '0 40px 16px 40px',
'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标签
'size-xs'
'size-sm'
'size-md'
'size-base'
'size-lg'
'size-xl'
border-radius-base
border-radius-lg
border-radius-md
border-radius-sm
border-radius-round(50%)
box-border-radius: 页面所有区块的圆角
box-shadow-1: 轻微变化、抬起
box-shadow-2: 抓起、拖拽的物体
box-shadow-3: 鼠标移入后抬起的物体
box-shadow-4: 弹出的物体、包括抽屉、弹窗、浮层
height-base
height-lg
height-sm
使用场景: 背景色: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 确定
const modalWidths = {
xs: '256px',
sm: '500px',
md: '768px',
lg: '1000px',
xl: '80%',
};
使用方法
import React from 'react';
import { Modal } from 'antd';
+ import modalWidth from '@adomtheme/dict/js/modalWidth';
const Demo = () => {
return (
<Modal title="测试弹窗" width={modalWidth?.md}>111</Modal>
)
}
15. 公共组件样式
fishx 和 umi项目可以在global.less 加入
@import '~@adomtheme/dict/index.less';
cra项目可以在app.js中
import '~@adomtheme/dict/index.less';
FAQs
本工程覆盖 antd3/4 组件变量实现换肤,并提供变量到项目工程使用,主要生产以下文件。
The npm package @adomtheme/dict receives a total of 34 weekly downloads. As such, @adomtheme/dict popularity was classified as not popular.
We found that @adomtheme/dict demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.