update
This commit is contained in:
James Yeung
Родитель
ca5c5973e0
Коммит
228293e6e2
|
|
@ -1,79 +0,0 @@
|
|||
var gulp = require('gulp'),
|
||||
cleanCss = require('gulp-clean-css'),
|
||||
less = require('gulp-less');
|
||||
|
||||
var browserify = require('browserify');
|
||||
var source = require('vinyl-source-stream');
|
||||
var tsify = require('tsify');
|
||||
var uglify = require('gulp-uglify');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var buffer = require('vinyl-buffer');
|
||||
var gts = require("gulp-typescript");
|
||||
|
||||
var tsProject = gts.createProject('tsconfig.json');
|
||||
|
||||
gulp.task('less-default', function () {
|
||||
return gulp
|
||||
.src('ant-design-blazor.less')
|
||||
.pipe(less({ javascriptEnabled: true }))
|
||||
.pipe(cleanCss({ compatibility: 'ie8' }))
|
||||
.pipe(gulp.dest('wwwroot/css'));
|
||||
});
|
||||
|
||||
gulp.task('less-aliyun', function () {
|
||||
return gulp
|
||||
.src('ant-design-blazor.aliyun.less')
|
||||
.pipe(less({ javascriptEnabled: true }))
|
||||
.pipe(cleanCss({ compatibility: 'ie8' }))
|
||||
.pipe(gulp.dest('wwwroot/css'));
|
||||
});
|
||||
|
||||
gulp.task('less-compact', function () {
|
||||
return gulp
|
||||
.src('ant-design-blazor.compact.less')
|
||||
.pipe(less({ javascriptEnabled: true }))
|
||||
.pipe(cleanCss({ compatibility: 'ie8' }))
|
||||
.pipe(gulp.dest('wwwroot/css'));
|
||||
});
|
||||
|
||||
gulp.task('less-dark', function () {
|
||||
return gulp
|
||||
.src('ant-design-blazor.dark.less')
|
||||
.pipe(less({ javascriptEnabled: true }))
|
||||
.pipe(cleanCss({ compatibility: 'ie8' }))
|
||||
.pipe(gulp.dest('wwwroot/css'));
|
||||
});
|
||||
|
||||
gulp.task('ts', function () {
|
||||
return browserify({
|
||||
basedir: '.',
|
||||
debug: true,
|
||||
entries: ['./main.ts'],
|
||||
cache: {},
|
||||
packageCache: {},
|
||||
})
|
||||
.plugin(tsify)
|
||||
.transform('babelify', {
|
||||
presets: ['es2015'],
|
||||
extensions: ['.ts']
|
||||
})
|
||||
.bundle()
|
||||
.pipe(source('ant-design-blazor.js'))
|
||||
.pipe(buffer())
|
||||
.pipe(sourcemaps.init({ loadMaps: true }))
|
||||
.pipe(uglify())
|
||||
.pipe(sourcemaps.write('./'))
|
||||
.pipe(gulp.dest('wwwroot/js'));
|
||||
});
|
||||
|
||||
gulp.task("tsSplit", function () {
|
||||
var tsResult = gulp.src('core/JsInterop/**/*.ts')
|
||||
.pipe(tsProject());
|
||||
return tsResult.js.pipe(gulp.dest('wwwroot/js/split'))
|
||||
});
|
||||
|
||||
gulp.task('src', function () {
|
||||
return gulp.src(['**/*.less', '!wwwroot/**']).pipe(gulp.dest('wwwroot/less'));
|
||||
});
|
||||
|
||||
gulp.task('default', gulp.parallel('less-default', 'less-aliyun', 'less-compact', 'less-dark', 'ts', 'tsSplit', 'src'), function () { });
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
---
|
||||
order: 7.1
|
||||
title: Dynamic Theme (Experimental)
|
||||
---
|
||||
|
||||
Except [less customize theme](/docs/react/customize-theme), We also provide CSS Variable version to enable dynamic theme. You can check on [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) demo.
|
||||
|
||||
## Caveats
|
||||
|
||||
- This function depends on CSS Variables. Please check the [browser compatibility](https://caniuse.com/css-variables).
|
||||
- This function requires at least `antd@4.17.0-alpha.0`.
|
||||
|
||||
## How to use
|
||||
|
||||
### Import antd.variable.min.css
|
||||
|
||||
Replace your import style file with CSS Variable version:
|
||||
|
||||
```diff
|
||||
-- import 'antd/dist/antd.min.css';
|
||||
++ import 'antd/dist/antd.variable.min.css';
|
||||
```
|
||||
|
||||
Note: You need remove `babel-plugin-import` for the dynamic theme.
|
||||
|
||||
### Static config
|
||||
|
||||
Call ConfigProvider static function to modify theme color:
|
||||
|
||||
```ts
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
ConfigProvider.config({
|
||||
theme: {
|
||||
primaryColor: '#25b864',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## Conflict resolve
|
||||
|
||||
CSS Variable use `--ant` prefix by default. When exist multiple antd style file in your project, you can modify prefix to fix it.
|
||||
|
||||
### Adjust
|
||||
|
||||
Modify `prefixCls` on the root of ConfigProvider:
|
||||
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider prefixCls="custom">
|
||||
<MyApp />
|
||||
</ConfigProvider>
|
||||
);
|
||||
```
|
||||
|
||||
Also need call the static function to modify `prefixCls`:
|
||||
|
||||
```ts
|
||||
ConfigProvider.config({
|
||||
prefixCls: 'custom',
|
||||
theme: {
|
||||
primaryColor: '#25b864',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Compile less
|
||||
|
||||
Since prefix modified. Origin `antd.variable.css` should also be replaced:
|
||||
|
||||
```bash
|
||||
lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css
|
||||
```
|
||||
|
||||
### Related changes
|
||||
|
||||
In order to implement CSS Variable and maintain original usage compatibility, we added `@root-entry-name: xxx;` entry injection to the `dist/antd.xxx.less` file to support less dynamic loading of the corresponding less file. Under normal circumstances, you do not need to pay attention to this change. However, if your project directly references the less file in the `lib|es` directory. You need to configure `@root-entry-name: default;` (or `@root-entry-name: variable;`) at the entry of less so that less can find the correct entry.
|
||||
|
||||
In addition, we migrated `@import'motion'` and `@import'reset'` in `lib|es/style/minxins/index.less` to `lib|es/style/themes/xxx.less` In, because these two files rely on theme-related variables. If you use the relevant internal method, please adjust it yourself. Of course, we still recommend using the `antd.less` files in the `dist` directory directly instead of calling internal files, because they are often affected by refactoring.
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
---
|
||||
order: 7.1
|
||||
title: 动态主题（实验性）
|
||||
---
|
||||
|
||||
除了 [less 定制主题](/docs/react/customize-theme) 外，我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 [ConfigProvider](/components/config-provider/#components-config-provider-demo-theme) 进行体验。
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 该功能通过动态修改 CSS Variable 实现，因而在 IE 中页面将无法正常展示。请先确认你的用户环境是否需要支持 IE。
|
||||
- 该功能在 `antd@4.17.0-alpha.0` 版本起支持。
|
||||
|
||||
## 如何使用
|
||||
|
||||
### 引入 antd.variable.min.css
|
||||
|
||||
替换当前项目引入样式文件为 CSS Variable 版本：
|
||||
|
||||
```diff
|
||||
-- import 'antd/dist/antd.min.css';
|
||||
++ import 'antd/dist/antd.variable.min.css';
|
||||
```
|
||||
|
|
@ -43,16 +43,11 @@ Ant Design Blazor 的样式沿用 antd 使用了 [Less](http://lesscss.org/) 作
|
|||
一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `antd.less` 里的变量。
|
||||
|
||||
```css
|
||||
@import '~antd/es/style/themes/default.less';
|
||||
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
|
||||
@import '~publish/wwwroot/_content/AntDesign/less/style/themes/default.less';
|
||||
@import '~publish/wwwroot/_content/AntDesign/less/ant-design-blazor.less'; // 引入官方提供的 less 样式入口文件
|
||||
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
|
||||
```
|
||||
|
||||
### 动态主题色
|
||||
|
||||
在运行时调整主题色请[参考此处](/docs/react/customize-theme-variable)。
|
||||
|
||||
|
||||
## 官方主题 🌈
|
||||
|
||||
我们提供了一些官方主题，欢迎在项目中试用，并且给我们提供反馈。
|
||||
|
|
@ -64,3 +59,13 @@ Ant Design Blazor 的样式沿用 antd 使用了 [Less](http://lesscss.org/) 作
|
|||
### 使用暗黑主题和紧凑主题
|
||||
|
||||
|
||||
|
||||
想使用官方主题，只需替换对应的 css 文件即可。
|
||||
|
||||
默认主题：`_content/AntDesign/css/ant-design-blazor.css`
|
||||
暗黑主题：`_content/AntDesign/css/ant-design-blazor.dark.css`
|
||||
紧凑主题：`_content/AntDesign/css/ant-design-blazor.compact.css`
|
||||
阿里云主题：`_content/AntDesign/css/ant-design-blazor.aliyun.css`
|
||||
|
||||
### 动态主题色
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче