Skip to content

E
Element
Commit 7e8a00d2 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕
Browse files
Options

scaffolding Spanish docs

parent 4d71e2f3
Expand all Show whitespace changes
Inline Side-by-side
Showing with 18780 additions and 23 deletions
build/bin/new-lang.js
View file @ 7e8a00d2
...@@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) { ...@@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) {
console.error(`${lang} already exists.`); console.error(`${lang} already exists.`);
process.exit(1); process.exit(1);
} }
let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-us')[0], { lang }); let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang });
componentFile.push(componentNew); componentFile.push(componentNew);
fileSave(path.join(__dirname, '../../examples/i18n/component.json')) fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
.write(JSON.stringify(componentFile, null, ' '), 'utf8') .write(JSON.stringify(componentFile, null, ' '), 'utf8')
...@@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json')) ...@@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
// 添加到 page.json // 添加到 page.json
const pageFile = require('../../examples/i18n/page.json'); const pageFile = require('../../examples/i18n/page.json');
let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-us')[0], { lang }); let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang });
pageFile.push(pageNew); pageFile.push(pageNew);
fileSave(path.join(__dirname, '../../examples/i18n/page.json')) fileSave(path.join(__dirname, '../../examples/i18n/page.json'))
.write(JSON.stringify(pageFile, null, ' '), 'utf8') .write(JSON.stringify(pageFile, null, ' '), 'utf8')
...@@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json')) ...@@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json'))
// 添加到 nav.config.json // 添加到 nav.config.json
const navFile = require('../../examples/nav.config.json'); const navFile = require('../../examples/nav.config.json');
navFile[lang] = navFile['en-us']; navFile[lang] = navFile['en-US'];
fileSave(path.join(__dirname, '../../examples/nav.config.json')) fileSave(path.join(__dirname, '../../examples/nav.config.json'))
.write(JSON.stringify(navFile, null, ' '), 'utf8') .write(JSON.stringify(navFile, null, ' '), 'utf8')
.end('\n'); .end('\n');
......
examples/app.vue
View file @ 7e8a00d2
...@@ -187,7 +187,23 @@ ...@@ -187,7 +187,23 @@
import { use } from 'main/locale'; import { use } from 'main/locale';
import zhLocale from 'main/locale/lang/zh-CN'; import zhLocale from 'main/locale/lang/zh-CN';
import enLocale from 'main/locale/lang/en'; import enLocale from 'main/locale/lang/en';
use(location.href.indexOf('zh-CN') > -1 ? zhLocale : enLocale); import esLocale from 'main/locale/lang/es';
const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
const localize = lang => {
console.log(lang);
switch (lang) {
case 'zh-CN':
use(zhLocale);
break;
case 'es':
use(esLocale);
break;
default:
use(enLocale);
}
};
localize(lang);
export default { export default {
name: 'app', name: 'app',
...@@ -206,14 +222,11 @@ ...@@ -206,14 +222,11 @@
if (val === 'zh-CN') { if (val === 'zh-CN') {
this.suggestJump(); this.suggestJump();
} }
this.localize(); localize(val);
} }
}, },
methods: { methods: {
localize() {
use(this.lang === 'zh-CN' ? zhLocale : enLocale);
},
suggestJump() { suggestJump() {
const href = location.href; const href = location.href;
const preferGithub = localStorage.getItem('PREFER_GITHUB'); const preferGithub = localStorage.getItem('PREFER_GITHUB');
...@@ -231,7 +244,7 @@ ...@@ -231,7 +244,7 @@
}, },
mounted() { mounted() {
this.localize(); localize(this.lang);
if (this.lang === 'zh-CN') { if (this.lang === 'zh-CN') {
this.suggestJump(); this.suggestJump();
} }
......
examples/docs/es/alert.md 0 → 100644
View file @ 7e8a00d2
<script>
export default {
methods: {
hello() {
alert('Hello World!');
}
}
}
</script>
<style>
.demo-box.demo-alert .el-alert {
margin: 20px 0 0;
}
.demo-box.demo-alert .el-alert:first-child {
margin: 0;
}
</style>
## Alert
Displays important alert messages.
### Basic usage
Alert components are non-overlay elements in the page that does not disappear automatically.
::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
```html
<template>
<el-alert
title="success alert"
type="success">
</el-alert>
<el-alert
title="info alert"
type="info">
</el-alert>
<el-alert
title="warning alert"
type="warning">
</el-alert>
<el-alert
title="error alert"
type="error">
</el-alert>
</template>
```
:::
### Customizable close button
Customize the close button as texts or other symbols.
::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
```html
<template>
<el-alert
title="unclosable alert"
type="success"
:closable="false">
</el-alert>
<el-alert
title="customized close-text"
type="info"
close-text="Gotcha">
</el-alert>
<el-alert
title="alert with callback"
type="warning"
@close="hello">
</el-alert>
</template>
<script>
export default {
methods: {
hello() {
alert('Hello World!');
}
}
}
</script>
```
:::
### With icon
Displaying an icon improves readability.
::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
```html
<template>
<el-alert
title="success alert"
type="success"
show-icon>
</el-alert>
<el-alert
title="info alert"
type="info"
show-icon>
</el-alert>
<el-alert
title="warning alert"
type="warning"
show-icon>
</el-alert>
<el-alert
title="error alert"
type="error"
show-icon>
</el-alert>
</template>
```
:::
## Centered text
Use the `center` attribute to center the text.
::: demo
```html
<template>
<el-alert
title="success alert"
type="success"
center
show-icon>
</el-alert>
<el-alert
title="info alert"
type="info"
center
show-icon>
</el-alert>
<el-alert
title="warning alert"
type="warning"
center
show-icon>
</el-alert>
<el-alert
title="error alert"
type="error"
center
show-icon>
</el-alert>
</template>
```
:::
### With description
Description includes a message with more detailed information.
::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
```html
<template>
<el-alert
title="with description"
type="success"
description="This is a description.">
</el-alert>
</template>
```
:::
### With icon and description
::: demo At last, this is an example with both icon and description.
```html
<template>
<el-alert
title="success alert"
type="success"
description="more text description"
show-icon>
</el-alert>
<el-alert
title="info alert"
type="info"
description="more text description"
show-icon>
</el-alert>
<el-alert
title="warning alert"
type="warning"
description="more text description"
show-icon>
</el-alert>
<el-alert
title="error alert"
type="error"
description="more text description"
show-icon>
</el-alert>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| **title** | title **REQUIRED** | string | — | — |
| type | component type | string | success/warning/info/error | info |
| description | descriptive text. Can also be passed with the default slot | string | — | — |
| closable | if closable or not | boolean | — | true |
| center | whether to center the text | boolean | — | false |
| close-text | customized close button text | string | — | — |
| show-icon | if a type icon is displayed | boolean | — | false |
### Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| close | fires when alert is closed | — |
examples/docs/es/badge.md 0 → 100644
View file @ 7e8a00d2
## Badge
A number or status mark on buttons and icons.
### Basic usage
Displays the amount of new messages.
:::demo The amount is defined with `value` which accepts `Number` or `String`.
```html
<el-badge :value="12" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix">
comments
<el-badge class="mark" :value="12" />
</el-dropdown-item>
<el-dropdown-item class="clearfix">
replies
<el-badge class="mark" :value="3" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### Max value
You can customize the max value.
::: demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
```html
<el-badge :value="200" :max="99" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="100" :max="10" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### Customizations
Displays text content other than numbers.
:::demo When `value` is a `String`, it can display customized text.
```html
<el-badge value="new" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge value="hot" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
### Little red dot
Use a red dot to mark content that needs to be noticed.
:::demo Use the attribute `is-dot`. It is a `Boolean`.
```html
<el-badge is-dot class="item">query</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>
```
:::
<style scoped>
.share-button {
width: 36px;
padding: 10px;
}
.mark {
margin-top: 8px;
line-height: 1;
float: right;
}
.clearfix {
@utils-clearfix;
}
.item {
margin-right: 40px;
}
</style>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | display value | string, number | — | — |
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
| is-dot | if a little dot is displayed | boolean | — | false |
| hidden | hidden badge | boolean | — | false |
examples/docs/es/breadcrumb.md 0 → 100644
View file @ 7e8a00d2
## Breadcrumb
Displays the location of the current page, making it easier to browser back.
### Basic usage
:::demo In `el-breadcrumb`, each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator`, and it determines the separator. Its default value is '/'.
```html
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Icon separator
:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Breadcrumb Attributes
| Attribute | Description | Type | Accepted Values | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | separator character | string | — | / |
| separator-class | class name of icon separator | string | — | - |
### Breadcrumb Item Attributes
| Attribute | Description | Type | Accepted Values | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
examples/docs/es/button.md 0 → 100644
View file @ 7e8a00d2
<style>
.demo-box.demo-button {
.el-row {
margin-bottom: 10px;
}
.el-button + .el-button {
margin-left: 10px;
}
.el-button-group {
margin-bottom: 20px;
.el-button + .el-button {
margin-left: 0;
}
& + .el-button-group {
margin-left: 10px;
}
}
}
</style>
## Button
Commonly used button.
### Basic usage
::: demo Use `type`, `plain` and `round` to define Button's style.
```html
<div>
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
<div style="margin: 20px 0">
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</div>
<div>
<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
</div>
```
:::
### Disabled Button
The `disabled` attribute determines if the button is disabled.
:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
```html
<div>
<el-button disabled>Default</el-button>
<el-button type="primary" disabled>Primary</el-button>
<el-button type="success" disabled>Success</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Warning</el-button>
<el-button type="danger" disabled>Danger</el-button>
</div>
<div style="margin-top: 20px">
<el-button plain disabled>Plain</el-button>
<el-button type="primary" plain disabled>Primary</el-button>
<el-button type="success" plain disabled>Success</el-button>
<el-button type="info" plain disabled>Info</el-button>
<el-button type="warning" plain disabled>Warning</el-button>
<el-button type="danger" plain disabled>Danger</el-button>
</div>
```
:::
### Text Button
Buttons without border and background.
:::demo
```html
<el-button type="text">Text Button</el-button>
<el-button type="text" disabled>Text Button</el-button>
```
:::
### Icon Button
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
```html
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
```
:::
### Button Group
Displayed as a button group, can be used to group a series of similar operations.
:::demo Use tag `<el-button-group>` to group your buttons.
```html
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
```
:::
### Loading Button
Click the button to load data, then the button displays a loading state.
:::demo Set `loading` attribute to `true` to display loading state.
```html
<el-button type="primary" :loading="true">Loading</el-button>
```
:::
### Sizes
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
```html
<div>
<el-button>Default</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
</div>
<div style="margin-top: 20px">
<el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
</div>
```
:::
### Attributes
| Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- |
| size | button size | string | medium / small / mini | — |
| type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| disabled | disable the button | boolean | — | false |
| icon | icon class name | string | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button / submit / reset | button |
\ No newline at end of file
examples/docs/es/card.md 0 → 100644
View file @ 7e8a00d2
<script>
import dateUtil from 'main/utils/date'
export default {
data() {
return {
currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
};
}
}
</script>
<style scoped>
.text {
font-size: 14px;
}
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.item {
margin-bottom: 18px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix {
@utils-clearfix;
}
.box-card {
width: 480px;
}
</style>
## Card
Integrate information in a card container.
### Basic usage
Card includes title, content and operations.
:::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot.
```html
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>
```
:::
### Simple card
The header part can be omitted.
:::demo
```html
<el-card class="box-card">
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
</div>
</el-card>
<style>
.text {
font-size: 14px;
}
.item {
padding: 18px 0;
}
.box-card {
width: 480px;
}
</style>
```
:::
### With images
Display richer content by adding some configs.
:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
```html
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
<img src="~examples/assets/images/hamburger.png" class="image">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">Operating button</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<style>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
<script>
export default {
data() {
return {
currentDate: new Date()
};
}
}
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
| body-style | CSS style of body | object| — | { padding: '20px' } |
examples/docs/es/carousel.md 0 → 100644
View file @ 7e8a00d2
<script>
export default {
mounted() {
this.$nextTick(() => {
const demos = document.querySelectorAll('.source');
demos[0].style.padding = '0';
demos[0].className += ' small';
demos[3].className += ' medium';
});
}
}
</script>
<style>
.demo-carousel .block {
padding: 30px;
text-align: center;
border-right: solid 1px #EFF2F6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-carousel .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-carousel .el-carousel__container {
text-align: center;
}
.demo-carousel .el-carousel__item {
h3 {
color: #fff;
font-size: 18px;
line-height: 300px;
margin: 0;
}
&:nth-child(2n) {
background-color: #99a9bf;
}
&:nth-child(2n+1) {
background-color: #d3dce6;
}
}
.demo-carousel .small h3 {
font-size: 14px;
line-height: 150px;
}
.demo-carousel .medium h3 {
font-size: 14px;
line-height: 200px;
}
</style>
## Carousel
Loop a series of images or texts in a limited space
### Basic usage
::: demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
```html
<template>
<div class="block">
<span class="demonstration">Switch when indicator is hovered (default)</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="block">
<span class="demonstration">Switch when indicator is clicked</span>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Indicators
Indicators can be displayed outside the carousel
::: demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
```html
<template>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Arrows
You can define when arrows are displayed
::: demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
```html
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Card mode
When a page is wide enough but has limited height, you can activate card mode for carousels
::: demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
```html
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
```
:::
### Carousel Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the carousel | string | — | — |
| initial-index | index of the initially active slide (starting from 0) | number | — | 0 |
| trigger | how indicators are triggered | string | hover/click | hover |
| autoplay | whether automatically loop the slides | boolean | — | true |
| interval | interval of the auto loop, in milliseconds | number | — | 3000 |
| indicator-position | position of the indicators | string | outside/none | — |
| arrow | when arrows are shown | string | always/hover/never | hover |
| type | type of the Carousel | string | card | — |
### Carousel Events
| Event Name | Description | Parameters |
|---------|---------|---------|
| change | triggers when the active slide switches | index of the new active slide, index of the old active slide |
### Carousel Methods
| Method | Description | Parameters |
|---------- |-------------- | -- |
| setActiveItem | manually switch slide | index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` |
| prev | switch to the previous slide | — |
| next | switch to the next slide | — |
### Carousel-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | name of the item, can be used in `setActiveItem` | string | — | — |
| label | text content for the corresponding indicator | string | — | — |
examples/docs/es/cascader.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/checkbox.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/collapse.md 0 → 100644
View file @ 7e8a00d2
<script>
export default {
data() {
return {
activeNames: ['1'],
activeName: '1'
};
},
methods: {
handleChange(val) {
console.log(val);
}
}
}
</script>
<style>
.demo-collapse {
.el-collapse-item__header {
.header-icon {
margin-left: 5px;
}
}
}
</style>
## Collapse
Use Collapse to store contents.
### Basic usage
You can expand multiple panels
:::demo
```html
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="Consistency" name="1">
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>Simplify the process: keep operating process simple and intuitive;</div>
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeNames: ['1']
};
}
}
</script>
```
:::
### Accordion
In accordion mode, only one panel can be expanded at once
:::demo Activate accordion mode using the `accordion` attribute.
```html
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1">
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>Simplify the process: keep operating process simple and intuitive;</div>
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeName: '1'
};
}
}
</script>
```
:::
### Custom title
Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
:::demo
```html
<el-collapse accordion>
<el-collapse-item name="1">
<template slot="title">
Consistency<i class="header-icon el-icon-information"></i>
</template>
<div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
<div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
</el-collapse-item>
<el-collapse-item title="Feedback" name="2">
<div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
<div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
</el-collapse-item>
<el-collapse-item title="Efficiency" name="3">
<div>Simplify the process: keep operating process simple and intuitive;</div>
<div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
<div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
</el-collapse-item>
<el-collapse-item title="Controllability" name="4">
<div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
<div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
</el-collapse-item>
</el-collapse>
```
:::
### Collapse Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| accordion | whether to activate accordion mode | boolean | — | false |
| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
### Collapse Events
| Event Name | Description | Parameters |
|---------|---------|---------|
| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
### Collapse Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | unique identification of the panel | string/number | — | — |
| title | title of the panel | string | — | — |
\ No newline at end of file
examples/docs/es/color-picker.md 0 → 100644
View file @ 7e8a00d2
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null,
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF'
};
},
mounted() {
this.$nextTick(() => {
const demos = document.querySelectorAll('.source');
demos[0].style.padding = '0';
});
},
}
</script>
<style>
.demo-color-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
border-right: none;
}
}
.demo-color-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-color-picker .el-color-picker + .el-color-picker {
margin-left: 20px;
}
</style>
## ColorPicker
ColorPicker is a color selector supporting multiple color formats.
### Basic usage
:::demo ColorPicker requires a string typed variable to be bound to v-model.
```html
<div class="block">
<span class="demonstration">With default value</span>
<el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
<span class="demonstration">With no default value</span>
<el-color-picker v-model="color2"></el-color-picker>
</div>
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null
}
}
};
</script>
```
:::
### Alpha
:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
```html
<el-color-picker v-model="color3" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color3: 'rgba(19, 206, 102, 0.8)'
}
}
};
</script>
```
:::
### Sizes
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#409EFF'
}
}
};
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| disabled | whether to disable the ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | — | medium / small / mini |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when input value changes | color value |
| active-change | triggers when the current active color changes | active color value |
\ No newline at end of file
examples/docs/es/color.md 0 → 100644
View file @ 7e8a00d2
<style>
.demo-color-box {
border-radius: 4px;
padding: 20px;
height: 74px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
}
.demo-color-box:first-child {
border-radius: 4px 4px 0 0;
}
.demo-color-box:last-child {
border-radius: 0 0 4px 4px;
}
}
.bg-blue {
background-color: #409EFF;
}
.bg-success {
background-color: #13CE66;
}
.bg-warning {
background-color: #f7ba2a;
}
.bg-danger {
background-color: #ff4949;
}
.bg-info {
background-color: #878D99;
}
.bg-text-primary {
background-color: #2d2f33;
}
.bg-text-regular {
background-color: #5a5e66;
}
.bg-text-secondary {
background-color: #878d99;
}
.bg-text-placeholder {
background-color: #b4bccc;
}
.bg-border-base {
background-color: #d8dce5;
}
.bg-border-light {
background-color: #dfe4ed;
}
.bg-border-lighter {
background-color: #e6ebf5;
}
.bg-border-extra-light {
background-color: #edf2fc;
}
[class*=" bg-border-"] {
color: #5a5e66;
}
</style>
## Color
Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
### Main Color
The main color of Element is bright and friendly blue.
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
</el-col>
</el-row>
### Secondary Color
Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
</el-col>
</el-row>
### Neutral Color
Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
<div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
<div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
<div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
<div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
<div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
<div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
</div>
</el-col>
</el-row>
\ No newline at end of file
examples/docs/es/container.md 0 → 100644
View file @ 7e8a00d2
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
#common-layouts + .demo-container {
.el-header, .el-footer {
text-align: center;
}
.el-aside {
background-color: #D3DCE6;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
& > .source > .el-container {
margin-bottom: 40px;
&:nth-child(5) .el-aside,
&:nth-child(6) .el-aside {
line-height: 260px;
}
&:nth-child(7) .el-aside {
line-height: 320px;
}
}
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
## Container
Container components for scaffolding basic structure of the page:
`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
`<el-header>`: container for headers.
`<el-aside>`: container for side sections (usually a side nav).
`<el-main>`: container for main sections.
`<el-footer>`: container for footers.
:::tip
These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
:::
### Common layouts
::: demo
```html
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
```
:::
### Example
::: demo
```html
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
```
:::
### Container Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
### Header Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the header | string | — | 60px |
### Aside Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| width | width of the side section | string | — | 300px |
### Footer Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the footer | string | — | 60px |
\ No newline at end of file
examples/docs/es/custom-theme.md 0 → 100644
View file @ 7e8a00d2
## Custom theme
Element 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 three ways to change the style variables.
### 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 is bright and friendly blue. By changing it, you can make Element 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 style variables. Create a new style file, e.g. `element-variables.scss`:
```html
/* theme color */
$--color-primary: teal;
/* icon font path, required */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/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 Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)
```
:::tip
Note that it is required to override icon font path to the relative path of Element's font files.
:::
### 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
# from GitHub
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
et -i [custom output file]
> ✔ Generator variables file
```
In `element-variables.scss` you can find all the variables we used to style Element 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 */
$--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: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !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:
```shell
et
> ✔ build theme font
> ✔ build element theme
```
#### <strong>Import custom theme</strong>
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
```javascript
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
```
#### <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": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]]]
}
```
If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
\ No newline at end of file
examples/docs/es/date-picker.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/datetime-picker.md 0 → 100644
View file @ 7e8a00d2
<script>
module.exports = {
data() {
return {
pickerOptions1: {
shortcuts: [{
text: 'Today',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Yesterday',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'A week ago',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
pickerOptions2: {
shortcuts: [{
text: 'Last week',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last month',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last 3 months',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: '',
value2: '',
value3: new Date(),
value4: '',
value5: '',
value6: '',
value7: '',
value8: '',
value9: '',
value10: '',
value11: '',
value12: '',
value13: '',
value14: '',
value15: '',
value16: ''
};
}
};
</script>
<style>
.demo-block.demo-datetime-picker .source {
padding: 0;
display: flex;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
flex: 1;
&:last-child {
border-right: none;
}
}
.demo-datetime-picker .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
## DateTimePicker
Select date and time in one picker.
:::tip
DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on `pickerOptions` and other attributes, you can refer to DatePicker and TimePicker.
:::
### Date and time
:::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="Select date and time">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With shortcuts</span>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="Select date and time"
:picker-options="pickerOptions1">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions1: {
shortcuts: [{
text: 'Today',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: 'Yesterday',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: 'A week ago',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Date and time range
:::demo You can select date and time range by setting `type` to `datetimerange`.
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value3"
type="datetimerange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With shortcuts</span>
<el-date-picker
v-model="value4"
type="datetimerange"
:picker-options="pickerOptions2"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions2: {
shortcuts: [{
text: 'Last week',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last month',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: 'Last 3 months',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
value4: ''
};
}
};
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | Whether to show clear button | boolean | — | true |
|size | size of Input | string | large/small/mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
| align | alignment | left/center/right | left |
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
| picker-options | additional options, check the table below | object | — | {} |
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
### Picker Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
### shortcuts
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| text | title of the shortcut | string | — | — |
| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) |
### Methods
| Method | Description | Parameters |
|------|--------|-------|
| focus | focus the Input component | — |
examples/docs/es/dialog.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/dropdown.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/form.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/i18n.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/icon.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/input-number.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/input.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/installation.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/layout.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/loading.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/menu.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/message-box.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/message.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/notification.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/pagination.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/popover.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/progress.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/quickstart.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/radio.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/rate.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/select.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/slider.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/steps.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/switch.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/table.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/tabs.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/tag.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/time-picker.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/tooltip.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/transfer.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/transition.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/tree.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/typography.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/docs/es/upload.md 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/i18n/component.json
View file @ 7e8a00d2
...@@ -60,5 +60,36 @@ ...@@ -60,5 +60,36 @@
"nav": { "nav": {
"dropdown": "Version: " "dropdown": "Version: "
} }
},
{
"lang": "es",
"demo-block": {
"hide-text": "Hide",
"show-text": "Expand",
"button-text": "Try it!",
"tooltip-text": "Run this demo on jsfiddle.net"
},
"footer": {
"links": "Links",
"repo": "GitHub",
"community": "Community",
"changelog": "Changelog",
"theme": "Theme CLI tool",
"preview": "Online theme generator",
"faq": "FAQ",
"gitter": "Gitter",
"starter": "Starter kit",
"feedback": "Feedback",
"contribution": "Contribution",
"eleme": "Eleme"
},
"header": {
"guide": "Guide",
"components": "Component",
"resource": "Resource"
},
"nav": {
"dropdown": "Version: "
}
} }
] ]
examples/i18n/page.json
View file @ 7e8a00d2
This diff is collapsed.
examples/i18n/route.json
View file @ 7e8a00d2
This diff is collapsed.
examples/i18n/title.json
View file @ 7e8a00d2
This diff is collapsed.
examples/nav.config.json
View file @ 7e8a00d2
This diff is collapsed.
examples/pages/es/changelog.vue 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/pages/es/component.vue 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/pages/es/design.vue 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/pages/es/guide.vue 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/pages/es/index.vue 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/pages/es/nav.vue 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/pages/es/resource.vue 0 → 100644
View file @ 7e8a00d2
This diff is collapsed.
examples/route.config.js
View file @ 7e8a00d2
This diff is collapsed.
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