mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
doc: update theme-chalk-preview website (#1861)
This commit is contained in:
Github蓝钻用户
GitHub
parent
9a577d65cb
commit
dc7e64e0e0
@ -1,25 +1,25 @@
|
||||
## Custom theme
|
||||
|
||||
Element Plus uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables.
|
||||
|
||||
### Changing theme color
|
||||
If you just want to change the theme color of Element Plus, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element Plus is bright and friendly blue. By changing it, you can make Element Plus more visually connected to specific projects.
|
||||
|
||||
If you just want to change the theme color of Element Plus, the [theme preview website](https://element-plus.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element Plus is bright and friendly blue. By changing it, you can make Element Plus more visually connected to specific projects.
|
||||
|
||||
The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
|
||||
|
||||
### Update SCSS variables in your project
|
||||
|
||||
`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element Plus style variables. Create a new style file, e.g. `element-variables.scss`:
|
||||
|
||||
```html
|
||||
/* theme color */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
/* theme color */ $--color-primary: teal; /* icon font path, required */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts'; @import
|
||||
"~element-plus/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
Then in the entry file of your project, import this style file instead of Element's built CSS:
|
||||
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
@ -35,15 +35,19 @@ Note that it is required to override icon font path to the relative path of Elem
|
||||
:::
|
||||
|
||||
### CLI theme tool
|
||||
|
||||
If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
|
||||
|
||||
#### <strong>Install</strong>
|
||||
|
||||
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
|
||||
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
Then install the chalk theme from npm or GitHub.
|
||||
|
||||
```shell
|
||||
# from npm
|
||||
npm i element-theme-chalk -D
|
||||
@ -53,6 +57,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>Initialize variable file</strong>
|
||||
|
||||
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.
|
||||
|
||||
```shell
|
||||
@ -62,6 +67,7 @@ et -i [custom output file]
|
||||
```
|
||||
|
||||
In `element-variables.scss` you can find all the variables we used to style Element Plus and they are defined in SCSS format. Here's a snippet:
|
||||
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
@ -83,21 +89,28 @@ $--color-info: #909399 !default;
|
||||
```
|
||||
|
||||
#### <strong>Modify variables</strong>
|
||||
|
||||
Just edit `element-variables.scss`, e.g. changing the theme color to red:
|
||||
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>Build theme</strong>
|
||||
|
||||
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name. By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`.
|
||||
|
||||
```shell
|
||||
et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
### Use custom theme
|
||||
|
||||
#### <strong>Import custom theme</strong>
|
||||
|
||||
Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
|
||||
|
||||
```javascript
|
||||
@ -109,7 +122,9 @@ createApp(App).use(ElementPlus)
|
||||
```
|
||||
|
||||
#### <strong>Import component theme on demand</strong>
|
||||
|
||||
If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
## Tema personalizado
|
||||
|
||||
Element Plus utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos.
|
||||
|
||||
### Cambiando el color del tema
|
||||
Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element Plus utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element Plus este más conectado visualmente a proyectos específicos.
|
||||
|
||||
Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://element-plus.github.io/theme-chalk-preview/#/en-US). Element Plus utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element Plus este más conectado visualmente a proyectos específicos.
|
||||
|
||||
Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).
|
||||
|
||||
### Actualizando variables SCSS en tu proyecto
|
||||
|
||||
`theme-chalk` esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:
|
||||
|
||||
```html
|
||||
/* Color del tema */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* Ubicación de la fuente, obligatoria */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
/* Color del tema */ $--color-primary: teal; /* Ubicación de la fuente,
|
||||
obligatoria */ $--font-path: '~element-plus/lib/theme-chalk/fonts'; @import
|
||||
"~element-plus/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
|
||||
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
@ -35,15 +35,19 @@ Nota es necesario sobrescribir la ruta de la fuente por una ruta relativa de las
|
||||
:::
|
||||
|
||||
### CLI para generar temas
|
||||
|
||||
Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:
|
||||
|
||||
#### <strong>Instalación</strong>
|
||||
|
||||
Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.
|
||||
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
Ahora, instale el tema `chalk` desde npm o Github.
|
||||
|
||||
```shell
|
||||
# desde npm
|
||||
npm i element-theme-chalk -D
|
||||
@ -53,6 +57,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>Inicializar archivo de variables</strong>
|
||||
|
||||
Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilice `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
|
||||
|
||||
```shell
|
||||
@ -62,6 +67,7 @@ et -i [custom output file]
|
||||
```
|
||||
|
||||
En el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element Plus para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
|
||||
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
@ -83,13 +89,17 @@ $--color-info: #909399 !default;
|
||||
```
|
||||
|
||||
#### <strong>Modificando variables</strong>
|
||||
|
||||
Solo debe modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:
|
||||
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>Construyendo el tema</strong>
|
||||
|
||||
Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`.
|
||||
|
||||
```shell
|
||||
et
|
||||
|
||||
@ -98,7 +108,9 @@ et
|
||||
```
|
||||
|
||||
### Use custom theme
|
||||
|
||||
#### <strong>Importar un tema personalizado</strong>
|
||||
|
||||
Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
|
||||
|
||||
```javascript
|
||||
@ -110,7 +122,9 @@ createApp(App).use(ElementPlus)
|
||||
```
|
||||
|
||||
#### <strong>Importar un tema de componente bajo demanda</strong>
|
||||
|
||||
Si esta utilizando `babel-plugin-component` para importar bajo demanda, solo debe modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado su tema personalizado relativo a `.babelrc`. **Nota** el carácter `~` es obligatorio:
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
## Thème
|
||||
|
||||
Element Plus utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.
|
||||
|
||||
### Changer la couleur du thème
|
||||
Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element Plus est un bleu clair et agréable. En le changeant, vous rendez Element Plus visuellement plus adapté à vos projets.
|
||||
|
||||
Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://element-plus.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element Plus est un bleu clair et agréable. En le changeant, vous rendez Element Plus visuellement plus adapté à vos projets.
|
||||
|
||||
Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).
|
||||
|
||||
### Mettre à jour les variables SCSS de votre projet
|
||||
|
||||
`theme-chalk` est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. `element-variables.scss`:
|
||||
|
||||
```html
|
||||
/* couleur du thème */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* chemin vers le fichier de police, requis */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
/* couleur du thème */ $--color-primary: teal; /* chemin vers le fichier de
|
||||
police, requis */ $--font-path: '~element-plus/lib/theme-chalk/fonts'; @import
|
||||
"~element-plus/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:
|
||||
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
@ -35,15 +35,19 @@ Il est obligatoire de remplacer le chemin du fichier de police.
|
||||
:::
|
||||
|
||||
### Outil de thème CLI
|
||||
|
||||
Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:
|
||||
|
||||
#### <strong>Installation</strong>
|
||||
|
||||
Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.
|
||||
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
Installer ensuite le thème chalk depuis npm ou GitHub.
|
||||
|
||||
```shell
|
||||
# Via npm
|
||||
npm i element-theme-chalk -D
|
||||
@ -53,6 +57,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>Initialisation d'un fichier de variable</strong>
|
||||
|
||||
Après l'installation des paquets ci-dessus, une commande appelée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour initialiser le fichier de variables, `element-variables.scss` par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.
|
||||
|
||||
```shell
|
||||
@ -84,13 +89,17 @@ $--color-info: #909399 !default;
|
||||
```
|
||||
|
||||
#### <strong>Modifier les variables</strong>
|
||||
|
||||
Éditer `element-variables.scss`, e.g. en changeant la couleur du thème pour du rouge:
|
||||
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>Générer le thème</strong>
|
||||
|
||||
Après avoir sauvegardé le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier. Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`.
|
||||
|
||||
```shell
|
||||
et
|
||||
|
||||
@ -99,7 +108,9 @@ et
|
||||
```
|
||||
|
||||
### Use custom theme
|
||||
|
||||
#### <strong>Importer le thème</strong>
|
||||
|
||||
Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
|
||||
|
||||
```javascript
|
||||
@ -111,7 +122,9 @@ createApp(App).use(ElementPlus)
|
||||
```
|
||||
|
||||
#### <strong>Importer le thème d'un composant sur demande</strong>
|
||||
|
||||
Si vous utilisez `babel-plugin-component` pour les imports sur demande, modifiez `.babelrc` et spécifiez `styleLibraryName` avec le chemin où votre thème est localisé relativement à `.babelrc`. N'oubliez pas que `~` est requis:
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
|
||||
@ -1,26 +1,25 @@
|
||||
## カスタムテーマ
|
||||
要素はBEMスタイルのCSSを使用しているので、スタイルを簡単に上書きすることができます。しかし、テーマの色を青からオレンジや緑に変更するなど、大規模にスタイルを置き換える必要がある場合は、1つずつオーバーライドするのはあまり良いアイデアではないかもしれません。スタイル変数を変更する方法を4つ用意しています。
|
||||
|
||||
要素は BEM スタイルの CSS を使用しているので、スタイルを簡単に上書きすることができます。しかし、テーマの色を青からオレンジや緑に変更するなど、大規模にスタイルを置き換える必要がある場合は、1 つずつオーバーライドするのはあまり良いアイデアではないかもしれません。スタイル変数を変更する方法を 4 つ用意しています。
|
||||
|
||||
### テーマカラーの変更
|
||||
Element Plusのテーマカラーを変更したいなら、[テーマプレビューサイト](https://elementui.github.io/theme-chalk-preview/#/en-US)がおすすめです。Element Plusのテーマカラーは、明るくて親しみやすいブルーです。これを変更することで、Element Plusをより視覚的に特定のプロジェクトに結びつけることができます。
|
||||
|
||||
Element Plus のテーマカラーを変更したいなら、[テーマプレビューサイト](https://element-plus.github.io/theme-chalk-preview/#/en-US)がおすすめです。Element Plus のテーマカラーは、明るくて親しみやすいブルーです。これを変更することで、Element Plus をより視覚的に特定のプロジェクトに結びつけることができます。
|
||||
|
||||
上記のウェブサイトでは、リアルタイムで新しいテーマカラーのテーマをプレビューすることができ、あなたが直接ダウンロードするために新しいテーマカラーに基づいた完全なスタイルパッケージを生成することができます（あなたのプロジェクトで新しいスタイルファイルをインポートするには、このセクションの `カスタムテーマをインポート` または `コンポーネントテーマをオンデマンドでインポート` の部分を参照してください）。
|
||||
|
||||
|
||||
### プロジェクト内の SCSS 変数を更新する
|
||||
`theme-chalk` はSCSSで書かれています。プロジェクトでもSCSSを使用している場合は、Element Plusのスタイル変数を直接変更することができます。例えば `element-variables.scss` のように、新しいスタイルファイルを作成します :
|
||||
|
||||
`theme-chalk` は SCSS で書かれています。プロジェクトでも SCSS を使用している場合は、Element Plus のスタイル変数を直接変更することができます。例えば `element-variables.scss` のように、新しいスタイルファイルを作成します :
|
||||
|
||||
```html
|
||||
/* theme color */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
/* theme color */ $--color-primary: teal; /* icon font path, required */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts'; @import
|
||||
"~element-plus/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
そして、プロジェクトのエントリーファイルで、Element Plusの内蔵CSSの代わりにこのスタイルファイルをインポートします。:
|
||||
そして、プロジェクトのエントリーファイルで、Element Plus の内蔵 CSS の代わりにこのスタイルファイルをインポートします。:
|
||||
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
@ -32,19 +31,23 @@ app.use(ElementPlus)
|
||||
```
|
||||
|
||||
:::tip
|
||||
アイコンのフォントパスをElementのフォントファイルの相対パスにオーバーライドする必要があるので注意してください。
|
||||
アイコンのフォントパスを Element のフォントファイルの相対パスにオーバーライドする必要があるので注意してください。
|
||||
:::
|
||||
|
||||
### CLIテーマツール
|
||||
プロジェクトがSCSSを使用していない場合は、CLIテーマツールを使用してテーマをカスタマイズすることができます:
|
||||
### CLI テーマツール
|
||||
|
||||
プロジェクトが SCSS を使用していない場合は、CLI テーマツールを使用してテーマをカスタマイズすることができます:
|
||||
|
||||
#### <strong>インストール</strong>
|
||||
|
||||
はじめにテーマジェネレータをグローバルまたはローカルにインストールします。ローカルにインストールすることをお勧めします。なぜなら、他の人があなたのプロジェクトをクローンしたときに npm が自動的にインストールしてくれるからです。
|
||||
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
そして、npmやGitHubからchalkテーマをインストールします。
|
||||
そして、npm や GitHub から chalk テーマをインストールします。
|
||||
|
||||
```shell
|
||||
# from npm
|
||||
npm i element-theme-chalk -D
|
||||
@ -54,7 +57,8 @@ npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>変数ファイルの初期化</strong>
|
||||
上記のパッケージのインストールに成功すると、CLIで `et` というコマンドが利用できます(ローカルにインストールされている場合は、代わりに `node_modules/.bin/et` を利用してください)。デフォルトで `element-variables.scss` に出力される変数ファイルを初期化するために `-i` を実行してください。初期化されたファイルはデフォルトで `element-variables.scss` に出力されます。
|
||||
|
||||
上記のパッケージのインストールに成功すると、CLI で `et` というコマンドが利用できます(ローカルにインストールされている場合は、代わりに `node_modules/.bin/et` を利用してください)。デフォルトで `element-variables.scss` に出力される変数ファイルを初期化するために `-i` を実行してください。初期化されたファイルはデフォルトで `element-variables.scss` に出力されます。
|
||||
|
||||
```shell
|
||||
et -i [custom output file]
|
||||
@ -62,7 +66,8 @@ et -i [custom output file]
|
||||
> ✔ Generator variables file
|
||||
```
|
||||
|
||||
`element-variables.scss` の中には、Element Plusのスタイル設定に使用したすべての変数があり、SCSS形式で定義されています。以下はその一部です。:
|
||||
`element-variables.scss` の中には、Element Plus のスタイル設定に使用したすべての変数があり、SCSS 形式で定義されています。以下はその一部です。:
|
||||
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
@ -84,21 +89,28 @@ $--color-info: #909399 !default;
|
||||
```
|
||||
|
||||
#### <strong>変数の変更</strong>
|
||||
|
||||
`element-variables.scss`を編集するだけです。例えば、テーマの色を赤に変更するは以下の通りです:
|
||||
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>ビルドテーマ</strong>
|
||||
|
||||
変数ファイルを保存したら、`et` を使って自分のテーマを構築してください。 パラメータ `-w` を追加することで、`watch` モードを有効にすることができます。また、変数ファイルの出力をカスタマイズした場合は、パラメータ `-c` と変数ファイル名を追加する必要があります。デフォルトでは、ビルドテーマファイルは `./theme` 内に置かれます。パラメータ `-o` で出力ディレクトリを指定することができます。
|
||||
|
||||
```shell
|
||||
et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
### カスタムテーマを使用する
|
||||
|
||||
#### <strong>カスタムテーマをインポートする</strong>
|
||||
|
||||
独自のテーマをインポートすることは、デフォルトのテーマをインポートするのと同じですが、今回は `オンラインテーマローラー` または`CLIツール` からビルドされたファイルをインポートします。
|
||||
|
||||
```javascript
|
||||
@ -110,7 +122,9 @@ createApp(App).use(ElementPlus)
|
||||
```
|
||||
|
||||
#### <strong>コンポーネントテーマをオンデマンドでインポート</strong>
|
||||
|
||||
オンデマンドインポートに `babel-plugin-component` を使用している場合は、`.babelrc` を修正し、`styleLibraryName` を `.babelrc` からの相対パスにカスタムテーマが置かれているパスに指定するだけです。 `~` は必須であることに注意してください。
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
|
||||
@ -1,24 +1,25 @@
|
||||
## 自定义主题
|
||||
|
||||
Element Plus 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。
|
||||
|
||||
### 仅替换主题色
|
||||
如果仅希望更换 Element Plus 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element Plus 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element Plus 的视觉更加符合具体项目的定位。
|
||||
|
||||
如果仅希望更换 Element Plus 的主题色，推荐使用[在线主题生成工具](https://element-plus.github.io/theme-chalk-preview)。Element Plus 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element Plus 的视觉更加符合具体项目的定位。
|
||||
|
||||
使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
|
||||
|
||||
### 在项目中改变 SCSS 变量
|
||||
|
||||
Element Plus 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element Plus 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
|
||||
|
||||
```html
|
||||
/* 改变主题色变量 */
|
||||
$--color-primary: teal;
|
||||
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
/* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts'; @import
|
||||
"~element-plus/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element Plus 编译好的 CSS 文件）：
|
||||
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
@ -34,15 +35,19 @@ app.use(ElementPlus)
|
||||
:::
|
||||
|
||||
### 命令行主题工具
|
||||
|
||||
如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
|
||||
|
||||
#### <strong>安装工具</strong>
|
||||
|
||||
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
|
||||
|
||||
```shell
|
||||
npm i element-theme -g
|
||||
```
|
||||
|
||||
安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
|
||||
|
||||
```shell
|
||||
# 从 npm
|
||||
npm i element-theme-chalk -D
|
||||
@ -52,6 +57,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
|
||||
```
|
||||
|
||||
#### <strong>初始化变量文件</strong>
|
||||
|
||||
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.scss`，当然你可以传参数指定文件输出目录。
|
||||
|
||||
```shell
|
||||
@ -61,6 +67,7 @@ et -i [可以自定义变量文件]
|
||||
```
|
||||
|
||||
如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
|
||||
|
||||
```css
|
||||
$--color-primary: #409EFF !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
@ -82,21 +89,28 @@ $--color-info: #909399 !default;
|
||||
```
|
||||
|
||||
#### <strong>修改变量</strong>
|
||||
|
||||
直接编辑 `element-variables.scss` 文件，例如修改主题色为红色。
|
||||
|
||||
```CSS
|
||||
$--color-primary: red;
|
||||
```
|
||||
|
||||
#### <strong>编译主题</strong>
|
||||
|
||||
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。
|
||||
|
||||
```shell
|
||||
et
|
||||
|
||||
> ✔ build theme font
|
||||
> ✔ build element theme
|
||||
```
|
||||
|
||||
### 使用自定义主题
|
||||
|
||||
#### <strong>引入自定义主题</strong>
|
||||
|
||||
和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。
|
||||
|
||||
```javascript
|
||||
@ -108,7 +122,9 @@ createApp(App).use(ElementPlus)
|
||||
```
|
||||
|
||||
#### <strong>搭配插件按需引入组件主题</strong>
|
||||
|
||||
如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user