mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
143 lines
7.3 KiB
Markdown
143 lines
7.3 KiB
Markdown
## カスタムテーマ
|
|
|
|
要素は BEM スタイルの CSS を使用しているので、スタイルを簡単に上書きすることができます。しかし、テーマの色を青からオレンジや緑に変更するなど、大規模にスタイルを置き換える必要がある場合は、1 つずつオーバーライドするのはあまり良いアイデアではないかもしれません。スタイル変数を変更する方法を 4 つ用意しています。
|
|
|
|
### テーマカラーの変更
|
|
|
|
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` のように、新しいスタイルファイルを作成します :
|
|
|
|
```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";
|
|
```
|
|
|
|
そして、プロジェクトのエントリーファイルで、Element Plus の内蔵 CSS の代わりにこのスタイルファイルをインポートします。:
|
|
|
|
```JS
|
|
import Vue from 'vue'
|
|
import ElementPlus from 'element-plus'
|
|
import './element-variables.scss'
|
|
import App from './App.vue';
|
|
|
|
const app = createApp(App)
|
|
app.use(ElementPlus)
|
|
```
|
|
|
|
:::tip
|
|
アイコンのフォントパスを Element のフォントファイルの相対パスにオーバーライドする必要があるので注意してください。
|
|
:::
|
|
|
|
### CLI テーマツール
|
|
|
|
プロジェクトが SCSS を使用していない場合は、CLI テーマツールを使用してテーマをカスタマイズすることができます:
|
|
|
|
#### <strong>インストール</strong>
|
|
|
|
はじめにテーマジェネレータをグローバルまたはローカルにインストールします。ローカルにインストールすることをお勧めします。なぜなら、他の人があなたのプロジェクトをクローンしたときに npm が自動的にインストールしてくれるからです。
|
|
|
|
```shell
|
|
npm i element-theme -g
|
|
```
|
|
|
|
そして、npm や GitHub から chalk テーマをインストールします。
|
|
|
|
```shell
|
|
# from npm
|
|
npm i element-theme-chalk -D
|
|
|
|
# from GitHub
|
|
npm i https://github.com/ElementUI/theme-chalk -D
|
|
```
|
|
|
|
#### <strong>変数ファイルの初期化</strong>
|
|
|
|
上記のパッケージのインストールに成功すると、CLI で `et` というコマンドが利用できます(ローカルにインストールされている場合は、代わりに `node_modules/.bin/et` を利用してください)。デフォルトで `element-variables.scss` に出力される変数ファイルを初期化するために `-i` を実行してください。初期化されたファイルはデフォルトで `element-variables.scss` に出力されます。
|
|
|
|
```shell
|
|
et -i [custom output file]
|
|
|
|
> ✔ Generator variables file
|
|
```
|
|
|
|
`element-variables.scss` の中には、Element Plus のスタイル設定に使用したすべての変数があり、SCSS 形式で定義されています。以下はその一部です。:
|
|
|
|
```css
|
|
$--color-primary: #409EFF !default;
|
|
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
|
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
|
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
|
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
|
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
|
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
|
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
|
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
|
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
|
|
|
$--color-success: #67c23a !default;
|
|
$--color-warning: #e6a23c !default;
|
|
$--color-danger: #f56c6c !default;
|
|
$--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
|
|
import { createApp } from 'vue'
|
|
import '../theme/index.css'
|
|
import ElementPlus from 'element-plus'
|
|
|
|
createApp(App).use(ElementPlus)
|
|
```
|
|
|
|
#### <strong>コンポーネントテーマをオンデマンドでインポート</strong>
|
|
|
|
オンデマンドインポートに `babel-plugin-component` を使用している場合は、`.babelrc` を修正し、`styleLibraryName` を `.babelrc` からの相対パスにカスタムテーマが置かれているパスに指定するだけです。 `~` は必須であることに注意してください。
|
|
|
|
```json
|
|
{
|
|
"plugins": [
|
|
[
|
|
"component",
|
|
{
|
|
"libraryName": "element-plus",
|
|
"styleLibraryName": "~theme"
|
|
}
|
|
]
|
|
]
|
|
}
|
|
```
|
|
|
|
もし、`babel-plugin-component`に慣れていない場合は、<a href="./#/en-US/component/quickstart">クイックスタート</a>を参照してください。詳細は `element-theme` の [project repository](https://github.com/ElementUI/element-theme) を参照してください。
|