mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-03 11:47:48 +08:00
chore: update docs (#539)
This commit is contained in:
zazzaz
GitHub
parent
4c3f2103b3
commit
b517177c9c
@ -1,19 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
|
||||
<title>icon-redo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="element-theme-editor" transform="translate(-1118.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
|
||||
<g id="custom" transform="translate(1060.000000, 146.000000)">
|
||||
<g id="Group-2" transform="translate(30.000000, 15.000000)">
|
||||
<g id="Group" transform="translate(0.000000, 4.000000)">
|
||||
<g id="icon-clockwise" transform="translate(26.000000, 0.000000)">
|
||||
<path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-redo"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,19 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
|
||||
<title>icon-undo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="element-theme-editor" transform="translate(-1092.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
|
||||
<g id="custom" transform="translate(1060.000000, 146.000000)">
|
||||
<g id="Group-2" transform="translate(30.000000, 15.000000)">
|
||||
<g id="Group" transform="translate(0.000000, 4.000000)">
|
||||
<g id="icon-clockwise">
|
||||
<path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-undo" transform="translate(8.200000, 8.017900) scale(-1, 1) translate(-8.200000, -8.017900) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,15 +1,8 @@
|
||||
## 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.
|
||||
|
||||
### Theme Roller
|
||||
Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section).
|
||||
|
||||
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### Changing theme color
|
||||
If you just want to change the theme color of Element, 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://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.
|
||||
|
||||
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).
|
||||
|
||||
|
||||
@ -18,10 +18,10 @@ Dialog pops up a dialog box, and it's quite customizable.
|
||||
:before-close="handleClose">
|
||||
<span>This is a message</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
## 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.
|
||||
|
||||
### Theme Roller
|
||||
Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or part of this section).
|
||||
|
||||
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### 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.
|
||||
|
||||
|
||||
@ -14,14 +14,16 @@ Dialog abre una caja de diálogo, y es bastante personalizable.
|
||||
|
||||
<el-dialog
|
||||
title="Tips"
|
||||
:visible.sync="dialogVisible"
|
||||
v-model="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>This is a message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
## 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.
|
||||
|
||||
### Theme Roller
|
||||
Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).
|
||||
|
||||
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### 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.
|
||||
|
||||
|
||||
@ -13,14 +13,16 @@ Le Dialog ouvre un modal personnalisable.
|
||||
|
||||
<el-dialog
|
||||
title="Tips"
|
||||
:visible.sync="dialogVisible"
|
||||
v-model="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>Ceci est un message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Annuler</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>
|
||||
</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Annuler</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,15 +1,8 @@
|
||||
## カスタムテーマ
|
||||
要素はBEMスタイルのCSSを使用しているので、スタイルを簡単に上書きすることができます。しかし、テーマの色を青からオレンジや緑に変更するなど、大規模にスタイルを置き換える必要がある場合は、1つずつオーバーライドするのはあまり良いアイデアではないかもしれません。スタイル変数を変更する方法を4つ用意しています。
|
||||
|
||||
### テーマローラー
|
||||
[オンライン テーマ ローラー](./#/en-US/theme) を使うことで、グローバル変数とコンポーネントのすべてのデザイントークンをカスタマイズでき、新しいテーマをプレビューさせることが出来ます。そして
|
||||
|
||||
また、[Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)を使用することで、Elementで開発したWebサイトのテーマをカスタマイズしたり、リアルタイムでプレビューしたりすることができます。
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### テーマカラーの変更
|
||||
Elementのテーマカラーを変更したいなら、[テーマプレビューサイト](https://elementui.github.io/theme-chalk-preview/#/en-US)がおすすめです。Elementのテーマカラーは、明るくて親しみやすいブルーです。これを変更することで、Elementをより視覚的に特定のプロジェクトに結びつけることができます。
|
||||
Element Plusのテーマカラーを変更したいなら、[テーマプレビューサイト](https://elementui.github.io/theme-chalk-preview/#/en-US)がおすすめです。Element Plusのテーマカラーは、明るくて親しみやすいブルーです。これを変更することで、Element Plusをより視覚的に特定のプロジェクトに結びつけることができます。
|
||||
|
||||
上記のウェブサイトでは、リアルタイムで新しいテーマカラーのテーマをプレビューすることができ、あなたが直接ダウンロードするために新しいテーマカラーに基づいた完全なスタイルパッケージを生成することができます（あなたのプロジェクトで新しいスタイルファイルをインポートするには、このセクションの `カスタムテーマをインポート` または `コンポーネントテーマをオンデマンドでインポート` の部分を参照してください）。
|
||||
|
||||
@ -22,18 +15,20 @@ Elementのテーマカラーを変更したいなら、[テーマプレビュー
|
||||
$--color-primary: teal;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
$--font-path: '~element-plus/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
@import "~element-plus/packages/theme-chalk/src/index";
|
||||
```
|
||||
|
||||
そして、プロジェクトのエントリーファイルで、Elementの内蔵CSSの代わりにこのスタイルファイルをインポートします。:
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import ElementPlus from 'element-plus'
|
||||
import './element-variables.scss'
|
||||
import App from './App.vue';
|
||||
|
||||
Vue.use(Element)
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
```
|
||||
|
||||
:::tip
|
||||
@ -107,11 +102,11 @@ et
|
||||
独自のテーマをインポートすることは、デフォルトのテーマをインポートするのと同じですが、今回は `オンラインテーマローラー` または`CLIツール` からビルドされたファイルをインポートします。
|
||||
|
||||
```javascript
|
||||
import { createApp } from 'vue'
|
||||
import '../theme/index.css'
|
||||
import ElementUI from 'element-ui'
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
|
||||
Vue.use(ElementUI)
|
||||
createApp(App).use(ElementPlus)
|
||||
```
|
||||
|
||||
#### <strong>コンポーネントテーマをオンデマンドでインポート</strong>
|
||||
@ -122,7 +117,7 @@ Vue.use(ElementUI)
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"libraryName": "element-plus",
|
||||
"styleLibraryName": "~theme"
|
||||
}
|
||||
]
|
||||
|
||||
@ -11,14 +11,16 @@ dialog はdialogボックスをポップアップ表示します。
|
||||
|
||||
<el-dialog
|
||||
title="Tips"
|
||||
:visible.sync="dialogVisible"
|
||||
v-model="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>This is a message</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
@ -132,7 +134,7 @@ dialog の内容は何でも構いません、テーブルやフォームであ
|
||||
```html
|
||||
<template>
|
||||
<el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
|
||||
|
||||
|
||||
<el-dialog title="Outer Dialog" :visible.sync="outerVisible">
|
||||
<el-dialog
|
||||
width="30%"
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
## 国際化
|
||||
|
||||
Elementのデフォルト言語は中国語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Elementを完全にインポートする場合のエントリーファイル:
|
||||
Element Plusのデフォルト言語は中国語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Element Plusを完全にインポートする場合のエントリーファイル:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import locale from 'element-plus/lib/locale/lang/en'
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
または Elementをインポートする際は必要に応じて以下の記述します。:
|
||||
または Element Plusをインポートする際は必要に応じて以下の記述します。:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-plus'
|
||||
import lang from 'element-ui/lib/locale/lang/en'
|
||||
import locale from 'element-ui/lib/locale'
|
||||
import lang from 'element-plus/lib/locale/lang/en'
|
||||
import locale from 'element-plus/lib/locale'
|
||||
|
||||
// configure language
|
||||
locale.use(lang)
|
||||
|
||||
@ -13,9 +13,9 @@ npm install element-plus --save
|
||||
|
||||
```html
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script src="https://unpkg.com/element-plus/lib/index.js"></script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
@ -315,7 +315,7 @@ Bootstrapのレスポンシブデザインを例にとると、xs, sm, md, lg, x
|
||||
さらに、Element は、特定の条件下で要素を隠すための一連のクラスを提供します。これらのクラスは、任意の DOM 要素やカスタムコンポーネントに追加することができます。これらのクラスを使用するには、以下のCSSファイルをインポートする必要があります。
|
||||
|
||||
```js
|
||||
import 'element-ui/lib/theme-chalk/display.css';
|
||||
import 'element-plus/lib/theme-chalk/display.css';
|
||||
```
|
||||
|
||||
クラス:
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
### サービス
|
||||
サービスで Loading を呼び出すこともできます。Loadingサービスをインポートします:
|
||||
```javascript
|
||||
import { Loading } from 'element-ui';
|
||||
import { Loading } from 'element-plus';
|
||||
```
|
||||
呼び出す:
|
||||
```javascript
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Delete canceled'
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -102,7 +102,7 @@
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: 'Input canceled'
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -287,7 +287,7 @@ Elementが完全にインポートされている場合、Vue.prototypeに以下
|
||||
オンデマンドで `MessageBox` をインポートしたい場合:
|
||||
|
||||
```javascript
|
||||
import { MessageBox } from 'element-ui';
|
||||
import { MessageBox } from 'element-plus';
|
||||
```
|
||||
|
||||
対応するメソッドは以下の通り: 対応するメソッドは `MessageBox`, `MessageBox.alert`, `MessageBox.confirm`, `MessageBox.prompt` である。パラメータは上記と同じである。
|
||||
|
||||
@ -194,7 +194,7 @@
|
||||
Import `Message`:
|
||||
|
||||
```javascript
|
||||
import { Message } from 'element-ui';
|
||||
import { Message } from 'element-plus';
|
||||
```
|
||||
|
||||
この場合は `Message(options)` を呼び出す必要があります。また、`Message.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`Message.closeAll()`を呼び出すことができます。
|
||||
|
||||
@ -282,7 +282,7 @@ success, warning, info, errorの4種類を提供しています。
|
||||
`Notification` をインポート:
|
||||
|
||||
```javascript
|
||||
import { Notification } from 'element-ui';
|
||||
import { Notification } from 'element-plus';
|
||||
```
|
||||
|
||||
この場合は `Notification(options)` を呼び出す必要があります。また、`Notification.success(options)`のように、異なるタイプのメソッドも登録しています。すべてのインスタンスを手動で閉じるには、`Notification.closeAll()` を呼び出すことができます。
|
||||
|
||||
@ -162,7 +162,7 @@ import {
|
||||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui';
|
||||
} from 'element-plus';
|
||||
|
||||
Vue.use(Pagination);
|
||||
Vue.use(Dialog);
|
||||
|
||||
@ -146,9 +146,9 @@ Elementにビルトインされているトランジションをダイレクト
|
||||
|
||||
```js
|
||||
// fade/zoom
|
||||
import 'element-ui/lib/theme-chalk/base.css';
|
||||
import 'element-plus/lib/theme-chalk/base.css';
|
||||
// collapse
|
||||
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
|
||||
import CollapseTransition from 'element-plus/lib/transitions/collapse-transition';
|
||||
import Vue from 'vue'
|
||||
|
||||
Vue.component(CollapseTransition.name, CollapseTransition)
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
## 自定义主题
|
||||
Element Plus 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。
|
||||
|
||||
### 主题编辑器
|
||||
使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element Plus 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。
|
||||
|
||||
也可以使用[主题编辑器 Chrome 插件](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，在任何使用 Element Plus 开发的网站上配置并实时预览主题。
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### 仅替换主题色
|
||||
如果仅希望更换 Element Plus 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element Plus 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element Plus 的视觉更加符合具体项目的定位。
|
||||
|
||||
|
||||
@ -12,14 +12,16 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
|
||||
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
v-model="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose">
|
||||
<span>这是一段信息</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<script>
|
||||
|
||||
@ -428,7 +428,7 @@
|
||||
"pages": {
|
||||
"index": {
|
||||
"1": "デスクトップUIライブラリ",
|
||||
"2": "Element、開発者、デザイナー、プロダクトマネージャーのためのVue 2.0ベースのコンポーネントライブラリ",
|
||||
"2": "Element Plus、開発者、デザイナー、プロダクトマネージャーのためのVue 3.0ベースのコンポーネントライブラリ",
|
||||
"3": "ガイド",
|
||||
"4": "設計ガイドラインを理解し、論理的に健全で、合理的に構成された使いやすい製品を設計者が構築できるように支援します。",
|
||||
"5": "詳細を見る",
|
||||
|
||||
@ -1,459 +0,0 @@
|
||||
[
|
||||
{
|
||||
"lang": "zh-CN",
|
||||
"display-name": {
|
||||
"border-color": "边框颜色",
|
||||
"font-color": "文字颜色",
|
||||
"background-color": "背景颜色",
|
||||
"font-weight": "文字粗细",
|
||||
"font-size": "文字大小",
|
||||
"font-line-height": "文字行高",
|
||||
"border-radius": "边框圆角",
|
||||
"vertical": "纵向",
|
||||
"horizontal": "横向",
|
||||
"padding": "内间距",
|
||||
"margin": "外间距",
|
||||
"icon": "图标",
|
||||
"placeholder": "占位符",
|
||||
"dropdown": "下拉菜单",
|
||||
"checked": "选中状态",
|
||||
"active": "激活状态",
|
||||
"hover": "鼠标悬停状态",
|
||||
"max": "最大",
|
||||
"medium": "中号",
|
||||
"small": "小号",
|
||||
"mini": "最小号",
|
||||
"min": "最小",
|
||||
"focus": "聚焦",
|
||||
"selected": "选中",
|
||||
"height": "高度",
|
||||
"size": "大小",
|
||||
"header": "头部",
|
||||
"group": "分组",
|
||||
"radius": "圆角",
|
||||
"width": "宽度",
|
||||
"color": "颜色",
|
||||
"title": "标题",
|
||||
"content": "内容",
|
||||
"success": "成功状态",
|
||||
"danger": "危险状态",
|
||||
"warning": "警告状态",
|
||||
"info": "提示状态",
|
||||
"customed": "客制化的",
|
||||
"disabled": "禁用状态",
|
||||
"default": "默认",
|
||||
"primary": "主要",
|
||||
"inrange": "日期范围"
|
||||
},
|
||||
"action": {
|
||||
"require-them-name": "主题名称是必填项",
|
||||
"duplicate-them-name": "主题名称重复",
|
||||
"confirm-delete-theme": "确定要删除这个主题?",
|
||||
"max-user-theme": "已达自定义主题上限",
|
||||
"no-preview-config": "获取主题预览配置错误",
|
||||
"undo": "撤销",
|
||||
"redo": "重做",
|
||||
"notice": "提示",
|
||||
"confirm": "确定",
|
||||
"cancel": "取消",
|
||||
"load-local-theme-config": "正在恢复您上次编辑的自定义主题",
|
||||
"upload-theme": "点击上传主题",
|
||||
"rename-theme": "修改命名",
|
||||
"copy-theme": "复制主题",
|
||||
"last-modified": "最近修改",
|
||||
"reset-theme": "重置",
|
||||
"delete-theme": "删除主题",
|
||||
"download-theme": "下载",
|
||||
"theme-check": "查看",
|
||||
"theme-copy": "复制",
|
||||
"theme-edit": "编辑",
|
||||
"description-element": "默认主题",
|
||||
"description-napos": "深色主题",
|
||||
"description-kiwi": "KIWI 主题"
|
||||
},
|
||||
"category": {
|
||||
"BrandColor": "品牌颜色",
|
||||
"FunctionalColor": "辅助颜色",
|
||||
"FontColor": "文字颜色",
|
||||
"BorderColor": "边框颜色",
|
||||
"BackgroundColor": "背景颜色",
|
||||
"Other": "其他",
|
||||
"Color": "颜色",
|
||||
"Border": "边框",
|
||||
"Font": "文字",
|
||||
"Radius": "边框圆角",
|
||||
"Shadow": "阴影",
|
||||
"Spacing": "间距",
|
||||
"FontSize": "文字大小",
|
||||
"FontWeight": "文字粗细",
|
||||
"LineHeight": "文字行高"
|
||||
},
|
||||
"variable-name" : {
|
||||
"color-primary": "主题色",
|
||||
"color-white": "基础白色",
|
||||
"color-black": "基础黑色",
|
||||
"color-success": "成功颜色",
|
||||
"color-warning": "警告颜色",
|
||||
"color-danger": "危险颜色",
|
||||
"color-info": "信息颜色",
|
||||
"color-text-primary": "主要文字颜色",
|
||||
"color-text-regular": "常规文字颜色",
|
||||
"color-text-secondary": "次要文字颜色",
|
||||
"color-text-placeholder": "占位文字颜色",
|
||||
"border-color-base": "一级边框颜色",
|
||||
"border-color-light": "二级边框颜色",
|
||||
"border-color-lighter": "三级边框颜色",
|
||||
"border-color-extra-light": "四级边框颜色",
|
||||
"background-color-base": "基础背景色",
|
||||
"border-radius-base": "大圆角",
|
||||
"border-radius-small": "小圆角",
|
||||
"border-radius-zero": "无圆角",
|
||||
"border-radius-circle": "圆形圆角",
|
||||
"box-shadow-base": "基础投影",
|
||||
"box-shadow-dark": "深色投影",
|
||||
"box-shadow-light": "浅色投影",
|
||||
"font-size-extra-large": "主标题文字大小",
|
||||
"font-size-large": "标题文字大小",
|
||||
"font-size-medium": "小标题文字大小",
|
||||
"font-size-base": "正文文字大小",
|
||||
"font-size-small": "正文（小）文字大小",
|
||||
"font-size-extra-small": "辅助文字大小",
|
||||
"font-weight-primary": "主要文字粗细",
|
||||
"font-weight-secondary": "次要文字粗细",
|
||||
"font-line-height-primary": "主要文字行高",
|
||||
"font-line-height-secondary": "次要文字行高",
|
||||
"tooltip-fill": "Dark 主题背景色",
|
||||
"tooltip-color": "Light 主题背景色",
|
||||
"slider-height": "滑块轨道高度",
|
||||
"datepicker-off-font-color": "不是当前月份的日期文字颜色"
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "en-US",
|
||||
"variable-name" : {
|
||||
"color-primary": "primary color",
|
||||
"color-white": "basic white",
|
||||
"color-black": "basic black",
|
||||
"color-success": "success color",
|
||||
"color-warning": "warning color",
|
||||
"color-danger": "danger color",
|
||||
"color-info": "info color",
|
||||
"color-text-primary": "primary text color",
|
||||
"color-text-regular": "regular text color",
|
||||
"color-text-secondary": "secondary text color",
|
||||
"color-text-placeholder": "placeholder text color",
|
||||
"border-color-base": "border color base",
|
||||
"border-color-light": "border color light",
|
||||
"border-color-lighter": "border color lighter",
|
||||
"border-color-extra-light": "border color extra light",
|
||||
"background-color-base": "base background color",
|
||||
"border-radius-base": "border radius base",
|
||||
"border-radius-small": "border radius small",
|
||||
"border-radius-circle": "border radius circle",
|
||||
"box-shadow-base": "box shadow base",
|
||||
"box-shadow-dark": "box shadow dark",
|
||||
"box-shadow-light": "box shadow light",
|
||||
"font-size-extra-large": "extra large font size",
|
||||
"font-size-large": "large font size",
|
||||
"font-size-medium": "medium font size",
|
||||
"font-size-base": "base font size",
|
||||
"font-size-small": "small font size",
|
||||
"font-size-extra-small": "extra small font size",
|
||||
"font-weight-primary": "primary font weight",
|
||||
"font-weight-secondary": "secondary font weight",
|
||||
"font-line-height-primary": "primary font line height",
|
||||
"font-line-height-secondary": "secondary font line height"
|
||||
},
|
||||
"display-name": {
|
||||
"border-color": "border color",
|
||||
"font-color": "font color",
|
||||
"background-color": "background color",
|
||||
"font-weight": "font weight",
|
||||
"font-size": "font size",
|
||||
"font-line-height": "font line height",
|
||||
"border-radius": "border radius"
|
||||
},
|
||||
"action": {
|
||||
"require-them-name": "Theme name is required",
|
||||
"duplicate-them-name": "Duplicate them name",
|
||||
"confirm-delete-theme": "Are you sure you want to delete this theme?",
|
||||
"no-preview-config": "No preview config found",
|
||||
"max-user-theme": "Maxium user theme limit",
|
||||
"undo": "Undo",
|
||||
"redo": "Redo",
|
||||
"notice": "Notice",
|
||||
"confirm": "Confirm",
|
||||
"cancel": "Cancel",
|
||||
"load-local-theme-config": "Loading your last saved theme config",
|
||||
"last-modified": "Last modified",
|
||||
"upload-theme": "Click to upload theme",
|
||||
"reset-theme": "Reset",
|
||||
"rename-theme": "Rename",
|
||||
"copy-theme": "Copy",
|
||||
"delete-theme": "Delete",
|
||||
"download-theme": "Download",
|
||||
"theme-check": "Preview",
|
||||
"theme-copy": "Copy",
|
||||
"theme-edit": "Edit",
|
||||
"description-element": "Default theme",
|
||||
"description-napos": "Dark theme",
|
||||
"description-kiwi": "kiwi theme"
|
||||
},
|
||||
"category": {
|
||||
"BrandColor": "Brand Color",
|
||||
"FunctionalColor": "Functional Color",
|
||||
"FontColor": "Font Color",
|
||||
"BorderColor": "Border Color",
|
||||
"BackgroundColor": "Background Color",
|
||||
"FontSize": "Font Size",
|
||||
"FontWeight": "Font Weight",
|
||||
"LineHeight": "Line Height"
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "es",
|
||||
"variable-name" : {
|
||||
"color-primary": "primary color",
|
||||
"color-white": "basic white",
|
||||
"color-black": "basic black",
|
||||
"color-success": "success color",
|
||||
"color-warning": "warning color",
|
||||
"color-danger": "danger color",
|
||||
"color-info": "info color",
|
||||
"color-text-primary": "primary text color",
|
||||
"color-text-regular": "regular text color",
|
||||
"color-text-secondary": "secondary text color",
|
||||
"color-text-placeholder": "placeholder text color",
|
||||
"border-color-base": "border color base",
|
||||
"border-color-light": "border color light",
|
||||
"border-color-lighter": "border color lighter",
|
||||
"border-color-extra-light": "border color extra light",
|
||||
"background-color-base": "base background color",
|
||||
"border-radius-base": "border radius base",
|
||||
"border-radius-small": "border radius small",
|
||||
"border-radius-circle": "border radius circle",
|
||||
"box-shadow-base": "box shadow base",
|
||||
"box-shadow-dark": "box shadow dark",
|
||||
"box-shadow-light": "box shadow light",
|
||||
"font-size-extra-large": "extra large font size",
|
||||
"font-size-large": "large font size",
|
||||
"font-size-medium": "medium font size",
|
||||
"font-size-base": "base font size",
|
||||
"font-size-small": "small font size",
|
||||
"font-size-extra-small": "extra small font size",
|
||||
"font-weight-primary": "primary font weight",
|
||||
"font-weight-secondary": "secondary font weight",
|
||||
"font-line-height-primary": "primary font line height",
|
||||
"font-line-height-secondary": "secondary font line height"
|
||||
},
|
||||
"display-name": {
|
||||
"border-color": "border color",
|
||||
"font-color": "font color",
|
||||
"background-color": "background color",
|
||||
"font-weight": "font weight",
|
||||
"font-size": "font size",
|
||||
"font-line-height": "font line height",
|
||||
"border-radius": "border radius"
|
||||
},
|
||||
"action": {
|
||||
"require-them-name": "Theme name is required",
|
||||
"duplicate-them-name": "Duplicate them name",
|
||||
"confirm-delete-theme": "Are you sure you want to delete this theme?",
|
||||
"no-preview-config": "No preview config found",
|
||||
"max-user-theme": "Maxium user theme limit",
|
||||
"undo": "Undo",
|
||||
"redo": "Redo",
|
||||
"notice": "Notice",
|
||||
"confirm": "Confirm",
|
||||
"cancel": "Cancel",
|
||||
"load-local-theme-config": "Loading your last saved theme config",
|
||||
"last-modified": "Last modified",
|
||||
"upload-theme": "Click to upload theme",
|
||||
"reset-theme": "Reset",
|
||||
"rename-theme": "Rename",
|
||||
"copy-theme": "Copy",
|
||||
"delete-theme": "Delete",
|
||||
"download-theme": "Download",
|
||||
"theme-check": "Preview",
|
||||
"theme-copy": "Copy",
|
||||
"theme-edit": "Edit",
|
||||
"description-element": "Default theme",
|
||||
"description-napos": "Dark theme",
|
||||
"description-kiwi": "kiwi theme"
|
||||
},
|
||||
"category": {
|
||||
"BrandColor": "Brand Color",
|
||||
"FunctionalColor": "Functional Color",
|
||||
"FontColor": "Font Color",
|
||||
"BorderColor": "Border Color",
|
||||
"BackgroundColor": "Background Color",
|
||||
"FontSize": "Font Size",
|
||||
"FontWeight": "Font Weight",
|
||||
"LineHeight": "Line Height"
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "fr-FR",
|
||||
"variable-name" : {
|
||||
"color-primary": "primary color",
|
||||
"color-white": "basic white",
|
||||
"color-black": "basic black",
|
||||
"color-success": "success color",
|
||||
"color-warning": "warning color",
|
||||
"color-danger": "danger color",
|
||||
"color-info": "info color",
|
||||
"color-text-primary": "primary text color",
|
||||
"color-text-regular": "regular text color",
|
||||
"color-text-secondary": "secondary text color",
|
||||
"color-text-placeholder": "placeholder text color",
|
||||
"border-color-base": "border color base",
|
||||
"border-color-light": "border color light",
|
||||
"border-color-lighter": "border color lighter",
|
||||
"border-color-extra-light": "border color extra light",
|
||||
"background-color-base": "base background color",
|
||||
"border-radius-base": "border radius base",
|
||||
"border-radius-small": "border radius small",
|
||||
"border-radius-circle": "border radius circle",
|
||||
"box-shadow-base": "box shadow base",
|
||||
"box-shadow-dark": "box shadow dark",
|
||||
"box-shadow-light": "box shadow light",
|
||||
"font-size-extra-large": "extra large font size",
|
||||
"font-size-large": "large font size",
|
||||
"font-size-medium": "medium font size",
|
||||
"font-size-base": "base font size",
|
||||
"font-size-small": "small font size",
|
||||
"font-size-extra-small": "extra small font size",
|
||||
"font-weight-primary": "primary font weight",
|
||||
"font-weight-secondary": "secondary font weight",
|
||||
"font-line-height-primary": "primary font line height",
|
||||
"font-line-height-secondary": "secondary font line height"
|
||||
},
|
||||
"display-name": {
|
||||
"border-color": "border color",
|
||||
"font-color": "font color",
|
||||
"background-color": "background color",
|
||||
"font-weight": "font weight",
|
||||
"font-size": "font size",
|
||||
"font-line-height": "font line height",
|
||||
"border-radius": "border radius"
|
||||
},
|
||||
"action": {
|
||||
"require-them-name": "Theme name is required",
|
||||
"duplicate-them-name": "Duplicate them name",
|
||||
"confirm-delete-theme": "Are you sure you want to delete this theme?",
|
||||
"no-preview-config": "No preview config found",
|
||||
"max-user-theme": "Maxium user theme limit",
|
||||
"undo": "Undo",
|
||||
"redo": "Redo",
|
||||
"notice": "Notice",
|
||||
"confirm": "Confirm",
|
||||
"cancel": "Cancel",
|
||||
"load-local-theme-config": "Loading your last saved theme config",
|
||||
"last-modified": "Last modified",
|
||||
"upload-theme": "Click to upload theme",
|
||||
"reset-theme": "Reset",
|
||||
"rename-theme": "Rename",
|
||||
"copy-theme": "Copy",
|
||||
"delete-theme": "Delete",
|
||||
"download-theme": "Download",
|
||||
"theme-check": "Preview",
|
||||
"theme-copy": "Copy",
|
||||
"theme-edit": "Edit",
|
||||
"description-element": "Default theme",
|
||||
"description-napos": "Dark theme",
|
||||
"description-kiwi": "kiwi theme"
|
||||
},
|
||||
"category": {
|
||||
"BrandColor": "Brand Color",
|
||||
"FunctionalColor": "Functional Color",
|
||||
"FontColor": "Font Color",
|
||||
"BorderColor": "Border Color",
|
||||
"BackgroundColor": "Background Color",
|
||||
"FontSize": "Font Size",
|
||||
"FontWeight": "Font Weight",
|
||||
"LineHeight": "Line Height"
|
||||
}
|
||||
},
|
||||
{
|
||||
"lang": "jp",
|
||||
"variable-name" : {
|
||||
"color-primary": "primary color",
|
||||
"color-white": "basic white",
|
||||
"color-black": "basic black",
|
||||
"color-success": "success color",
|
||||
"color-warning": "warning color",
|
||||
"color-danger": "danger color",
|
||||
"color-info": "info color",
|
||||
"color-text-primary": "primary text color",
|
||||
"color-text-regular": "regular text color",
|
||||
"color-text-secondary": "secondary text color",
|
||||
"color-text-placeholder": "placeholder text color",
|
||||
"border-color-base": "border color base",
|
||||
"border-color-light": "border color light",
|
||||
"border-color-lighter": "border color lighter",
|
||||
"border-color-extra-light": "border color extra light",
|
||||
"background-color-base": "base background color",
|
||||
"border-radius-base": "border radius base",
|
||||
"border-radius-small": "border radius small",
|
||||
"border-radius-circle": "border radius circle",
|
||||
"box-shadow-base": "box shadow base",
|
||||
"box-shadow-dark": "box shadow dark",
|
||||
"box-shadow-light": "box shadow light",
|
||||
"font-size-extra-large": "extra large font size",
|
||||
"font-size-large": "large font size",
|
||||
"font-size-medium": "medium font size",
|
||||
"font-size-base": "base font size",
|
||||
"font-size-small": "small font size",
|
||||
"font-size-extra-small": "extra small font size",
|
||||
"font-weight-primary": "primary font weight",
|
||||
"font-weight-secondary": "secondary font weight",
|
||||
"font-line-height-primary": "primary font line height",
|
||||
"font-line-height-secondary": "secondary font line height"
|
||||
},
|
||||
"display-name": {
|
||||
"border-color": "border color",
|
||||
"font-color": "font color",
|
||||
"background-color": "background color",
|
||||
"font-weight": "font weight",
|
||||
"font-size": "font size",
|
||||
"font-line-height": "font line height",
|
||||
"border-radius": "border radius"
|
||||
},
|
||||
"action": {
|
||||
"require-them-name": "Theme name is required",
|
||||
"duplicate-them-name": "Duplicate them name",
|
||||
"confirm-delete-theme": "Are you sure you want to delete this theme?",
|
||||
"no-preview-config": "No preview config found",
|
||||
"max-user-theme": "Maxium user theme limit",
|
||||
"undo": "Undo",
|
||||
"redo": "Redo",
|
||||
"notice": "Notice",
|
||||
"confirm": "Confirm",
|
||||
"cancel": "Cancel",
|
||||
"load-local-theme-config": "Loading your last saved theme config",
|
||||
"last-modified": "Last modified",
|
||||
"upload-theme": "Click to upload theme",
|
||||
"reset-theme": "Reset",
|
||||
"rename-theme": "Rename",
|
||||
"copy-theme": "Copy",
|
||||
"delete-theme": "Delete",
|
||||
"download-theme": "Download",
|
||||
"theme-check": "Preview",
|
||||
"theme-copy": "Copy",
|
||||
"theme-edit": "Edit",
|
||||
"description-element": "Default theme",
|
||||
"description-napos": "Dark theme",
|
||||
"description-kiwi": "kiwi theme"
|
||||
},
|
||||
"category": {
|
||||
"BrandColor": "Brand Color",
|
||||
"FunctionalColor": "Functional Color",
|
||||
"FontColor": "Font Color",
|
||||
"BorderColor": "Border Color",
|
||||
"BackgroundColor": "Background Color",
|
||||
"FontSize": "Font Size",
|
||||
"FontWeight": "Font Weight",
|
||||
"LineHeight": "Line Height"
|
||||
}
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user