Skip to content

E
Element
Commit 9f9fd8f7 authored by SkyAo's avatar SkyAo Committed by GitHub
Browse files
Options

Merge pull request #1098 from Leopoldthecoder/master 

FAQ: add translation
parents 6e124fc2 72a9c9f2
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 190 deletions
FAQ.md
View file @ 9f9fd8f7
## FAQ
## 常见问题
<details>
<summary>给组件绑定的事件为什么无法触发？</summary>
在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 `.native` 修饰符：
在 Vue 2.0 中，为**自定义**组件绑定**原生**事件必须使用 `.native` 修饰符：
```html
<my-component @click.native="handleClick">Click Me</my-component>
```
......@@ -37,7 +37,7 @@
<details>
<summary>你们的文档怎么偷偷更新了？</summary>
我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.md)。
我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.zh-CN.md)。
</details>
<details>
......@@ -61,3 +61,67 @@ npm run dev
npm run dist
```
</details>
## FAQ
<details>
<summary>Why are my event listeners not working?</summary>
In Vue 2.0, adding **native** event handlers in **custom** components requires a `.native` modifier:
```html
<my-component @click.native="handleClick">Click Me</my-component>
```
For the sake of usability, we processed `Button` so it can listen to `click` events:
```html
<el-button @click="handleButtonClick">Click Me</el-button>
```
For other components, the `.native` modifier is still mandatory.
</details>
<details>
<summary>How do I add buttons in each row of Table to operate data of that row?</summary>
Just use `inline-template`:
```html
<el-table-column label="Operations" inline-template>
<el-button @click.native="showDetail(row)">Details</el-button>
</el-table-column>
```
The parameter `row` is the data object of corresponding row.
</details>
<details>
<summary>How do `render-content` of Tree and `render-header` of Table work?</summary>
Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
</details>
<details>
<summary>When do you update documentations of Element?</summary>
We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md)。
</details>
<details>
<summary>I imported Element in my project, but why does it report CSS error/font file error/components have no style?</summary>
Please refer to our [starter kit](https://github.com/ElementUI/element-starter) and correctly configure file-loader, css-loader and style-loader in webpack config file. Besides, we also provide templated based on [cooking](https://github.com/ElementUI/element-cooking-starter) and [laravel](https://github.com/ElementUI/element-in-laravel-starter).
</details>
<details>
<summary>I cloned Element's repo, but failed to run it. How do I solve it?</summary>
First, please make sure to clone the latest code in master branch and cloned files are intact. Then, note that the version of Nodejs should be 4.0+ and npm 3.0+. Finally, activate development:
```bash
npm run dev
```
or build it:
```bash
npm run dist
```
</details>
README.md
View file @ 9f9fd8f7
......@@ -8,14 +8,12 @@
![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-default/index.css?compression=gzip&label=gzip%20size:%20CSS)
[![Join the chat at https://gitter.im/ElemeFE/element](https://badges.gitter.im/ElemeFE/element.svg)](https://gitter.im/ElemeFE/element?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
> Desktop UI elements for Vue.js 2.0.
> A Vue.js 2.0 UI Toolkit for Web.
## Links
- [Home Page](http://element.eleme.io/)
- [Docs](http://element.eleme.io/#/component)
- [FAQ 中文](./FAQ.md)
- [自定义主题](./custom-theme.md)
- [i18n](./i18n.md)
- [FAQ](./FAQ.md)
- Starter Kit
- [element-starter](https://github.com/ElementUI/element-starter)
- [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter)
......@@ -32,8 +30,6 @@ npm install element-ui -S
```
## Quick Start
use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
``` javascript
import Vue from 'vue'
import Element from 'element-ui'
......@@ -50,38 +46,7 @@ import {
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
```
(roughly) to
``` javascript
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
// or
import Select from 'element-ui/lib/select'
import 'element-ui/lib/theme-default/select.css'
import Button from 'element-ui/lib/button'
import 'element-ui/lib/theme-default/button.css'
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
```
## babel-plugin-component
.babelrc
```json
{
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
```
For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
## Browser Support
Modern browsers and Internet Explorer 9+.
......
build/cooking.demo.js
View file @ 9f9fd8f7
......@@ -66,7 +66,7 @@ cooking.add('vueMarkdown', {
if (tokens[idx].nesting === 1) {
var description = (m && m.length > 1) ? m[1] : '';
var content = tokens[idx + 1].content;
var html = convert(striptags.strip(content, ['script', 'style']));
var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
var script = striptags.fetch(content, 'script');
var style = striptags.fetch(content, 'style');
var jsfiddle = { html: html, script: script, style: style };
......
custom-theme.md deleted 100644 → 0
View file @ 6e124fc2
# 自定义主题
Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。
## 安装工具
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。
```shell
npm i element-theme -D
```
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
```shell
npm i element-theme-default -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-default -D
```
## 初始化变量文件
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
```shell
node_modules/.bin/et -i [可以自定义变量文件目录]
> ✔ Generator variables file
```
如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到了所有变量，它们使用 CSS4 的风格定义。大致结构如下：
```css
:root {
/* Colors
-------------------------- */
--color-primary: #20a0ff;
--color-success: #13ce66;
--color-warning: #f7ba2a;
--color-danger: #ff4949;
--color-info: #50BFFF;
--color-blue: #2e90fe;
--color-blue-light: #5da9ff;
--color-blue-lighter: rgba(var(--color-blue), 0.12);
--color-white: #fff;
--color-black: #000;
--color-grey: #C0CCDA;
```
## 修改变量
直接编辑 `element-variables.css` 文件，例如修改主题色为红色。
```CSS
--color-primary: red;
```
## 编译主题
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。
```shell
node_modules/.bin/et
> ✔ build theme font
> ✔ build element theme
```
## 引入自定义主题
默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
```javascript
import './theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
```
## 搭配插件按需引入组件主题
如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
```json
{
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]]]
}
```
如果不清楚 `babel-plugin-component` 是什么，请阅读 [快速上手](./examples/docs/zh-CN/quickstart.md) 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
examples/docs/en-US/quickstart.md
View file @ 9f9fd8f7
......@@ -19,7 +19,7 @@ Create a new project, and its structure should be
|- index.html --------------- HTML template
|- package.json ------------- npm config
|- README.md ---------------- readme
|- webpack.config.js ------ webpack config
|- webpack.config.js -------- webpack config
```
Typical configurations for these config files are:
......
examples/docs/zh-CN/quickstart.md
View file @ 9f9fd8f7
......@@ -19,7 +19,7 @@
|- index.html --------------- HTML 模板
|- package.json ------------- npm 配置文件
|- README.md ---------------- 项目帮助文档
|- webpack.config.js ------ webpack 配置文件
|- webpack.config.js -------- webpack 配置文件
```
几个配置文件的典型配置如下：
......
examples/entry.js
View file @ 9f9fd8f7
......@@ -9,7 +9,7 @@ import MainFooter from './components/footer.vue';
import MainHeader from './components/header.vue';
import SideNav from './components/side-nav';
import FooterNav from './components/footer-nav';
import title from './i18n/title';
import title from './i18n/title.json';
Vue.use(Element);
Vue.use(VueRouter);
......
examples/i18n/title.js deleted 100644 → 0
View file @ 6e124fc2
export default {
'zh-CN': {
home: 'Element - 网站快速成型工具',
guide: '指南 | Element',
component: '组件 | Element',
resource: '资源 | Element'
},
'en-US': {
home: 'Element - A Desktop UI Library',
guide: 'Guide | Element',
component: 'Component | Element',
resource: 'Resource | Element'
}
};
examples/i18n/title.json 0 → 100644
View file @ 9f9fd8f7
{
"zh-CN": {
"home": "Element - 网站快速成型工具",
"guide": "指南 | Element",
"component": "组件 | Element",
"resource": "资源 | Element"
},
"en-US": {
"home": "Element - A Desktop UI Toolkit for Web",
"guide": "Guide | Element",
"component": "Component | Element",
"resource": "Resource | Element"
}
}
i18n.md deleted 100644 → 0
View file @ 6e124fc2
## Internationalization
The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
```
Or if you are importing Element on demand:
```javascript
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// configure language
locale.use(lang)
// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
```
The Chinese language pack is imported by default, even if you're using another language. But with `IgnorePlugin` provided by webpack you can ignore it when building:
webpack.config.js
```javascript
{
plugins: [
new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/)
]
}
```
Currently Element ships with the following languages:
- Chinese
- English
- German
- Portuguese
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment