From 7e8a00d2ea69c2a4515cfdb798d753136fea712d Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Mon, 6 Nov 2017 19:22:02 +0800 Subject: [PATCH 001/310] scaffolding Spanish docs --- build/bin/new-lang.js | 6 +- examples/app.vue | 25 +- examples/docs/es/alert.md | 223 +++ examples/docs/es/badge.md | 138 ++ examples/docs/es/breadcrumb.md | 49 + examples/docs/es/button.md | 177 +++ examples/docs/es/card.md | 190 +++ examples/docs/es/carousel.md | 239 ++++ examples/docs/es/cascader.md | 1696 ++++++++++++++++++++++ examples/docs/es/checkbox.md | 327 +++++ examples/docs/es/collapse.md | 151 ++ examples/docs/es/color-picker.md | 125 ++ examples/docs/es/color.md | 128 ++ examples/docs/es/container.md | 299 ++++ examples/docs/es/custom-theme.md | 122 ++ examples/docs/es/date-picker.md | 420 ++++++ examples/docs/es/datetime-picker.md | 283 ++++ examples/docs/es/dialog.md | 314 +++++ examples/docs/es/dropdown.md | 346 +++++ examples/docs/es/form.md | 877 ++++++++++++ examples/docs/es/i18n.md | 212 +++ examples/docs/es/icon.md | 96 ++ examples/docs/es/input-number.md | 180 +++ examples/docs/es/input.md | 696 +++++++++ examples/docs/es/installation.md | 57 + examples/docs/es/layout.md | 388 +++++ examples/docs/es/loading.md | 258 ++++ examples/docs/es/menu.md | 318 +++++ examples/docs/es/message-box.md | 402 ++++++ examples/docs/es/message.md | 302 ++++ examples/docs/es/notification.md | 422 ++++++ examples/docs/es/pagination.md | 221 +++ examples/docs/es/popover.md | 248 ++++ examples/docs/es/progress.md | 61 + examples/docs/es/quickstart.md | 270 ++++ examples/docs/es/radio.md | 231 +++ examples/docs/es/rate.md | 177 +++ examples/docs/es/select.md | 695 +++++++++ examples/docs/es/slider.md | 250 ++++ examples/docs/es/steps.md | 176 +++ examples/docs/es/switch.md | 165 +++ examples/docs/es/table.md | 2027 +++++++++++++++++++++++++++ examples/docs/es/tabs.md | 394 ++++++ examples/docs/es/tag.md | 215 +++ examples/docs/es/time-picker.md | 216 +++ examples/docs/es/tooltip.md | 242 ++++ examples/docs/es/transfer.md | 284 ++++ examples/docs/es/transition.md | 180 +++ examples/docs/es/tree.md | 985 +++++++++++++ examples/docs/es/typography.md | 151 ++ examples/docs/es/upload.md | 426 ++++++ examples/i18n/component.json | 31 + examples/i18n/page.json | 123 +- examples/i18n/route.json | 3 + examples/i18n/title.json | 6 + examples/nav.config.json | 250 ++++ examples/pages/es/changelog.vue | 188 +++ examples/pages/es/component.vue | 288 ++++ examples/pages/es/design.vue | 82 ++ examples/pages/es/guide.vue | 91 ++ examples/pages/es/index.vue | 323 +++++ examples/pages/es/nav.vue | 166 +++ examples/pages/es/resource.vue | 160 +++ examples/route.config.js | 12 + 64 files changed, 18780 insertions(+), 23 deletions(-) create mode 100644 examples/docs/es/alert.md create mode 100644 examples/docs/es/badge.md create mode 100644 examples/docs/es/breadcrumb.md create mode 100644 examples/docs/es/button.md create mode 100644 examples/docs/es/card.md create mode 100644 examples/docs/es/carousel.md create mode 100644 examples/docs/es/cascader.md create mode 100644 examples/docs/es/checkbox.md create mode 100644 examples/docs/es/collapse.md create mode 100644 examples/docs/es/color-picker.md create mode 100644 examples/docs/es/color.md create mode 100644 examples/docs/es/container.md create mode 100644 examples/docs/es/custom-theme.md create mode 100644 examples/docs/es/date-picker.md create mode 100644 examples/docs/es/datetime-picker.md create mode 100644 examples/docs/es/dialog.md create mode 100644 examples/docs/es/dropdown.md create mode 100644 examples/docs/es/form.md create mode 100644 examples/docs/es/i18n.md create mode 100644 examples/docs/es/icon.md create mode 100644 examples/docs/es/input-number.md create mode 100644 examples/docs/es/input.md create mode 100644 examples/docs/es/installation.md create mode 100644 examples/docs/es/layout.md create mode 100644 examples/docs/es/loading.md create mode 100644 examples/docs/es/menu.md create mode 100644 examples/docs/es/message-box.md create mode 100644 examples/docs/es/message.md create mode 100644 examples/docs/es/notification.md create mode 100644 examples/docs/es/pagination.md create mode 100644 examples/docs/es/popover.md create mode 100644 examples/docs/es/progress.md create mode 100644 examples/docs/es/quickstart.md create mode 100644 examples/docs/es/radio.md create mode 100644 examples/docs/es/rate.md create mode 100644 examples/docs/es/select.md create mode 100644 examples/docs/es/slider.md create mode 100644 examples/docs/es/steps.md create mode 100644 examples/docs/es/switch.md create mode 100644 examples/docs/es/table.md create mode 100644 examples/docs/es/tabs.md create mode 100644 examples/docs/es/tag.md create mode 100644 examples/docs/es/time-picker.md create mode 100644 examples/docs/es/tooltip.md create mode 100644 examples/docs/es/transfer.md create mode 100644 examples/docs/es/transition.md create mode 100644 examples/docs/es/tree.md create mode 100644 examples/docs/es/typography.md create mode 100644 examples/docs/es/upload.md create mode 100644 examples/pages/es/changelog.vue create mode 100644 examples/pages/es/component.vue create mode 100644 examples/pages/es/design.vue create mode 100644 examples/pages/es/guide.vue create mode 100644 examples/pages/es/index.vue create mode 100644 examples/pages/es/nav.vue create mode 100644 examples/pages/es/resource.vue diff --git a/build/bin/new-lang.js b/build/bin/new-lang.js index 7984509eb8d..ca93c2994b9 100644 --- a/build/bin/new-lang.js +++ b/build/bin/new-lang.js @@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) { console.error(`${lang} already exists.`); 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); fileSave(path.join(__dirname, '../../examples/i18n/component.json')) .write(JSON.stringify(componentFile, null, ' '), 'utf8') @@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json')) // 添加到 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); fileSave(path.join(__dirname, '../../examples/i18n/page.json')) .write(JSON.stringify(pageFile, null, ' '), 'utf8') @@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json')) // 添加到 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')) .write(JSON.stringify(navFile, null, ' '), 'utf8') .end('\n'); diff --git a/examples/app.vue b/examples/app.vue index 02bc19dc4b1..784c0b88849 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -187,7 +187,23 @@ import { use } from 'main/locale'; import zhLocale from 'main/locale/lang/zh-CN'; 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 { name: 'app', @@ -206,14 +222,11 @@ if (val === 'zh-CN') { this.suggestJump(); } - this.localize(); + localize(val); } }, methods: { - localize() { - use(this.lang === 'zh-CN' ? zhLocale : enLocale); - }, suggestJump() { const href = location.href; const preferGithub = localStorage.getItem('PREFER_GITHUB'); @@ -231,7 +244,7 @@ }, mounted() { - this.localize(); + localize(this.lang); if (this.lang === 'zh-CN') { this.suggestJump(); } diff --git a/examples/docs/es/alert.md b/examples/docs/es/alert.md new file mode 100644 index 00000000000..e90f655dc20 --- /dev/null +++ b/examples/docs/es/alert.md @@ -0,0 +1,223 @@ + + + +## 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 + +``` +::: + +### 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 + + + +``` +::: + +### With icon + +Displaying an icon improves readability. + +::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type. + +```html + +``` +::: + +## Centered text + +Use the `center` attribute to center the text. + +::: demo + +```html + +``` +::: + +### 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 + +``` +::: + +### With icon and description + +::: demo At last, this is an example with both icon and description. + +```html + +``` +::: + +### 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 | — | diff --git a/examples/docs/es/badge.md b/examples/docs/es/badge.md new file mode 100644 index 00000000000..13ab44fd136 --- /dev/null +++ b/examples/docs/es/badge.md @@ -0,0 +1,138 @@ +## 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 + + comments + + + replies + + + + + Click Me + + + + comments + + + + replies + + + + + + +``` +::: + +### 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 + + comments + + + replies + + + +``` +::: + +### Customizations + +Displays text content other than numbers. + +:::demo When `value` is a `String`, it can display customized text. + +```html + + comments + + + replies + + + +``` +::: + +### 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 +query + + + + + +``` +::: + + + +### 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 | diff --git a/examples/docs/es/breadcrumb.md b/examples/docs/es/breadcrumb.md new file mode 100644 index 00000000000..916888dd43b --- /dev/null +++ b/examples/docs/es/breadcrumb.md @@ -0,0 +1,49 @@ +## 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 + + homepage + promotion management + promotion list + promotion detail + +``` +::: + +### Icon separator + +:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator` + +```html + + homepage + promotion management + promotion list + promotion detail + +``` +::: + +### 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 | + + + + + diff --git a/examples/docs/es/button.md b/examples/docs/es/button.md new file mode 100644 index 00000000000..e85e6077167 --- /dev/null +++ b/examples/docs/es/button.md @@ -0,0 +1,177 @@ + + +## Button + +Commonly used button. + +### Basic usage + +::: demo Use `type`, `plain` and `round` to define Button's style. + +```html +
+ Default + Primary + Success + Info + Warning + Danger +
+ +
+ Plain + Primary + Success + Info + Warning + Danger +
+ +
+ Round + Primary + Success + Info + Warning + Danger +
+``` +::: + +### 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 +
+ Default + Primary + Success + Info + Warning + Danger +
+ +
+ Plain + Primary + Success + Info + Warning + Danger +
+``` +::: + +### Text Button + +Buttons without border and background. + +:::demo +```html +Text Button +Text 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 `` tag. Custom icons can be used as well. + +```html + + + +Search +Upload +``` +::: + +### Button Group + +Displayed as a button group, can be used to group a series of similar operations. + +:::demo Use tag `` to group your buttons. + +```html + + Previous Page + Next Page + + + + + + +``` +::: + +### 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 +Loading +``` +::: + +### 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 +
+ Default + Medium + Small + Mini +
+
+ Default + Medium + Small + Mini +
+``` +::: + +### 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 diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md new file mode 100644 index 00000000000..5c79c065da6 --- /dev/null +++ b/examples/docs/es/card.md @@ -0,0 +1,190 @@ + + + +## 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 + +
+ Card name + Operation button +
+
+ {{'List item ' + o }} +
+ + + +``` +::: + +### Simple card + +The header part can be omitted. + +:::demo +```html + +
+ {{'List item ' + o }} +
+ + + +``` +::: + +### 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 + + + + +
+ Yummy hamburger +
+ + Operating button +
+
+ + + + + + + +``` +::: + +### 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' } | diff --git a/examples/docs/es/carousel.md b/examples/docs/es/carousel.md new file mode 100644 index 00000000000..b4ec951364f --- /dev/null +++ b/examples/docs/es/carousel.md @@ -0,0 +1,239 @@ + + +## 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 + + + +``` +::: + +### 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 + + + +``` +::: + +### 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 + + + +``` +::: + +### 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 + + + +``` +::: + +### 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 | — | — | diff --git a/examples/docs/es/cascader.md b/examples/docs/es/cascader.md new file mode 100644 index 00000000000..6b7a4e29292 --- /dev/null +++ b/examples/docs/es/cascader.md @@ -0,0 +1,1696 @@ + + + + +## Cascader + +If the options have a clear hierarchical structure, Cascader can be used to view and select them. + +### Basic usage + +There are two ways to expand child option items. + +:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `expand-trigger` attribute defines how child options are expanded. This example also demonstrates the `change` event, whose parameter is the value of Cascader, an array made up of the values of each selected level. +```html +
+ Child options expand when clicked (default) + + +
+
+ Child options expand when hovered + + +
+ + +``` +::: + +### Disabled option + +Disable an option by setting a `disabled` field in the option object. + +:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way. +```html + + +``` +::: + +### Display only the last level + +The input can display only the last level instead of all levels. + +:::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed. +```html + + +``` +::: + +### With default value + +:::demo The default value can be defined with an array. +```html + + +``` +::: + +### Change on select + +Parent options can also be selected. + +:::demo By default only the options in the last level can be selected. By assigning `change-on-select` to `true`, options in parent levels can also be selected. +```html + + +``` +::: + +### Dynamically load child options + +Load child options when their parent option is clicked or hovered over. + +:::demo In this example, the options array does not have data of cities when initialized. With the `active-item-change` event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how `props` is used. +```html + + + +``` +::: + +### Filterable + +Search and select options with a keyword. + +:::demo Adding `filterable` to `el-cascader` enables filtering +```html +
+ Only options of the last level can be selected + +
+
+ Options of all levels can be selected + +
+ + +``` +::: + +### Attributes +| Attribute | Description | Type | Options | Default| +|---------- |-------------------- |---------|------------- |-------- | +| options | data of the options | array | — | — | +| props | configuration options, see the following table | object | — | — | +| value | selected value | array | — | — | +| popper-class | custom class name for Cascader's dropdown | string | — | — | +| placeholder | input placeholder | string | — | Select | +| disabled | whether Cascader is disabled | boolean | — | false | +| clearable | whether selected value can be cleared | boolean | — | false | +| expand-trigger | trigger mode of expanding current item | string | click / hover | click | +| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true | +| filterable | whether the options can be searched | boolean | — | — | +| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 | +| change-on-select | whether selecting an option of any level is permitted | boolean | — | false | +| size | size of Input | string | medium / small / mini | — | +| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — | + +### props +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------- | ------ | ------ | ------ | +| label | specify which key of option object is used as the option's label | string | — | — | +| value | specify which key of option object is used as the option's value | string | — | — | +| children | specify which key of option object is used as the option's child options | string | — | — | +| disabled | specify which key of option object indicates if the option is disabled | string | — | — | + +### Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| change | triggers when the binding value changes | value | +| active-item-change | triggers when active option changes, only works when `change-on-select` is `false` | an array of active options | diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md new file mode 100644 index 00000000000..8405e705065 --- /dev/null +++ b/examples/docs/es/checkbox.md @@ -0,0 +1,327 @@ + + +## Checkbox + +A group of options for multiple choices. + +### Basic usage + +Checkbox can be used alone to switch between two states. + +:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox. + +```html + + +``` +::: + +### Disabled State + +Disabled state for checkbox. + +::: demo Set the `disabled` attribute. + +```html + + +``` +::: + +### Checkbox group + +It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked. + +:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` is the value of the checkbox. If no content is nested in that tag, `label` will be rendered as the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa. + +```html + + + +``` +::: + +### Indeterminate + +The `indeterminate` property can help you to achieve a 'check all' effect. + +:::demo + +```html + + +``` +::: + +### Minimum / Maximum items checked + +The `min` and `max` properties can help you to limit the number of checked items. + +:::demo + +```html + + +``` +::: + +### Button style + +Checkbox with button styles. + +:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute. +```html + + +``` +::: + +### With borders + +:::demo The `border` attribute adds a border to Checkboxes. +```html + + + +``` +::: + +### Checkbox Attributes +| Attribute | Description | Type | Options | Default| +|---------- |-------- |---------- |------------- |-------- | +| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean | — | — | +| true-label | value of the Checkbox if it's checked | string / number | — | — | +| false-label | value of the Checkbox if it's not checked | string / number | — | — | +| disabled | whether the Checkbox is disabled | boolean | — | false | +| border | whether to add a border around Checkbox | boolean | — | false | +| size | size of the Checkbox, only works when `border` is true | string | medium / small / mini | — | +| name | native 'name' attribute | string | — | — | +| checked | if the Checkbox is checked | boolean | — | false | +| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false | + +### Checkbox Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| change | triggers when the binding value changes | the updated value | + +### Checkbox-group Attributes +| Attribute | Description | Type | Options | Default| +|---------- |-------- |---------- |------------- |-------- | +|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — | +| disabled | whether the nesting checkboxes are disabled | boolean | — | false | +| min | minimum number of checkbox checked | number | — | — | +| max | maximum number of checkbox checked | number | — | — | +|text-color | font color when button is active | string | — | #ffffff | +|fill | border and background color when button is active | string | — | #409EFF | + +### Checkbox-group Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| change | triggers when the binding value changes | the updated value | + +### Checkbox-button Attributes +| Attribute | Description | Type | Options | Default| +|---------- |-------- |---------- |------------- |-------- | +| label | value of the checkbox when used inside a `checkbox-group` | string / number / boolean | — | — | +| true-label | value of the checkbox if it's checked | string / number | — | — | +| false-label | value of the checkbox if it's not checked | string / number | — | — | +| disabled | whether the checkbox is disabled | boolean | — | false | +| name | native 'name' attribute | string | — | — | +| checked | if the checkbox is checked | boolean | — | false | diff --git a/examples/docs/es/collapse.md b/examples/docs/es/collapse.md new file mode 100644 index 00000000000..c09bd4912d3 --- /dev/null +++ b/examples/docs/es/collapse.md @@ -0,0 +1,151 @@ + + + + +## Collapse + +Use Collapse to store contents. + +### Basic usage + +You can expand multiple panels + +:::demo +```html + + +
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;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + +
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
+
Visual feedback: reflect current state by updating or rearranging elements of the page.
+ + +
Simplify the process: keep operating process simple and intuitive;
+
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
+ + +
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
+ + + +``` +::: + +### Accordion + +In accordion mode, only one panel can be expanded at once + +:::demo Activate accordion mode using the `accordion` attribute. +```html + + +
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;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + +
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
+
Visual feedback: reflect current state by updating or rearranging elements of the page.
+ + +
Simplify the process: keep operating process simple and intuitive;
+
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
+ + +
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
+ + + +``` +::: + +### 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 + + + +
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;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + +
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
+
Visual feedback: reflect current state by updating or rearranging elements of the page.
+ + +
Simplify the process: keep operating process simple and intuitive;
+
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
+ + +
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
+ + +``` +::: + +### 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 diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md new file mode 100644 index 00000000000..1709b51d364 --- /dev/null +++ b/examples/docs/es/color-picker.md @@ -0,0 +1,125 @@ + + + + +## 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 +
+ With default value + +
+
+ With no default value + +
+ + +``` +::: + +### Alpha + +:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute. +```html + + + +``` +::: + +### Sizes + +:::demo +```html + + + + + + +``` +::: + +### 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 diff --git a/examples/docs/es/color.md b/examples/docs/es/color.md new file mode 100644 index 00000000000..c8bcfa89f4a --- /dev/null +++ b/examples/docs/es/color.md @@ -0,0 +1,128 @@ + + +## 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. + + + +
Blue
#409EFF
+ + + +### Secondary Color + +Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation) + + + +
Success
#67C23A
+ + +
Warning
#EB9E05
+ + +
Danger
#FA5555
+ + +
Info
#878D99
+ + + +### Neutral Color + +Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure. + + + +
+
Primary Text
#2D2F33
+
Regular Text
#5A5E66
+
Secondary Text
#878D99
+
Placeholder Text
#B4BCCC
+
+ + +
+
Base Border
#D8DCE5
+
Light Border
#DFE4ED
+
Lighter Border
#E6EBF5
+
Extra Light Border
#EDF2FC
+
+ + \ No newline at end of file diff --git a/examples/docs/es/container.md b/examples/docs/es/container.md new file mode 100644 index 00000000000..8b15143490c --- /dev/null +++ b/examples/docs/es/container.md @@ -0,0 +1,299 @@ + + + + +## Container +Container components for scaffolding basic structure of the page: + +``: wrapper container. When nested with a `` or ``, all its child elements will be vertically arranged. Otherwise horizontally. + +``: container for headers. + +``: container for side sections (usually a side nav). + +``: container for main sections. + +``: container for footers. + +:::tip +These components use flex for layout, so please make sure your browser supports it. Besides, ``'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 ``. +::: + +### Common layouts + +::: demo +```html + + Header + Main + + + + Header + Main + Footer + + + + Aside + Main + + + + Header + + Aside + Main + + + + + Header + + Aside + + Main + Footer + + + + + + Aside + + Header + Main + + + + + Aside + + Header + Main + Footer + + + + +``` +::: + +### Example + +::: demo +```html + + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + + + + + View + Add + Delete + + + Tom + + + + + + + + + + + + + + + + + + +``` +::: + +### 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 diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md new file mode 100644 index 00000000000..5fb6bdd595a --- /dev/null +++ b/examples/docs/es/custom-theme.md @@ -0,0 +1,122 @@ +## 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: + +#### Install +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 +``` + +#### Initialize variable file +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; + +... +``` + +#### Modify variables +Just edit `element-variables.scss`, e.g. changing the theme color to red: +```CSS +$--color-primary: red; +``` + +#### Build theme +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 +``` + +#### Import custom theme +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) +``` + +#### Import component theme on demand +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 Quick Start. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`. \ No newline at end of file diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md new file mode 100644 index 00000000000..34d41908f6d --- /dev/null +++ b/examples/docs/es/date-picker.md @@ -0,0 +1,420 @@ + + + + +## DatePicker + +Use Date Picker for date input. + +### Enter Date + +Basic date picker measured by 'day'. + +:::demo The measurement is determined by the `type` attribute. You can enable quick options by creating a `picker-options` object with `shortcuts` property. The disabled date is set by `disabledDate`, which is a function. + +```html + + + +``` + +::: + +### Other measurements + +You can choose week, month or year by extending the standard date picker component. + +:::demo + +```html +
+ Week + + +
+
+ Month + + +
+
+ Year + + +
+ + +``` + +::: + +### Date Range + +Picking a date range is supported. + +:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute. + +```html + + + +``` + +::: + +### Default Value + +If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`. + +If type is `daterange`, `default-value` sets the left side calendar. + +:::demo +```html + + + +``` +::: + +### Formatted Value + +By default, DatePicker emits `Date` object. You can use `value-format` to designate the format of emitted value, it accepts the same format string of `format` attribute. + +:::warning +This feature is at alpha stage. Feedback welcome. +::: + +:::demo +```html + + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| readonly | whether DatePicker is read only | boolean | — | false | +| disabled | whether DatePicker is disabled | boolean | — | false | +| size | size of Input | string | large/small/mini | — | +| editable | whether the input is editable | boolean | — | true | +| clearable | Whether to show clear button | boolean | — | true | +| 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 | — | — | +| 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 DatePicker'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 | unlink 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 | +| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - | + +### 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 | — | diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md new file mode 100644 index 00000000000..56c2c2c5638 --- /dev/null +++ b/examples/docs/es/datetime-picker.md @@ -0,0 +1,283 @@ + + + + +## 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 + + + +``` +::: + +### Date and time range + +:::demo You can select date and time range by setting `type` to `datetimerange`. + +```html + + + +``` +::: + +### 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 | — | diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md new file mode 100644 index 00000000000..3e5a0c296b9 --- /dev/null +++ b/examples/docs/es/dialog.md @@ -0,0 +1,314 @@ + + + + +## Dialog + +Informs users while preserving the current page state. + +### Basic usage + +Dialog pops up a dialog box, and it's quite customizable. + +:::demo Set the `visible` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. Finally, this example demonstrates how `before-close` is used. + +```html +click to open the Dialog + + + This is a message + + Cancel + Confirm + + + + +``` +::: + +:::tip +`before-close` only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the `footer` named slot, you can add what you would do with `before-close` in the buttons' click event handler. +::: + +### Customizations + +The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。 + +:::demo + +```html + +open a Table nested Dialog + + + + + + + + + + +open a Form nested Dialog + + + + + + + + + + + + + + + Cancel + Confirm + + + + +``` +::: + +### Nested Dialog +If a Dialog is nested in another Dialog, `append-to-body` is required. +:::demo Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set `append-to-body` of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered. +```html + + + +``` +::: + +::: + +### Centered content +Dialog's content can be centered. + +:::demo Setting `center` to `true` will center dialog's header and footer horizontally. + +```html +Click to open the Dialog + + + It should be noted that the content will not be aligned in center by default + + Cancel + Confirm + + + + +``` +::: + +:::tip +`center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well. +::: + +:::tip +If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers. +::: + +### Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| visible | visibility of Dialog, supports the .sync modifier | boolean | — | false | +| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — | +| width | width of Dialog | string | — | 50% | +| fullscreen | whether the Dialog takes up full screen | boolean | — | false | +| top | value for `margin-top` of Dialog CSS | string | — | 15vh | +| modal | whether a mask is displayed | boolean | — | true | +| modal-append-to-body | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean | — | true | +| append-to-body | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean | — | false | +| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | — | true | +| custom-class | custom class names for Dialog | string | — | — | +| close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true | +| close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true | +| show-close | whether to show a close button | boolean | — | true | +| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — | +| center | whether to align the header and footer in center | boolean | — | false | + +### Slot + +| Name | Description | +|------|--------| +| — | content of Dialog | +| title | content of the Dialog title | +| footer | content of the Dialog footer | + +### Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| open | triggers when the Dialog opens | — | +| close | triggers when the Dialog closes | — | diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md new file mode 100644 index 00000000000..3c18e7f1a03 --- /dev/null +++ b/examples/docs/es/dropdown.md @@ -0,0 +1,346 @@ + + + +## Dropdown +Toggleable menu for displaying lists of links and actions. + +### Basic usage +Hover on the dropdown menu to unfold it for more actions. + +:::demo The triggering element is rendered by the default `slot`, and the dropdown part is rendered by the `slot` named `dropdown`. By default, dropdown list shows when you hover on the triggering element without having to click it. + +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + +``` + +::: + +### Triggering element + +Use the button to trigger the dropdown list. + +:::demo Use `split-button` to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class `divider` to item four. +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + Dropdown List + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### How to trigger + +Click the triggering element or hover on it. + +:::demo Use the attribute `trigger`. By default, it is `hover`. + +```html + + + hover to trigger + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + click to trigger + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Menu hiding behavior + +Use `hide-on-click` to define if menu closes on clicking. + +:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false. +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + +``` +::: + +### Command event + +Clicking each dropdown item fires an event whose parameter is assigned by each item. + +:::demo +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Sizes + +Besides default size, Dropdown 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 + + Default + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Medium + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Small + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Mini + + Action 1 + Action 2 + Action 3 + Action 4 + + +``` +::: + + +### Dropdown Attributes +| Attribute | Description | Type | Accepted Values | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — | +| size | menu size, also works on the split button | string | medium / small / mini | — | +| split-button | whether a button group is displayed | boolean | — | false | +| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | +| trigger | how to trigger | string | hover/click | hover | +| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true | +| show-timeout | Delay time before show a dropdown | number | — | 250 | +| hide-timeout | Delay time before hide a dropdown | number | — | 150 | + +### Dropdown Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| click | if `split-button` is `true`, triggers when left button is clicked | — | +| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item | +| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise | + +### Dropdown Menu Item Attributes +| Attribute | Description | Type | Accepted Values | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — | +| disabled | whether the item is disabled | boolean | — | false | +| divided | whether a divider is displayed | boolean | — | false | diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md new file mode 100644 index 00000000000..74291cce95a --- /dev/null +++ b/examples/docs/es/form.md @@ -0,0 +1,877 @@ + + + + +## Form + +Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data. + +### Basic form + +It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`. + +:::demo In each `form` component, you need a `form-item` field to be the container of your input item. + +```html + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + Create + Cancel + + + +``` +::: + +:::tip +[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that +> When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. + +To prevent this behavior, you can add `@submit.native.prevent` on ``. + ::: + +### Inline form + +When the vertical space is limited and the form is relatively simple, you can put it in one line. + +:::demo Set the `inline` attribute to `true` and the form will be inline. + +```html + + + + + + + + + + + + Query + + + +``` +::: + +### Alignment + +Depending on your design, there are several different ways to align your label element. + +:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field. + +```html + + Left + Right + Top + +
+ + + + + + + + + + + + +``` +::: + +### Validation + +Form component allows you to verify your data, helping you find and correct errors. + +:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator). + +```html + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create + Reset + + + +``` +::: + +### Custom validation rules + +This example shows how to customize your own validation rules to finish a two-factor password verification. + +:::demo Here we use `status-icon` to reflect validation result as an icon. +```html + + + + + + + + + + + + Submit + Reset + + + +``` +::: + +### Delete or add form items dynamically + +:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically. + +```html + + + + + + Delete + + + Submit + New domain + Reset + + + +``` +::: + +### Number Validate + +::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs. +```html + + + + + + Submit + Reset + + + +``` +::: + +:::tip +When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed. +::: + +### Size control + +All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute. + +::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten. +```html + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + Create + Cancel + + + + +``` +::: + +### Form Attributes + +| Attribute | Description | Type | Accepted Values | Default | +| ---- | ----| ---- | ---- | ---- | +| model| data of form component | object | — | — | +| rules | validation rules of form | object | — | — | +| inline | whether the form is inline | boolean | — | false | +| label-position | position of label | string | left / right / top | right | +| label-width | width of label, and all its direct child form items will inherit this value | string | — | — | +| label-suffix | suffix of the label | string | — | — | +| show-message | whether to show the error message | boolean | — | true | +| inline-message | whether to display the error message inline with the form item | boolean | — | false | +| status-icon | whether to display an icon indicating the validation result | boolean | — | false | +| size | control the size of components in this form | string | medium / small / mini | - | + +### Form Methods + +| Method | Description | Parameters | +| ---- | ---- | ---- | +| validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) | +| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) | +| resetFields | reset all the fields and remove validation result | — | +| clearValidate | clear validation message for all fields | - + +### Form-Item Attributes + +| Attribute | Description | Type | Accepted Values | Default | +| ---- | ----| ---- | ---- | ---- | +| prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` | +| label | label | string | — | — | +| label-width | width of label, e.g. '50px' | string | — | — | +| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false | +| rules | validation rules of form | object | — | — | +| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — | +| show-message | whether to show the error message | boolean | — | true | +| inline-message | inline style validate message | boolean | — | false | +| size | control the size of components in this form-item | string | medium / small / mini | - | + +### Form-Item Slot +| Name | Description | +|------|--------| +| — | content of Form Item | +| label | content of label | + +### Form-Item Methods + +| Method | Description | Parameters | +| ---- | ---- | ---- | +| resetField | reset current field and remove validation result | — | diff --git a/examples/docs/es/i18n.md b/examples/docs/es/i18n.md new file mode 100644 index 00000000000..6b98f0b4bf4 --- /dev/null +++ b/examples/docs/es/i18n.md @@ -0,0 +1,212 @@ +## 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 `NormalModuleReplacementPlugin` provided by webpack you can replace default locale: + +webpack.config.js +```javascript +{ + plugins: [ + new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en') + ] +} +``` + +## Compatible with `vue-i18n@5.x` + +Element is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier. + +```javascript +import Vue from 'vue' +import VueI18n from 'vue-i18n' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(VueI18n) +Vue.use(Element) + +Vue.config.lang = 'zh-cn' +Vue.locale('zh-cn', zhLocale) +Vue.locale('en', enLocale) +``` + +## Compatible with other i18n plugins +Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n. + +```javascript +import Vue from 'vue' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(Element, { + i18n: function (path, options) { + // ... + } +}) +``` + +## Compatible with `vue-i18n@6.x` + +You need to manually handle it for compatibility with `6.x`. + +```javascript +import Vue from 'vue' +import Element from 'element-ui' +import VueI18n from 'vue-i18n' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(VueI18n) + +const messages = { + en: { + message: 'hello', + ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)` + }, + zh: { + message: '你好', + ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)` + } +} +// Create VueI18n instance with options +const i18n = new VueI18n({ + locale: 'en', // set locale + messages, // set locale messages +}) + +Vue.use(Element, { + i18n: (key, value) => i18n.t(key, value) +}) + +new Vue({ i18n }).$mount('#app') +``` + +## Custom i18n in on-demand components + +```js +import Vue from 'vue' +import DatePicker from 'element/lib/date-picker' +import VueI18n from 'vue-i18n' + +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' +import ElementLocale from 'element-ui/lib/locale' + +Vue.use(VueI18n) +Vue.use(DatePicker) + +const messages = { + en: { + message: 'hello', + ...enLocale + }, + zh: { + message: '你好', + ...zhLocale + } +} +// Create VueI18n instance with options +const i18n = new VueI18n({ + locale: 'en', // set locale + messages, // set locale messages +}) + +ElementLocale.i18n((key, value) => i18n.t(key, value)) +``` + +## Import via CDN + +```html + + + + + +``` + +Compatible with `vue-i18n` + +```html + + + + + + + +``` + +Currently Element ships with the following languages: +
    +
  • Simplified Chinese (zh-CN)
    • +
  • English (en)
    • +
  • German (de)
    • +
  • Portuguese (pt)
    • +
  • Spanish (es)
    • +
  • Danish (da)
    • +
  • French (fr)
    • +
  • Norwegian (nb-NO)
    • +
  • Traditional Chinese (zh-TW)
    • +
  • Italian (it)
    • +
  • Korean (ko)
    • +
  • Japanese (ja)
    • +
  • Dutch (nl)
    • +
  • Vietnamese (vi)
    • +
  • Russian (ru-RU)
    • +
  • Turkish (tr-TR)
    • +
  • Brazilian Portuguese (pt-br)
    • +
  • Farsi (fa)
    • +
  • Thai (th)
    • +
  • Indonesian (id)
    • +
  • Bulgarian (bg)
    • +
  • Polish (pl)
    • +
  • Finnish (fi)
    • +
  • Swedish (sv-SE)
    • +
  • Greek (el)
    • +
  • Slovak (sk)
    • +
  • Catalunya (ca)
    • +
  • Czech (cz)
    • +
  • Ukrainian (ua)
    • +
  • Turkmen (tk)
    • +
  • Tamil (ta)
    • +
  • Latvian (lv)
    • +
  • Afrikaans (af-ZA)
    • +
  • Estonian (ee)
    • +
  • Slovenian (sl)
    • +
  • Arabic (ar)
    • +
  • Hebrew (he)
    • +
+ +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. diff --git a/examples/docs/es/icon.md b/examples/docs/es/icon.md new file mode 100644 index 00000000000..f262f0d5e67 --- /dev/null +++ b/examples/docs/es/icon.md @@ -0,0 +1,96 @@ + + + + +## Icon + +Element provides a set of common icons. + +### Basic usage + +Just assign the class name to `el-icon-iconName`. + +:::demo + +```html + + + +Search + +``` +::: + +### Icons + +
    +
  • + + + {{'el-icon-' + name}} + +
    • +
diff --git a/examples/docs/es/input-number.md b/examples/docs/es/input-number.md new file mode 100644 index 00000000000..e0108a97e9a --- /dev/null +++ b/examples/docs/es/input-number.md @@ -0,0 +1,180 @@ + + + + +## InputNumber + +Input numerical values with a customizable range. + +### Basic usage + +:::demo Bind a variable to `v-model` in `` element and you are set. + +```html + + +``` +::: + +### Disabled + +:::demo The `disabled` attribute accepts a `boolean`, and if the value is `true`, the component is disabled. If you just need to control the value within a range, you can add `min` attribute to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`. + +```html + + +``` +::: + +### Steps + +Allows you to define incremental steps. + +:::demo Add `step` attribute to set the step. + +```html + + +``` +::: + +### Size + +Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. + +:::demo + +```html + + +``` +::: + +### Controls Position + +:::demo Set `controls-position` to decide the position of control buttons. +```html + + +``` +::: + +### Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|----| ----| ---| ----| -----| +|value | binding value| number | — | — | +|min | the minimum allowed value | number | — | 0 | +|max | the maximum allowed value | number | — | `Infinity` | +|step | incremental step | number | — | 1 | +|size | size of the component | string | large/small| — | +|disabled| whether the component is disabled | boolean | — | false | +|controls| whether to enable the control buttons | boolean | — | true | +|debounce| debounce delay when typing, in milliseconds | number | — | 300 | +|controls-position | position of the control buttons | string | right | - | +|name | same as `name` in native input | string | — | — | +|label | label text | string | — | — | +### Events + +| Event Name | Description | Parameters | +|----| ---- | -----| +|change | triggers when the value changes | value after change | +| blur | triggers when Input blurs | (event: Event) | +| focus | triggers when Input focuses | (event: Event) | + +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | - | diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md new file mode 100644 index 00000000000..1d387c6cd0c --- /dev/null +++ b/examples/docs/es/input.md @@ -0,0 +1,696 @@ + + + + +## Input + +Input data using mouse or keyboard. + +### Basic usage + +::: demo + +```html + + + +``` +::: + +### Disabled + +::: demo Disable the Input with the `disabled` attribute. + +```html + + + + +``` +::: + +### Input with icon + +Add an icon to indicate input type. + +::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well. +```html +
+ Using attributes + + + + +
+
+ Using slots + + + + + + +
+ + + + +``` +::: + +### Textarea + +Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`. + +::: demo Control the height by setting the `rows` prop. + +```html + + + + +``` +::: + +### Autosize Textarea + +Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust. + +::: demo + +```html + + +
+ + + + +``` +::: + +### Mixed input + +Prepend or append an element, generally a label or a button. + +::: demo Use `slot` to distribute elements that prepend or append to Input. + +```html +
+ + + +
+
+ + + +
+
+ + + + + + + + +
+ + + +``` +::: + +### Sizes + +::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`. +```html +
+ + + + + + + + +
+ + +``` +::: + +### Autocomplete + +You can get some recommended tips based on the current input. + +::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready. +```html + + +
list suggestions when activated
+ + + +
list suggestions on input
+ + + + +``` +::: + +### Custom template + +Customize how suggestions are displayed. + +:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key. +```html + + + + + + + + + +``` +::: + +### Remote search + +Search data from server-side. + +::: demo +```html + + +``` +::: + +### Input Attributes + +| Attribute | Description | Type | Accepted Values | Default | +| ----| ----| ----| ---- | ----- | +|type| type of input | string | text / textarea | text | +|value| binding value | string / number| — | — | +|maxlength| maximum Input text length| number| — | — | +|minlength| minimum Input text length| number | — | — | +|placeholder| placeholder of Input| string | — | — | +|disabled | whether Input is disabled | boolean | — | false | +|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — | +| prefix-icon | prefix icon class | string | — | — | +| suffix-icon | suffix icon class | string | — | — | +|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 | +|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false | +|auto-complete | same as `auto-complete` in native input | string | on/off | off | +|name | same as `name` in native input | string | — | — | +| readonly | same as `readonly` in native input | boolean | — | false | +|max | same as `max` in native input | — | — | — | +|min | same as `min` in native input | — | — | — | +|step| same as `step` in native input | — | — | — | +|resize| control the resizability | string | none, both, horizontal, vertical | — | +|autofocus | same as `autofocus` in native input | boolean | — | false | +|form | same as `form` in native input | string | — | — | +| label | label text | string | — | — | + +### Input slots + +| Name | Description | +|------|--------| +| prefix | content as Input prefix | +| suffix | content as Input suffix | +| prepend | content to prepend before Input | +| append | content to append after Input | + +### Input Events + +| Event Name | Description | Parameters | +|----| ----| ----| +| blur | triggers when Input blurs | (event: Event) | +| focus | triggers when Input focuses | (event: Event) | +| change | triggers when the icon inside Input value change | (value: string \| number) | + +### Autocomplete Attributes + +Attribute | Description | Type | Options | Default +|----| ----| ----| ---- | -----| +|placeholder| the placeholder of Autocomplete| string | — | — | +|disabled | whether Autocomplete is disabled | boolean | — | false| +| valueKey | key name of the input suggestion object for display | string | — | value | +|icon | icon name | string | — | — | +|value | binding value | string | — | — | +| debounce | debounce delay when typing, in milliseconds | number | — | 300 | +|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | +| popper-class | custom class name for autocomplete's dropdown | string | — | — | +| trigger-on-focus | whether show suggestions when input focus | boolean | — | true | +| on-icon-click | hook function when clicking on the input icon | function | — | — | +| name | same as `name` in native input | string | — | — | +| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false | +| label | label text | string | — | — | + +### Autocomplete slots + +| Name | Description | +|------|--------| +| prefix | content as Input prefix | +| suffix | content as Input suffix | +| prepend | content to prepend before Input | +| append | content to append after Input | + +### Autocomplete Events + +| Event Name | Description | Parameters | +|----| ----| ----| +|select | triggers when a suggestion is clicked | suggestion being clicked | + +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | — | diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md new file mode 100644 index 00000000000..a381d39729d --- /dev/null +++ b/examples/docs/es/installation.md @@ -0,0 +1,57 @@ +## Installation + +### npm +Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/). + +```shell +npm i element-ui -S +``` + +### CDN +Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page. + +```html + + + + +``` + +:::tip +We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information. +::: + +### Hello world +If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/) + +```html + + + + + + + + +
+ Button + +

Try Element

+ +
+ + + + + + + +``` +If you are using npm and wish to apply webpack, please continue to the next page: Quick Start. diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md new file mode 100644 index 00000000000..e234c6061ab --- /dev/null +++ b/examples/docs/es/layout.md @@ -0,0 +1,388 @@ + + +## Layout + +Quickly and easily create layouts with the basic 24-column. + +### Basic layout + +Create basic grid layout using columns. + +::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute. +```html + +
+ + +
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + + +``` +::: + +### Column spacing + +Column spacing is supported. + +::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0. +```html + +
+
+
+
+ + + +``` +::: + +### Hybrid layout + +Form a more complex hybrid layout by combining the basic 1/24 columns. + +::: demo +```html + +
+
+ + +
+
+
+
+ + +
+
+
+ + + +``` +::: + +### Column offset + +You can specify column offsets. + +::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col. + +```html + +
+
+ + +
+
+ + +
+ + + +``` +::: + +### Alignment + +Use the flex layout to make flexible alignment of columns. + +::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around. +```html + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + + +``` +::: + +### Responsive Layout + +Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl. + +::: demo +```html + +
+
+
+
+ + + +``` +::: + +### Utility classes for hiding elements + +Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes: + +```js +import 'element-ui/lib/theme-chalk/display.css'; +``` + +The classes are: +- `hidden-xs-only` - hide when on extra small viewports only +- `hidden-sm-only` - hide when on small viewports and down +- `hidden-sm-and-down` - hide when on small viewports and down +- `hidden-sm-and-up` - hide when on small viewports and up +- `hidden-md-only` - hide when on medium viewports only +- `hidden-md-and-down` - hide when on medium viewports and down +- `hidden-md-and-up` - hide when on medium viewports and up +- `hidden-lg-only` - hide when on large viewports only +- `hidden-lg-and-down` - hide when on large viewports and down +- `hidden-lg-and-up` - hide when on large viewports and up +- `hidden-xl-only` - hide when on extra large viewports only + +### Row Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| gutter | grid spacing | number | — | 0 | +| type | layout mode, you can use flex, works in modern browsers | string | — | — | +| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start | +| align | vertical alignment of flex layout | string | top/middle/bottom | top | +| tag | custom element tag | string | * | div | + +### Col Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| span | number of column the grid spans | number | — | 24 | +| offset | number of spacing on the left side of the grid | number | — | 0 | +| push | number of columns that grid moves to the right | number | — | 0 | +| pull | number of columns that grid moves to the left | number | — | 0 | +| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | +| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | +| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | +| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | +| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | +| tag | custom element tag | string | * | div | + + diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md new file mode 100644 index 00000000000..7fc3d8539b3 --- /dev/null +++ b/examples/docs/es/loading.md @@ -0,0 +1,258 @@ + + + + +## Loading + +Show animation while loading data. + +### Loading inside a container + +Displays animation in a container (such as a table) while loading data. + +:::demo Element provides two ways to invoke Loading: directive and service. For the custom directive `v-loading`, you just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element. + +```html + + + + + +``` +::: + +### Customization + +You can customize loading text, loading spinner and background color. + +:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color. +```html + + + +``` +::: + +### Full screen loading + +Show a full screen animation while loading data. + +:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default. + +```html + + + +``` +::: + +### Service +You can also invoke Loading with a service. Import Loading service: +```javascript +import { Loading } from 'element-ui'; +``` +Invoke it: +```javascript +Loading.service(options); +``` +The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method: +```javascript +let loadingInstance = Loading.service(options); +loadingInstance.close(); +``` +Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance: +```javascript +let loadingInstance1 = Loading.service({ fullscreen: true }); +let loadingInstance2 = Loading.service({ fullscreen: true }); +console.log(loadingInstance1 === loadingInstance2); // true +``` +Calling the `close` method on any one of them can close this full screen Loading. + +If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance. + +### Options +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | object/string | — | document.body | +| body | same as the `body` modifier of `v-loading` | boolean | — | false | +| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true | +| lock | same as the `lock` modifier of `v-loading` | boolean | — | false | +| text | loading text that displays under the spinner | string | — | — | +| spinner | class name of the custom spinner | string | — | — | +| background | background color of the mask | string | — | — | +| customClass | custom class name for Loading | string | — | — | \ No newline at end of file diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md new file mode 100644 index 00000000000..7768a2e5600 --- /dev/null +++ b/examples/docs/es/menu.md @@ -0,0 +1,318 @@ + + + + +## NavMenu + +Menu that provides navigation for your website. + +### Top bar + +Top bar NavMenu can be used in a variety of scenarios. + +::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors. +```html + + Processing Center + + + item one + item two + item three + + Orders + +
+ + Processing Center + + + item one + item two + item three + + Orders + + + +``` +::: + +### Side bar + +Vertical NavMenu with sub-menus. + +::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot. +```html + + +
Default colors
+ + + + + item one + item one + + + item three + + + + item one + + + + + Navigator Two + + + + Navigator Three + + + + +
Custom colors
+ + + + + item one + item one + + + item three + + + + item one + + + + + Navigator Two + + + + Navigator Three + + + + + + +``` +::: + +### Collapse + +Vertical NavMenu could be collapsed. + +::: demo +```html + + expand + collapse + + + + + + Group One + item one + item two + + + item three + + + item four + item one + + + + + Navigator Two + + + + Navigator Three + + + + + + +``` +::: + +### Menu Attribute +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| mode | menu display mode | string | horizontal / vertical | vertical | +| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false | +| background-color | background color of Menu (hex format) | string | — | #ffffff | +| text-color | text color of Menu (hex format) | string | — | #2d2f33 | +| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF | +| default-active | index of currently active menu | string | — | — | +| default-openeds | array that contains keys of currently active sub-menus | Array | — | — | +| unique-opened | whether only one sub-menu can be active | boolean | — | false | +| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover | +| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean | — | false | + +### Menu Methods +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| open | open a specific sub-menu | index: index of the sub-menu to open | +| close | close a specific sub-menu | index: index of the sub-menu to close | + +### Menu Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu | +| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu | +| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu | + +### Menu-Item Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| click | callback function when menu-item is clicked | el: menu-item instance | + +### SubMenu Attribute +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| index | unique identification | string | — | — | + +### Menu-Item Attribute +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| index | unique identification | string | — | — | +| route | Vue Router object | object | — | — | + +### Menu-Group Attribute +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| title | group title | string | — | — | diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md new file mode 100644 index 00000000000..6b3aeca0dfb --- /dev/null +++ b/examples/docs/es/message-box.md @@ -0,0 +1,402 @@ + + +## MessageBox + +A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages. +:::tip +By design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`，so it's content should be simple. For more complicated contents, please use Dialog. +::: + +### Alert + +Alert interrupts user operation until the user confirms. + +:::demo Open an alert by calling the `$alert` method. It simulates the system's `alert`, and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters `message` and `title` are received. It is worth mentioning that when the box is closed, it returns a `Promise` object for further processing. If you are not sure if your target browsers support `Promise`, you should import a third party polyfill or use callbacks instead like this example. + +```html + + + +``` +::: + +### Confirm + +Confirm is used to ask users' confirmation. + +:::demo Call `$confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing. + +```html + + + +``` + +::: + +### Prompt + +Prompt is used when user input is required. + +:::demo Call `$prompt` method to open a prompt, and it simulates the system's `prompt`. You can use `inputPattern` parameter to specify your own RegExp pattern. Use `inputValidator` to specify validation method, and it should return `Boolean` or `String`. Returning `false` or `String` means the validation has failed, and the string returned will be used as the `inputErrorMessage`. In addition, you can customize the placeholder of the input box with `inputPlaceholder` parameter. + +```html + + + +``` +::: + +### Customization + +Can be customized to show various content. + +:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: `action`, `instance` and `done`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `done` method to close the MessageBox instance (if `done` is not called inside `beforeClose`, the instance will not be closed). + +```html + + + +``` +::: + +### Use HTML String +`message` supports HTML string. + +:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string. + +```html + + + +``` +::: + +:::warning +Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content. +::: + +### Centered content +Content of MessageBox can be centered. + +:::demo Setting `center` to `true` will center the content + +```html + + + +``` +::: + +### Global method + +If Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are: +- `$msgbox(options)` +- `$alert(message, title, options)` or `$alert(message, options)` +- `$confirm(message, title, options)` or `$confirm(message, options)` +- `$prompt(message, title, options)` or `$prompt(message, options)` + +### Local import + +If you prefer importing `MessageBox` on demand: + +```javascript +import { MessageBox } from 'element-ui'; +``` + +The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above. + +### Options + +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| title | title of the MessageBox | string | — | — | +| message | content of the MessageBox | string | — | — | +| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | +| type | message type, used for icon display | string | success / info / warning / error | — | +| customClass | custom class name for MessageBox | string | — | — | +| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — | +| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — | +| lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true | +| showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) | +| showConfirmButton | whether to show a confirm button | boolean | — | true | +| cancelButtonText | text content of cancel button | string | — | Cancel | +| confirmButtonText | text content of confirm button | string | — | OK | +| cancelButtonClass | custom class name of cancel button | string | — | — | +| confirmButtonClass | custom class name of confirm button | string | — | — | +| closeOnClickModal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) | +| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) | +| closeOnHashChange | whether to close MessageBox when hash changes | boolean | — | true | +| showInput | whether to show an input | boolean | — | false (true when called with prompt) | +| inputPlaceholder | placeholder of input | string | — | — | +| inputType | type of input | string | — | text | +| inputValue | initial value of input | string | — | — | +| inputPattern | regexp for the input | regexp | — | — | +| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — | +| inputErrorMessage | error message when validation fails | string | — | Illegal input | +| center | whether to align the content in center | boolean | — | false | +| roundButton | whether to use round button | boolean | — | false | \ No newline at end of file diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md new file mode 100644 index 00000000000..5fb0acaa476 --- /dev/null +++ b/examples/docs/es/message.md @@ -0,0 +1,302 @@ + + +## Message + +Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. + +### Basic usage + +Displays at the top, and disappears after 3 seconds. + +:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body. + +```html + + + +``` +::: + +### Types + +Used to show the feedback of Success, Warning, Message and Error activities. + +:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`. +```html + + + +``` +::: + +### Closable + +A close button can be added. + +:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`. +```html + + + +``` +::: + +### Centered text +Use the `center` attribute to center the text. + +:::demo + +```html + + + +``` +::: + +### Use HTML string +`message` supports HTML string. + +:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string. + +```html + + + +``` +::: + +:::warning +Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content. +::: + +### Global method + +Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page. + +### Local import + +Import `Message`: + +```javascript +import { Message } from 'element-ui'; +``` + +In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`. +You can call `Message.closeAll()` to manually close all the instances. + +### Options +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| message | message text | string / VNode | — | — | +| type | message type | string | success/warning/info/error | info | +| iconClass | custom icon's class, overrides `type` | string | — | — | +| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | +| customClass | custom class name for Message | string | — | — | +| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 | +| showClose | whether to show a close button | boolean | — | false | +| center | whether to center the text | boolean | — | false | +| onClose | callback function when closed with the message instance as the parameter | function | — | — | + +### Methods +`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it. +| Method | Description | +| ---- | ---- | +| close | close the Message | diff --git a/examples/docs/es/notification.md b/examples/docs/es/notification.md new file mode 100644 index 00000000000..fc8d06d3e84 --- /dev/null +++ b/examples/docs/es/notification.md @@ -0,0 +1,422 @@ + + +## Notification + +Displays a global notification message at a corner of the page. + +### Basic usage + +::: demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds. + +```html + + + +``` +::: + +### With types + +We provide four types: success, warning, info and error. + +::: demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field. +```html + + + +``` +::: + +### Custom position + +Notification can emerge from any corner you like. + +::: demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`. +```html + + + +``` +::: + +### With offset + +Customize Notification's offset from the edge of the screen. + +::: demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset. +```html + + + +``` +::: + +### Use HTML string +`message` supports HTML string. + +::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string. +```html + + + +``` +::: + +:::warning +Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content. +::: + +### Hide close button + +It is possible to hide the close button + +::: demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user. +```html + + + +``` +::: + +### Global method + +Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page. + +### Local import + +Import `Notification`: + +```javascript +import { Notification } from 'element-ui'; +``` + +In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`. + +### Options +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| title | title | string | — | — | +| message | description text | string/Vue.VNode | — | — | +| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false | +| type | notification type | string | success/warning/info/error | — | +| iconClass | custom icon's class. It will be overridden by `type` | string | — | — | +| customClass | custom class name for Notification | string | — | — | +| duration | duration before close. It will not automatically close if set 0 | number | — | 4500 | +| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right | +| showClose | whether to show a close button | boolean | — | true | +| onClose | callback function when closed | function | — | — | +| onClick | callback function when notification clicked | function | — | — | +| offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 | + +### Methods +`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it. +| Method | Description | +| ---- | ---- | +| close | close the Notification | diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md new file mode 100644 index 00000000000..714b3273598 --- /dev/null +++ b/examples/docs/es/pagination.md @@ -0,0 +1,221 @@ + + +## Pagination + +If you have too much data to display in one page, use pagination. + +### Basic usage + +:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right). +```html +
+ When you have few pages + + +
+
+ When you have more than 7 pages + + +
+``` +::: + +### Small Pagination + +Use small pagination in the case of limited space. + +:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller. +```html + + +``` +::: + +### More elements + +Add more modules based on your scenario. + +:::demo This example is a complete use case. It uses `size-change` and `current-change` event to handle page size changes and current page changes. `page-sizes` accepts an array of integers, each of which represents a different page size in the `sizes` select options, e.g. `[100, 200, 300, 400]` indicates that the select will have four options: 100, 200, 300 or 400 items per page. + +```html + + +``` +::: + + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|--------------------|----------------------------------------------------------|-------------------|-------------|--------| +| small | whether to use small pagination | boolean | — | false | +| page-size | item count of each page | number | — | 10 | +| total | total item count | number | — | — | +| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — | +| current-page | current page number, supports the .sync modifier | number | — | 1 | +| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' | +| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] | +| popper-class | custom class name for the page size Select's dropdown | string | — | — | +| prev-text | text for the prev button | string | — | — | +| next-text | text for the next button | string | — | — | + +### Events +| Event Name | Description | Parameters | +|---------|--------|---------| +| size-change | triggers when `page-size` changes | the new `page-size` | +| current-change | triggers when `current-page` changes | the new `current-page` | + +### Slot +| Name | Description | +| --- | --- | +| — | custom content. To use this, you need to declare `slot` in `layout` | diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md new file mode 100644 index 00000000000..49f030fa3d0 --- /dev/null +++ b/examples/docs/es/popover.md @@ -0,0 +1,248 @@ + + + + +## Popover + +### Basic usage + +Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip. + +:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`. + +```html + + + + + + +Hover to activate +Click to activate + + Focus to activate + +``` +::: + +### Nested information + +Other components can be nested in popover. Following is an example of nested table. + +:::demo replace the `content` attribute with a default `slot`. + +```html + + + + + + + + +Click to activate + + +``` +::: + +### Nested operation + +Of course, you can nest other operations. It's more light-weight than using a dialog. + +:::demo +```html + +

Are you sure to delete this?

+
+ cancel + confirm +
+ + +Delete + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|--------------------|----------------------------------------------------------|-------------------|-------------|--------| +| trigger | how the popover is triggered | string | click/focus/hover/manual | click | +| title | popover title | string | — | — | +| content | popover content, can be replaced with a default `slot` | string | — | — | +| width | popover width | string, number | — | Min width 150px | +| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom | +| disabled | whether Popover is disabled | boolean | — | false | +| value(v-model) | whether popover is visible | Boolean | — | false | +| offset | popover offset | number | — | 0 | +| transition | popover transition animation | string | — | el-fade-in-linear | +| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true | +| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` | +| popper-class | custom class name for popover | string | — | — | +| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — | + +### Slot +| Name | Description | +| --- | --- | +| — | text content of popover | +| reference | HTML element that triggers popover | + +### Events +| Event Name | Description | 回调参数 | +|---------|--------|---------| +| show | triggers when popover shows | — | +| hide | triggers when popover hides | — | diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md new file mode 100644 index 00000000000..275009e6fe1 --- /dev/null +++ b/examples/docs/es/progress.md @@ -0,0 +1,61 @@ + +## Progress + +Progress is used to show the progress of current operation, and inform the user the current status. + +### Linear progress bar (external percentage) + +:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. +```html + + + + +``` +::: + +### Linear progress bar (internal percentage) + +In this case the percentage takes no additional space. + +:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar. +```html + + + + +``` +::: + +### Circular progress bar + +:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle. +```html + + + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +| --- | ---- | ---- | ---- | ---- | +| **percentage** | percentage, **required** | number | 0-100 | 0 | +| type | the type of progress bar | string | line/circle | line | +| stroke-width | the width of progress bar | number | — | 6 | +| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false | +| status | the current status of progress bar | string | success/exception | — | +| width | the canvas width of circle progress bar | number | — | 126 | +| show-text | whether to show percentage | boolean | — | true | + diff --git a/examples/docs/es/quickstart.md b/examples/docs/es/quickstart.md new file mode 100644 index 00000000000..892f6f856e1 --- /dev/null +++ b/examples/docs/es/quickstart.md @@ -0,0 +1,270 @@ +## Quick start + +This part walks you through the process of using Element in a webpack project. + +### Use Starter Kit + +We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly. + +If you prefer not to use them, please read the following. + +### Use vue-cli + +We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli): + +```shell +> npm i -g vue-cli +> mkdir my-project && cd my-project +> vue init webpack +> npm i && npm i element-ui +``` + +### Import Element + +You can import Element entirely, or just import what you need. Let's start with fully import. + +#### Fully import + +In main.js: +```javascript +import Vue from 'vue' +import ElementUI from 'element-ui' +import 'element-ui/lib/theme-chalk/index.css' +import App from './App.vue' + +Vue.use(ElementUI) + +new Vue({ + el: '#app', + render: h => h(App) +}) +``` +The above imports Element entirely. Note that CSS file needs to be imported separately. + +#### On demand + +With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise. + +First, install babel-plugin-component: + +```bash +npm install babel-plugin-component -D +``` + +Then edit .babelrc: +```json +{ + "presets": [ + ["es2015", { "modules": false }] + ], + "plugins": [["component", [ + { + "libraryName": "element-ui", + "styleLibraryName": "theme-chalk" + } + ]]] +} +``` + +Next, if you need Button and Select, edit main.js: + +```javascript +import Vue from 'vue' +import { Button, Select } from 'element-ui' +import App from './App.vue' + +Vue.component(Button.name, Button) +Vue.component(Select.name, Select) +/* or + * Vue.use(Button) + * Vue.use(Select) + */ + +new Vue({ + el: '#app', + render: h => h(App) +}) +``` + +Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json)) + +```javascript +import Vue from 'vue' +import { + Pagination, + Dialog, + Autocomplete, + Dropdown, + DropdownMenu, + DropdownItem, + Menu, + Submenu, + MenuItem, + MenuItemGroup, + Input, + InputNumber, + Radio, + RadioGroup, + RadioButton, + Checkbox, + CheckboxButton, + CheckboxGroup, + Switch, + Select, + Option, + OptionGroup, + Button, + ButtonGroup, + Table, + TableColumn, + DatePicker, + TimeSelect, + TimePicker, + Popover, + Tooltip, + Breadcrumb, + BreadcrumbItem, + Form, + FormItem, + Tabs, + TabPane, + Tag, + Tree, + Alert, + Slider, + Icon, + Row, + Col, + Upload, + Progress, + Badge, + Card, + Rate, + Steps, + Step, + Carousel, + CarouselItem, + Collapse, + CollapseItem, + Cascader, + ColorPicker, + Transfer, + Container, + Header, + Aside, + Main, + Footer, + Loading, + MessageBox, + Message, + Notification +} from 'element-ui' + +Vue.use(Pagination) +Vue.use(Dialog) +Vue.use(Autocomplete) +Vue.use(Dropdown) +Vue.use(DropdownMenu) +Vue.use(DropdownItem) +Vue.use(Menu) +Vue.use(Submenu) +Vue.use(MenuItem) +Vue.use(MenuItemGroup) +Vue.use(Input) +Vue.use(InputNumber) +Vue.use(Radio) +Vue.use(RadioGroup) +Vue.use(RadioButton) +Vue.use(Checkbox) +Vue.use(CheckboxGroup) +Vue.use(Switch) +Vue.use(Select) +Vue.use(Option) +Vue.use(OptionGroup) +Vue.use(Button) +Vue.use(ButtonGroup) +Vue.use(Table) +Vue.use(TableColumn) +Vue.use(DatePicker) +Vue.use(TimeSelect) +Vue.use(TimePicker) +Vue.use(Popover) +Vue.use(Tooltip) +Vue.use(Breadcrumb) +Vue.use(BreadcrumbItem) +Vue.use(Form) +Vue.use(FormItem) +Vue.use(Tabs) +Vue.use(TabPane) +Vue.use(Tag) +Vue.use(Tree) +Vue.use(Alert) +Vue.use(Slider) +Vue.use(Icon) +Vue.use(Row) +Vue.use(Col) +Vue.use(Upload) +Vue.use(Progress) +Vue.use(Badge) +Vue.use(Card) +Vue.use(Rate) +Vue.use(Steps) +Vue.use(Step) +Vue.use(Carousel) +Vue.use(CarouselItem) +Vue.use(Collapse) +Vue.use(CollapseItem) +Vue.use(Cascader) +Vue.use(ColorPicker) +Vue.use(Container) +Vue.use(Header) +Vue.use(Aside) +Vue.use(Main) +Vue.use(Footer) + +Vue.use(Loading.directive) + +Vue.prototype.$loading = Loading.service +Vue.prototype.$msgbox = MessageBox +Vue.prototype.$alert = MessageBox.alert +Vue.prototype.$confirm = MessageBox.confirm +Vue.prototype.$prompt = MessageBox.prompt +Vue.prototype.$notify = Notification +Vue.prototype.$message = Message +``` + +### Global config +When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components: + +Fully import Element： +```JS +import Vue from 'vue' +import Element from 'element-ui' +Vue.use(Element, { size: 'small' }) +``` + +Partial import Element： +```JS +import Vue from 'vue' +import { Button } from 'element-ui' + +Vue.prototype.$ELEMENT = { size: 'small' } +Vue.use(Button) +``` +With the above config, the default size of all components that have size attribute will be 'small'. + +### Start coding + +Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode: + +```bash +# visit localhost:8086 +npm run dev +``` + +Build: + +```bash +npm run build +``` +Please refer to each component's documentation to learn how to use them. diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md new file mode 100644 index 00000000000..5807b6cecec --- /dev/null +++ b/examples/docs/es/radio.md @@ -0,0 +1,231 @@ + + +## Radio + +Single selection among multiple options. + +### Basic usage + +Radio should not have too many options. Otherwise, use the Select component instead. + +:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`. +```html + + + +``` +::: + +### Disabled + +`disabled` attribute is used to disable the radio. + +:::demo You just need to add the `disabled` attribute. +```html + + + +``` +::: + +### Radio button group + +Suitable for choosing from some mutually exclusive options. + +:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter. + +```html + + Option A + Option B + Option C + + + +``` +::: + +### Button style + +Radio with button styles. + +:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute. +```html + + + +``` +::: + +### With borders + +:::demo The `border` attribute adds a border to Radios. +```html + + + +``` +::: + +### Radio Attributes + + Attribute | Description | Type | Accepted Values | Default +---- | ---- | ---- | ---- | ---- +label | the value of Radio | string / number / boolean | — | — +disabled | whether Radio is disabled | boolean | — | false +border | whether to add a border around Radio | boolean | — | false +size | size of the Radio, only works when `border` is true | string | medium / small / mini | — +name | native 'name' attribute | string | — | — + +### Radio Events + +| Event Name | Description | Parameters | +| --- | --- | --- | +| change | triggers when the bound value changes | the label value of the chosen radio | + +### Radio-group Attributes + + Attribute | Description | Type | Accepted Values | Default +---- | ---- | ---- | ---- | ---- +size | the size of radio buttons or bordered radios | string | medium / small / mini | — +disabled | whether the nesting radios are disabled | boolean | — | false +text-color | font color when button is active | string | — | #ffffff | +fill | border and background color when button is active | string | — | #409EFF | + +### Radio-group Events + +| Event Name | Description | Parameters | +| --- | --- | --- | +| change | triggers when the bound value changes | the label value of the chosen radio | + +### Radio-button Attributes + + Attribute | Description | Type | Accepted Values | Default +---- | ---- | ---- | ---- | ---- +label | the value of radio | string / number | — | — +disabled | whether radio is disabled | boolean | — | false +name | native 'name' attribute | string | — | — diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md new file mode 100644 index 00000000000..f1f579561cb --- /dev/null +++ b/examples/docs/es/rate.md @@ -0,0 +1,177 @@ + + + + +## Rate + +Used for rating + +### Basic usage + +:::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`. + +``` html +
+ Default + +
+
+ Color for different levels + + +
+ + +``` +::: + +### With text + +Using text to indicate rating score + +:::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`. + +``` html + + + + +``` +::: + +### More icons + +You can use different icons to distinguish different rate components. + +:::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected. + +``` html + + + + +``` +::: + +### Read-only + +Read-only Rate is for displaying rating score. Half star is supported. + +:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score. + +``` html + + + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| max | max rating score | number | — | 5 | +| disabled | whether Rate is read-only | boolean | — | false | +| allow-half | whether picking half start is allowed | boolean | — | false | +| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 | +| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 | +| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | +| void-color | color of unselected icons | string | — | #C6D1DE | +| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 | +| icon-classes | array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] | +| void-icon-class | class name of unselected icons | string | — | el-icon-star-off | +| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on | +| show-text | whether to display texts | boolean | — | false | +| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false | +| text-color | color of texts | string | — | #1F2D3D | +| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] | +| score-template | score template | string | — | {value} | + +### Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| change | Triggers when rate value is changed | value after changing | diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md new file mode 100644 index 00000000000..79e85c45b64 --- /dev/null +++ b/examples/docs/es/select.md @@ -0,0 +1,695 @@ + + + + +## Select + +When there are plenty of options, use a drop-down menu to display and select desired ones. + +### Basic usage + +:::demo `v-model` is the value of `el-option` that is currently selected. + +```html + + + +``` +::: + +### Disabled option + +:::demo Set the value of `disabled` in `el-option` to `true` to disable this option. + +```html + + + +``` +::: + +### Disabled select + +Disable the whole component. + +:::demo Set `disabled` of `el-select` to make it disabled. +```html + + + +``` +::: + +### Clearable single select + +You can clear Select using a clear icon. + +:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select. +```html + + + +``` +::: + +### Basic multiple select + +Multiple select uses tags to display selected options. + +:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. +```html + + + +``` +::: + +### Custom template + +You can customize HTML templates for options. + +:::demo Insert customized HTML templates into the slot of `el-option`. + +```html + + + +``` +::: + +### Grouping + +Display options in groups. + +:::demo Use `el-option-group` to group the options, and its `label` attribute stands for the name of the group. + +```html + + + +``` +::: + +### Option filtering + +You can filter options for your desired ones. + +:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. +```html + + + +``` +::: + +### Remote Search + +Enter keywords and search data from server. + +:::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. Note that if `el-option` is rendered with the `v-for` directive, you should add the `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example. + +```html + + + +``` +::: + +### Create new items +Create and select new items that are not included in select options +:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`. +```html + + + +``` +::: + +:::tip +If the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name. +::: + +### Select Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| multiple | whether multiple-select is activated | boolean | — | false | +| disabled | whether Select is disabled | boolean | — | false | +| value-key | unique identity key name for value, required when value is an object | string | — | value | +| size | size of Input | string | large/small/mini | — | +| clearable | whether single select can be cleared | boolean | — | false | +| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 | +| name | the name attribute of select input | string | — | — | +| placeholder | placeholder | string | — | Select | +| filterable | whether Select is filterable | boolean | — | false | +| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | +| filter-method | custom filter method | function | — | — | +| remote | whether options are loaded from server | boolean | — | false | +| remote-method | custom remote search method | function | — | — | +| loading | whether Select is loading data from server | boolean | — | false | +| loading-text | displayed text while loading data from server | string | — | Loading | +| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data | +| no-data-text | displayed text when there is no options | string | — | No data | +| popper-class | custom class name for Select's dropdown | string | — | — | +| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false | +| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false | + +### Select Events +| Event Name | Description | Parameters | +|---------|---------|---------| +| change | triggers when the selected value changes | current selected value | +| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise | +| remove-tag | triggers when a tag is removed in multiple mode | removed tag value | +| clear | triggers when the clear icon is clicked in a clearable Select | — | +| blur | triggers when Input blurs | (event: Event) | +| focus | triggers when Input focuses | (event: Event) | + +### Option Group Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| label | name of the group | string | — | — | +| disabled | whether to disable all options in this group | boolean | — | false | + +### Option Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| value | value of option | string/number/object | — | — | +| label | label of option, same as `value` if omitted | string/number | — | — | +| disabled | whether option is disabled | boolean | — | false | + +### Methods +| Method | Description | Parameters | +|------|--------|-------| +| focus | focus the Input component | - | diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md new file mode 100644 index 00000000000..bb421d4331c --- /dev/null +++ b/examples/docs/es/slider.md @@ -0,0 +1,250 @@ + + + + +## Slider + +Drag the slider within a fixed range. + +### Basic usage + +The current value is displayed when the slider is being dragged. + +:::demo Customize the initial value of the slider by setting the binding value. + +```html + + + +``` +::: + +### Discrete values + +The options can be discrete. + +:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute. + +```html + + + +``` +::: + +### Slider with input box + +Set value via a input box. + +:::demo Set the `show-input` attribute to display an input box on the right. + +```html + + + +``` +::: + +### Range selection + +Selecting a range of values is supported. + +:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values. +```html + + + +``` +::: + +### Vertical mode + +:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required. +```html + + + +``` +::: + +## Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| min | minimum value | number | — | 0 | +| max | maximum value | number | — | 100 | +| disabled | whether Slider is disabled | boolean | — | false | +| step | step size | number | — | 1 | +| show-input | whether to display an input box, works when `range` is false | boolean | — | false | +| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true | +| show-stops | whether to display breakpoints | boolean | — | false | +| show-tooltip | whether to display tooltip value | boolean | — | true | +| format-tooltip | format to display tooltip value | function(value) | — | — | +| range | whether to select a range | boolean | — | false | +| vertical | vertical mode | boolean | — | false | +| height | Slider height, required in vertical mode | string | — | — | +| label | label for screen reader | string | — | — | +|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 | + +## Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing | + diff --git a/examples/docs/es/steps.md b/examples/docs/es/steps.md new file mode 100644 index 00000000000..a40404e52f2 --- /dev/null +++ b/examples/docs/es/steps.md @@ -0,0 +1,176 @@ + + +## Steps + +Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2. + +### Basic usage + +Simple step bar. + +:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed. + +```html + + + + + + +Next step + + +``` +::: + +### Step bar that contains status + +Shows the status of the step for each step. + +:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page. + +```html + + + + + +``` +::: + +### Center + +Title and desription can be centered. + +:::demo +```html + + + + + + +``` +::: + +### Step bar with description + +There is description for each step. + +:::demo +```html + + + + + +``` +::: + +### Step bar with icon + +A variety of custom icons can be used in the step bar. + +:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`. + +```html + + + + + +``` +::: + +### Vertical step bar + +Vertical step bars. + +:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element. + +```html +
+ + + + + +
+``` +::: + +### Simple step bar +Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored. + +:::demo +```html + + + + + + + + + + + + +``` +::: + +### Steps Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — | +| direction | display direction | string | vertical/horizontal | horizontal | +| active | current activation step | number | — | 0 | +| process-status | status of current step | string | wait / process / finish / error / success | process | +| finish-status | status of end step | string | wait / process / finish / error / success | finish | +| align-center | center title and description | boolean | — | false | +| simple | whether to apply simple theme | boolean | - | false | + +### Step Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| title | step title | string | — | — | +| description | step description | string | — | — | +| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — | +| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - | + +### Step Slot +| Name | Description | +|----|----| +| icon | custom icon | +| title | step title | +| description | step description | + diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md new file mode 100644 index 00000000000..d0793964072 --- /dev/null +++ b/examples/docs/es/switch.md @@ -0,0 +1,165 @@ + + + + +## Switch + +Switch is used for switching between two opposing states. + +### Basic usage +:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states. + +```html + + + + + + +``` +::: + +### Text description +:::demo You can add `active-text` and `inactive-text` attribute to show texts. + +```html + + + + + + +``` +::: + +### Extended value types + +:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value. + +```html + + + + + + +``` + +::: + +### Disabled + +:::demo Adding the `disabled` attribute disables Switch. + +```html + + + + + + +``` +::: + +### Attributes + + Attribute | Description | Type | Accepted Values | Default +----| ----| ----| ----|---- +disabled | whether Switch is disabled | boolean | — | false +width | width of Switch | number | — | 40 +active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | — +inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | — +active-text | text displayed when in `on` state | string | — | — +inactive-text | text displayed when in `off` state | string | — | — +active-value | switch value when in `on` state | boolean / string / number | — | true +inactive-value | switch value when in `off` state | boolean / string / number | — | false +active-color | background color when in `on` state | string | — | #409EFF +inactive-color | background color when in `off` state | string | — | #C0CCDA +name| input name of Switch | string | — | — + +### Events + + Event Name | Description | Parameters +---- | ----| ---- +change | triggers when value changes | value after changing + +### Methods +Method | Description | Parameters +------|--------|------- +focus | focus the Switch component | — diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md new file mode 100644 index 00000000000..b2bfd2031bf --- /dev/null +++ b/examples/docs/es/table.md @@ -0,0 +1,2027 @@ + + + + +## Table + +Display multiple data with similar format. You can sort, filter, compare your data in a table. + +### Basic table + +Basic table is just for data display. + +:::demo After setting attribute `data` of `el-table` with an object array, you can use `prop` (corresponding to a key of the object in `data` array) in `el-table-column` to insert data to table columns, and set the attribute `label` to define the column name. You can also use the attribute `width` to define the width of columns. + +```html + + + +``` +::: + +### Striped Table + +Striped table makes it easier to distinguish different rows. + +:::demo Attribute `stripe` accepts a `Boolean`. If `true`, table will be striped. +```html + + + +``` +::: + +### Table with border + +:::demo By default, Table has no vertical border. If you need it, you can set attribute `border` to `true`. + +```html + + + +``` +::: + +### Table with status + +You can highlight your table content to distinguish between "success, information, warning, danger" and other states. + +:::demo Use `row-class-name` in `el-table` to add custom classes to a certain row. Then you can style it with custom classes. +```html + + + + + +``` +::: + +### Table with fixed header + +When there are too many rows, you can use a fixed header. + +:::demo By setting the attribute `height` of `el-table`, you can fix the table header without any other codes. +```html + + + +``` +::: + +### Table with fixed column + +When there are too many columns, you can fix some of them. + +:::demo Attribute `fixed` is used in `el-table-column`, it accepts a `Boolean`. If `true`, the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction. +```html + + + +``` +::: + +### Table with fixed columns and header + +When you have huge chunks of data to put in a table, you can fix the header and columns at the same time. + +:::demo Fix columns and header at the same time by combining the above two examples. +```html + + + +``` +::: + +### Fluid-height Table with fixed header (and columns) + +When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed. + +:::demo By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value. +```html + + + +``` +::: + +### Grouping table head + +When the data structure is complex, you can use group header to show the data hierarchy. + +:::demo Only need to place el-table-column inside a el-table-column, you can achieve group header. +```html + + + +``` +::: + +### Single select + +Single row selection is supported. + +:::demo Table supports single row selection. You can activate it by adding the `highlight-current-row` attribute. An event called `current-change` will be triggered when row selection changes, and its parameters are the rows after and before this change: `currentRow` and `oldCurrentRow`. If you need to display row index, you can add a new `el-table-column` with its `type` attribute assigned to `index`, and you will see the index starting from 1. +```html + + + +``` +::: + +### Multiple select + +You can also select multiple rows. + +:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell. +```html + + + +``` +::: + +### Sorting + +Sort the data to find or compare data quickly. + +:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method` or `sort-by`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs. +```html + + + +``` +::: + +### Filter + +Filter the table to find desired data. + +:::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has two parameters: `value` and `row`. +```html + + + +``` +::: + +### Custom column template + +Customize table column so it can be integrated with other components. +:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended). +```html + + + +``` +::: + +### Expandable row + +When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature. +:::demo Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `Scoped slot` in custom column templates. +```html + + + +``` +::: + +### Summary row + +For table of numbers, you can add an extra row at the table footer displaying each column's sum. +:::demo You can add the summary row by setting `show-summary` to `true`. By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using `sum-text`), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to `summary-method`, which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo. +```html + + + +``` +::: + +### Rowspan and colspan + +Configuring rowspan and colspan allows you to merge cells +:::demo Use the `span-method` attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row `row`, current column `column`, current row index `rowIndex` and current column index `columnIndex`. The method should return an array of two numbers, the first number being `rowspan` and second `colspan`. It can also return an object with `rowsapn` and `colspan` props. + +```html + + + +``` +::: + +### Custom index + +You can customize row index in `type=index` columns. +:::demo To customize row indices, use `index` attribute on with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index. + +```html + + + +``` +::: + +### Table Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| data | Table data | array | — | — | +| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — | +| max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — | +| stripe | whether Table is striped | boolean | — | false | +| border | whether Table has vertical border | boolean | — | false | +| size | size of Table | string | medium / small / mini | — | +| fit | whether width of column automatically fits its container | boolean | — | true | +| show-header | whether Table header is visible | boolean | — | true | +| highlight-current-row | whether current row is highlighted | boolean | — | false | +| current-row-key | key of current row, a set only prop | string,number | — | — | +| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — | +| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — | +| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, rowIndex})/String | — | — | +| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, rowIndex})/Object | — | — | +| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — | +| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — | +| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, rowIndex})/String | — | — | +| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, rowIndex})/Object | — | — | +| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — | +| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data | +| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false | +| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | | +| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending | +| tooltip-effect | tooltip `effect` property | String | dark/light | | dark | +| show-summary | whether to display a summary row | Boolean | — | false | +| sum-text | displayed text for the first column of summary row | String | — | Sum | +| summary-method | custom summary method | Function({ columns, data }) | — | — | +| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — | + +### Table Events +| Event Name | Description | Parameters | +| ---- | ---- | ---- | +| select | triggers when user clicks the checkbox in a row | selection, row | +| select-all | triggers when user clicks the checkbox in table header | selection | +| selection-change | triggers when selection changes | selection | +| cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event | +| cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event | +| cell-click | triggers when clicking a cell | row, column, cell, event | +| cell-dblclick | triggers when double clicking a cell | row, column, cell, event | +| row-click | triggers when clicking a row | row, event, column | +| row-contextmenu | triggers when user right clicks on a row | row, event | +| row-dblclick | triggers when double clicking a row | row, event | +| header-click | triggers when clicking a column header | column, event | +| sort-change | triggers when Table's sorting changes | { column, prop, order } | +| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters | +| current-change | triggers when current row changes | currentRow, oldCurrentRow | +| header-dragend | triggers when finish dragging header | newWidth, oldWidth, column, event | +| expand-change | triggers when user expands or collapses a row | row, expandedRows | + +### Table Methods +| Method | Description | Parameters | +|------|--------|-------| +| clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection | +| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected | +| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded | +| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row | +| clearSort | clear sorting, restore data to the original order | — | +| clearFilter | clear filter | — | + +### Table Slot +| Name | Description | +|------|--------| +| append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. | + +### Table-column Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection/index/expand | — | +| index | customize indices for each row, works on columns with `type=index` | string, Function(index) | - | - | +| label | column label | string | — | — | +| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — | +| prop | field name. You can also use its alias: `property` | string | — | — | +| width | column width | string | — | — | +| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — | +| fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — | +| render-header | render function for table header of this column | Function(h, { column, $index }) | — | — | +| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean, string | true, false, custom | false | +| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — | +| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | Function(row, index)/String/Array | — | — | +| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false | +| formatter | function that formats cell content | Function(row, column, cellValue) | — | — | +| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false | +| align | alignment | string | left/center/right | left | +| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — | +| class-name | class name of cells in the column | string | — | — | +| label-class-name | class name of the label of this column | string | — | — | +| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — | +| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false | +| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — | +| filter-placement | placement for the filter dropdown | String | same as Tooltip's `placement` | — | +| filter-multiple | whether data filtering supports multiple options | Boolean | — | true | +| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row) | — | — | +| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — | diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md new file mode 100644 index 00000000000..d078be7d943 --- /dev/null +++ b/examples/docs/es/tabs.md @@ -0,0 +1,394 @@ + + +## Tabs + +Divide data collections which are related yet belong to different types. + +### Basic usage + +Basic and concise tabs. + +:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute. + +```html + + +``` +::: + +### Card Style + +Tabs styled as cards. + +:::demo Set `type` to `card` can get a card-styled tab. + +```html + + +``` +::: + +### Border card + +Border card tabs. + +:::demo Set `type` to `border-card`. + +```html + + User + Config + Role + Task + +``` + +::: + +### Tab position + +You can use `tab-position` attribute to set the tab's position. + +:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"` + +```html + + +``` +::: + +### Custom Tab + +You can use named slot to customize the tab label content. + +:::demo +```html + + + Route + Route + + Config + Role + Task + +``` +::: + +### Add & close tab + +Only card type Tabs support addable & closeable. + +:::demo +```html + + + {{item.content}} + + + +``` +::: + +### Customized trigger button of new tab + +:::demo +```html +
+ + add tab + +
+ + + {{item.content}} + + + +``` +::: + +### Tabs Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| type | type of Tab | string | card/border-card | — | +| closable | whether Tab is closable | boolean | — | false | +| addable | whether Tab is addable | boolean | — | false | +| editable | whether Tab is addable and closable | boolean | — | false | +| value | name of the selected tab | string | — | name of first tab | +| tab-position | position of tabs | string | top/right/bottom/left | top | + +### Tabs Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| tab-click | triggers when a tab is clicked | clicked tab | +| tab-remove | triggers when tab-remove button is clicked | name of the removed tab | +| tab-add | triggers when tab-add button is clicked | — | +| edit | triggers when tab-add button or tab-remove is clicked | (targetName, action) | + +### Tab-pane Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| label | title of the tab | string | — | — | +| disabled | whether Tab is disabled | boolean | — | false | +| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' | +| closable | whether Tab is closable | boolean | — | false | diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md new file mode 100644 index 00000000000..e0c96c74c94 --- /dev/null +++ b/examples/docs/es/tag.md @@ -0,0 +1,215 @@ + + + + +## Tag + +Used for marking and selection. + +### Basic usage + +::: demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag. + +```html +Tag One +Tag Two +Tag Three +Tag Four +Tag Five +``` +::: + +### Removable Tag + +:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed. + +```html + + {{tag.name}} + + + +``` +::: + +### Edit Dynamically + +You can use the `close` event to add and remove tag dynamically. + +:::demo +```html + + {{tag}} + + + ++ New Tag + + + + +``` +::: + +### Sizes + +Besides default size, Tag 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 +Default +Medium +Small +Mini +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| type | theme | string | success/info/warning/danger | — | +| closable | whether Tag can be removed | boolean | — | false | +| disable-transitions | whether to disable animations | boolean | — | false | +| hit | whether Tag has a highlighted border | boolean | — | false | +| color | background color of the Tag | string | — | — | +| size | tag size | string | medium / small / mini | — | + + +### Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| close | triggers when Tag is removed | — | \ No newline at end of file diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md new file mode 100644 index 00000000000..7ea7106faee --- /dev/null +++ b/examples/docs/es/time-picker.md @@ -0,0 +1,216 @@ + + +## TimePicker + +Use Time Picker for time input. + +### Fixed time picker + +Provide a list of fixed time for users to choose. + +:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`. +```html + + + + +``` +::: + +### Arbitrary time picker + +Can pick an arbitrary time. + +:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set. + +```html + + + +``` +::: + +### Fixed time range + +If start time is picked at first, then the end time will change accordingly. + +:::demo +```html + + + +``` +::: + +### Arbitrary time range + +Can pick an arbitrary time range. + +:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode. +```html + + + +``` +::: + + + +### 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 | medium / small / mini | — | +| placeholder | placeholder in non-range mode | string | — | — | +| start-placeholder | placeholder for the start time in range mode | string | — | — | +| end-placeholder | placeholder for the end time in range mode | string | — | — | +| is-range | whether to pick a time range, only works with `` | boolean | — | false | +| arrow-control | whether to pick time using arrow buttons, only works with `` | boolean | — | false | +| value | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | +| align | alignment | left / center / right | left | +| popper-class | custom class name for TimePicker'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 for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — | +| value-format | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss` | — | +| name | same as `name` in native input | string | — | — | + +### Time Select Options +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| start | start time | string | — | 09:00 | +| end | end time | string | — | 18:00 | +| step | time step | string | — | 00:30 | +| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 | +| maxTime | maximum time, any time after this time will be disabled | string | — | — | + +### Time Picker Options +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — | +| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | + + +### Events +| Event Name | Description | Parameters | +|---------|--------|---------| +| change | triggers when user confirms the value | component's bounded value | +| blur | triggers when Input blurs | (event: Event) | +| focus | triggers when Input focuses | (event: Event) | diff --git a/examples/docs/es/tooltip.md b/examples/docs/es/tooltip.md new file mode 100644 index 00000000000..272e57c0ed8 --- /dev/null +++ b/examples/docs/es/tooltip.md @@ -0,0 +1,242 @@ + + + + +## Tooltip + +Display prompt information for mouse hover. + +### Basic usage + +Tooltip has 9 placements. + +:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element. +```html +
+
+ + top-start + + + top + + + top-end + +
+
+ + left-start + + + left + + + left-end + +
+ +
+ + right-start + + + right + + + right-end + +
+
+ + bottom-start + + + bottom + + + bottom-end + +
+
+ + +``` +::: + + +### Theme + +Tooltip has two themes: `dark` and `light`。 + +:::demo Set `effect` to modify theme, and the default value is `dark`. +```html + + Dark + + + Light + +``` +::: + +### More Content + +Display multiple lines of text and set their format. + +:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`. +```html + +
multiple lines
second line
+ Top center + +``` +::: + +### Advanced usage + +In addition to basic usages, there are some attributes that allow you to customize your own: + +`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear. + +`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`. + +In fact, Tooltip is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper. + +:::demo +```html + + + +``` +::: + + +:::tip +The `router-link` component is not supported in tooltip, please use `vm.$router.push`. + +Disabled form elements are not supported for Tooltip, more information can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). You need to wrap the disabled form element with a container element for Tooltip to work. +::: + + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|----------------|---------|-----------|-------------|--------| +| effect | Tooltip theme | string | dark/light | dark | +| content | display content, can be overridden by `slot#content` | String | — | — | +| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom | +| value(v-model) | visibility of Tooltip | boolean | — | false | +| disabled | whether Tooltip is disabled | boolean | — | false | +| offset | offset of the Tooltip | number | — | 0 | +| transition | animation name | string | — | el-fade-in-linear | +| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true | +| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` | +| open-delay | delay of appearance, in millisecond | number | — | 0 | +| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false | +| popper-class | custom class name for Tooltip's popper | string | — | — | +| enterable | whether the mouse can enter the tooltip | Boolean | — | true | +| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 | diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md new file mode 100644 index 00000000000..be22b6330e9 --- /dev/null +++ b/examples/docs/es/transfer.md @@ -0,0 +1,284 @@ + + + + +## Transfer + +### Basic usage +:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array. +```html + + + +``` +::: + +### Filterable + +You can search and filter data items. + +:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list. +```html + + + +``` +::: + +### Customizable + +You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents. + +:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured. +```html + + + + + +``` +::: + +### Prop aliases + +By default, Transfer looks for `key`, `label` and `disabled` in a data item. If your data items have different key names, you can use the `props` attribute to define aliases. +:::demo The data items in this example do not have `key`s or `label`s, instead they have `value`s and `desc`s. So you need to set aliases for `key` and `label`. +```html + + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +|---------- |-------- |---------- |------------- |-------- | +| data | data source | array[{ key, label, disabled }] | — | [ ] | +| filterable | whether Transfer is filterable | boolean | — | false | +| filter-placeholder | placeholder for the filter input | string | — | Enter keyword | +| filter-method | custom filter method | function | — | — | +| titles | custom list titles | array | — | ['List 1', 'List 2'] | +| button-texts | custom button texts | array | — | [ ] | +| render-content | custom render function for data items | function(h, option) | — | — | +| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } | +| props | prop aliases for data source | object{key, label, disabled} | — | — | +| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] | +| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] | + +### Slot +| Name | Description | +|------|--------| +| left-footer | content of left list footer | +| right-footer | content of right list footer | + +### Events +| Event Name | Description | Parameters | +|---------- |-------- |---------- | +| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys | diff --git a/examples/docs/es/transition.md b/examples/docs/es/transition.md new file mode 100644 index 00000000000..2658239d0dd --- /dev/null +++ b/examples/docs/es/transition.md @@ -0,0 +1,180 @@ +## Built-in transition + +You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://vuejs.org/v2/api/#transition). + +### fade + +:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`. +```html + + + + + +``` +::: + +### zoom + +:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided. +```html + + + + + +``` +::: + + +### collapse + +For collapse effect, use the `el-collapse-transition` component. + +:::demo +```html + + + + + +``` +::: + +### On demand + +```js +// fade/zoom +import 'element-ui/lib/theme-chalk/base.css'; +// collapse +import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'; +import Vue from 'vue' + +Vue.component(CollapseTransition.name, CollapseTransition) +``` + + + + diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md new file mode 100644 index 00000000000..835cfaa8c0e --- /dev/null +++ b/examples/docs/es/tree.md @@ -0,0 +1,985 @@ + + + + +## Tree + +Display a set of data with hierarchies. + +### Basic usage + +Basic tree structure. + +::: demo +```html + + + +``` +::: + +### Selectable + +Used for node selection. + +::: demo This example also shows how to load node data asynchronously. +```html + + + + +``` +::: + +### Custom leaf node in lazy mode + +::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node. +```html + + + + +``` +::: + +### Disabled checkbox + +The checkbox of a node can be set as disabled. + +::: demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked. +```html + + + + +``` +::: + +### Default expanded and default checked +Tree nodes can be initially expanded or checked + +::: demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree. +```html + + + + +``` +::: + +### Checking tree nodes + +::: demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required. +```html + + + +
+ get by node + get by key + set by node + set by key + reset +
+ + +``` +::: + +### Custom node content +The content of tree nodes can be customized, so you can add icons or buttons as you will + +::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured. +```html + + + + +``` +::: + +### Tree node filtering +Tree nodes can be filtered + +::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method. +```html + + + + + + + +``` +::: + +### Accordion + +Only one node among the same level can be expanded at one time. + +::: demo +```html + + + + +``` +::: + +### Attributes +| Attribute | Description | Type | Accepted Values | Default | +| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- | +| data | tree data | array | — | — | +| empty-text | text displayed when data is void | string | — | — | +| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — | +| props | configuration options, see the following table | object | — | — | +| load | method for loading subtree data | function(node, resolve) | — | — | +| render-content | render function for tree node | Function(h, { node, data, store } | — | — | +| highlight-current | whether current node is highlighted | boolean | — | false | +| default-expand-all | whether to expand all nodes by default | boolean | — | false | +| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | — | true | | +| auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true | +| default-expanded-keys | array of keys of initially expanded nodes | array | — | — | +| show-checkbox | whether node is selectable | boolean | — | false | +| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false | +| default-checked-keys | array of keys of initially checked nodes | array | — | — | +| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — | +| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false | +| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 | + +### props +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ---------------------------------------- | ------ | --------------- | ------- | +| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — | +| children | specify which node object is used as the node's subtree | string, function(data, node) | — | — | +| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | — | — | +| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | — | — | + +### Method +`Tree` has the following method, which returns the currently selected array of nodes. +| Method | Description | Parameters | +| --------------- | ---------------------------------------- | ---------------------------------------- | +| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method | +| updateKeyChildren | set new data to node, only works when `node-key` is assigned | (key, data) Accept two parameters: 1. key of node 2. new data | +| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | +| setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked | +| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | +| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. | +| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. | +| getCurrentKey | return the highlight node's key (null if no node is highlighted) | — | +| getCurrentNode | return the highlight node (null if no node is highlighted) | — | +| setCurrentKey | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted | +| setCurrentNode | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted | + +### Events +| Event Name | Description | Parameters | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself | +| check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes | +| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode | +| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself | +| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself | diff --git a/examples/docs/es/typography.md b/examples/docs/es/typography.md new file mode 100644 index 00000000000..22f8289be93 --- /dev/null +++ b/examples/docs/es/typography.md @@ -0,0 +1,151 @@ + + +## Typography + +We create a font convention to ensure the best presentation across different platforms. + +### Chinese Font + +
+ 和畅惠风 +
PingFang SC
+
+
+ 和畅惠风 +
Hiragino Sans GB
+
+
+ 和畅惠风 +
Microsoft YaHei
+
+ +### English / Numberic Font + +
+ RGag +
Helvetica Neue
+
+
+ RGag +
Helvetica
+
+
+ RGag +
Arial
+
+ +### Font-family + +```css +font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; +``` + +### Font Convention + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Main TitleBuild with Element20px Extra large
TitleBuild with Element18px large
Small TitleBuild with Element16px Medium
BodyBuild with Element14px Small
Body (small)Build with Element13px Extra Small
Supplementary textBuild with Element12px Extra Extra Small
+ diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md new file mode 100644 index 00000000000..267e889af62 --- /dev/null +++ b/examples/docs/es/upload.md @@ -0,0 +1,426 @@ + + + +## Upload + +Upload files by clicking or drag-and-drop + +### Click to upload files + +:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded. +```html + + Click to upload +
jpg/png files with a size less than 500kb
+ + +``` +::: + +### User avatar upload + +Use `before-upload` hook to limit the upload file format and size. + +::: demo +```html + + + + + + + + +``` +::: + +### Photo Wall + +Use `list-type` to change the fileList style. + +::: demo +```html + + + + + + + +``` +::: + +### FileList with thumbnail + +::: demo +```html + + Click to upload +
jpg/png files with a size less than 500kb
+ + +``` +::: + +### File list control + +Use `on-change` hook function to control upload file list + +::: demo +```html + + Click to upload +
jpg/png files with a size less than 500kb
+ + +``` +::: + +### Drag to upload + +You can drag your file to a certain area to upload it. + +::: demo +```html + + +
Drop file here or click to upload
+
jpg/png files with a size less than 500kb
+ +``` +::: + +### Manual upload + +::: demo +```html + + select file + upload to server +
jpg/png files with a size less than 500kb
+ + +``` +::: + +### Attributes +Attribute | Description | Type | Accepted Values | Default +----| ----| ----| ----| ---- +action | required, request URL | string | — | — +headers | request headers | object | — | — +multiple | whether uploading multiple files is permitted | boolean | — | — +data | additions options of request | object | — | — +name | key name for uploaded file | string | — | file +with-credentials | whether cookies are sent | boolean | — |false +show-file-list | whether to show the uploaded file list | boolean | — | true + drag | whether to activate drag and drop mode | boolean | — | false +accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | — +on-preview | hook function when clicking the uploaded files | function(file) | — | — +on-remove | hook function when files are removed | function(file, fileList) | — | — +on-success | hook function when uploaded successfully | function(response, file, fileList) | — | — +on-error | hook function when some errors occurs | function(err, file, fileList) | — | — +on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — | +on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — | +before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | — +thumbnail-mode | whether thumbnail is displayed | boolean | — | false +file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] +list-type | type of fileList | string | text/picture/picture-card | text | +auto-upload | whether to auto upload file | boolean | — | true | +http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — | +disabled | whether to disable upload | boolean | — | false | +limit | maximum number of uploads allowed | number | — | — | +on-exceed | hook function when limit is exceeded | function(files, fileList) | — | - | + +### Methods +| Methods Name | Description | Parameters | +|---------- |-------- |---------- | +| clearFiles | clear the uploaded file list (this method is not supported in the `before-upload` hook) | — | +| abort | cancel upload request | （ file: fileList's item ） | diff --git a/examples/i18n/component.json b/examples/i18n/component.json index 51600716020..75299993509 100644 --- a/examples/i18n/component.json +++ b/examples/i18n/component.json @@ -60,5 +60,36 @@ "nav": { "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: " + } } ] diff --git a/examples/i18n/page.json b/examples/i18n/page.json index d9321a056cd..59f8efd7ccd 100644 --- a/examples/i18n/page.json +++ b/examples/i18n/page.json @@ -3,9 +3,6 @@ "lang": "zh-CN", "pages": { "index": { - "lang": "zh-CN", - "titleSize": "34", - "paraSize": "18", "1": "网站快速成型工具", "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库", "3": "指南", @@ -14,7 +11,10 @@ "6": "组件", "7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。", "8": "资源", - "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。" + "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。", + "lang": "zh-CN", + "titleSize": "34", + "paraSize": "18" }, "component": {}, "changelog": { @@ -76,9 +76,6 @@ "15": "适用于导航较少，页面篇幅较长的网站。" }, "resource": { - "paraHeight": "1.8", - "placeholder1": "整理中", - "placeholder2": "设计资源正在整理和完善中", "1": "资源", "2": "整理中", "3": "Axure Components", @@ -87,7 +84,10 @@ "6": "Sketch Template", "7": "从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格", "8": "组件交互文档", - "9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节" + "9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节", + "paraHeight": "1.8", + "placeholder1": "整理中", + "placeholder2": "设计资源正在整理和完善中" } } }, @@ -95,12 +95,101 @@ "lang": "en-US", "pages": { "index": { + "1": "A Desktop UI Library", + "2": "Element, a Vue 2.0 based component library for developers, designers and product managers", + "3": "Guide", + "4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.", + "5": "View Detail", + "6": "Component", + "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.", + "8": "Resource", + "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.", "lang": "en-US", "titleSize": "34", "paraSize": "18", "theatreParam": "{ maxSpeed: 100 }", "typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)", - "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)", + "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)" + }, + "component": {}, + "changelog": { + "1": "Changelog", + "2": "en-US" + }, + "design": { + "1": "Design Disciplines", + "2": "Consistency", + "3": "", + "4": "Feedback", + "5": "", + "6": "Efficiency", + "7": "", + "8": "Controllability", + "9": "", + "10": "Consistency", + "11": "Consistent with real life: ", + "12": "in line with the process and logic of real life, and comply with languages and habits that the users are used to.", + "13": "Consistent within interface: ", + "14": "all elements should be consistent, such as: design style, icons and texts, position of elements, etc.", + "15": "Feedback", + "16": "Operation feedback: ", + "17": "enable the users to clearly perceive their operations by style updates and interactive effects.", + "18": "Visual feedback: ", + "19": "reflect current state by updating or rearranging elements of the page.", + "20": "Efficiency", + "21": "Simplify the process: ", + "22": "keep operating process simple and intuitive.", + "23": "Definite and clear: ", + "24": "enunciate your intentions clearly so that the users can quickly understand and make decisions.", + "25": "Easy to identify: ", + "26": "the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.", + "27": "Controllability", + "28": "Decision making: ", + "29": "giving advices about operations is acceptable, but do not make decisions for the users.", + "30": "Controlled consequences: ", + "31": "users should be granted the freedom to operate, including canceling, aborting or terminating current operation." + }, + "guide": { + "1": "Design Disciplines", + "2": "Navigation" + }, + "nav": { + "1": "Navigation", + "2": "Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.", + "3": "Choose the right navigation", + "4": "An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation", + "5": "Side Navigation", + "6": "Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.", + "7": "Level 1 categories", + "8": "Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.", + "9": "Level 2 categories", + "10": "Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.", + "11": "Level 3 categories", + "12": "Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.", + "13": "Top Navigation", + "14": "Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.", + "15": "Suitable for sites with few navigations and large chunks." + }, + "resource": { + "1": "Resource", + "2": "Under construction.", + "3": "Axure Components", + "4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.", + "5": "Download", + "6": "Sketch Template", + "7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.", + "8": "Interaction Design Documentation", + "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.", + "paraHeight": "1.6", + "placeholder1": "Under construction", + "placeholder2": "Please wait while we prepare the design resources" + } + } + }, + { + "lang": "es", + "pages": { + "index": { "1": "A Desktop UI Library", "2": "Element, a Vue 2.0 based component library for developers, designers and product managers", "3": "Guide", @@ -109,7 +198,13 @@ "6": "Component", "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.", "8": "Resource", - "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency." + "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.", + "lang": "en-US", + "titleSize": "34", + "paraSize": "18", + "theatreParam": "{ maxSpeed: 100 }", + "typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)", + "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)" }, "component": {}, "changelog": { @@ -171,9 +266,6 @@ "15": "Suitable for sites with few navigations and large chunks." }, "resource": { - "paraHeight": "1.6", - "placeholder1": "Under construction", - "placeholder2": "Please wait while we prepare the design resources", "1": "Resource", "2": "Under construction.", "3": "Axure Components", @@ -182,7 +274,10 @@ "6": "Sketch Template", "7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.", "8": "Interaction Design Documentation", - "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective." + "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.", + "paraHeight": "1.6", + "placeholder1": "Under construction", + "placeholder2": "Please wait while we prepare the design resources" } } } diff --git a/examples/i18n/route.json b/examples/i18n/route.json index d9e7749ff45..ad93c4a3c8f 100644 --- a/examples/i18n/route.json +++ b/examples/i18n/route.json @@ -4,5 +4,8 @@ }, { "lang": "en-US" + }, + { + "lang": "es" } ] diff --git a/examples/i18n/title.json b/examples/i18n/title.json index 38eda0f8e64..64e38263738 100644 --- a/examples/i18n/title.json +++ b/examples/i18n/title.json @@ -10,5 +10,11 @@ "guide": "Guide | Element", "component": "Component | Element", "resource": "Resource | Element" + }, + "es": { + "home": "Element - A Desktop UI Toolkit for Web", + "guide": "Guide | Element", + "component": "Component | Element", + "resource": "Resource | Element" } } diff --git a/examples/nav.config.json b/examples/nav.config.json index 27d12828857..29e2ef532a9 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -498,5 +498,255 @@ } ] } + ], + "es": [ + { + "name": "Changelog-es", + "path": "/changelog" + }, + { + "name": "Element React", + "href": "https://eleme.github.io/element-react/" + }, + { + "name": "Element Angular", + "href": "https://eleme.github.io/element-angular/" + }, + { + "name": "Development", + "children": [ + { + "path": "/installation", + "name": "Installation-es" + }, + { + "path": "/quickstart", + "name": "Quick Start-es" + }, + { + "path": "/i18n", + "name": "Internationalization-es" + }, + { + "path": "/custom-theme", + "name": "Custom Theme-es" + }, + { + "path": "/transition", + "name": "Built-in transition-es" + } + ] + }, + { + "name": "Components", + "groups": [ + { + "groupName": "Basic", + "list": [ + { + "path": "/layout", + "title": "Layout-es" + }, + { + "path": "/container", + "title": "Layout Container-es" + }, + { + "path": "/color", + "title": "Color-es" + }, + { + "path": "/typography", + "title": "Typography-es" + }, + { + "path": "/icon", + "title": "Icon-es" + }, + { + "path": "/button", + "title": "Button-es" + } + ] + }, + { + "groupName": "Form", + "list": [ + { + "path": "/radio", + "title": "Radio-es" + }, + { + "path": "/checkbox", + "title": "Checkbox-es" + }, + { + "path": "/input", + "title": "Input-es" + }, + { + "path": "/input-number", + "title": "InputNumber-es" + }, + { + "path": "/select", + "title": "Select-es" + }, + { + "path": "/cascader", + "title": "Cascader-es" + }, + { + "path": "/switch", + "title": "Switch-es" + }, + { + "path": "/slider", + "title": "Slider-es" + }, + { + "path": "/time-picker", + "title": "TimePicker-es" + }, + { + "path": "/date-picker", + "title": "DatePicker-es" + }, + { + "path": "/datetime-picker", + "title": "DateTimePicker-es" + }, + { + "path": "/upload", + "title": "Upload-es" + }, + { + "path": "/rate", + "title": "Rate-es" + }, + { + "path": "/color-picker", + "title": "ColorPicker-es" + }, + { + "path": "/transfer", + "title": "Transfer-es" + }, + { + "path": "/form", + "title": "Form-es" + } + ] + }, + { + "groupName": "Data", + "list": [ + { + "path": "/table", + "title": "Table-es" + }, + { + "path": "/tag", + "title": "Tag-es" + }, + { + "path": "/progress", + "title": "Progress-es" + }, + { + "path": "/tree", + "title": "Tree-es" + }, + { + "path": "/pagination", + "title": "Pagination-es" + }, + { + "path": "/badge", + "title": "Badge-es" + } + ] + }, + { + "groupName": "Notice", + "list": [ + { + "path": "/alert", + "title": "Alert-es" + }, + { + "path": "/loading", + "title": "Loading-es" + }, + { + "path": "/message", + "title": "Message-es" + }, + { + "path": "/message-box", + "title": "MessageBox-es" + }, + { + "path": "/notification", + "title": "Notification-es" + } + ] + }, + { + "groupName": "Navigation", + "list": [ + { + "path": "/menu", + "title": "NavMenu-es" + }, + { + "path": "/tabs", + "title": "Tabs-es" + }, + { + "path": "/breadcrumb", + "title": "Breadcrumb-es" + }, + { + "path": "/dropdown", + "title": "Dropdown-es" + }, + { + "path": "/steps", + "title": "Steps-es" + } + ] + }, + { + "groupName": "Others", + "list": [ + { + "path": "/dialog", + "title": "Dialog-es" + }, + { + "path": "/tooltip", + "title": "Tooltip-es" + }, + { + "path": "/popover", + "title": "Popover-es" + }, + { + "path": "/card", + "title": "Card-es" + }, + { + "path": "/carousel", + "title": "Carousel-es" + }, + { + "path": "/collapse", + "title": "Collapse-es" + } + ] + } + ] + } ] } diff --git a/examples/pages/es/changelog.vue b/examples/pages/es/changelog.vue new file mode 100644 index 00000000000..241cc0d72e7 --- /dev/null +++ b/examples/pages/es/changelog.vue @@ -0,0 +1,188 @@ + + + diff --git a/examples/pages/es/component.vue b/examples/pages/es/component.vue new file mode 100644 index 00000000000..3629a7e847e --- /dev/null +++ b/examples/pages/es/component.vue @@ -0,0 +1,288 @@ + + + diff --git a/examples/pages/es/design.vue b/examples/pages/es/design.vue new file mode 100644 index 00000000000..fb9717b74b5 --- /dev/null +++ b/examples/pages/es/design.vue @@ -0,0 +1,82 @@ + + diff --git a/examples/pages/es/guide.vue b/examples/pages/es/guide.vue new file mode 100644 index 00000000000..ffbe6cc1012 --- /dev/null +++ b/examples/pages/es/guide.vue @@ -0,0 +1,91 @@ + + + diff --git a/examples/pages/es/index.vue b/examples/pages/es/index.vue new file mode 100644 index 00000000000..63d838d6454 --- /dev/null +++ b/examples/pages/es/index.vue @@ -0,0 +1,323 @@ + + + diff --git a/examples/pages/es/nav.vue b/examples/pages/es/nav.vue new file mode 100644 index 00000000000..72db37ec2aa --- /dev/null +++ b/examples/pages/es/nav.vue @@ -0,0 +1,166 @@ + + + diff --git a/examples/pages/es/resource.vue b/examples/pages/es/resource.vue new file mode 100644 index 00000000000..c34ebc48343 --- /dev/null +++ b/examples/pages/es/resource.vue @@ -0,0 +1,160 @@ + + diff --git a/examples/route.config.js b/examples/route.config.js index cbf214491a1..2331033550a 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -11,6 +11,11 @@ const LOAD_MAP = { return r => require.ensure([], () => r(require(`./pages/en-US/${name}.vue`)), 'en-US'); + }, + 'es': name => { + return r => require.ensure([], () => + r(require(`./pages/es/${name}.vue`)), + 'es'); } }; @@ -28,6 +33,11 @@ const LOAD_DOCS_MAP = { return r => require.ensure([], () => r(require(`./docs/en-US${path}.md`)), 'en-US'); + }, + 'es': path => { + return r => require.ensure([], () => + r(require(`./docs/es${path}.md`)), + 'es'); } }; @@ -134,6 +144,8 @@ let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator. let defaultPath = '/en-US'; if (userLanguage.indexOf('zh-') !== -1) { defaultPath = '/zh-CN'; +} else if (userLanguage.indexOf('es') !== -1) { + defaultPath = '/es'; } route = route.concat([{ From 9a79e200d02c7e36b9759f5007c3fe92e675f402 Mon Sep 17 00:00:00 2001 From: Javier Diaz Date: Wed, 8 Nov 2017 00:19:52 -0600 Subject: [PATCH 002/310] es-doc: add color translation (#8092) * [Color]: Spanish translation * Fixed typo on translate * Fixed typo on translation --- examples/docs/es/color.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/examples/docs/es/color.md b/examples/docs/es/color.md index c8bcfa89f4a..4753b2fec3f 100644 --- a/examples/docs/es/color.md +++ b/examples/docs/es/color.md @@ -73,56 +73,56 @@ ## Color -Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build. +Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye. -### Main Color +### Color principal -The main color of Element is bright and friendly blue. +El color principal de Element es el azul brillante y amigable. -
Blue
#409EFF
+
Azul
#409EFF
 -### Secondary Color +### Color secundario -Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation) +Además del color principal, necesitas utiizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa). -
Success
#67C23A
+
Éxito
#67C23A
 -
Warning
#EB9E05
+
Precaución
#EB9E05
 -
Danger
#FA5555
+
Peligro
#FA5555
Info
#878D99
 -### Neutral Color +### Color neutro -Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure. +Los colores neutrales son para texto, fondos y bordes. Puedes usar diferentes colores neutrales para representar una estructura jeráquica.
-
Primary Text
#2D2F33
-
Regular Text
#5A5E66
-
Secondary Text
#878D99
-
Placeholder Text
#B4BCCC
+
Texto primario
#2D2F33
+
Texto regular
#5A5E66
+
Texto secundario
#878D99
+
Texto de placeholder
#B4BCCC
-
Base Border
#D8DCE5
-
Light Border
#DFE4ED
-
Lighter Border
#E6EBF5
-
Extra Light Border
#EDF2FC
+
Borde base
#D8DCE5
+
Borde ligero
#DFE4ED
+
Borde claro
#E6EBF5
+
Borde extra claro
#EDF2FC
 \ No newline at end of file From 5fc56bccc720a4a28f73a3a02b2e29c16e544d75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Santiago=20Garc=C3=ADa=20da=20Rosa?= Date: Wed, 8 Nov 2017 03:22:06 -0300 Subject: [PATCH 003/310] es-docs: add alert, badge, breadcrumb, button translation (#8090) * docs/es/alert.md - translation to spanish * docs/es/alert.md - translation to spanish * docs/es/badge.md - translation to spanish * docs/es/breadcrumb.md - translation to spanish * docs/es/button.md - translation to spanish --- examples/docs/es/alert.md | 60 ++++++++++++++++---------------- examples/docs/es/badge.md | 36 ++++++++++---------- examples/docs/es/breadcrumb.md | 26 +++++++------- examples/docs/es/button.md | 62 +++++++++++++++++----------------- 4 files changed, 93 insertions(+), 91 deletions(-) diff --git a/examples/docs/es/alert.md b/examples/docs/es/alert.md index e90f655dc20..d8da5058e27 100644 --- a/examples/docs/es/alert.md +++ b/examples/docs/es/alert.md @@ -19,13 +19,13 @@ ## Alert -Displays important alert messages. +Mostrar mensajes de alertas importantes. -### Basic usage +### Uso básico -Alert components are non-overlay elements in the page that does not disappear automatically. +Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente. -::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`. +::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`. ```html