github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #7750 from ElemeFE/carbon 

Carbon
pull/7772/head
杨奕 2017-10-26 01:05:33 -05:00 committed by GitHub
parent 4aff63826c 3cc8b0064b
commit 4b3edc13ab
584 changed files with 29441 additions and 15863 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.travis.yml
View File

@ -2,6 +2,9 @@ sudo: false
language: node_js
node_js: stable
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
- export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
- export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"

914
CHANGELOG.en-US.md
View File

@ -1,682 +1,256 @@
## Changelog
### 1.4.8
### 2.0.0-rc.1
*2017-10-24*
*2017-10-25*
- Fixed SubMenu retracting when moving the mouse rapidly on the SubMenu of collapsed Menu, #7579
- Fixed hidden last shortcut of DateTimePicker when the shortcut menu is long, #7567 (by @DuLinRain)
- Added `show-timeout` and `hide-timeout` attributes for Dropdown, #7621 (by @phongkt-dev)
#### New features
- Form
- Added `clearValidate` method for clearing validating results for all form items, #7623
- MessageBox
- Added `inputType` attribute to assign type for the inner input box, #7651
- Table
- Added `size` attribute
- Added `toggleRowExpansion` method to expand or collapse expandable rows programmatically
- Added `cell-class-name` attribute to assign class name for cells
- Added `cell-style` attribute to style cells
- Added `header-row-class-name` attribute to assign class name for header rows
- Added `header-row-style` attribute to style header rows
- Added `header-cell-class-name` attribute to assign class name for header cells
- Added `header-cell-style` attribute to style header cells
- TableColumn's `prop` attribute now accepts `object[key]` notations
- Added `index` attribute for TableColumn to customize row indices
### 1.4.7
#### Fixes
- Table
- Fixed a dynamic `max-height` bug
- Fixed some style calculation errors
#### Breaking changes
- Autocomplete
- Removed `props` attribute. Now you can use `value-key` attribute to designate key name of the input suggestion
object for display
- Table
- `append` slot is moved outside the `tbody` element to avoid multiple rendering
- `expand` event is renamed to `expand-change`
- The params of `row-class-name` and `row-style` method is now an object
### 2.0.0-beta.1
*2017-10-20*
#### New features
- General
- Added TypeScript typings
- All existing icons are redesigned. Some new icons are added.
- To help you migrate from Element 1.x, we added some console warnings against deprecated APIs. When you use a removed or renamed attribute or event in your project, you'll get a warning like this:
```
[Element Migrating][ElSwitch][Attribute]: on-color is renamed to active-color.
```
- Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
- Layout
- Added a new breakpoint `xl` for viewport wider than 1920px
- Table
- Added `span-method` attribute for merging cells
- Added `clearSort` method to clear sorting programmatically
- Added `clearFilter` method to clear filter programmatically
- For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its styles
- DatePicker
- Added `unlink-panels` attribute to unlink the two date panels when selecting a date range
- Select
- Added `reserve-keyword` attribute for reserving current search keyword after selecting an option
#### Fixes
- Table
- Now `header-align` of TableColumn works properly
- Fixed a bug that Table remains hiding when its parent element appears from `display: none`
- Fixed Table expanding its width when its parent element has `display: flex`
- Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched
- Fixed `expand-row-keys` attribute not working with initial value
- Fixed filter failing when `data` updates
- Fixed a calculation error of fixed columns layout with grouped headers
#### Breaking changes
- Switch
- Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not
able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
- Table
- `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean
### 2.0.0-alpha.3
*2017-10-16*
- Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai)
- Added `allow-focus` attribute for Switch, #7494 (by @breadadams)
#### New features
- General
- Configure component sizes globally. Now when you import Element, you can add a global config object with a `size` prop to configure default sizes for all components. For fully import:
```JS
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element, { size: 'small' })
```
For partial import:
```JS
import Vue from 'vue'
import { Button } from 'element-ui'
### 1.4.6
*2017-09-27*
- Fixed Slider's button jumping to previous position when clicked, #7190
- Fixed Tooltip `disabled` regression, #7198
- Fixed Cascader not correctly filter options when `props` is set, #7225
- Fixed an error when range typed DatePicker has an initial value of `[]`, #7233
### 1.4.5
*2017-09-24*
- Rate's `colors` attribute now supports dynamic updates, #6872 @lukaszb
- Fixed Tree not highlighting tree node whose value of `node-key` is 0, #6917
- Fixed initially disabled Dropdown not showing menu when it's enabled, #6969
- Added `hide-after` attribute for Tooltip, #6401 @ryatziv
- Fixed cancel button of TimePicker not cancel picked value when clicked, #7028
- Added `selectWhenUnmatched` attribute for Autocomplete, #6428 @ryatziv
- Fixed when `beforeUpload` of a file returns false, other files are aborted by Upload, #7077
- Fixed disabled dates of DatePicker in month view and year view not displayed correctly in the west hemisphere, #7114
- `default-value` of DatePicker now supports daterange type, #7073 @wacky6
### 1.4.4
*2017-09-05*
- Fixed all months disabled in DatePicker month view when `disabledDate` is set, #6768 @qingdengyue
- Added `debounce` attribute for Slider, #6820 @langgo
- Fixed value of Pagination jumper can be bigger than the total page count, #6842 @huguangju
- Fixed TimePicker's focus slipping away when selecting hour to 23 with mouse scroll, #6719 @qingdengyue
### 1.4.3
*2017-08-25*
- Fixed style bug when Progress's `percentage` is `0`, #6551 @Kingwl
- Fixed Carousel items flashing when switching, #6394
- Fixed disabled Button not prevent event propagation when clicked on its text area, #6421
- Fixed disabled dates calculation in DatePicker's month view, #6363
- Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng
- Fixed `amPm` not supported in DatePicker i18n, #6574
- Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593
- Fixed Alert using small icons when its `description` is passed via default slot, #6612 @leezng
### 1.4.2
*2017-08-09*
- Fixed Select marking option of `value` equal to `0` as selected when the initial value is null and bound to an object-typed value, #6143
- Fixed Step style issue when `status` is `error`, #6155 @wacky6
- Fixed Cascader selecting parent item when moving mouse quickly after clicking a leaf item, #6199
- Fixed Menu not hiding submenus when collapsed, #6200
- Fixed status of the inner native input of Switch not syncing with the component, #6205 @wacky6
- Fixed wrong button positioning of Slider after window is resized, #6263
- Fixed Autocomplete not hiding dropdown menu on blur, #6256
- Fixed hitting enter on jumper of Pagination not trigger page change event in IE, #6306 @qingdengyue
- Fixed InputNumber style issue when its `size` is `large` or `small`, #6310 @JeremyWuuuuu
- Fixed i18n failure for some texts in DatePicker, #6328
- Fixed Slider value changing to minimum when its button is clicked, #6359
### 1.4.1
*2017-07-28*
- Fixed child nodes expanding when checking parent node in Tree, #6029
- Fixed checking behavior error of Tree, #6034
- Fixed FormItem not inheriting `label-width` as a Form's direct child, #6044
- Fixed Menu incorrectly showing SubMenu in collapse mode, #6111
- Fixed render order error of `v-if` controlled dynamic TabPanes, #6066
- Fixed Popover still popping up after mouse leaves within `open-delay`, #6058 (by @laobubu)
- Fixed delete buttons still rendered in file list of disabled Upload, #6091
- Fixed background color error on hover of striped Table, #6024 (by @xtongs)
### 1.4.0 Boron
*2017-07-21*
#### New features:
- Message
- `message` attribute now supports VNode, #5463 (by @egyptik)
- ColorPicker
- Added `active-change` event, #5775
- Popover
- Added `open-delay` attribute, #5842 (by @kaungmyatlwin)
- Table
- A third parameter `value` is passed to `formatter`, #5709 (by @haledeng)
- Tree
- Added `disabled` attribute, #5937
- Menu
- Added `collapse` attribute, #5941
- Select
- Added `value-key` attribute, #5897
#### Fixes:
- DatePicker
- i18n failure for some texts, #5485
- returning a non-zero millisecond value when initial value is empty, #5663
- `disabledDate` affecting undesired date, #4946 (by @liyangworld)
- Steps
- style problems when a step is dynamically added or removed, #5456 (by @elfman)
- Table
- highlight row misplaced when an expandable Table has fixed table columns, #5471 (by @elfman)
- `classList` not supported in some browsers, #5613 (by @flynntsc)
- Select
- single Select unable to scroll to the selected item when the dropdown menu pops up, #5564（by @wacky6）
- Radio
- border radius lost in RadioGroups with only one Radio, #5646 (by @YYvanYang)
- Upload
- unable to reselect previously deleted file when `auto-upload` is false, #5706
- delete button still visible and functioning when `disabled`, #5841
- compatibility issue with Vue 2.4 `key`, #5872
- MessageBox
- clicking cancel buttons getting resolved when not invoked as a `confirm` or `prompt`, #5658
- Rate
- active icons not reflecting decimal part of initial value, #5785
- Pagination
- compatibility issue of total page display with vue-i18n@6.x, #5796 (by @mario56)
- apostrophe incorrectly showing up when current page is one page less than total page, #5861 (by @openks)
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'.
- Loading
- style problems when bound to invisible elements, #5649 (by @xiongzixiao)
- Cascader
- text in the input box not vertically aligned, #5819 (by @jianzhi92)
- Tree
- `setCheckedKeys` and `setCheckedNodes` in lazy mode, #5937
- loading all descendent nodes when a parent node is checked in lazy mode, #5963
- Form
- label named slot not working when `label` is not assigned on FormItem, #5921
- Tooltip
- not working in Vue 2.4.x when the triggering element is a custom component, #5916
#### Breaking changes:
- Select
- when value is an object, `value-key` is required as its unique identity key, #5897
### 1.3.7
*2017-06-18*
- Fixed Table with async data not showing summary row, #5318
- Fixed Pagination's jumper value not sync with current page, #5377
- Fixed DatePicker's shortcut panel overflow issue, #5297 (by @alashow)
- Fixed clicking Switch not responding when some text on the page is selected, #5411
- The red wildcard indicating required field of Form is now responsive, #5403
- Fixed initial-index of Carousel not working, #5334
- Fixed Popover enable to be focused when nested in a Dialog, #5336
### 1.3.6
*2017-06-09*
- Fixed inconsistency of ColorPicker's default value and panel value, #5183 (by @Kingwl)
- Fixed ColorPicker not able to change hue in the panel when its default value is white, #5184 (by @Kingwl)
- Fixed Select's dropdown taking multiple clicks to expand when nested in a Dialog after scrolling, #5226
- Added `props` property for Autocomplete, #5282
- Fixed dropdown of DatePicker not hiding when Tab key is pressed after manual input, #5149 (by @ChuckFields)
### 1.3.5
*2017-06-03*
- Fixed `default-first-option` of Select not working in remote filtering, #5084
- Fixed InputNumber not aligning with other form components, #5127
- Fixed inline FormItem having no effect on mixed Input, #5151
- Fixed height of FormItem being different in Firefox from other browsers, #5152
- Fixed items with a `value` of 0 in Cascader can not be expanded, #5172 (by @Kingwl)
- Fixed Autocomplete not triggering native `keydown` and `keyup` events, #5129
- Added `clear` event for Select, #5112
- Fixed Cascader's dropdown menu not updating its position in some situations, #5064
- Better accessibility for Dialog and MessageBox, #4786
### 1.3.4
*2017-05-23*
- Fixed highlight and stripe effects of Table with expandable rows, #4871 (by @mu-yu)
- Added `default-first-option` for Select, #4838 (by @wacky6)
- Fixed Select with no options not displaying "No data" text when `allow-create` is true, #4977
### 1.3.3
*2017-05-14*
- Added `visible-change` event for Dropdown, #4818 (by @luciy)
- Added `tag` attribute for Col and Row, #4799
- Fixed Cascader search functionality regression, #4812
- Fixed DatePicker triggering watch when `type` is range, #4837 (by @wacky6)
- Fixed numbers in TimePicker not align vertically, #4847 (by @pengchongfu)
- Fixed Dialog not triggering `before-close` hook when ESC is pressed, #4819 (by @patriciussanctus)
- Fixed multiple MessageBox not rendering content correctly when some of the `message` is a VNode
- Fixed Checkbox not focused when navigating with tab
### 1.3.2
*2017-05-10*
- Fixed undefined custom component `el-collapse-transition` error when importing some components on demand, #4728
- Fixed vertical alignment issue of Pagination in FireFox, #4756
- Fixed dropdown panel view not updating after binding value of DatePicker is programmatically changed when `type` is week, #4739
- Fixed height calculation errors of Table with summary rows, #4736
- Added `before-filter` attribute for Cascader, #4774
- Added `debounce` attribute for InputNumber, #4712（by @pengchongfu）
### 1.3.1
*2017-05-06*
- Fixed Autocomplete clearing input box when typing Chinese, #4718
- Fixed async Table's summary row not scroll with Table, #4717
- Fixed Dialog not closing correctly after pressing ESC when `close-on-press-esc` is true, #4706
- Fixed wrong parameter in `change` event of Switch when `on-value` and `off-value` are assigned, #4675
### 1.3.0 Beryllium
*2017-05-05*
#### New features:
- New component: Transfer
- Now you can use our pre-defined transitions
- Vertical mode for Slider, can be activated by the `vertical` attribute, #4410 (by @devange)
- Button style for CheckboxGroup, #3697 (by @mdartic)
- Table
- Added `setCurrentRow` method, #4390
- Added summary row, with three attributes: `show-summary`, `sum-text` and `summary-method`, #4484
- Added `filter-placement` attribute for TableColumn, #4491
- Dialog
- Added a `before-close` hook, #4432
- Added `visible` attribute, which supports the `.sync` modifier, #4539
- Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390
- Autocomplete
- Added `debounce` attribute, #7413
- Upload
- Added `disabled` attribute, #4473
- `on-change` now also triggers when a file is added, #4447
- Added `abort` method
- Switch now supports `on-value` and `off-value`, so that you can customize its values, #4403
- Added `limit` and `on-exceed` attributes to limit the amount of files, #7405
- Menu
- Added `open` and `close` methods to open and close SubMenu programmatically, #7412
- DatePicker
- Added `default-value` attribute for initially displayed date in the dropdown, #4222 (by @wacky6)
- `type` now supports dynamic updates, #4417 (by @coffeedeveloper)
- Added `label` attribute for CarouselItem, #4317 (by @paul-blundell)
- `message` of MessageBox now supports VNode, #4550
- `current-page` of Pagination `current-page` now supports `.sync`, #4539
- Added `label` slot for Form, so you can customize label's content, #4634
#### Fixes:
- Compatibility issues of Select and Table with Vue 2.3.x, #4518
- `disabledDate` of DatePicker having no effect on typed value in the input box, #4309
- An issue when the key of a Tree node is number 0, #4415
- TimePicker number not align when picked, #4425 (by @pengchongfu)
- Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)
- Upload
- not able to select the same file multiple times, #4461
- not displaying preview image when is `auto-upload` false, #4572
- some style errors, #4643
- Style bug of RadioGroup when nested in a FormItem, #4336
- ColorPicker not clear the color panel when bound value is emptied, #4668 (by @pengchongfu)
- `show-overflow-tooltip` of Table not working in Safari, #4157 (by @renxia)
#### Breaking changes:
- Only compatible with Vue 2.3.0+
### 1.2.9
*2017-04-19*
- Fixed RadioButton not working properly when some texts on the page are selected, #4217
- Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)
- Fixed Cascader clear button not working, #4167 (by @pengchongfu)
- Fixed router switching error when the page has a Table with Tooltips, #4085
- Fixed Upload not able to remove selected files, #4233
- Added `onClick` attribute for Notification, #4221 (by @amouillard)
- Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)
- Fixed style error of ColorPicker when nested in a FormItem, #4303
- Added `enterable` attribute for Tooltip, #4210
### 1.2.8
*2017-04-07*
- Fixed `resetFields` of Form reassigning form items, #3840 (by @pengchongfu)
- Added `max` and `min` attributes for CheckboxGroup, #3700 (by @mdartic)
- Fixed DatePicker adding one to picked month in some specific days, #3935
- Added `closeAll` method for Message, #3966 (by @pengchongfu)
- Added `format-tooltip` attribute for Slider, #3657 (by @liyanlong)
- Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)
- Fixed single Select unable to create new items in Vue 2.2.x, #3984
- Fixed Row disappearing in all breakpoints if its `span` is set to 0 in some breakpoints, #4053
### 1.2.7
*2017-03-29*
- Fixed Select not compatible with Vue 2.2.6, #3797
- Improve performance for rendering tooltip in Table, #3478
- Add `tooltip-effect` property for Table
### 1.2.6
*2017-03-28*
- Fixed Switch compatible with SSR, #3752
- Fixed the time of TimePicker calculating incorrectly, #3479
- Fixed the week of DatePicker formatting incorrectly, #2774
- Fixed the week of DatePicker initializing incorrectly, #3058
- Fixed the events of Popover destroying incorrectly, #3555
- Fixed InputNumber setInterval, #3514 (by @pengchongfu)
- Fixed RadioButton css files, #3276
- Fixed hover style on striped Table, #3696 (by @nicoeg)
- Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)
- Added `delete-tag` event for Select, #3663 (by @pengchongfu)
- Added `onPick` option for DatePicker, #2921
- Added `status` for Step, #3722
- Added full example for on-demand importing, #3302
### 1.2.5
*2017-03-19*
- Added `show-tooltip` property for Slider, #3430 (by @gabrielboliveira)
- Fixed Slider precision not updating when `step` is updated, #3475 (by @gabrielboliveira)
- Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549
- Fixed Table automatically shrinking vertically in some conditions, #3539
- Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)
- Now Col will hide itself if its `xs`, `sm`, `md` or `lg` is set to 0, #3564
### 1.2.4
*2017-03-09*
- Fixed Carousel not responding to dynamic data updates, #3159
- Fixed `cell-dblclick` of Table not firing issue, #3305
- Fixed disabled Cascader not displaying initial value, #3297
- Fixed Slider not correctly displaying initial value when `show-input` is true, #3281
- Fixed Tooltip error in server-side rendering, #3214
- Fixed `range-separator` of DatePicker not working issue, #3378
- Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)
- Added `http-request` attribute for Upload, #3387
- Added support for hiding col if its `span` is 0, #3313
### 1.2.3
*2017-03-01*
- Fixed Tooltip, #3152
### 1.2.2
*2017-02-28*
- Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097
- Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035
- Fixed incorrect parameter of `change` event of Cascader, #3014
- Add `change` event for ColorPicker, #3049 (by @nicoeg)
- Fixed `setCheckedKeys` method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)
- Fixed Tooltip not compatible with `router-link`, #3143
### 1.2.1
*2017-02-23*
- Fixed SSR regression in version 1.2.0, #2982
- Fixed horizontal scroll buttons not showing in Tabs, #2974
- Fixed wrong calculation of height after the `height` attribute is updated dynamically in Table, #2979
- Added `cell-dblclick` and `header-dragend` events for Table, #2983 #2988
- Fixed form items showing a left padding inside an inline Form with a specified `label-width`, #2990
- Fixed Cascader's dropdown misplaces in some conditions, #2992
### 1.2.0 Lithium
*2017-02-22*
#### New features:
- Two brand new components: Cascader and ColorPicker
- New attributes `editable` and `addable`, and new events `tab-add` and `edit` for Tabs
- Language config files in UMD format
- New events `node-expand` and `node-collapse` for Tree, #2507 (by @masterzhang)
- New attribute `indent` for Tree, #2713
- Dialog's title now supports named slot, #2657
- New attribute `range` for Slider, #2751
- Upload
- Attribute `auto-upload` that controls if files are uploaded immediately after selecting, and its default value is `true`
- Event `on-change` that fires when file status changes
- Attribute `list-type` that configures the appearance of file list
- Scroll bars in Autocomplete are made prettier
#### Fixes:
- Carousel not responding to contents' update, #2775
- Numbers in TimePicker not align in some conditions, #2948
- TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)
- Tabs' display order error when tab-pane is dynamically changed, #2898
- Menu highlighting menu-item when `default-active` is assigned to an non-existent item
- Collapse's style issue when nested
#### Breaking changes:
- Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459
- The backdrop of Dialog now inserts to body element by default, #2556
- Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567
- Upload is refactored
- `default-file-list` renamed to `file-list`, and `show-upload-list` renamed to `show-file-list`
- `thumbnail-mode` removed
### 1.1.6
*2017-01-23*
- Fixed `customClass` of MessageBox affecting follow-up instances, #2472
- Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466
- Fixed style missing issue for some components when imported on demand
- Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540
- Restored returning to original sorting in sortable Table columns, #2491
- Added `reset.css` in `theme-default`, #2378
- Added `range-separator` attribute for DatePicker, #2579
- Published individual component packages: Table, DatePicker, Loading, Upload and Carousel
- Add Finnish (@groenroos)
### 1.1.5
*2017-01-17*
- Fixed Menu not activating corresponding menu item after router switching in router mode, #2451
- Fixed `value` attribute of Collapse not supporting `Number` typed value, #2455
### 1.1.4
*2017-01-16*
- Fixed Input Number triggering `change` event when bound value is changed programmatically, #2329
- Fixed Menu not responding to `$router` changing in router mode, #2391
- Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354
- Fixed `change` event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically
- Added `on-icon-click` attribute for Input, #2414
- Added `disabled` attribute for Radio Group, #2411
- Added `accordion` attribute for Tree, #2408
- Added `show-message` attribute for Form, #2356
- Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)
- Fixed `firstDayOfWeek` not working in ranged typed of DatePicker, #2353
- Fixed DatePicker displaying 1970 when initial value is null, #2388
- Fixed `filteredValue` attribute for Table, #2348
- Fixed scrollable Table's style with empty data, #2396
- Added `beforeClose` attribute for MessageBox, #2204
- Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389
Breaking change
- The `default-sort-prop` and `default-sort-order` attributes added in 1.1.3 are now merged into an object-typed attribute
### 1.1.3
*2017-01-09*
- Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167
- Fixed DatePicker year calculating error when choosing the next year, #2152
- Added `default-sort-prop` and `default-sort-order` attributes for Table, #2182 (by @njleonzhang)
- Fixed filterable Select filtering other options with initial value, #2196
- Added custom i18n processing, making Element compatible with i18n plugins other than `vue-i18n`, #2129
- Added `resize` attribute for Input, #2263 (by @Kingwl)
- Fixed Autocomplete not hiding dropdown when blurred, #2247
- Fixed style issues with nested Tabs, #2212 (by @Kingwl)
- Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192
### 1.1.2
*2016-12-30*
- Fixed `sortable` and `fixed` attribute of Table not working in Vue 2.1.7+
- Fixed Input Number not resetting on blur when input with illegal values, #2098
- Removed `title` scoped slot of Collapse, and added `title` named slot, #2100
- Fixed range selection in TimePicker not working issue
- Fixed Tabs' active tab switching when a non-active tab is removed, #2106
- Fixed console error reporting when navigating Select with arrow keys, #2120
- Fixed incorrect validation timing of filterable Select in Form, #2120
### 1.1.1
*2016-12-29*
- Fixed compatibility issue with latest Vue due to compilation
### 1.1.0 Helium
*2016-12-29*
#### New features:
- Two brand new components: Carousel and Collapse
- SSR supported
- Scrollbars' style inside components is upgraded
- Table now supports custom templates via [scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots); the good old `inline-template` is still compatible, but it's no longer recommended and is likely to be removed in the future
- Table now supports expandable rows
- DatePicker now supports specifying the first day of week
- TimeSelect now supports `maxTime`
- Autocomplete now supports `popper-class`
- To customize template of Tab-Pane, now you can use the `slot` named `label`
#### Fixes:
- `change` event of DatePicker incorrectly triggering multiple times, #2070
- Width shaking of tab-pane while initializing, #1883
#### Breaking changes:
- Only compatible with Vue 2.1.6 and beyond
- Parameters of Form validateField() methods are updated
- Alert's render-content attribute is removed, and now you can pass your custom template via default slot
- The box models of Input and Select are updated from `block` to `inline-block`
- The box model of Tabs is updated from `inline-block` to `block`, and Tab-Pane's `label-content` attribute is removed
- The dropdown of Autocomplete now inserts directly to `<body>`, not `<el-autocomplete>` any more
### 1.0.9
*2016-12-27*
- Fixed DatePicker incorrectly triggering input event, #1834
- Fixed Tree reporting `event is undefined` error in Firefox, #1945
- Added `change` event for DatePicker, whose parameter is the formatted value, #1841
- Added `header-align` attribute for Table, #1424
- Fixed single select Table's highlight style not removing when data is removed, #1890
- Fixed filterable Select lagging issue with more options, #1933
- Fixed multiple disabled Select not disabling removing selected options issue, #2001
- Fixed Col style not working in `xs`, #2011
- Added `value` attribute for Tab, #2008
- Fixed InputNumber `change` event incorrectly firing multiple times in some conditions, #1999
- Added `clearable` attribute for DatePicker, #1994
- Fixed Form always passing validation in async mode, #1936
### 1.0.8
*2016-12-20*
- Fixed nested Popup from event bubbling, #1677
- Fixed the issue that datetimerange-typed DatePicker can not select time, #1758
- Fixed `change` event not firing correctly of Slider, #1809
- Fixed Loading's spinner splitting while animating in some conditions, #1786
- Added `loading-text`, `no-data-text`, `no-match-text` properties and `visible-change` event for Select, #1849
- Added `popper-class` property for DatePicker, Select and Tooltip, #1806
- Added `expand-on-click-node`, `current-node-key` properties and `current-change` event for Tree, #1805 #1807
- Added the third parameter `column` for Table's `row-click` event, #1808
- Fixed an error when pages with Checkbox switching routes due to `computed` property being cached, #1860
- Added the tab instance as a parameter for TabPanel's `label-content` render function, #1857
- Added infinite submenus support for NavMenu in vertical mode, #1851
- Updated Checkbox so that it works without a binding value, #1818
- Added `onProgress` hook for Progress, #1782
- Fixed Tab not updating active bar with dynamic label, #1761
- Added `filter-change` event for Table, and `column-key` property for TableColumn, #1876
- Added `hide-on-click` property for Dropdown, #1879
### 1.0.7
*2016-12-14*
- Fixed DatePicker dropdown appears when hovering on the clear button
- Fixed DatePicker displays a wrong date when its initial value is null
- Added `row-contextmenu` event and `max-height` attribute for Table, #1663 #1674
- Added `customClass` attribute for MessageBox, #1707
- Added `iconClass` and `customClass` attributes for Message and Notification, #1671
- Added empty slot for Table, #1737
- Added old value as a second parameter in change event for InputNumber
### 1.0.6
*2016-12-09*
- Added `disabled` attribute for Tabs, #1620
- Added `size` attribute for DatePicker input, #1440
- Fixed `datetimerange` DatePicker's panel not showing correct date if initial value is present, #1129
- Fixed DatePicker display error when switching year, #1607
- Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604
- Fixed TimePicker not refreshing value after clicking the clear button, #1583
- Fixed remote filterable Select display error when its value is an object, #1593
- Fixed Select's clear button still working bug when it's `disabled`, #1619
- Fixed Switch's background color error when its `disabled` attribute is dynamically changed, #1627
- Fixed some style bugs of Table
### 1.0.5
*2016-12-06*
- Fixed Select with async options and binding value displaying value instead of label, #1537
- Fixed Select reports an error when initial binding value is an empty object, #1533
- Fixed remote filtering Select not showing dropdown in some conditions, #1531
- Fixed Slider sometimes drifting a small distance after releasing dragging, #1546
- Fixed Steps style in IE9, #1543
- Added Upload generating URL for all file types, #1530
- Fixed TimeSelect style, removed flexbox, #1335
### 1.0.4
*2016-12-02*
- Added `controls` attribute for Input Number, #1473
- Fixed Checkbox Group and Radio Group async issue, #1511 #1514
- Added `offset` attribute for Notification, #1419
- Fixed Slider's value not accurate issue when dragging rapidly, #1458
- Fixed Slider incorrectly showing multiple decimal digits issue, #1450
- Fixed Select's binding value and displayed value not in sync in some conditions
- Added `multiple-limit` and `allow-create` attributes for Select
- Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438
- Fixed Tree's view not updating issue after fetching child nodes' data, #1439
- Fixed some Table's style issues in windows system, #1464 #1507
- Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451
- Added `row-dblclick` event for Table, #1362
### 1.0.3
*2016-11-28*
- Fixed `currentPage` of Pagination not working in some cases, #1336
- Fixed `month` and `disabledDate` DatePicker's view not refreshing issue when switching year, #1158
- Fixed `readonly` DatePicker clear button not disabled issue, #1238
- Fixed Slider not working when binding value is `NaN` or `step` is smaller than 1, #1239 #1282
- Added multi-header for Table, #1312
- Added `rowStyle` for Table, #1348
- Fixed some attributes of TableColumn can not dynamically assigned issue, #1314
- Added `filter-node-method` attribute and `filter` method for Tree, #1257
- Added `getCheckedKeys` and `setCheckedKeys` methods for Tree, #1254
- Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152
- Fixed Popper not triggering destroy issue when keep-alive, #1359
- Added object deep validation for Form, #1363
- Added `append` and `prepend` for Autocomplete, #1369
- Added dynamic `pageSizes` support for Pagination, #1372
- Added custom style API for checked buttons in Radio Button, #1380
- Added assigning title via slot for Menu Group, #1382
- Fixed DatePicker year switching bug, #1385
- Added uploaded file list API for Upload, #1393
- Added multi-type support for `label` attribute of Checkbox, #1400
- Added `setChecked` method for Tree, #1422
### 1.0.2
*2016-11-18*
- Added `context` for Table to specify which context to access inside of table columns, #1161
- Added multiple languages
- Fixed language's dynamic switching issue, #1160
- Added `render-content` for Alert, #568
- Added styles for focused Button, #982
- Fixed `change` triggering timing in Switch, #1162
- Fixed TimeSelect being disabled when start time is set to `00:00`, #676
- Added `show-header` attribute and `header-click` method for Table, #1195
- Improved `height` attribute for Table when set to a string, #1195
- Fixed `selection-change` of Table not triggering in some cases, #1198
- Fixed Table's fixed columns not disappear when `fixed` attribute is dynamically changed, #1182
### 1.0.1
*2016-11-16*
- Fixed Pagination improperly triggering multiple `current-change` events
- Fixed Switch style when nested in a Form, #967
- Fixed Loading locks scroll of `body` in specific scenarios, #968
- `span` of Col is no longer a required attribute, and its default value is `24` if omitted
- Added `disabled` and `editable` attribute for DatePicker, #976
- Fixed DatePicker readonly with native behavior, #976
- Added `close` method for Message and Notification to manually close an instance
- Added clear value feature for DatePicker, #759
- Fixed Form reports an error when resetting a Date typed field, #937
- Fixed Table render error using vue-loader 9.9.0
- Added `align-center` attribute for Step, #994
- Fixed Upload missing Progress component, #1013
- Layout now supports responsive layout
- Added `show-close` for Dialog
- Fixed an error when `vue-i18n` is imported but not configured, #973
- Fixed DatePicker not refresh view with an initial value, #1050
- Fixed DiatePicker not refresh year when switched in month picker, #1070
- Added $loading service
- Added `manual` trigger in Popover
- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
### 1.0.0
*2016-11-9*
Element 1.0.0 released.
- Added `value-format` attribute to customize the format of the binding value, #7367
- TimePicker
- Added `arrow-control` attribute to spin the time with arrows #7438
- DateTimePicker
- Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438
- Form
- Form and Form-item now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428
- `validate` method will now return a promise if the callback is omitted, #7405
#### Fixes
- Fixed the console warning `Injection "elFormItem" not found` of some components
#### Breaking changes
- The params of DatePicker's `change` event is now the binding value itself. Its format is controlled by `value-format`
- Input's `change` event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use `input` event.
- Only compatible with Vue 2.5.2 and beyond
### 2.0.0-alpha.2
*2017-10-05*
- Updated the primary color of `theme-chalk`, #7351
- Fixed console error when using Dropdown, #7322
- Fixed console error when using Menu, #7321
- Added `popper-class` attribute for ColorPicker, #7351
- Now Button's `disabled` attribute works correctly, #7352
### 2.0.0-alpha.1
*2017-09-30*
#### New features
- General
- A new theme: `theme-chalk`
- Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
- Layout components: Container, Header, Aside, Main, Footer
- Button
- Added `round` attribute. It's used for round-cornered Buttons #6643
- TimeSelect
- Now can be navigated by `Up` and `Down`, and hitting `Enter` selects the time #6023
- TimePicker
- Now can be navigated by arrow keys, and hitting `Enter` selects the time #6050
- Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
- Tree
- Now child nodes don't render before the first expand #6257
- Added `check-descendants` attribute. It determines if child nodes are checked when checking their parent node
in `lazy` mode #6235
- Tag
- Added `size` attribute #7203
- Datepicker
- Now `timeFormat` can format the TimePicker when type is set to `datetimerange` #6052
- Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
- MessageBox
- Added `closeOnHashChange` attribute #6043
- Added `center` attribute so that the content can be centered #7029
- Added `roundButton` attribute to display round Buttons #7029
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6043
- Dialog
- Added `width`、`fullscreen`、`append-to-body` attributes. Now Dialog can be nested
- Added `center` attribute so that the content can be centered #7042
- Added `focus-after-closed`、`focus-after-open` to improve accessibility #6511
- ColorPicker
- Now you can type colors in the input box #6167
- Added `size` and `disabled` attributes #7026
- Message
- Now color of the icons can be overridden by CSS #6207
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6207
- Added `center` attribute so that the content can be centered #6875
- Notification
- Added `position` attribute to configure where Notification pops up #6231
- Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6231
- Added `showClose` attribute to hide the close button #6402
- Rate
- Added `show-score` attribute to determine if current score is displayed #6295
- Tabs
- Added `tab-position` attribute #6096
- Radio
- Improved accessibility #6101
- Added `border` and `size` attributes #6690
- Checkbox
- Added `border` and `size` attributes #6690
- Alert
- Added `center` attribute so that the content can be centered #6876
- Menu
- Added `background-color`, `text-color` and `active-text-color` attributes #7064
- Form
- Added `inline-message` attribute to determine if the validation message is displayed in inline style #7032
- Added `status-icon` attribute to display a feedback icon when validated #7032
- Input
- Added `suffix` and `prefix` named slots, `suffixIcon` and `prefixIcon` attributes to add contents inside the input box #7032
- Breadcrumb
- Added `separator-class` attribute to support icons as item separators #7203
- Steps
- Added `simple` attribute to activate simple-styled Steps #7274
- Pagination
- Added `prev-text` and `next-text` attributes to customize texts of prev page and next page #7005
#### Bug fixes
- DatePicker
- Fixed `v-model` returning the second day of the selected week in week mode #6038
- Fixed the first input being cleared in `daterange` type #6021
- DateTimePicker
- Fixed DateTimePicker and TimePicker affecting each other when picked #6090
- Fixed hour and second can be beyond limit when selecting time #6076
- TimePicker
- Fixed `v-model` not update correctly when blurred #6023
- Dialog
- Fixed texts having blurry edges when opening and closing nesting dropdowns #6088
- Select
- Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151
#### Breaking changes
- General
- Removed `theme-default`
- `change` event of form components and `current-change` event of Pagination now only trigger on user interaction
- `size` attribute of Button and form components can no longer be set to `large`. Now they accept `medium`, `small` and `mini`
- To facilitate the use of third-party icons, `icon` attribute of Button and Steps, `prefix-icon` and `suffix-icon` attributes of Input now require a full class name
- Dialog
- Removed `size` attribute. Now the size of Dialog can be configured by `width` and `fullscreen`
- Now the visibility of Dialog cannot be controlled by `v-model`
- Rate
- `text-template` is renamed to `score-template`
- Dropdown
- `menu-align` is renamed to `placement`. Now it supports more positions
- Transfer
- `footer-format` is renamed to `format`
- Switch
- `on-text` and `off-text` attributes now don't have default values
- Tag
- `type` attribute now accepts `success`, `info`, `warning` and `danger`
- `close-transition` is renamed to `disable-transitions`
- Menu
- Removed `theme` attribute. The color of Menu can be configured using `background-color`, `text-color` and `active-text-color`
- Input
- Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot
- Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots
- Autocomplete
- Removed `icon` and `on-icon-click` attributes. Now the icons can be configured using `prefix` or `suffix` named slot
- Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`
- Table
- Removed support for customizing column template using `inline-template`
- Steps
- Removed `center` attribute
- Now the Steps will fill its parent container by default
##
<i><sup>*</sup> 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.</i>

1025
CHANGELOG.zh-CN.md
View File

File diff suppressed because it is too large Load Diff

17
README.md
View File

@ -10,7 +10,7 @@
[![npm package](https://img.shields.io/npm/v/element-ui.svg)](https://www.npmjs.org/package/element-ui)
[![NPM downloads](http://img.shields.io/npm/dm/element-ui.svg)](https://npmjs.org/package/element-ui)
![JS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS)
![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-default/index.css?compression=gzip&label=gzip%20size:%20CSS)
![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS)
[![Join the chat at https://gitter.im/ElemeFE/element](https://badges.gitter.im/ElemeFE/element.svg)](https://gitter.im/ElemeFE/element?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(Chinese)
[![Join the chat at https://gitter.im/element-en/Lobby](https://badges.gitter.im/element-en/Lobby.svg)](https://gitter.im/element-en/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(English)
[![OpenCollective](https://opencollective.com/element/backers/badge.svg)](#backers)
@ -23,23 +23,24 @@
<!--</a >-->
## Links
- [Home Page](http://element.eleme.io/)
- [Docs](http://element.eleme.io/#/component)
- Homepage and documentation
- International users: http://element.eleme.io/
- Chinese users: http://element-cn.eleme.io/
- [awesome-element](https://github.com/ElementUI/awesome-element)
- [FAQ](./FAQ.md)
- [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme)
- [Preview and generate theme online](https://elementui.github.io/theme-preview)
- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
- [Element for React](https://github.com/eleme/element-react)
- [Element for Angular](https://github.com/eleme/element-angular)
- [Atom helper](https://github.com/ElemeFE/element-helper)
- Starter Kit
- Starter kit
- [element-starter](https://github.com/ElementUI/element-starter)
- [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter)
- [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)
- [Design resources](https://github.com/ElementUI/Resources)
- [Design resources](https://github.com/ElementUI/Resources) (working in progress)
- Boilerplate for bug reports
- [CodePen](https://codepen.io/anon/pen/ozYpNA)
- [JSFiddle](https://jsfiddle.net/gmve9d3p/)
- [Mint UI](https://github.com/ElemeFE/mint-ui) - Mobile UI elements for Vue.js
## Install
```shell

7
build/bin/build-entry.js
View File

@ -8,7 +8,7 @@ var endOfLine = require('os').EOL;
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
var INSTALL_COMPONENT_TEMPLATE = ' {{name}}';
var MAIN_TEMPLATE = `/* Automatic generated by './build/bin/build-entry.js' */
var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */
{{include}}
import locale from 'element-ui/src/locale';
@ -31,6 +31,9 @@ const install = function(Vue, opts = {}) {
Vue.use(Loading.directive);
const ELEMENT = {};
ELEMENT.size = opts.size || '';
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
@ -38,6 +41,8 @@ const install = function(Vue, opts = {}) {
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
Vue.prototype.$ELEMENT = ELEMENT;
};
/* istanbul ignore if */

9
build/bin/gen-cssfile.js
View File

@ -2,7 +2,7 @@ var fs = require('fs');
var path = require('path');
var Components = require('../../components.json');
var themes = [
'theme-default'
'theme-chalk'
];
Components = Object.keys(Components);
var basepath = path.resolve(__dirname, '../../packages/');
@ -16,10 +16,11 @@ function fileExists(filePath) {
}
themes.forEach((theme) => {
var indexContent = '@import "./base.css";\n';
var isSCSS = theme !== 'theme-default';
var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n';
Components.forEach(function(key) {
if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;
var fileName = key + '.css';
var fileName = key + (isSCSS ? '.scss' : '.css');
indexContent += '@import "./' + fileName + '";\n';
var filePath = path.resolve(basepath, theme, 'src', fileName);
if (!fileExists(filePath)) {
@ -27,5 +28,5 @@ themes.forEach((theme) => {
console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');
}
});
fs.writeFileSync(path.resolve(basepath, theme, 'src', 'index.css'), indexContent);
fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent);
});

52
build/bin/gen-indices.js Normal file
View File

@ -0,0 +1,52 @@
'use strict';
const fs = require('fs');
const path = require('path');
const algoliasearch = require('algoliasearch');
const slugify = require('transliteration').slugify;
const key = require('./algolia-key');
const client = algoliasearch('9NLTR1QH8B', key);
['zh-CN', 'en-US'].forEach(lang => {
const indexName = lang === 'zh-CN' ? 'element-zh' : 'element-en';
const index = client.initIndex(indexName);
index.clearIndex(err => {
if (err) return;
fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {
if (err) return;
let indices = [];
files.forEach(file => {
const component = file.replace('.md', '');
const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');
const matches = content
.replace(/:::[\s\S]*?:::/g, '')
.replace(/```[\s\S]*?```/g, '')
.match(/#{2,4}[^#]*/g)
.map(match => match.replace(/\n+/g, '\n').split('\n').filter(part => !!part))
.map(match => {
const length = match.length;
if (length > 2) {
const desc = match.slice(1, length).join('');
return [match[0], desc];
}
return match;
});
indices = indices.concat(matches.map(match => {
const isComponent = match[0].indexOf('###') < 0;
const title = match[0].replace(/#{2,4}/, '').trim();
const index = { component, title };
index.ranking = isComponent ? 2 : 1;
index.anchor = slugify(title);
index.content = (match[1] || title).replace(/<[^>]+>/g, '');
return index;
}));
});
index.addObjects(indices, (err, res) => {
console.log(err, res);
});
});
});
});

2
build/bin/iconInit.js
View File

@ -3,7 +3,7 @@
var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-default/src/icon.css'), 'utf8');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
var nodes = postcss.parse(fontFile).nodes;
var classList = [];

16
build/bin/template.js Normal file
View File

@ -0,0 +1,16 @@
const path = require('path');
const templates = path.resolve(process.cwd(), './examples/pages/template');
const chokidar = require('chokidar');
let watcher = chokidar.watch([templates]);
watcher.on('ready', function() {
watcher
.on('change', function() {
exec('npm run i18n');
});
});
function exec(cmd) {
return require('child_process').execSync(cmd).toString().trim();
}

4
build/bin/version.js
View File

@ -1,6 +1,6 @@
var fs = require('fs');
var path = require('path');
var version = process.env.VERSION || require('../../package.json').version;
var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3' };
if (!content[version]) content[version] = '1.4';
var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.8': '1.4' };
if (!content[version]) content[version] = '2.0';
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

2
build/config.js
View File

@ -2,7 +2,7 @@ var path = require('path');
var fs = require('fs');
var nodeExternals = require('webpack-node-externals');
var Components = require('../components.json');
var saladConfig = require('../packages/theme-default/salad.config.json');
var saladConfig = require('./salad.config.json');
var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));

4
build/cooking.common.js
View File

@ -14,5 +14,9 @@ cooking.set({
cooking.add('output.filename', 'element-ui.common.js');
cooking.add('loader.js.exclude', config.jsexclude);
cooking.add('loader.scss', {
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
});
cooking.add('vue.preserveWhitespace', false);
module.exports = cooking.resolve();

4
build/cooking.component.js
View File

@ -15,5 +15,9 @@ cooking.set({
cooking.add('output.filename', '[name].js');
cooking.add('loader.js.exclude', config.jsexclude);
cooking.add('loader.scss', {
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
});
cooking.add('vue.preserveWhitespace', false);
module.exports = cooking.resolve();

4
build/cooking.conf.js
View File

@ -14,5 +14,9 @@ cooking.set({
cooking.add('output.filename', 'index.js');
cooking.add('loader.js.exclude', config.jsexclude);
cooking.add('loader.scss', {
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
});
cooking.add('vue.preserveWhitespace', false);
module.exports = cooking.resolve();

10
build/cooking.demo.js
View File

@ -55,6 +55,11 @@ cooking.add('loader.md', {
loader: 'vue-markdown-loader'
});
cooking.add('loader.scss', {
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
});
cooking.add(
'output.chunkFilename',
isProd ? '[name].[chunkhash:7].js' : '[name].js'
@ -96,7 +101,8 @@ cooking.add('vueMarkdown', {
return '</div></demo-block>\n';
}
}],
[require('markdown-it-container'), 'tip']
[require('markdown-it-container'), 'tip'],
[require('markdown-it-container'), 'warning']
],
preprocess: function(MarkdownIt, source) {
MarkdownIt.renderer.rules.table_open = function() {
@ -110,7 +116,7 @@ cooking.add('vueMarkdown', {
var wrap = function(render) {
return function() {
return render.apply(this, arguments)
.replace('<code class="', '<code class="hljs ')
.replace('<code v-pre class="', '<code class="hljs ')
.replace('<code>', '<code class="hljs">');
};
};

23
build/cooking.test.js
View File

@ -10,29 +10,6 @@ cooking.set({
alias: Object.assign(config.alias, {
'vue$': 'vue/dist/vue.common.js'
}),
postcss: function(webapck) {
return [
require('postcss-salad')({
browsers: ['ie > 8', 'last 2 versions', 'Chrome > 24'],
features: {
'partialImport': {
addDependencyTo: webapck
},
'bem': {
'shortcuts': {
'component': 'b',
'modifier': 'm',
'descendent': 'e'
},
'separators': {
'descendent': '__',
'modifier': '--'
}
}
}
})
];
},
sourceMap: '#inline-source-map'
});

16
build/deploy-ci.sh
View File

@ -22,11 +22,11 @@ if [ "$TRAVIS_TAG" ]; then
git push origin master --tags
cd ../..
# build theme-default
# build theme-chalk
cd temp_web
git clone https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
git clone https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
rm -rf *
cp -rf ../../packages/theme-default/** .
cp -rf ../../packages/theme-chalk/** .
git add -A .
git commit -m "[build] $TRAVIS_TAG"
git tag $TRAVIS_TAG
@ -39,10 +39,8 @@ if [ "$TRAVIS_TAG" ]; then
git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
# build sub folder
echo $TRAVIS_TAG
export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
echo $SUB_FOLDER
SUB_FOLDER='1.4'
SUB_FOLDER='2.0'
mkdir $SUB_FOLDER
rm -rf *.js *.css *.map static
rm -rf $SUB_FOLDER/**
@ -69,11 +67,11 @@ git commit -m "$TRAVIS_COMMIT_MSG"
git push origin master
cd ../..
# push dev theme-default
# push dev theme-chalk
cd temp_web
git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
rm -rf *
cp -rf ../../packages/theme-default/** .
cp -rf ../../packages/theme-chalk/** .
git add -A .
git commit -m "$TRAVIS_COMMIT_MSG"
git push origin $TRAVIS_BRANCH

3
build/deploy-faas.sh
View File

@ -5,9 +5,8 @@ cd temp_web
git clone -b gh-pages https://github.com/ElemeFE/element.git && cd element
# build sub folder
SUB_FOLDER='1.4'
SUB_FOLDER='2.0'
mkdir $SUB_FOLDER
rm -rf *.js *.css *.map static
rm -rf $SUB_FOLDER/**
cp -rf ../../examples/element-ui/** .

4
build/release.sh
View File

@ -16,8 +16,8 @@ then
VERSION=$VERSION npm run dist
# publish theme
echo "Releasing theme-default $VERSION ..."
cd packages/theme-default
echo "Releasing theme-chalk $VERSION ..."
cd packages/theme-chalk
npm version $VERSION --message "[release] $VERSION"
if [[ $VERSION =~ "beta" ]]
then

0
packages/theme-default/salad.config.json → build/salad.config.json
View File

7
components.json
View File

@ -62,5 +62,10 @@
"collapse-item": "./packages/collapse-item/index.js",
"cascader": "./packages/cascader/index.js",
"color-picker": "./packages/color-picker/index.js",
"transfer": "./packages/transfer/index.js"
"transfer": "./packages/transfer/index.js",
"container": "./packages/container/index.js",
"header": "./packages/header/index.js",
"aside": "./packages/aside/index.js",
"main": "./packages/main/index.js",
"footer": "./packages/footer/index.js"
}

109
examples/app.vue
View File

@ -7,21 +7,44 @@
margin: 0;
padding: 0;
height: 100%;
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
&.is-component {
overflow: hidden;
}
}
#app {
height: 100%;
}
@when component {
overflow-y: hidden;
body {
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
overflow: auto;
font-weight: 400;
-webkit-font-smoothing: antialiased;
.main-cnt {
padding: 0;
margin-top: 0;
height: 100%;
min-height: auto;
}
.headerWrapper {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 1500;
.container {
padding: 0;
}
}
}
}
a {
color: #4078c0;
color: #409EFF;
text-decoration: none;
}
@ -44,7 +67,7 @@
font-family: Menlo, Monaco, Consolas, Courier, monospace;
font-size: 12px;
padding: 18px 24px;
background-color: #f9fafc;
background-color: #fafafa;
border: solid 1px #eaeefb;
margin-bottom: 25px;
border-radius: 4px;
@ -53,7 +76,7 @@
.main-cnt {
margin-top: -80px;
padding: 80px 0 120px;
padding: 80px 0 340px;
box-sizing: border-box;
min-height: 100%;
}
@ -61,7 +84,7 @@
.container,
.page-container {
width: 1140px;
padding: 0 30px;
padding: 0;
margin: 0 auto;
}
@ -107,10 +130,23 @@
background-color: #ECF8FF;
border-radius: 4px;
border-left: #50bfff 5px solid;
margin-top: 20px;
margin: 20px 0;
code {
background-color: rgba(#fff, .7);
background-color: rgba(255, 255, 255, .7);
color: #445368;
}
}
.warning {
padding: 8px 16px;
background-color: #fff6f7;
border-radius: 4px;
border-left: #FE6C6F 5px solid;
margin: 20px 0;
code {
background-color: rgba(255, 255, 255, .7);
color: #445368;
}
}
@ -118,7 +154,6 @@
.demo {
margin: 20px 0;
}
@media (max-width: 1140px) {
.container,
.page-container {
@ -131,16 +166,20 @@
.page-container {
padding: 0 20px;
}
#app.is-component .headerWrapper .container {
padding: 0 12px;
}
}
</style>
<template>
<div id="app">
<div id="app" :class="{ 'is-component': isComponent }">
<main-header v-if="lang !== 'play'"></main-header>
<div class="main-cnt">
<router-view></router-view>
</div>
<main-footer v-if="lang !== 'play'"></main-footer>
<main-footer v-if="lang !== 'play' && !isComponent"></main-footer>
</div>
</template>
@ -156,6 +195,9 @@
computed: {
lang() {
return this.$route.path.split('/')[1] || 'zh-CN';
},
isComponent() {
return /^component-/.test(this.$route.name || '');
}
},
@ -168,48 +210,11 @@
methods: {
localize() {
use(this.lang === 'zh-CN' ? zhLocale : enLocale);
},
renderAnchorHref() {
if (/changelog/g.test(location.href)) return;
const anchors = document.querySelectorAll('h2 a,h3 a');
const basePath = location.href.split('#').splice(0, 2).join('#');
[].slice.call(anchors).forEach(a => {
const href = a.getAttribute('href');
a.href = basePath + href;
});
},
goAnchor() {
if (location.href.match(/#/g).length > 1) {
const anchor = location.href.match(/#[^#]+$/g);
if (!anchor) return;
const elm = document.querySelector(anchor[0]);
if (!elm) return;
setTimeout(_ => {
document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120;
}, 50);
}
}
},
mounted() {
this.localize();
this.renderAnchorHref();
this.goAnchor();
},
created() {
window.addEventListener('hashchange', () => {
if (location.href.match(/#/g).length < 2) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
this.renderAnchorHref();
} else {
this.goAnchor();
}
});
}
};
</script>

556
examples/assets/images/banner-bg.svg
View File

@ -1,556 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="568px" height="507px" viewBox="0 0 568 507" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_illustration</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0.172590677,23.6485671 L0.42612487,5.77688935 L16.8540329,0.0294293998 C16.8540329,0.0294293998 15.177854,1.93690856 14.7900681,3.04976293 C12.4344075,9.8099545 8.62369332,23.6485672 8.62369332,23.6485672 L12.4503267,50.5104432 L6.77057777,52.869339 L0.172590677,23.6485671 Z" id="path-1"></path>
<path d="M0.50165759,9.70533955 C0.50165759,6.98052183 2.76494799,3.85642502 4.24369921,2.10604949 C4.96116228,1.25679927 6.79457103,1.34458247 6.79457103,1.34458247 C6.79457103,1.34458247 14.3103209,-0.421861028 18.1620961,0.730924858 C22.8270631,2.12708837 31.0441705,8.37777304 31.0441705,8.37777304 L31.0441705,12.3253024 L32.4964571,25.8307437 C32.555656,26.3812599 32.1792224,26.7158395 31.6448531,26.5752017 L19.8473817,23.4702876 L3.10426007,18.5661795 C3.10426007,18.5661795 0.50165759,13.752189 0.50165759,9.70533955 Z" id="path-3"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0431372549 0 0 0 0 0.325490196 0 0 0 0 0.654901961 0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M2.19875271,28.4418279 L3.86287255,27.3843007 L6.00303843,26.0242524 L12.3564954,21.9867108 C12.8199515,21.6921903 13.2299841,21.0067545 13.2727227,20.4506211 L14.6860304,2.06005034 C14.7706085,0.959484285 15.6971156,0.305616758 16.7589871,0.600581073 L22.4471523,2.18062709 C22.4471523,2.18062709 19.490047,15.5881641 17.4849039,21.8866814 C17.1024344,23.0880871 10.8227555,24.3985444 10.8227555,24.3985444 C10.2887808,24.518499 10.3004206,24.5815937 10.8442251,24.5911455 C10.8442251,24.5911455 11.4579499,24.2941008 15.9345701,25.5864254 C20.4111904,26.8787501 23.0420277,28.6605191 23.0420277,28.6605191 C23.5152035,28.9490808 23.617099,28.8328455 23.2761666,28.3987505 C23.2761666,28.3987505 19.3560675,23.6520346 20.0569902,22.4715851 C20.8897111,21.0691694 21.9010058,19.2755192 22.9498965,17.3732235 C26.1042698,11.652369 29.5986652,4.94891231 29.5986652,4.94891231 C29.5986652,4.94891231 29.7107135,4.94887078 29.9094828,4.95967229 C30.9942045,5.01861815 34.6615557,5.40047936 36.7953331,7.87421481 C39.3201135,10.8012488 38.2266685,14.5788175 38.2266685,14.5788175 C38.2266685,14.5788175 42.5812294,18.9778511 40.2515442,23.8137714 C37.921859,28.6496917 33.2744095,26.6149704 33.2744095,26.6149704 C33.2744095,26.6149704 30.9601231,25.2560818 29.852942,26.6149701 C28.9073415,27.775544 28.470517,27.5861458 28.4060007,29.1830071 C28.2854326,32.1672236 28.3770127,36.7431881 28.3770127,36.7431881 C28.3930228,37.8450485 27.6523336,38.2394478 26.7260907,37.6446122 C26.7260907,37.6446122 18.8318554,32.2240559 11.6465746,30.2807614 C4.4612938,28.3374669 1.23580654,29.7833552 1.23580654,29.7833552 C0.169460637,30.0580646 0.0653116146,29.7976027 0.988314829,29.2110458 L2.19875271,28.4418279 Z" id="path-6"></path>
<path d="M30.7057243,18.9325412 L38.1357241,18.9325412 L38.1357241,27.8766294 C38.1357241,27.8766294 38.5162616,29.2690566 35.2086449,29.8766291 C31.9010282,30.4842017 31.6674262,30.0990066 31.6674262,30.0990066 C31.1362929,29.9761909 30.7057243,29.4340532 30.7057243,28.8666523 L30.7057243,18.9325412 Z" id="path-8"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-9">
<feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.996078431 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<linearGradient x1="64.8554444%" y1="50%" x2="64.8554466%" y2="100%" id="linearGradient-10">
<stop stop-color="#1D5A90" offset="0%"></stop>
<stop stop-color="#0D4372" offset="100%"></stop>
</linearGradient>
<polygon id="path-11" points="61 21 335.540789 102.890039 335.540802 506.637756 61 424.528974"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-12">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.870588235 0 0 0 0 0.898039216 0 0 0 0 0.956862745 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-13"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-14">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.596078431 0 0 0 0 0.741176471 0 0 0 0 0.952941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-15"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-16">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M54.5141339,50.0541547 L67.0333492,47.095196 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.1967468,18.0347958 C55.0508728,18.571516 55.929142,21.0423924 55.929142,22.7188969 L55.929142,46.8712959 C55.929142,48.5209333 55.5199636,50.6291097 53.471927,50.0308699" id="path-17"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-18">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0194380412 0 0 0 0 0.303028282 0 0 0 0 0.561410502 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M54.5141339,50.0541547 L67.0333492,47.095196 L67.0860961,47.0808669 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.471927,17.9157796 C55.4017377,18.4781967 56.3020736,21.0789279 56.3020736,22.7554324 L56.3020736,46.8426457 C56.3020736,48.492283 55.5199636,50.6291097 53.471927,50.0308699" id="path-19"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-20">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M6.98591477,5.788899 C3.14429572,8.41812349 1.01086715,13.3604908 1.00181953,17.8179602 L1.00181953,25.9085725 C1.08686715,27.0723276 1.3872481,28.0924092 1.94096239,29.0999194 C2.02239096,29.2489806 1.99886715,29.4303684 1.88667667,29.5596745 C1.43791477,30.0679194 1.15743858,30.6192663 0.99639096,31.2999194 L1.00181953,46.0336337 C1.08686715,47.1973888 1.3872481,48.2174704 1.94096239,49.2267766 C1.43791477,50.1929806 1.15743858,50.7443276 0.99639096,51.4249806 L1.00181953,66.1586949 C1.08686715,67.32245 1.3872481,68.3443276 1.94096239,69.3518378 C1.43791477,70.3180419 1.15743858,70.8693888 0.99639096,71.5500419 L1.00181953,86.2837561 C1.08686715,87.4475112 1.3872481,88.4693888 1.94096239,89.476899 C1.43791477,90.4431031 1.15743858,90.99445 0.99639096,91.676899 L1.00181953,106.408817 C1.08686715,107.572572 1.3872481,108.59445 1.94096239,109.60196 C2.02239096,109.751021 1.99886715,109.932409 1.88667667,110.061715 C1.43791477,110.56996 1.15743858,111.121307 0.99639096,111.80196 L1.00181953,126.535675 C1.08686715,127.69943 1.3872481,128.719511 1.94096239,129.728817 C1.43791477,130.695021 1.15743858,131.246368 0.99639096,131.927021 L1.00181953,146.660736 C1.08686715,147.824491 1.3872481,148.846368 1.94096239,149.853879 C1.43791477,150.820083 1.15743858,151.37143 0.99639096,152.052083 L1.00181953,170.442287 C1.00181953,172.554287 2.42772429,174.529797 4.52315286,174.894368 C4.93210525,174.966205 5.33201001,174.973389 5.74458144,174.915919 C7.91058144,174.619593 9.41791477,172.599185 9.41791477,170.427919 L9.41791477,17.8179602 C9.42877191,16.0992663 10.4041052,12.9186949 12.4452481,12.3386133 C12.4452481,12.3368174 28.9408672,8.40734798 28.9408672,8.40734798 C29.6284862,8.24391941 29.8094386,9.17959288 29.8962957,9.75787859 C29.9198195,9.91591941 29.8962952,10.3005438 29.8962952,10.3005438 L38.420963,12.8788443 L38.4209624,10.9072663 C38.4535338,4.556899 33.8464862,-1.3875908 26.9757243,0.286205122 L10.4819148,4.21567451" id="path-21"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-23">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M0.00542857143,23.7750868 L0.00542857143,17.8179602 C0.0144761905,13.3604908 2.14790476,8.41812349 5.98952381,5.788899 L9.48552381,4.21567451 L25.9793333,0.286205122 C32.8500952,-1.3875908 37.4571429,4.556899 37.4245714,10.9072663 L37.424572,13.2903538 L28.8999043,10.7727194 C28.8999043,10.7727194 28.9234286,9.91591941 28.8999048,9.75787859 C28.8130476,9.17959288 28.6320952,8.24391941 27.9444762,8.40734798 C27.9444762,8.40734798 11.4488571,12.3368174 11.4488571,12.3386133 C9.40771429,12.9186949 8.43238095,16.0992663 8.42152381,17.8179602 L8.42152381,170.427919 C8.42152381,172.599185 6.91419048,174.619593 4.74819048,174.915919 C4.33561905,174.973389 3.93571429,174.966205 3.5267619,174.894368 C1.43133333,174.529797 0.00542857143,172.554287 0.00542857143,170.442287 L0.000803798701,154.775087 L0,154.775087 L0,23.7750868 L0.00542857143,23.7750868 Z" id="path-24"></path>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-26"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-28">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-29"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-31">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-32"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-34">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-35"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-37">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-38"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-40">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-41"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-43">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-44"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-46">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-47" points="68 22.9128354 80.3746586 20 80.3746586 44.1524906 68 47.0336895"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-48">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-49" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-50">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-51" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-52">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-53" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-54">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-55"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-56">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-57"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-58">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-59" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-60">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-61" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-62">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-63" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-64">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-65" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-66">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.596078431 0 0 0 0 0.741176471 0 0 0 0 0.952941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-67" points="74 426.153107 74 22.0126982 86.2405882 19.0151402 86.2405882 423.355225"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-68">
<feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0258801644 0 0 0 0 0.257757552 0 0 0 0 0.46917517 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-69"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-70">
<feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0431372549 0 0 0 0 0.309803922 0 0 0 0 0.552941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-71"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-72">
<feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0431372549 0 0 0 0 0.309803922 0 0 0 0 0.552941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M0.502950308,30.6485671 C-0.480505421,23.1596051 0.502950301,0 0.502950301,0 L16.2911244,8.0660162 C16.2911244,8.0660162 13.5620575,9.19587032 13.4729521,9.76633142 C13.184641,11.6121269 12.4980011,16.0662639 11.8537478,20.6838739 C11.3498755,24.2953196 10.8719305,28.0067592 10.6307512,30.6485671 C9.9858933,37.7121522 14.3060851,59.0973612 14.3060851,59.0973612 C14.3060851,59.0973612 14.9984979,60.9080209 11.2756091,61.5152334 C7.55272035,62.1224458 6.54182177,59.9181579 6.54182177,59.9181579 C6.54182177,59.9181579 1.48640604,38.137529 0.502950308,30.6485671 Z" id="path-73"></path>
<path d="M16.0400649,4.52725302 C9.49659066,2.50714082 2.45854027,1.08555158 2.1308986,0.873127833 C1.29884527,0.333672988 1.45520269,1.46410902 1.24327259,2.65039743 C1.05123062,3.72536106 0.436776451,4.83437071 0.730498906,5.0068793 C1.02138597,5.17772262 8.71912312,7.27225564 15.414447,9.17594001 C22.9404305,11.3158062 27.6226195,12.8946482 28.9166224,13.1268049 C30.2106254,13.3589615 30.7998202,12.0568691 30.7998202,12.0568691 L30.7998202,8.07228044 C30.7998202,8.07228044 30.7387912,9.03862894 29.8405669,9.17594007 C29.4520991,9.23532496 28.844309,9.00429748 28.1212226,8.69753354 C26.9997129,8.22174154 21.8025217,6.3062482 16.0400649,4.52725302 Z" id="path-75"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-77">
<feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.208583872 0 0 0 0 0.318645032 0 0 0 0 0.451477466 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M6.99999981,19.2232717 C6.99999981,19.2232717 5.06975199,19.0511389 3.35874473,18.6378029 C2.11803891,18.3380799 0.700774671,18.6378029 0.728358772,16.3886121 C0.735315134,15.8213947 1.28019993,9.67917315 2.83395758,5.56866066 C4.06722125,2.3060246 6.44561296,1.2310278 6.44561296,1.2310278 C7.36973909,0.624436813 8.99503694,0.299150142 10.0867942,0.506565091 L17.0861493,1.83632126 L20.6771876,2.84615544 L24.5986652,3.94891231 L36.852942,7.3949317 L36.8529415,42.8282355 C36.8529415,43.9324216 35.9930002,44.5609098 34.9449571,44.2380744 C34.9449571,44.2380744 26.8215033,41.6983288 19.6362225,39.7550343 C12.4509417,37.8117398 8.40552583,37.201245 8.40552583,37.201245 C7.31979847,37.0100499 6.46820112,35.9564527 6.50337708,34.8496321 L6.99999981,19.2232717 Z" id="path-78"></path>
<path d="M36.9899902,15 L44.4199901,15 L44.4199901,23.9440883 C44.4199901,23.9440883 44.8005276,25.3365154 41.4929109,25.944088 C38.1852942,26.5516605 37.9516921,26.1664655 37.9516921,26.1664655 C37.4205588,26.0436498 36.9899902,25.5015121 36.9899902,24.9341111 L36.9899902,15 Z" id="path-80"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-81">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.996078431 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_illustration">
<g id="轮子" transform="translate(14.000000, 380.000000)">
<path d="M50.6255266,60.8301496 C62.7757911,60.8301496 72.6255266,57.3668702 72.6255266,53.0946984 C72.6255266,48.8225267 62.7757911,45.3592472 50.6255266,45.3592472 C38.4752621,45.3592472 28.6255266,48.8225267 28.6255266,53.0946984 C28.6255266,57.3668702 38.4752621,60.8301496 50.6255266,60.8301496 Z" id="Oval" fill="#E2ECFA" opacity="0.550839552" transform="translate(50.625527, 53.094698) rotate(-10.000000) translate(-50.625527, -53.094698) "></path>
<path d="M10.998595,8.9991166 L22.9120756,6.29683803 C25.0715612,5.82569928 27.4583747,5.67767867 29.5758172,6.29683802 C39.7578873,9.14533206 44.9668086,20.7147518 46.4753121,29.916955 C47.3138222,35.032051 47.1205701,38.9292082 45.4426689,43.9366369 C43.9176517,48.489173 40.5736382,53.2647085 35.2620696,54.7021088 L22.4954669,58.1961107" id="Stroke-3" fill="#CCE7FF" transform="translate(28.979037, 32.041110) rotate(-150.000000) translate(-28.979037, -32.041110) "></path>
<path d="M21.4710018,39.0199931 C20.9910513,45.1728716 21.6331472,50.2815336 25.2803384,55.5804462 C28.7610603,60.6393836 34.2372519,63.0672411 40.3317581,61.6036084 C51.8030067,58.8492981 58.3839492,45.3739319 59.1925144,35.0052722 C59.6724648,28.8523937 59.0303689,23.7415698 55.3831778,18.4448191 C51.9024559,13.3858817 46.4262643,10.9580242 40.3317581,12.4216569 C28.8605094,15.1759672 22.279567,28.6513334 21.4710018,39.0199931 Z" id="Page-1-Copy" fill="#80A8E1"></path>
<path d="M43,16.9550856 C33.3400012,19.2745048 27.7981549,30.6221816 27.1172579,39.3536845 C26.713089,44.5350559 27.2538014,48.837087 30.3251203,53.2993292 C33.2562545,57.559487 37.8677843,59.6039986 43,58.3714658 C52.6599988,56.0520466 58.2018451,44.7043698 58.8827421,35.9728669 C59.286911,30.7914955 58.7461986,26.4876438 55.6748797,22.0272222 C52.7437455,17.7670644 48.1322157,15.7225528 43,16.9550856 L43,16.9550856 Z" id="Page-1" fill="#9BBBE8"></path>
<path d="M48.1057253,16.8410994 L46.8257889,16.4738938 C44.6950385,15.8780845 42.7500553,15.845684 40.6007281,16.3676921 C31.7860718,18.4197239 26.2836457,27.8212696 24.806796,35.4875884 C23.3299464,43.1539072 24.9721289,54.5138832 34.3756674,57.212125 L37.2662059,58.0419379 L37.5578605,58.1265392 C37.3877757,58.0825026 37.219039,58.0346482 37.0517099,57.9830279 C34.4831595,57.1906417 32.2462824,55.5108923 30.5562926,53.1314618 C27.4242567,48.7213935 26.8725279,44.4661275 27.2849312,39.3432481 C27.9778431,30.7103144 33.634456,19.4907405 43.4912666,17.197505 C45.3693736,16.7600982 47.1806043,16.7402979 48.867371,17.0895033" id="Page-1" fill="#C0DBF8"></path>
</g>
<g id="lady" transform="translate(0.000000, 318.000000)">
<g id="鞋子" transform="translate(0.000000, 122.000000)">
<path d="M22.5665213,1.52463221 L28.4753678,2.56652127 L27.2451873,9.54322165 C27.2451873,9.54322165 26.2284251,10.9035575 24.0274738,10.5154704 C21.8265224,10.1273833 21.3363408,8.50133258 21.3363408,8.50133258 L22.5665213,1.52463221 Z" id="Combined-Shape" fill="#FFCFC7"></path>
<path d="M3.56652127,0.524632208 L9.47536779,1.56652127 L8.24518728,8.54322165 C8.24518728,8.54322165 7.22842512,9.90355751 5.02747376,9.5154704 C2.82652239,9.12738329 2.29245931,7.75019664 2.29245931,7.75019664 L3.56652127,0.524632208 Z" id="Combined-Shape" fill="#FFBFBA"></path>
<path d="M23.1902933,17.4944426 C22.8936345,17.9555283 23.0418011,18.5447066 23.5473145,18.7725944 C23.5473145,18.7725944 26.5428133,20.8326334 28.7814677,17.319668 C29.8973272,15.5686269 35.1843376,13.6808502 36.6471005,12.8126659 C38.1189549,11.9390857 38.6198239,10.7291535 38.921474,9.67606089 C39.522911,7.57638057 37.2657576,7.62931993 37.2657576,7.62931993 L33.0163855,8.51218889 C33.0163855,8.51218889 33.5978086,11.1422851 32.0651911,11.865543 C30.5325736,12.5888008 28.4769108,12.4323038 28.4769108,12.4323038 L26.399411,13.4531312 C25.9076031,13.6947923 25.2654328,14.2691311 24.9717658,14.7255668 L23.1902933,17.4944426 Z" id="Path-3" fill="#EFF5FD" transform="translate(31.030938, 13.500993) rotate(7.000000) translate(-31.030938, -13.500993) "></path>
<path d="M4.19029329,15.4944426 C3.89363446,15.9555283 4.04180112,16.5447066 4.54731452,16.7725944 C4.54731452,16.7725944 7.54281334,18.8326334 9.78146771,15.319668 C10.8973272,13.5686269 16.1843376,11.6808502 17.6471005,10.8126659 C19.1189549,9.93908573 19.6198239,8.72915347 19.921474,7.67606089 C20.522911,5.57638057 18.2657576,5.62931993 18.2657576,5.62931993 L14.0163855,6.51218889 C14.0163855,6.51218889 14.5978086,9.14228512 13.0651911,9.86554297 C11.5325736,10.5888008 9.47691082,10.4323038 9.47691082,10.4323038 L7.39941096,11.4531312 C6.90760311,11.6947923 6.26543281,12.2691311 5.97176575,12.7255668 L4.19029329,15.4944426 Z" id="Path-3-Copy" fill="#EFF5FD" transform="translate(12.030938, 11.500993) rotate(7.000000) translate(-12.030938, -11.500993) "></path>
<path d="M1.1086333,14.1724794 C1.1086333,14.7243742 1.49150785,15.3865823 1.99143197,15.6177232 C1.99143197,15.6177232 5.09755,17.7503653 7.33620438,14.2373998 C8.45206387,12.4863587 10.8833052,11.9567362 12.3460681,11.088552 C13.8179225,10.2149718 14.3187914,9.00503952 14.6204416,7.95194694 C15.2218786,5.85226663 12.9647252,5.90520598 12.9647252,5.90520598 L8.66936645,6.93947384 C8.66936645,6.93947384 9.29677619,9.41817118 7.76415869,10.141429 C6.97610138,10.5133213 5.80520989,11.2353857 4.04659154,11.0885519 C2.28797318,10.941718 1.89416703,10.335851 1.89416703,10.335851 C1.46032873,9.9976692 1.1086333,10.1693722 1.1086333,10.7228126 L1.1086333,14.1724794 Z" id="Path-3" fill="#3E0F3F" transform="translate(7.915491, 11.082045) rotate(9.000000) translate(-7.915491, -11.082045) "></path>
<path d="M20.218804,16.2536191 C20.218804,16.8070611 20.6074601,17.4711091 21.1129735,17.6989969 C21.1129735,17.6989969 24.1084723,19.7590359 26.3471267,16.2460704 C27.4629862,14.4950293 29.8942275,13.9654068 31.3569904,13.0972226 C32.8288448,12.2236424 33.3297138,11.0137101 33.6313639,9.96061756 C34.2328009,7.86093724 31.9756475,7.9138766 31.9756475,7.9138766 L27.7262754,8.79674556 C27.7262754,8.79674556 28.3076985,11.4268418 26.775081,12.1500996 C25.2424635,12.8733575 23.1868007,12.7168604 23.1868007,12.7168604 L21.1578967,11.937941 C20.6392501,11.7388266 20.218804,12.0229793 20.218804,12.579508 L20.218804,16.2536191 Z" id="Path-3" fill="#613F62" transform="translate(26.976037, 13.016990) rotate(9.000000) translate(-26.976037, -13.016990) "></path>
</g>
<g id="下半身" transform="translate(2.000000, 52.000000)">
<polygon id="Rectangle-16" fill="#FFBFBA" transform="translate(9.171588, 43.673843) scale(-1, 1) translate(-9.171588, -43.673843) " points="4.91415179 42.0699344 1.32755844 15.336998 14.6157168 18.0169454 12.3098542 42.0699351 14.6770872 57.4907494 17.0156182 72.0106888 10.908393 71.6553877"></polygon>
<g id="Path-10" transform="translate(16.000000, 21.000000)">
<g id="Oval-3">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#FFCFC7" transform="translate(8.513312, 26.449384) scale(-1, 1) translate(-8.513312, -26.449384) " xlink:href="#path-1"></use>
<circle fill="#FFBFBA" mask="url(#mask-2)" transform="translate(17.067321, 24.067321) rotate(4.000000) translate(-17.067321, -24.067321) " cx="17.0673205" cy="24.0673205" r="2"></circle>
</g>
</g>
<g id="Rectangle-14">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
<use fill="#095DBF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<path d="M27.8203145,12.2265229 C27.4718612,8.86521816 31.3954126,8 31.3954126,8 L35,8 L35,29 L30.3264726,29 C30.3264726,29 28.1687678,15.5878277 27.8203145,12.2265229 Z" fill="#0B53A7" mask="url(#mask-4)"></path>
</g>
<path d="M14.5206212,18.6286037 C10.0060034,15.9131904 10.355923,10.6424186 10.355923,10.6424186 C10.355923,10.6424186 8.08724277,16.5302784 12.9309762,19.6571971 C14.3818233,20.5938053 16.7489087,21.734256 20.5422216,20.9799039 C21.8363554,20.7225478 18.2337334,20.8619342 14.5206212,18.6286037 Z" id="Path-11" fill="#0A52A7" transform="translate(15.318103, 15.933838) rotate(27.000000) translate(-15.318103, -15.933838) "></path>
</g>
<g id="上半身" transform="translate(5.000000, 25.000000)">
<path d="M28.6940497,37.2134314 C27.8012851,36.5593758 26.8072481,35.1783277 26.4691422,34.1140947 L21.7737477,19.3347221 C21.7737477,19.3347221 19.5151125,17.526373 23.264109,17.526373 C27.0131056,17.526373 27.6481859,16.2145894 27.6481859,16.2145894 L31.7944171,32.7133975 L43.3922272,44.2009182 C43.3922272,44.2009182 42.1197446,44.386172 41.4292954,44.594951 C40.902138,44.7543536 39.7394074,45.3054631 39.7394074,45.3054631 L28.6940497,37.2134314 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(32.245739, 30.760026) rotate(10.000000) translate(-32.245739, -30.760026) "></path>
<path d="M13.2871095,21.7578122 C15.5668959,18.5509753 18.1942608,10.9301248 18.1942608,10.9301248 L29.8281309,9.34344457 L27.1421856,28.0117575 C27.0636587,28.5575487 26.6134616,29.2125942 26.1184633,29.4848409 L24.8925522,30.159086 L8.88530077,25.6469678 C8.35461119,25.4973772 8.32190919,25.1652874 8.79641286,24.9063039 C8.79641286,24.9063039 12.3374689,23.0936139 13.2871095,21.7578122 Z" id="Rectangle-2" fill="#FFCFC7"></path>
<g id="Path-4">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="#FFFFFF" xlink:href="#path-6"></use>
<path d="M30.3221331,24.6612154 C29.7330509,23.7698271 29.3694036,22.4870451 29.3694036,22.4870451 L29.6520908,25.2753153 L30.3221331,27.1764032 L32.1810322,26.7415488 C32.1810322,26.7415488 30.9112154,25.5526036 30.3221331,24.6612154 Z" fill="#EFF5FD" mask="url(#mask-7)"></path>
</g>
<path d="M36.5653995,36.1204839 C35.687644,35.4474586 34.7057742,34.0510326 34.3676683,32.9867995 L29.6722738,18.2074269 C29.6722738,18.2074269 27.4136386,16.3990778 31.1626351,16.3990778 C34.9116317,16.3990778 35.546712,15.0872942 35.546712,15.0872942 L39.6929432,31.5861024 L51.2907533,43.073623 L48.5984304,45.3468977 L36.5653995,36.1204839 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(40.144266, 30.217096) rotate(10.000000) translate(-40.144266, -30.217096) "></path>
<path d="M54.9584948,47.5716106 L53.8492328,48.6876421 C53.5604399,48.9778812 53.2125017,48.9784671 53.0093922,48.7372037 C52.8747397,48.5774047 52.9279322,48.0844166 52.965611,47.7716312 L53.5219297,43.1685118 C53.5716138,42.7573062 53.2805595,42.3599765 52.8718132,42.3100299 C52.4631998,42.2600163 52.0916168,42.5762666 52.041916,42.9874052 L51.4282478,46.6028913 C51.396156,46.6928086 51.3273831,46.7083583 51.3196511,46.5873416 L51.1257341,42.0584408 C51.1257341,41.6441721 50.7771003,41.1380261 50.3653609,41.1380261 C49.9536215,41.1380261 49.6199001,41.4737762 49.6199001,41.8880449 L49.6052177,46.6224415 C49.6090587,46.6771082 49.5625506,46.6927416 49.5541036,46.6303586 L48.7664344,43.2012683 C48.6932385,42.7936111 48.4299763,42.2328671 48.0248548,42.3064981 C47.6196834,42.3801124 47.3505946,42.7937283 47.4237239,43.2012683 L48.0142795,47.5259155 C48.0148614,47.6029443 47.9892712,47.6468819 47.9528894,47.5482107 L47.0718782,45.1772212 C46.9340497,44.7868713 46.5078275,44.5594168 46.1198659,44.6980253 C45.7319709,44.8367007 45.5291774,45.2889482 45.6669559,45.6792312 L47.211386,50.7584667 C47.2194505,50.7865198 47.227964,50.8143051 47.2367269,50.8419565 C47.6686026,52.180036 48.9057496,53.1380261 50.3653609,53.1380261 C51.2998307,53.1380261 52.2704163,52.8064605 53.0092592,52.2361255 C53.8073305,51.7524939 56.363999,48.9856645 56.363999,48.9856645 C56.7520935,48.5951974 56.6941454,47.9972612 56.3059345,47.6067272 C55.9178399,47.216327 55.3465727,47.1811435 54.9584948,47.5716106 Z" id="iconfont-shou" fill="#FFCFC7" transform="translate(51.125734, 47.138026) scale(1, -1) rotate(44.000000) translate(-51.125734, -47.138026) "></path>
<path d="M22.7543392,13.0730385 C21.4492879,15.9068643 20.7248905,19.4136168 19.9677507,20.9096016 C18.2408987,24.3215796 17.3529984,24.8604759 17.3529984,24.8604759" id="Path-12" stroke="#FFBFBA" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.053669, 18.966757) rotate(7.000000) translate(-20.053669, -18.966757) "></path>
</g>
<g id="Rectangle-1456" transform="translate(34.427382, 24.575974) scale(-1, 1) rotate(-20.000000) translate(-34.427382, -24.575974) ">
<use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
<use fill="#FFBFBA" fill-rule="evenodd" xlink:href="#path-8"></use>
</g>
<g id="头" transform="translate(29.718434, 26.425748) rotate(26.000000) translate(-29.718434, -26.425748) translate(16.718434, 3.425748)">
<path d="M10,8.83136671 C10,4.50622231 13.5121654,1 17.8249998,1 L17.8249998,1 C22.1466279,1 25.6499996,4.50396035 25.6499996,8.83113908 L25.6499996,10.2335106 L25.6499996,12.6313763 C25.6499996,16.9554964 22.1378342,20.4608884 17.8249998,20.4608884 L17.8249998,20.4608884 C13.5033717,20.4608884 10,16.9591955 10,12.6295217 L10,8.83136671 Z" id="Mask" fill="#FFCFC7"></path>
<path d="M8.12616287,6.19131478 L23.3177958,7.57739004 L16.367781,42.5447082 C15.9369056,44.7125533 13.8929387,45.8788479 11.8080253,45.1516434 L3.67107574,42.3135275 C1.58366754,41.5854529 0.305490956,39.2454486 0.812141041,37.1040879 L8.12616287,6.19131478 Z" id="Rectangle-648" fill="url(#linearGradient-10)"></path>
<path d="M11.6812421,18.7463612 C16.6800594,18.7937594 23.7179263,10.3822989 24.7383933,6.77450066 C25.7588603,3.1667024 21.6815672,0.0320439684 16.297012,0.0320439684 C10.9124568,0.0320439684 7.85562995,4.59606619 7.85562995,7.99223472 C7.85562995,8.53856826 9.29379502,18.7237237 11.6812421,18.7463612 Z" id="Oval-24" fill="#1D5A90"></path>
<path d="M20,16 C21.1045695,16 20.3236227,15.9542812 20.3236227,14.5357995 C20.3236227,13.1173178 21.1045695,11 20,11 C18.8954305,11 18,12.1192881 18,13.5 C18,14.8807119 18.8954305,16 20,16 Z" id="Oval-2" fill="#FFBFBA"></path>
</g>
</g>
<g id="白色背景墙" transform="translate(118.000000, 0.000000)">
<g id="Rectangle-291">
<use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
<use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-11"></use>
</g>
<path d="M217.324845,66.6102349 C210.394808,69.0648935 212.014476,72.5604878 212.005429,77.0179572 L220.421524,77.0179572 C220.432381,75.2992633 219.347234,71.4116926 223.232513,70.4599518 C219.347234,71.4116926 236.356324,66.0319491 236.443181,66.6102349 C236.466705,66.7682757 226.036481,63.9019464 226.036481,63.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<path d="M256.324845,78.6102349 C250.384193,79.4679693 251.014476,84.5604878 251.005429,89.0179572 L259.421524,89.0179572 C259.432381,87.2992633 259.063665,83.5528001 261.920947,82.1573828 C258.035667,83.1091237 275.356324,78.0319491 275.443181,78.6102349 C275.466705,78.7682757 265.036481,75.9019464 265.036481,75.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<g id="Group-21" transform="translate(95.000000, 133.000000)">
<polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 71 21 71 44 3 24"></polygon>
<polygon id="Rectangle-3-Copy" fill="#C0DBF8" opacity="0.639458955" points="3.37286438 24 71 43.9434662 71 45.7272129 0 24.8664486"></polygon>
<polygon id="Rectangle-4" fill="#CCE7FF" points="0 0 3.4625074 1.0179419 3.4625074 24.0179419 0 24.9070677"></polygon>
</g>
<polygon id="Rectangle-1553" fill="#E2E9F5" points="11.9000244 0 347.343201 100 335.267925 103 0 2.84565806"></polygon>
<polygon id="Combined-Shape" fill="#C3D2EB" points="335 102.866152 347.339966 100 347.341035 503.283905 335 506.174164"></polygon>
<polygon id="shadow" fill="#E2ECFA" opacity="0.550839552" points="347 432.887124 449.782707 462.038067 347 502.380069"></polygon>
</g>
<g id="shadow" transform="translate(211.000000, 226.000000)" fill-opacity="0.200000018">
<polygon id="Rectangle-6" fill="#BCC4D1" points="28 7.10542736e-15 95 20.0580158 95 44.2405205 28 24.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BBC4D0" points="28 40 95 60.0580158 95 84.2405205 28 64.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="144 32 211 52.0580158 211 76.2405205 144 56.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="114 33 134 38.0580158 134 53.2405205 114 48.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="114 73 134 78.0580158 134 93.2405205 114 88.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="0 2 18 6.05801582 18 21.2405205 0 15.9945803"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="0 42 18 48.0580158 18 61.5267487 0 56.4029055"></polygon>
<polygon id="Rectangle-6" fill="#BBC4D0" points="145 72 212 92.0580158 212 116.24052 145 96.3199844"></polygon>
<path d="M55.2,120.028239 C57.107455,120.593277 58,123.206131 58,124.89045 L58,149.089935 C58,150.747262 57.2262211,152.892249 55.2,152.29302 L4.8,137.368085 C2.8907455,136.803046 2,134.190192 2,132.505874 L2,108.306388 C2,106.649061 2.77377892,104.502275 4.8,105.103303 L55.2,120.028239" id="Page-1" fill="#BBC4D0"></path>
<path d="M121.2,140.028239 C123.107455,140.593277 124,143.206131 124,144.89045 L124,169.089935 C124,170.747262 123.226221,172.892249 121.2,172.29302 L70.8,157.368085 C68.8907455,156.803046 68,154.190192 68,152.505874 L68,128.306388 C68,126.649061 68.7737789,124.502275 70.8,125.103303 L121.2,140.028239" id="Page-1" fill="#BBC4D0"></path>
</g>
<g id="checkbox1-1" transform="translate(200.000000, 207.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-13"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="checkbox3-1" transform="translate(200.000000, 248.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-15"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#D9EDFE"></path>
</g>
<g id="confirmbutton" transform="translate(200.000000, 320.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
<use fill="#0B66B8" fill-rule="evenodd" xlink:href="#path-17"></use>
</g>
<path d="M56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 Z" id="Page-1" fill="#157AD6"></path>
</g>
<g id="cancelbutton" transform="translate(266.000000, 340.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-19"></use>
</g>
<path d="M53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="梯子" transform="translate(315.000000, 53.000000)">
<path d="M54.0848059,44.7867802 C54.0577014,44.6570069 54.0296142,44.5190045 54,44.3713422 L54,42.331311 L23.7883587,33.2354055 C23.6638166,33.2036099 23.5422496,33.1864407 23.4215236,33.1827845 L23.4215238,24 L15.0054286,24 L15.0054286,28.1820398 L15,28.1820398 L15,164.18204 L15.0017558,164.18204 L15.0054286,176.624327 C15.0054286,178.736327 16.4313333,180.711837 18.5267619,181.076408 C18.9357143,181.148245 19.335619,181.155429 19.7481905,181.097959 C21.9141905,180.801633 23.4215238,178.781224 23.4215238,176.609959 L23.4215238,162.752326 L54,171.92102 L54,170.430952 L54.0054286,188.624327 C54.0054286,190.736327 55.4313333,192.711837 57.5267619,193.076408 C57.9357143,193.148245 58.335619,193.155429 58.7481905,193.097959 C60.9141905,192.801633 62.4215238,190.781224 62.4215238,188.609959 L62.4215238,36 L54.0054286,36 L54.0054286,44.0906122 C54.022798,44.3282887 54.0491493,44.5599724 54.0848059,44.7867802 Z M54.5064352,46.3500296 C54.5640446,46.5006767 54.6278024,46.6488138 54.7009815,46.8030432 C54.6307598,46.6529087 54.565952,46.5020457 54.5064352,46.3500296 Z M54.9922085,47.4954176 C54.9639742,47.59234 54.9255935,47.6751334 54.8791834,47.7543362 C54.8828727,47.7501259 54.8865734,47.7459186 54.8902857,47.7417143 C54.9519257,47.6706706 54.9868003,47.5839053 54.9922085,47.4954176 Z M54.0829305,49.176864 C54.0552095,49.2546599 54.0275328,49.3374152 54,49.4256254 L54,50.9156935 L23.4215238,41.7469995 L23.4215238,53.1827873 C23.5422496,53.1864407 23.6638166,53.2036099 23.7883587,53.2354055 L54,62.331311 L54,64.3713422 C54.0124132,64.4332368 54.0245581,64.4934341 54.0364747,64.5520395 C54.0240563,64.4412008 54.0137193,64.3291198 54.0054286,64.2156735 L54,49.4819592 C54.0247611,49.3773085 54.0523454,49.2757146 54.0829305,49.176864 Z M54.4527177,68.3795845 C54.3086063,68.6174614 54.1521077,68.9382999 54,69.4256254 L54,70.9156935 L23.4215238,61.7469995 L23.4215238,73.1827873 C23.5422496,73.1864407 23.6638166,73.2036099 23.7883587,73.2354055 L54,82.331311 L54,84.3713422 C54.0043085,84.3928252 54.0085847,84.4141038 54.0128302,84.4351822 C54.0102039,84.4038025 54.0077369,84.3723209 54.0054286,84.3407347 L54,69.6070204 C54.0984366,69.190987 54.2414915,68.8232622 54.4527177,68.3795845 Z M54.6837009,88.0385738 C54.4882145,88.3061196 54.2387006,88.660872 54,89.4256254 L54,90.9156935 L23.4215238,81.7469995 L23.4215238,93.1827873 C23.5422496,93.1864407 23.6638166,93.2036099 23.7883587,93.2354055 L54,102.331311 L54,104.371342 C54.0018069,104.380352 54.0036081,104.389325 54.0054037,104.398263 L54,89.7320816 C54.1307623,89.1794268 54.340259,88.7120182 54.6837009,88.0385738 Z M54.9366579,107.644507 C54.7519518,108.047312 54.3634419,108.261223 54,109.425625 L54,110.915693 L23.4215238,101.747 L23.4215238,113.182787 C23.5422496,113.186441 23.6638166,113.20361 23.7883587,113.235406 L54,122.331311 L54,124.371342 C54.0017914,124.380274 54.0035772,124.389171 54.0053575,124.398033 L54,109.858939 C54.1610476,109.17649 54.4415238,108.625143 54.9445714,107.658939 C54.9419278,107.654129 54.93929,107.649318 54.9366579,107.644507 Z M54.9042222,127.709721 C54.7091069,128.073845 54.3433659,128.325543 54,129.425625 L54,130.915693 L23.4215238,121.747 L23.4215238,133.182787 C23.5422496,133.186441 23.6638166,133.20361 23.7883587,133.235406 L54,142.331311 L54,144.371342 C54.0017757,144.380196 54.0035459,144.389015 54.0053107,144.3978 L54,129.984 C54.1610476,129.303347 54.4415238,128.752 54.8902857,128.243755 C55.0024762,128.114449 55.026,127.933061 54.9445714,127.784 C54.930969,127.75925 54.9175194,127.734491 54.9042222,127.709721 Z M54.8693965,147.770793 C54.6676741,148.105139 54.3238831,148.387963 54,149.425625 L54,150.915693 L23.4215238,141.747 L23.4215238,154.188114 C23.5422496,154.191768 23.6638166,154.208937 23.7883587,154.240732 L54,163.336638 L54,165.376669 C54.2776696,166.761183 54.421089,167.296461 54.8790159,168.161935 C54.9004369,168.120712 54.9222858,168.078722 54.9445714,168.035918 C54.3908571,167.028408 54.0904762,166.006531 54.0054286,164.842776 L54,150.109061 C54.1610476,149.428408 54.4415238,148.877061 54.9445714,147.910857 C54.9189729,147.864196 54.8939159,147.817513 54.8693965,147.770793 Z" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<g id="Stroke-1" transform="translate(38.000000, 12.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-21"></use>
<use fill="#DEEFFF" fill-rule="evenodd" xlink:href="#path-21"></use>
</g>
<path d="M6.66528399,174.019592 C6.91349293,173.22654 7,171.373639 7,171.373639 L7,16.9987958 C7,13.1334676 10.0413722,9.25563755 13.7926382,8.3375317 L27.3522011,5.01888842 C30.569845,4.23138424 33.1782608,6.28199491 33.1782608,9.58720263 L33.1782608,176.999999 L5.23906441,177 C5.23906441,177 6.3265144,175.101994 6.66528399,174.019592 Z" id="Rectangle-18" fill="#C7DAF5" mask="url(#mask-22)"></path>
</g>
<g id="Rectangle-18">
<mask id="mask-25" fill="white">
<use xlink:href="#path-24"></use>
</mask>
<use id="Mask" stroke="#89B3EF" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" fill="#D9EDFE" xlink:href="#path-24"></use>
<path d="M5.42621958,174.169083 C5.67442852,173.376031 5.76093559,171.523129 5.76093559,171.523129 L5.76093559,17.1482867 C5.76093559,13.2829584 8.80230779,9.40512837 12.5535738,8.48702253 L26.1131367,5.16837924 C29.3307806,4.38087506 31.9391964,6.43148573 31.9391964,9.73669345 L31.9391964,177.14949 L4,177.14949 C4,177.14949 5.08744999,175.251485 5.42621958,174.169083 Z" fill="#AFCAF1" opacity="0.550314832" mask="url(#mask-25)"></path>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 27.000000)">
<mask id="mask-27" fill="white">
<use xlink:href="#path-26"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-26"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-26"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-27)" points="-1 3.74733444 39.3323936 15.4525213 39.3323936 19.3000011 -1 7.38941574"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 47.000000)">
<mask id="mask-30" fill="white">
<use xlink:href="#path-29"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-31)" xlink:href="#path-29"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-29"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-30)" points="0 4 40.3323936 15.7051868 40.3323936 19.5526667 0 7.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 67.000000)">
<mask id="mask-33" fill="white">
<use xlink:href="#path-32"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-34)" xlink:href="#path-32"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-32"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-33)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 87.000000)">
<mask id="mask-36" fill="white">
<use xlink:href="#path-35"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-37)" xlink:href="#path-35"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-35"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-36)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 107.000000)">
<mask id="mask-39" fill="white">
<use xlink:href="#path-38"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-40)" xlink:href="#path-38"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-38"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-39)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 127.000000)">
<mask id="mask-42" fill="white">
<use xlink:href="#path-41"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-43)" xlink:href="#path-41"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-41"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-42)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 148.000000)">
<mask id="mask-45" fill="white">
<use xlink:href="#path-44"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-46)" xlink:href="#path-44"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-44"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-45)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
</g>
<g id="checkbox1" transform="translate(226.000000, 215.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-48)" xlink:href="#path-47"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-47"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-50)" xlink:href="#path-49"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-49"></use>
</g>
</g>
<g id="checkbox3" transform="translate(226.000000, 255.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-52)" xlink:href="#path-51"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-51"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-54)" xlink:href="#path-53"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-53"></use>
</g>
</g>
<g id="checkbox2-1" transform="translate(315.000000, 241.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-56)" xlink:href="#path-55"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-55"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="checked·" transform="translate(197.000000, 218.000000)">
<polygon id="Rectangle-1652" fill="#60ACF3" transform="translate(5.036130, 5.821554) rotate(54.000000) translate(-5.036130, -5.821554) " points="3.07150394 5.54011888 8.20628364 5.13832831 8.20628364 6.22543373 4.88010346 6.38887731 1.86597545 6.50478"></polygon>
<path d="M4.24655456,10.2765387 L0.490921008,5.4976418 L2.64581298,3.64312744 L6.56137826,8.6085276 L18.3494265,0.114318847 L20.5877398,3.51043594 L6.79989774,13.7333834 L4.24440697,10.2780862 L4.24655456,10.2765387 Z" id="Combined-Shape" fill="#076CC8"></path>
<polygon id="Rectangle-1654" fill="#0B4F8D" points="20.5585902 3.48939907 21.7298006 3.48939907 8.38340048 13.2209998 6.85243598 13.6752435"></polygon>
<path d="M18.3115339,2.45578123 L21.6731061,0.125966083 L21.7389422,1.33108044 C21.7389422,1.33108044 19.5200657,2.79478353 18.3115339,3.52434255 L18.3115339,2.45578123 Z" id="Rectangle-1652" fill="#60ACF3" transform="translate(20.025238, 1.825154) rotate(90.000000) translate(-20.025238, -1.825154) "></path>
</g>
<g id="checkbox4-1" transform="translate(315.000000, 280.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-58)" xlink:href="#path-57"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-57"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="checkbox2" transform="translate(342.000000, 247.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-60)" xlink:href="#path-59"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-59"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-62)" xlink:href="#path-61"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-61"></use>
</g>
</g>
<g id="checkbox4" transform="translate(343.000000, 287.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-64)" xlink:href="#path-63"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-63"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-66)" xlink:href="#path-65"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-65"></use>
</g>
</g>
<g id="title" transform="translate(198.000000, 71.000000)">
<g id="Group">
<polygon id="Rectangle-6" fill-opacity="0.200000018" fill="#BCC4D1" points="12 11 107.310913 39.2488499 107.310913 71.595787 12 43.3839226"></polygon>
<polygon id="Rectangle-3" fill="#AFCAF1" points="95 31.1094727 107.374659 28 107.374659 60.4360677 95 63.4540845"></polygon>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 3 95.3109131 31.2488499 95.3109131 63.595787 0 35.3839226"></polygon>
<polygon id="Rectangle-6" fill="#C9E1FB" points="12.370682 0 107 27.9739961 94.6952441 31 0 3.02147635"></polygon>
</g>
</g>
<g id="sidebar" transform="translate(93.000000, 2.000000)">
<g id="Path-22">
<use fill="black" fill-opacity="1" filter="url(#filter-68)" xlink:href="#path-67"></use>
<use fill="#0B4F8D" fill-rule="evenodd" xlink:href="#path-67"></use>
</g>
<path d="M12,3.81983503 L74.0416107,22.0342636 L74.0416107,426.169933 L12,407.258429 L12,3.81983503 Z M12,52 L18,54 L18,262 L12,261.898651 L12,52 Z" id="Combined-Shape" fill="#076CC8"></path>
<polygon id="Rectangle-8" fill="#0660B3" points="15.1800817 53.0544141 18 54 18 263 15.1800817 262.147026"></polygon>
<polygon id="Rectangle-3" fill="#0B4F8D" points="15.375 261 17.9528975 261.998988 17.9528975 263.729858 12 261.875"></polygon>
<polygon id="Rectangle-3" fill="#C0DCF9" points="0.016992598 211.191724 9.40315488 209 15.1196044 210.629393 5.82774904 212.878718"></polygon>
<polygon id="Rectangle-7" fill="#DAEDFE" points="0 211.185312 6 212.854036 6 261.264052 0 259.560964"></polygon>
<polyline id="Rectangle-7" fill="#AFCAF1" points="15.1651854 210.60354 5.87419034 212.834552 5.7527486 261.297634 15.1651854 258.978624 15.1651854 210.60354"></polyline>
<path d="M15,212.736487 C16.264979,212.752321 17.1587333,213.134102 18.0419314,214.040172 L18.0419314,213.797381 L18.0419314,226.281791 L18.0419314,225.46017 C17.2467012,226.682924 16.2948881,227.550288 15,228.222363" id="Page-1" fill="#CCE7FF"></path>
<path d="M15,240.736487 C16.264979,240.752321 17.1587333,241.134102 18.0419314,242.040172 L18.0419314,241.797381 L18.0419314,254.281791 L18.0419314,253.46017 C17.2467012,254.682924 16.2948881,255.550288 15,256.222363" id="Page-1" fill="#CCE7FF"></path>
<polygon id="Rectangle-3" fill="#60ACF3" points="25.0292358 0.841064453 86.2996979 19.0151405 74.0416107 22.1046448 12 3.79017687"></polygon>
<g id="icon3" transform="translate(33.000000, 225.000000)">
<path d="M9.18493393,0.0443408139 C6.15016629,0.492401472 3.73393728,3.38098505 2.44598203,6.76562457 C0.474055685,11.9476834 0.968307898,16.8168137 1.34888466,21.5209195 C1.96400292,29.148681 7.51800337,39.667213 16.1503104,42.2235678 C21.0122524,43.6632691 22.8779302,40.5685516 25.2439966,36.4190848 C27.6720173,32.1619354 27.6505094,28.3533338 27.2714078,23.649228 C26.6548144,16.0199915 22.3451313,3.27788498 13.7128242,0.721530203 C12.279888,0.297214142 10.4531232,-0.142897818 9.18493393,0.0443408139 Z" id="Page-1-Copy-3" fill="#03437E" opacity="0.270000011"></path>
<path d="M10.8090772,0.0196748547 C-1.39550678,5.4102888 2.02272427,29.7952213 12.5781463,38.0567878 C14.9287853,39.8965967 17.6382768,42.197747 20.6031094,42.050499 C18.7107461,42.8983063 18.5096436,42.7489281 14.5053225,41.5383186 C12.6629209,40.9813132 10.9920776,40.0197943 9.49551677,38.775724 C3.80358874,34.044103 0.632722716,25.2252658 0.132785637,19.0291617 C-0.25713421,14.2052451 0.11132216,10.0216555 2.60108559,5.65741503 C4.01379078,3.1792618 5.91131063,1.1172399 8.31459427,0.283046871 C9.17926978,-0.0170867751 10.1934691,0.0141976558 11.1560701,0" id="Page-1" fill="#0B4F8D"></path>
</g>
<g id="icon1" transform="translate(17.000000, 61.000000)">
<g id="Group-5">
<g id="Stroke-3">
<use fill="black" fill-opacity="1" filter="url(#filter-70)" xlink:href="#path-69"></use>
<use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-69"></use>
</g>
<path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
</g>
</g>
</g>
<g id="icon2" transform="translate(110.000000, 144.000000)">
<g id="Group-5">
<g id="Stroke-3">
<use fill="black" fill-opacity="1" filter="url(#filter-72)" xlink:href="#path-71"></use>
<use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-71"></use>
</g>
<path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
</g>
</g>
<g id="man" transform="translate(281.000000, 104.000000)">
<g id="鞋子" transform="translate(21.000000, 124.000000)">
<path d="M22.7742091,2.98024586 L28.7742091,2.98024586 L28.7742091,10.0645731 C28.7742091,10.0645731 28.0091137,11.5808013 25.7742091,11.5808013 C23.5393046,11.5808013 22.7742091,10.0645731 22.7742091,10.0645731 L22.7742091,2.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(25.774209, 7.280524) rotate(10.000000) translate(-25.774209, -7.280524) "></path>
<path d="M3.77420915,0.98024586 L9.77420915,0.98024586 L9.77420915,8.06457308 C9.77420915,8.06457308 9.00911373,9.58080128 6.77420915,9.58080128 C4.53930456,9.58080128 3.77420915,8.06457308 3.77420915,8.06457308 L3.77420915,0.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(6.774209, 5.280524) rotate(10.000000) translate(-6.774209, -5.280524) "></path>
<path d="M23.7700189,18.4959565 C23.7261817,19.0499152 24.0706124,19.7164204 24.5812584,19.9419643 C24.5812584,19.9419643 27.0658469,21.8058508 29.3045013,18.2928854 C30.4203608,16.5418443 32.8516021,16.0122218 34.314365,15.1440376 C35.7862194,14.2704574 36.2870883,13.0605251 36.5887384,12.0074325 C37.1901754,9.90775222 34.9330221,9.96069158 34.9330221,9.96069158 L30.1129777,11.0236574 C30.1129777,11.0236574 30.1948285,11.5007361 30.3320226,12.3101532 C30.3842407,12.6182289 29.8680036,13.2673156 29.0084362,13.8393364 C27.6370402,14.7519664 25.59562,14.1544363 25.59562,14.1544363 C25.59562,14.1544363 25.0759987,14.6130603 24.7061251,14.2128342 C24.3362515,13.812608 24.102315,14.2968164 24.102315,14.2968164 L23.7700189,18.4959565 Z" id="Path-3" fill="#C7DAF5" transform="translate(30.228455, 15.198282) rotate(19.000000) translate(-30.228455, -15.198282) "></path>
<path d="M1.70635126,14.4875264 C1.69860524,15.0405926 2.07229351,15.7063744 2.58293949,15.9319182 C2.58293949,15.9319182 5.06752802,17.7958048 7.30618239,14.2828394 C8.42204189,12.5317983 10.8532832,12.0021758 12.3160461,11.1339915 C13.7879005,10.2604113 14.2887695,9.05047906 14.5904196,7.99738648 C15.1918566,5.89770617 12.9347032,5.95064553 12.9347032,5.95064553 L8.10114981,7.16653886 C8.10114981,7.16653886 8.39708186,9.17988268 6.83873774,9.93129268 C5.28039361,10.6827027 3.530486,10.1119463 3.530486,10.1119463 C3.530486,10.1119463 2.69022362,9.56452146 2.45515389,9.34125176 C2.22008417,9.11798206 2.45515389,9.34125176 2.45515389,9.34125176 C2.08140847,9.34125177 1.77223568,9.78337845 1.76440251,10.3426667 L1.70635126,14.4875264 Z" id="Path-3" fill="#3E0F3F" transform="translate(8.199279, 11.188236) rotate(19.000000) translate(-8.199279, -11.188236) "></path>
<path d="M20.6927047,16.4798039 C20.6927047,17.0358848 21.0726724,17.7041105 21.5833183,17.9296544 C21.5833183,17.9296544 24.0679069,19.7935409 26.3065612,16.2805755 C27.4224207,14.5295344 29.853662,13.9999119 31.316425,13.1317277 C32.7882793,12.2581475 33.2891483,11.0482152 33.5907984,9.99512261 C34.1922354,7.8954423 31.9350821,7.94838166 31.9350821,7.94838166 L27.1150377,9.01134748 C27.1150377,9.01134748 27.1968885,9.48842615 27.3340826,10.2978433 C27.3863007,10.605919 26.8700635,11.2550057 26.0104961,11.8270264 C24.6391001,12.7396564 22.59768,12.1421264 22.59768,12.1421264 C22.59768,12.1421264 21.7524905,11.6552318 21.3826169,11.2550057 C21.0127434,10.8547795 20.6927047,11.5511954 20.6927047,11.5511954 L20.6927047,16.4798039 Z" id="Path-3" fill="#613F62" transform="translate(27.192705, 13.185972) rotate(19.000000) translate(-27.192705, -13.185972) "></path>
</g>
<g id="下半身" transform="translate(24.000000, 61.000000)">
<path d="M3.97348091,35.8497366 C2.34956432,26.400557 0,7.00925805 0,7.00925805 L13.0321022,11.6503649 C13.0321022,11.6503649 13.7391421,26.8058403 14.1860792,35.2425241 C14.734544,45.595712 17.1722848,65.7984672 17.1722848,65.7984672 C17.1722848,65.7984672 16.4231357,68.2344309 13.444825,68.2344309 C11.2466274,68.2344309 9.91577321,66.9074514 9.36940221,66.2122961 C9.17550188,65.965594 9.08040349,65.7984672 9.08040349,65.7984672 C9.08040349,65.7984672 5.71789227,46.0000461 3.97348091,35.8497366 Z" id="Rectangle-16" fill="#004183" transform="translate(8.586142, 37.621844) scale(-1, 1) translate(-8.586142, -37.621844) "></path>
<path d="M1,5.10374928 C1,1.05689979 2.75070465,0 2.75070465,0 L32.6036467,8.3949317 L31.8340797,20.4593716 L4,11.7047234 C4,11.7047234 1,9.15059876 1,5.10374928 Z" id="Rectangle-14-Copy" fill="#095DBF"></path>
<path d="M14.9038787,6 C14.9038787,6 13.8032567,8.02548415 14.0310389,10.2576733 C14.1250765,11.1792104 14.4455233,12.1359777 15.1632932,13" id="Path-2" stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
<g id="Path-10" transform="translate(17.000000, 7.000000)">
<mask id="mask-74" fill="white">
<use xlink:href="#path-73"></use>
</mask>
<use id="Mask" fill="#095DBF" transform="translate(8.178492, 30.810524) scale(-1, 1) translate(-8.178492, -30.810524) " xlink:href="#path-73"></use>
<polygon id="Rectangle-5" fill="#0A57B2" mask="url(#mask-74)" points="13.5496529 28.1789711 13.5496529 -1 16.4824928 -0.0527771115 16.4824931 28.7343892 10.4490563 60.4088554 7.75643292 62.2039375"></polygon>
<polyline stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-74)" points="13.4135465 0.875698903 13.597349 28.1937288 7.48305925 61.9805001"></polyline>
</g>
</g>
<g id="上半身" transform="translate(0.000000, 21.000000)">
<path d="M12.0410227,37.9552057 L22.59781,27.4988081 L26.7440413,11 C26.7440413,11 27.3791216,12.3117836 31.1281182,12.3117836 C34.8771147,12.3117836 34.2606313,12.3117836 34.2606313,12.3117836 L28.6320548,29.3399718 C28.2844569,30.3915632 27.2684431,31.7562232 26.3617752,32.3908971 L14.0131704,41.035008 C14.02288,41.7415503 13.8050846,42.4449476 13.3784498,43.0297345 C13.3779697,43.0304122 13.3776123,43.0311446 13.377078,43.0318616 L13.3705205,43.0406338 C13.3533007,43.0639762 13.3358261,43.0871956 13.3178708,43.1102091 L10.1164762,47.345179 C9.88171485,47.6860467 9.39663987,47.7878077 9.05645015,47.5555054 C8.7162755,47.32311 8.64976284,46.8445946 8.88454903,46.5036471 L10.2848744,44.3972614 C10.3433165,44.3098304 10.2927286,44.3149533 10.230753,44.3607006 L7.0791598,47.3804338 C6.79243741,47.6791427 6.29964865,47.7045626 6.00193968,47.4200415 C5.70424649,47.1355705 5.71437052,46.6489148 6.0011486,46.3500832 L8.60114638,43.6413518 C8.6466503,43.5978502 8.60666579,43.5694134 8.56469718,43.6046532 L4.72585979,46.3755833 C4.39070937,46.6190844 3.92292529,46.5464471 3.68091095,46.2133429 C3.43889662,45.8802388 3.51436766,45.4129035 3.84951808,45.1694025 L7.52858211,42.2382786 C7.62194192,42.1608915 7.56893825,42.1143929 7.4773306,42.1412822 L4.19163573,43.7699435 C3.82980422,43.971396 3.35554137,43.8566662 3.15582627,43.4966939 C2.95597881,43.1366533 3.10634789,42.6676409 3.46822379,42.4661355 L7.51922159,40.2105611 C7.79441733,40.0571932 8.2245189,39.8104558 8.27465218,39.6075921 C8.35045361,39.3014621 8.1454667,39.0203185 7.74091008,38.9572784 L6.18601378,38.7158534 C5.6420128,38.6314026 5.33469446,38.1485574 5.42241854,37.6051108 C5.51018254,37.0614914 5.95986202,36.6631523 6.50387277,36.7476166 C6.50387277,36.7476166 10.2450569,37.1897033 11.1053243,37.5510707 L11.1054176,37.5510851 C11.4283192,37.6457185 11.7438189,37.7829579 12.0410227,37.9552057 Z" id="Combined-Shape" fill="#F0F3F6"></path>
<path d="M9.0410227,32.9552057 L19.59781,22.4988081 L23.7440413,6 C23.7440413,6 24.3791216,7.31178355 28.1281182,7.31178355 C31.8771147,7.31178355 31.2606313,7.31178355 31.2606313,7.31178355 L25.6320548,24.3399718 C25.2844569,25.3915632 24.2684431,26.7562232 23.3617752,27.3908971 L11.0131704,36.035008 C11.02288,36.7415503 10.8050846,37.4449476 10.3784498,38.0297345 C10.3779697,38.0304122 10.3776123,38.0311446 10.377078,38.0318616 L10.3705205,38.0406338 C10.3533007,38.0639762 10.3358261,38.0871956 10.3178708,38.1102091 L7.11647619,42.345179 C6.88171485,42.6860467 6.39663987,42.7878077 6.05645015,42.5555054 C5.7162755,42.32311 5.64976284,41.8445946 5.88454903,41.5036471 L7.28487442,39.3972614 C7.34331648,39.3098304 7.29272862,39.3149533 7.23075303,39.3607006 L4.0791598,42.3804338 C3.79243741,42.6791427 3.29964865,42.7045626 3.00193968,42.4200415 C2.70424649,42.1355705 2.71437052,41.6489148 3.0011486,41.3500832 L5.60114638,38.6413518 C5.6466503,38.5978502 5.60666579,38.5694134 5.56469718,38.6046532 L1.72585979,41.3755833 C1.39070937,41.6190844 0.922925291,41.5464471 0.680910954,41.2133429 C0.438896616,40.8802388 0.51436766,40.4129035 0.849518076,40.1694025 L4.52858211,37.2382786 C4.62194192,37.1608915 4.56893825,37.1143929 4.4773306,37.1412822 L1.19163573,38.7699435 C0.829804215,38.971396 0.35554137,38.8566662 0.155826269,38.4966939 C-0.0440211873,38.1366533 0.106347885,37.6676409 0.468223791,37.4661355 L4.51922159,35.2105611 C4.79441733,35.0571932 5.2245189,34.8104558 5.27465218,34.6075921 C5.35045361,34.3014621 5.1454667,34.0203185 4.74091008,33.9572784 L3.18601378,33.7158534 C2.6420128,33.6314026 2.33469446,33.1485574 2.42241854,32.6051108 C2.51018254,32.0614914 2.95986202,31.6631523 3.50387277,31.7476166 C3.50387277,31.7476166 7.24505686,32.1897033 8.10532429,32.5510707 L8.10541755,32.5510851 C8.42831921,32.6457185 8.74381894,32.7829579 9.0410227,32.9552057 Z" id="Combined-Shape" fill="#FFADAE"></path>
<path d="M79.4187854,11.1021761 L70.8109823,17.3392678 L55.6891321,8.07840842 C55.6891321,8.07840842 55.6398194,8.35807478 54.988813,12.0501156 C54.3378066,15.7421565 53,15.7749743 53,15.7749743 L69.7515272,24.0468342 C70.749787,24.5397723 72.2097055,24.3308544 73.0275442,23.5877077 L82.2493049,15.2081571 C82.2822299,15.2211727 82.3013513,15.2275772 82.3040585,15.2271986 L85.023687,14.2190485 C85.9534804,13.6023712 85.9548168,12.5081181 86.0063196,12.4893921 C86.0063196,12.4893921 86.4107684,10.4982602 85.4152023,9.19157971 C84.4196362,7.88489923 83.7525736,8.03309232 83.7525736,8.03309232 C83.7111586,8.05784814 82.4416163,8.74158976 82.2716101,8.69245976 C81.968593,8.60504069 82.1239261,8.41965901 82.2716101,8.03778267 L82.6614408,7.60665972 C82.8603047,7.09331563 82.8483335,6.52143335 82.333833,6.32568137 C81.8191628,6.12987753 80.7103216,7.10907907 79.9877071,7.97895643 C79.456529,8.61838422 79.5793333,9.95405986 79.5296549,10.346326 C79.4699828,10.5917504 79.433186,10.8455661 79.4187854,11.1021761 Z" id="Combined-Shape" fill="#FFACAD"></path>
<g id="Rectangle-15" transform="translate(26.000000, 35.000000)">
<mask id="mask-76" fill="white">
<use xlink:href="#path-75"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-77)" xlink:href="#path-75"></use>
<use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-75"></use>
</g>
<rect fill="#EAF1F1" mask="url(#mask-76)" x="28" y="7" width="4" height="8"></rect>
</g>
<g id="Rectangle-25" transform="translate(20.000000, 0.000000)">
<mask id="mask-79" fill="white">
<use xlink:href="#path-78"></use>
</mask>
<use id="Mask" fill="#7C8DA2" xlink:href="#path-78"></use>
<g id="Group-14" mask="url(#mask-79)" fill="#587397" opacity="0.392140858">
<g transform="translate(18.762683, 18.934256) rotate(9.000000) translate(-18.762683, -18.934256) translate(10.762683, 14.934256)">
<polygon id="Fill-1" points="12.43302 7.17390524 15.8898921 3.70061315 12.43302 0.227272727 11.3958333 1.26944564 13.8157753 3.70080649 11.3958333 6.13186122"></polygon>
<polygon id="Fill-2" points="3.45687208 0.227272727 3.69482223e-13 3.7005487 3.45687208 7.17382468 4.49405879 6.13171621 2.07411684 3.70035536 4.49405879 1.26936508"></polygon>
<polygon id="Fill-3" points="10.2916667 0.205618247 6.98740672 7.84705418 5.79166667 7.64150038 9.09595216 -3.49942297e-13"></polygon>
</g>
</g>
<path d="M34,15.0118886 C34,15.0118886 34.9849597,17.2821649 35.4304006,17.6551811 C35.9097756,18.0566141 36.7744477,18.416808 36.7744477,18.416808 L38,46 L34,46 L34,15.0118886 Z" fill="#6B819D" mask="url(#mask-79)"></path>
</g>
<path d="M54.3086113,6.80317972 C54.3086113,6.80317972 56.1500559,6.14752551 57.8128552,7.37989855 C59.4756544,8.6122716 65.0966039,12.5232687 65.0966039,12.5232687 C65.5498581,12.8391496 65.7408275,13.5048742 65.5216636,14.0136474 L62.5495905,20.9131017 C62.3310903,21.4203343 61.7718058,21.5928762 61.3029496,21.300081 L57.0695788,18.6563909 L54.3086113,15.089455 L54.3086113,6.80317972 Z" id="Path-9" fill="#7C8DA2"></path>
</g>
<g id="Rectangle-1456" transform="translate(40.711648, 20.643433) scale(-1, 1) translate(-40.711648, -20.643433) ">
<use fill="black" fill-opacity="1" filter="url(#filter-81)" xlink:href="#path-80"></use>
<use fill="#FF9EA2" fill-rule="evenodd" xlink:href="#path-80"></use>
</g>
<g id="头" transform="translate(38.988985, 11.083815) scale(-1, 1) translate(-38.988985, -11.083815) translate(28.988985, 0.583815)">
<path d="M1,8.83136671 C1,4.50622231 4.51216539,1 8.82499981,1 L8.82499981,1 C13.1466279,1 16.6499996,4.50396035 16.6499996,8.83113908 L16.6499996,10.2335106 L16.6499996,12.6313763 C16.6499996,16.9554964 13.1378342,20.4608884 8.82499981,20.4608884 L8.82499981,20.4608884 C4.50337175,20.4608884 1,16.9591955 1,12.6295217 L1,8.83136671 Z" id="Mask" fill="#FFACAD"></path>
<g id="眼镜" transform="translate(15.039748, 10.695366) rotate(-23.000000) translate(-15.039748, -10.695366) translate(11.039748, 8.195366)" stroke="#98B1CA" stroke-width="0.5">
<path d="M6.58972497,-7.54951657e-13 C6.58972497,-7.54951657e-13 7.71474038,0.581779033 7.71474041,2.39983903 C7.71474045,4.21789903 6.41996411,5.17627659 4.9640618,4.30360794" id="Path-5"></path>
<path d="M0.60663877,1.9140498 L7.61773793,2.50485608" id="Path-6" stroke-linecap="round" stroke-linejoin="bevel"></path>
</g>
<path d="M1,6.19138193 C1.30101,6.19138181 3.20160069,3.44330858 3.20160069,3.44330858 L2.23836866,3.20250057 L3.5026107,2.84128856 C3.5026107,2.84128856 7.11919843,-0.530023559 11.2084669,0.0719964876 C15.2977354,0.674016534 16.5619769,3.68411658 16.5619769,3.68411658 L16.7425829,2.48007655 C16.7425829,2.48007655 17.4650072,4.34633848 17.1037949,5.30957063 C16.9321934,5.76717453 16.3872486,6.56759978 14.8996878,7.02071905 C13.2560112,7.52139203 10.4834557,7.58324242 10.4834557,7.58324242 L10.4834561,5.0617077 C10.4834561,5.0617077 9.3498295,6.00075683 7.30296135,6.42217064 C5.25609319,6.84358445 2.23836868,6.6269598 2.23836868,6.6269598" id="Path-7" fill="#375576" transform="translate(9.102467, 3.791621) scale(-1, 1) translate(-9.102467, -3.791621) "></path>
<path d="M7.81226324,4.37166433 C8.92609023,4.60040207 11.3212223,6.31943394 11.3212223,6.31943394 L10.878032,11.1401147 L10.878032,17.2920207 L6.31204298,18.5299749 L5.8991225,17.4749221 L5.8991225,18.5299749 L4.32666901,18.981302 C4.32666901,18.981302 2.38678349,18.2311575 1.27866581,15.3333825 C0.42531037,13.1018217 0.218495667,8.95274544 0.826813149,6.85742976 C2.22505629,2.04125913 1.83665543,4.37166432 1.83665543,4.37166432 C1.83665543,4.37166432 5.76456794,3.95114553 7.81226324,4.37166433 Z" id="Path-8" fill="#375576"></path>
<path d="M11,16 C12.1045695,16 11.3236227,15.9542812 11.3236227,14.5357995 C11.3236227,13.1173178 12.1045695,11 11,11 C9.8954305,11 9,12.1192881 9,13.5 C9,14.8807119 9.8954305,16 11,16 Z" id="Oval-2" fill="#FF9EA2"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 88 KiB

BIN
examples/assets/images/cloud-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
examples/assets/images/cloud-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
examples/assets/images/compo-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
examples/assets/images/compo-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
examples/assets/images/compo-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

2
examples/assets/images/element-logo-small.svg
View File

@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
<path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

2
examples/assets/images/element-logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
examples/assets/images/figure-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
examples/assets/images/figure-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
examples/assets/images/plant-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
examples/assets/images/plant-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

23
examples/assets/images/resource-placeholder.svg Executable file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

1
examples/assets/images/search-by-algolia.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
examples/assets/images/stars.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
examples/assets/images/web.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

2
examples/bus.js Normal file
View File

@ -0,0 +1,2 @@
import Vue from 'vue';
export default new Vue();

116
examples/components/demo-block.vue
View File

@ -5,30 +5,43 @@
@mouseenter="hovering = true"
@mouseleave="hovering = false">
<slot name="source"></slot>
<div class="meta">
<div class="description">
<div class="meta" ref="meta">
<div class="description" v-if="$slots.default">
<slot></slot>
<el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
<el-button size="small" type="primary" @click="goJsfiddle">{{ langConfig['button-text'] }}</el-button>
</el-tooltip>
</div>
<slot name="highlight"></slot>
</div>
<div class="demo-block-control" @click="isExpanded = !isExpanded">
<div
class="demo-block-control"
ref="control"
:class="{ 'is-fixed': fixedControl }"
@click="isExpanded = !isExpanded">
<transition name="arrow-slide">
<i :class="[iconClass, { 'hovering': hovering }]"></i>
</transition>
<transition name="text-slide">
<span v-show="hovering">{{ controlText }}</span>
</transition>
<el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
<transition name="text-slide">
<el-button
v-show="hovering || isExpanded"
size="small"
type="text"
class="control-button"
@click.stop="goJsfiddle">
{{ langConfig['button-text'] }}
</el-button>
</transition>
</el-tooltip>
</div>
</div>
</template>
<style>
.demo-block {
border: solid 1px #eaeefb;
border-radius: 4px;
border: solid 1px #ebebeb;
border-radius: 3px;
transition: .2s;
&.hover {
@ -48,28 +61,28 @@
}
.meta {
background-color: #f9fafc;
background-color: #fafafa;
border-top: solid 1px #eaeefb;
clear: both;
overflow: hidden;
height: 0;
transition: height .2s;
}
.description {
padding: 18px 24px;
width: 40%;
padding: 20px;
box-sizing: border-box;
border-left: solid 1px #eaeefb;
float: right;
border: solid 1px #ebebeb;
border-radius: 3px;
font-size: 14px;
line-height: 1.8;
color: #5e6d82;
line-height: 22px;
color: #666;
word-break: break-word;
margin: 10px;
background-color: #fff;
p {
margin: 0 0 12px;
line-height: 1.8;
margin: 0;
line-height: 26px;
}
code {
@ -86,9 +99,6 @@
}
.highlight {
width: 60%;
border-right: solid 1px #eaeefb;
pre {
margin: 0;
}
@ -107,7 +117,7 @@
.demo-block-control {
border-top: solid 1px #eaeefb;
height: 36px;
height: 44px;
box-sizing: border-box;
background-color: #fff;
border-bottom-left-radius: 4px;
@ -116,29 +126,34 @@
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
transition: .2s;
position: relative;
&.is-fixed {
position: fixed;
bottom: 0;
width: 868px;
}
i {
font-size: 12px;
line-height: 36px;
font-size: 16px;
line-height: 44px;
transition: .3s;
&.hovering {
transform: translateX(-40px);
}
}
span {
> span {
position: absolute;
transform: translateX(-30px);
font-size: 14px;
line-height: 36px;
line-height: 44px;
transition: .3s;
display: inline-block;
}
&:hover {
color: #20a0ff;
color: #409EFF;
background-color: #f9fafc;
}
@ -147,6 +162,16 @@
opacity: 0;
transform: translateX(10px);
}
.control-button {
line-height: 26px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
padding-left: 5px;
padding-right: 25px;
}
}
}
</style>
@ -159,7 +184,9 @@
data() {
return {
hovering: false,
isExpanded: false
isExpanded: false,
fixedControl: false,
scrollParent: null
};
},
@ -177,7 +204,7 @@
'\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
jsTpl = jsTpl
? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
: 'new Vue().$mount(\'#app\')';
@ -206,6 +233,17 @@
document.body.appendChild(form);
form.submit();
},
scrollHandler() {
const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
this.fixedControl = bottom > document.documentElement.clientHeight &&
top + 44 <= document.documentElement.clientHeight;
this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
},
removeScrollHandler() {
this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
}
},
@ -236,7 +274,8 @@
codeAreaHeight() {
if (this.$el.getElementsByClassName('description').length > 0) {
return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
return this.$el.getElementsByClassName('description')[0].clientHeight +
this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;
}
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
}
@ -245,6 +284,17 @@
watch: {
isExpanded(val) {
this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
if (!val) {
this.fixedControl = false;
this.$refs.control.style.left = '0';
this.removeScrollHandler();
return;
}
setTimeout(() => {
this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
this.scrollHandler();
}, 200);
}
},
@ -256,6 +306,10 @@
highlight.borderRight = 'none';
}
});
},
beforeDestroy() {
this.removeScrollHandler();
}
};
</script>

12
examples/components/footer-nav.vue
View File

@ -19,8 +19,8 @@
<style>
.footer-nav {
padding: 24px 0;
color: #99a9bf;
padding: 40px 0;
color: #333;
font-size: 14px;
&::after {
@ -31,7 +31,7 @@
& i {
transition: .3s;
color: #d9def1;
color: #999;
vertical-align: baseline;
}
}
@ -41,10 +41,10 @@
transition: .3s;
&:hover {
color: #20a0ff;
color: #409EFF;
& i {
color: #20a0ff;
color: #409EFF;
}
}
}
@ -90,7 +90,7 @@
methods: {
setNav() {
let nav = navConfig[this.lang];
this.nav = nav[0].children.concat(nav[1]);
this.nav = [nav[0]].concat(nav[2].children);
nav[3].groups.map(group => group.list).forEach(list => {
this.nav = this.nav.concat(list);
});

101
examples/components/footer.vue
View File

@ -2,12 +2,26 @@
<footer class="footer">
<div class="container">
<div class="footer-main">
<p class="footer-main-title">Element {{ version }} Boron</p>
<h4>{{ langConfig.links }}</h4>
<a href="https://github.com/ElemeFE/element" class="footer-main-link" target="_blank">{{ langConfig.repo }}</a>
<a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
<a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
<a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
<a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
<a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
<a href="https://github.com/eleme/element-react" class="footer-main-link" target="_blank">Element-React</a>
<a href="https://github.com/eleme/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
</div>
<div class="footer-main">
<h4>{{ langConfig.community }}</h4>
<a :href="gitterLink" class="footer-main-link" target="_blank">{{ langConfig.gitter }}</a>
<a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
<a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
<a :href="`https://eleme.github.io/element-react/#/${ lang }/quick-start`" class="footer-main-link" target="_blank">Element-React</a>
<a href="https://segmentfault.com/t/element-ui" class="footer-main-link" target="_blank">SegmentFault</a>
<a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
</div>
<div class="footer-social">
<p class="footer-social-title">Element {{ version && version.slice(0, 3) }} Carbon</p>
<el-popover
ref="weixin"
placement="top"
@ -18,9 +32,12 @@
<img src="../assets/images/qrcode.png" alt="">
</el-popover>
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
<a href="//github.com/elemefe" target="_blank">
<a href="https://github.com/elemefe" target="_blank">
<i class="doc-icon-github elementdoc"></i>
</a>
<a :href="gitterLink" target="_blank">
<i class="doc-icon-gitter elementdoc"></i>
</a>
</div>
</div>
</footer>
@ -28,83 +45,81 @@
<style>
.footer {
height: 120px;
background-color: #324057;
color: #a4aebd;
background-color: #F7FBFD;
width: 100%;
z-index: 1000;
margin-top: -120px;
* {
word-spacing: 0;
}
padding: 40px 150px;
margin-top: -340px;
box-sizing: border-box;
height: 340px;
.container {
height: 100%;
box-sizing: border-box;
width: auto;
}
.footer-main {
font-size: 0;
padding-top: 40px;
display: inline-block;
.footer-main-title {
vertical-align: top;
margin-right: 110px;
h4 {
font-size: 18px;
color: #333;
line-height: 1;
font-size: 22px;
margin: 0;
margin: 0 0 15px 0;
}
.footer-main-link {
display: inline-block;
margin: 12px 18px 0 0;
line-height: 1;
font-size: 12px;
color: #768193;
display: block;
margin: 0;
line-height: 2;
font-size: 14px;
color: #666;
a {
color: #768193;
text-decoration: none;
&:hover {
color: #333;
}
}
}
.footer-social {
float: right;
line-height: 120px;
text-align: right;
.footer-social-title {
color: #666;
font-size: 18px;
line-height: 1;
margin: 0 0 20px 0;
padding: 0;
font-weight: bold;
}
.elementdoc {
transition: .3s;
display: inline-block;
line-height: 32px;
text-align: center;
color: #8D99AB;
color: #c8d6e8;
background-color: transparent;
size: 32px;
font-size: 32px;
vertical-align: middle;
margin-right: 20px;
&:hover {
transform: scale(1.2);
transform: scale(1.2);
color: #8D99AB;
}
}
.doc-icon-weixin {
margin-right: 36px;
&:hover {
color: #fff;
}
}
.doc-icon-github {
.doc-icon-gitter {
margin-right: 0;
&:hover {
color: #fff;
}
}
}
}
.footer-popover {
.el-popover.footer-popover {
padding: 0;
min-width: 120px;
line-height: normal;
@ -151,6 +166,10 @@
langConfig() {
return compoLang.filter(config => config.lang === this.lang)[0]['footer'];
},
gitterLink() {
return this.lang === 'zh-CN' ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby';
}
}
};

262
examples/components/header.vue
View File

@ -2,9 +2,10 @@
.headerWrapper {
height: 80px;
}
.header {
height: 80px;
background-color: rgba(32, 160, 255, 1);
background-color: #fff;
color: #fff;
top: 0;
left: 0;
@ -18,6 +19,10 @@
box-sizing: border-box;
}
.nav-lang-spe {
color: #888;
}
h1 {
margin: 0;
float: left;
@ -25,7 +30,7 @@
font-weight: normal;
a {
color: #fff;
color: #333;
text-decoration: none;
display: block;
}
@ -43,6 +48,7 @@
border-radius: 3px;
}
}
.nav {
float: right;
height: 100%;
@ -52,24 +58,48 @@
padding: 0;
margin: 0;
}
.nav-gap {
position: relative;
width: 1px;
height: 80px;
padding: 0 20px;
&::before {
content: '';
position: absolute;
top: calc(50% - 8px);
width: 1px;
height: 16px;
background: #ebebeb;
}
}
.nav-logo,
.nav-logo-small {
vertical-align: sub;
}
.nav-logo-small {
display: none;
}
.nav-item {
margin: 0;
float: left;
list-style: none;
position: relative;
cursor: pointer;
margin-left: 20px;
&.nav-algolia-search {
cursor: default;
}
&.lang-item,
&:last-child {
cursor: default;
margin-left: 34px;
span {
opacity: .8;
}
@ -78,48 +108,88 @@
cursor: pointer;
display: inline-block;
height: 100%;
color: #888;
&:hover {
opacity: 1;
color: #409EFF;
}
&.active {
font-weight: 700;
opacity: 1;
}
font-weight: bold;
color: #409EFF;
}
}
}
a {
text-decoration: none;
color: #fff;
color: #888;
display: block;
padding: 0 20px;
opacity: .8;
padding: 0 22px;
&.active,
&:hover {
opacity: 1;
}
&.active {
font-weight: 700;
color: #333;
}
&.active::before {
&.active::after {
content: '';
display: block;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
bottom: 15px;
left: calc(50% - 7px);
width: 14px;
height: 4px;
background:#99d2fc;
background: #409EFF;
}
}
}
}
.header-home {
position: fixed;
top: 0;
background-color: rgba(32, 160, 255, 0);
.nav-dropdown {
margin-bottom: 6px;
padding-left: 18px;
width: 100%;
span {
display: block;
width: 100%;
font-size: 16px;
color: #888;
line-height: 40px;
transition: .2s;
padding-bottom: 6px;
user-select: none;
&:hover {
cursor: pointer;
}
}
i {
transition: .2s;
font-size: 12px;
color: #979797;
transform: translateY(-2px);
}
@when active {
span, i {
color: #409EFF;
}
i {
transform: rotateZ(180deg) translateY(3px);
}
}
&:hover {
span, i {
color: #409EFF;
}
}
}
.nav-dropdown-list {
width: auto;
}
@media (max-width: 850px) {
@ -133,6 +203,7 @@
.nav-item {
margin-left: 6px;
&.lang-item,
&:last-child {
margin-left: 10px;
}
@ -141,8 +212,12 @@
padding: 0 5px;
}
}
.nav-theme-switch, .nav-algolia-search {
display: none;
}
}
}
@media (max-width: 700px) {
.header {
.container {
@ -153,29 +228,39 @@
font-size: 12px;
vertical-align: top;
}
.nav-dropdown {
padding: 0;
}
.nav-gap {
padding: 0 8px;
}
}
}
</style>
<template>
<div class="headerWrapper">
<header class="header"
ref="header"
:style="headerStyle"
:class="{
'header-home': isHome
}">
<header class="header" ref="header">
<div class="container">
<h1><router-link :to="`/${ lang }`">
<img
src="../assets/images/element-logo.svg"
alt="element-logo"
class="nav-logo">
<img
src="../assets/images/element-logo-small.svg"
alt="element-logo"
class="nav-logo-small">
<!-- logo -->
<slot>
<img
src="../assets/images/element-logo.svg"
alt="element-logo"
class="nav-logo">
<img
src="../assets/images/element-logo-small.svg"
alt="element-logo"
class="nav-logo-small">
</slot>
</router-link></h1>
<!-- nav -->
<ul class="nav">
<li class="nav-item nav-algolia-search" v-show="isComponentPage">
<algolia-search></algolia-search>
</li>
<li class="nav-item">
<router-link
active-class="active"
@ -195,14 +280,45 @@
exact>{{ langConfig.resource }}
</router-link>
</li>
<li class="nav-item">
<!-- gap -->
<li class="nav-item" v-show="isComponentPage">
<div class="nav-gap"></div>
</li>
<!-- 版本选择器 -->
<li class="nav-item" v-show="isComponentPage">
<el-dropdown
trigger="click"
class="nav-dropdown"
:class="{ 'is-active': dropdownVisible }">
<span>
{{ langConfig.dropdown }}{{ version }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu
slot="dropdown"
class="nav-dropdown-list"
@input="handleDropdownToggle">
<el-dropdown-item
v-for="item in Object.keys(versions)"
:key="item"
@click.native="switchVersion(item)">
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
<!-- lang -->
<li class="nav-item lang-item">
<span
class="nav-lang"
:class="{ 'active': lang === 'zh-CN' }"
@click="switchLang('zh-CN')">
中文
</span>
<span> / </span>
<span class="nav-lang-spe"> / </span>
<span
class="nav-lang"
:class="{ 'active': lang === 'en-US' }"
@ -210,59 +326,79 @@
En
</span>
</li>
<!--theme picker-->
<li class="nav-item nav-theme-switch" v-show="isComponentPage">
<theme-picker></theme-picker>
</li>
</ul>
</div>
</header>
</div>
</template>
<script>
import ThemePicker from './theme-picker.vue';
import AlgoliaSearch from './search.vue';
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
export default {
data() {
return {
active: '',
isHome: false,
headerStyle: {}
versions: [],
version,
dropdownVisible: true
};
},
watch: {
'$route.path': {
immediate: true,
handler() {
this.isHome = /^home/.test(this.$route.name);
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
}
}
components: {
ThemePicker,
AlgoliaSearch
},
computed: {
lang() {
return this.$route.path.split('/')[1] || 'zh-CN';
},
langConfig() {
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
},
isComponentPage() {
return /^component/.test(this.$route.name);
}
},
methods: {
switchVersion(version) {
if (version === this.version) return;
location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
},
switchLang(targetLang) {
if (this.lang === targetLang) return;
localStorage.setItem('ELEMENT_LANGUAGE', targetLang);
this.$router.push(this.$route.path.replace(this.lang, targetLang));
},
handleDropdownToggle(visible) {
this.dropdownVisible = visible;
}
},
mounted() {
function scroll(fn) {
window.addEventListener('scroll', () => {
fn();
}, false);
}
scroll(() => {
if (this.isHome) {
const threshold = 200;
let alpha = Math.min((document.documentElement.scrollTop || document.body.scrollTop), threshold) / threshold;
this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
created() {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = _ => {
if (xhr.readyState === 4 && xhr.status === 200) {
const versions = JSON.parse(xhr.responseText);
this.versions = Object.keys(versions).slice(-2).reduce((prev, next) => {
prev[next] = versions[next];
return prev;
}, {});
}
});
};
xhr.open('GET', '/versions.json');
xhr.send();
}
};
</script>

199
examples/components/search.vue Normal file
View File

@ -0,0 +1,199 @@
<template>
<el-autocomplete
v-model="query"
size="small"
:popper-class="`algolia-search${ isEmpty ? ' is-empty' : '' }`"
:fetch-suggestions="querySearch"
:placeholder="placeholder"
:trigger-on-focus="false"
@select="handleSelect">
<template slot-scope="props">
<p class="algolia-search-title" v-if="props.item.title">
<span v-html="props.item.highlightedCompo"></span>
<span class="algolia-search-separator">></span>
<span v-html="props.item.title"></span>
</p>
<p
class="algolia-search-content"
v-if="props.item.content"
v-html="props.item.content"></p>
<a
class="algolia-search-link"
v-if="props.item.img"
target="_blank"
href="https://www.algolia.com/docsearch">
<img
class="algolia-search-logo"
src="../assets/images/search-by-algolia.svg"
alt="algolia-logo">
</a>
<p
class="algolia-search-empty"
v-if="props.item.isEmpty">{{ emptyText }}</p>
</template>
</el-autocomplete>
</template>
<style>
.algolia-search {
width: 450px !important;
&.is-empty {
.el-autocomplete-suggestion__list {
padding-bottom: 0;
}
}
.el-autocomplete-suggestion__list {
position: static !important;
padding-bottom: 31px;
}
li {
border-bottom: solid 1px #ebebeb;
&:last-child {
border-bottom: none;
}
}
.algolia-highlight {
color: #409EFF;
font-weight: bold;
}
.algolia-search-title {
font-size: 14px;
margin: 6px 0;
line-height: 1.8;
}
.algolia-search-separator {
padding: 0 6px;
}
.algolia-search-content {
font-size: 12px;
margin: 6px 0;
line-height: 2.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.algolia-search-link {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding-right: 20px;
background-color: #dfe4ed;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-sizing: border-box;
text-align: right;
&:hover {
background-color: #dfe4ed;
}
img {
display: inline-block;
height: 17px;
margin-top: 10px;
}
}
.algolia-search-empty {
margin: 5px 0;
text-align: center;
color: #999;
}
}
</style>
<script>
import algoliasearch from 'algoliasearch';
export default {
data() {
return {
index: null,
query: '',
isEmpty: false
};
},
computed: {
lang() {
return this.$route.meta.lang;
},
placeholder() {
return this.lang === 'zh-CN' ? '搜索文档' : 'Search';
},
emptyText() {
return this.lang === 'zh-CN' ? '无匹配结果' : 'No results';
}
},
watch: {
lang() {
this.initIndex();
}
},
methods: {
initIndex() {
const client = algoliasearch('9NLTR1QH8B', 'a75cbec97cda75ab7334fed9219ecc57');
this.index = client.initIndex(`element-${ this.lang === 'zh-CN' ? 'zh' : 'en' }`);
},
querySearch(query, cb) {
if (!query) return;
this.index.search({ query, hitsPerPage: 6 }, (err, res) => {
if (err) {
console.error(err);
return;
}
if (res.hits.length > 0) {
this.isEmpty = false;
cb(res.hits.map(hit => {
let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
const highlightStart = content.indexOf('<span class="algolia-highlight">');
if (highlightStart > -1) {
const startEllipsis = highlightStart - 15 > 0;
content = (startEllipsis ? '...' : '') +
content.slice(Math.max(0, highlightStart - 15), content.length);
} else if (content.indexOf('|') > -1) {
content = '';
}
return {
anchor: hit.anchor,
component: hit.component,
highlightedCompo: hit._highlightResult.component.value,
title: hit._highlightResult.title.value,
content
};
}).concat({ img: true }));
} else {
this.isEmpty = true;
cb([{ isEmpty: true }]);
}
});
},
handleSelect(val) {
if (val.img || val.isEmpty) return;
const component = val.component || '';
const anchor = val.anchor;
this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`);
}
},
mounted() {
this.initIndex();
}
};
</script>

146
examples/components/side-nav.vue
View File

@ -3,56 +3,33 @@
width: 100%;
box-sizing: border-box;
padding-right: 30px;
transition: opacity .5s;
&:hover {
opacity: 1 !important;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
overflow: hidden;
}
> ul > .nav-item > a {
margin-top: 15px;
}
.nav-dropdown {
margin-bottom: 6px;
width: 100%;
span {
display: block;
width: 100%;
font-size: 16px;
color: #5e6d82;
line-height: 40px;
transition: .2s;
padding-bottom: 6px;
border-bottom: 1px solid #eaeefb;
&:hover {
cursor: pointer;
}
}
i {
transition: .2s;
font-size: 12px;
color: #d3dce6;
}
@when active {
span, i {
color: #20a0ff;
}
i {
transform: rotateZ(180deg) translateY(2px);
}
}
&:hover {
span, i {
color: #20a0ff;
}
}
> ul > .nav-item:nth-child(-n + 3) > a {
margin-top: 0;
}
.nav-item {
a {
font-size: 16px;
color: #5e6d82;
color: #333;
line-height: 40px;
height: 40px;
margin: 0;
@ -60,40 +37,43 @@
text-decoration: none;
display: block;
position: relative;
transition: all .3s;
transition: .15s ease-out;
font-weight: bold;
&.active {
color: #20a0ff;
color: #409EFF;
}
}
.nav-item {
a {
display: block;
height: 40px;
color: #444;
line-height: 40px;
font-size: 13px;
padding-left: 24px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
&:hover {
color: #20a0ff;
&:hover,
&.active {
color: #409EFF;
}
}
}
}
.nav-group__title {
font-size: 12px;
color: #99a9bf;
padding-left: 8px;
color: #999;
line-height: 26px;
margin-top: 10px;
margin-top: 15px;
}
#code-sponsor-widget {
margin: 50px 0 0 -20px;
margin: 0 0 0 -20px;
}
}
.nav-dropdown-list {
@ -105,29 +85,10 @@
}
</style>
<template>
<div class="side-nav" :style="navStyle">
<el-dropdown
v-show="isComponentPage"
trigger="click"
class="nav-dropdown"
:class="{ 'is-active': dropdownVisible }">
<span>
{{ langConfig.dropdown }}{{ version }}
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu
slot="dropdown"
:offset="-80"
class="nav-dropdown-list"
@input="handleDropdownToggle">
<el-dropdown-item
v-for="item in Object.keys(versions)"
:key="item"
@click.native="switchVersion(item)">
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div
class="side-nav"
@mouseenter="isFade = false"
:style="navStyle">
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
@ -169,12 +130,12 @@
</template>
</li>
</ul>
<div id="code-sponsor-widget"></div>
<!--<div id="code-sponsor-widget"></div>-->
</div>
</template>
<script>
import bus from '../bus';
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
export default {
props: {
@ -189,32 +150,33 @@
highlights: [],
navState: [],
isSmallScreen: false,
versions: [],
version,
dropdownVisible: false
isFade: false
};
},
watch: {
'$route.path'() {
this.handlePathChange();
},
isFade(val) {
bus.$emit('navFade', val);
}
},
computed: {
navStyle() {
return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
},
isComponentPage() {
return /^component-/.test(this.$route.name);
const style = {};
if (this.isSmallScreen) {
style.paddingBottom = '60px';
}
if (this.isFade) {
style.opacity = '0.5';
}
return style;
},
langConfig() {
return compoLang.filter(config => config.lang === this.$route.meta.lang)[0]['nav'];
}
},
methods: {
switchVersion(version) {
if (version === this.version) return;
location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
},
handleResize() {
this.isSmallScreen = document.documentElement.clientWidth < 768;
this.handlePathChange();
@ -250,24 +212,12 @@
if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
this.hideAllMenu();
event.currentTarget.nextElementSibling.style.height = 'auto';
},
handleDropdownToggle(visible) {
this.dropdownVisible = visible;
}
},
created() {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = _ => {
if (xhr.readyState === 4 && xhr.status === 200) {
const versions = JSON.parse(xhr.responseText);
this.versions = Object.keys(versions).slice(-2).reduce((prev, next) => {
prev[next] = versions[next];
return prev;
}, {});
}
};
xhr.open('GET', '/versions.json');
xhr.send();
bus.$on('fadeNav', () => {
this.isFade = true;
});
},
mounted() {
this.handleResize();

139
examples/components/theme-picker.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<el-color-picker
class="theme-picker"
popper-class="theme-picker-dropdown"
v-model="theme"></el-color-picker>
</template>
<style>
.theme-picker {
height: 80px;
display: inline-block;
@utils-vertical-center;
}
.theme-picker .el-color-picker__trigger {
vertical-align: middle;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
<script>
import { version } from 'main/index.js';
const ORIGINAL_THEME = '#409EFF';
export default {
data() {
return {
chalk: '', // content of theme-chalk css
docs: '', // content of docs css
theme: ORIGINAL_THEME
};
},
watch: {
theme(val, oldVal) {
if (typeof val !== 'string') return;
const themeCluster = this.getThemeCluster(val.replace('#', ''));
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));
let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster);
let styleTag = document.getElementById(id);
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.setAttribute('id', id);
document.head.appendChild(styleTag);
}
styleTag.innerText = newStyle;
};
};
const chalkHandler = getHandler('chalk', 'chalk-style');
const docsHandler = getHandler('docs', 'docs-style');
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`;
this.getCSSString(url, chalkHandler, 'chalk');
} else {
chalkHandler();
}
if (!this.docs) {
const links = [].filter.call(document.querySelectorAll('link'), link => {
return /docs\..+\.css/.test(link.href || '');
});
links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');
} else {
docsHandler();
}
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText;
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);
});
styles.forEach(style => {
const { innerText } = style;
if (typeof innerText !== 'string') return;
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);
});
}
},
methods: {
updateStyle(style, oldCluster, newCluster) {
let newStyle = style;
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
});
return newStyle;
},
getCSSString(url, callback, variable) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');
callback();
}
};
xhr.open('GET', url);
xhr.send();
},
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16);
let green = parseInt(color.slice(2, 4), 16);
let blue = parseInt(color.slice(4, 6), 16);
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',');
} else {
red += Math.round(tint * (255 - red));
green += Math.round(tint * (255 - green));
blue += Math.round(tint * (255 - blue));
red = red.toString(16);
green = green.toString(16);
blue = blue.toString(16);
return `#${ red }${ green }${ blue }`;
}
};
const clusters = [theme];
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
}
return clusters;
}
}
};
</script>

37
examples/docs/en-US/alert.md
View File

@ -118,6 +118,42 @@ Displaying an icon improves readability.
```
:::
## Centered text
Use the `center` attribute to center the text.
::: demo
```html
<template>
<el-alert
title="success alert"
type="success"
center
show-icon>
</el-alert>
<el-alert
title="info alert"
type="info"
center
show-icon>
</el-alert>
<el-alert
title="warning alert"
type="warning"
center
show-icon>
</el-alert>
<el-alert
title="error alert"
type="error"
center
show-icon>
</el-alert>
</template>
```
:::
### With description
Description includes a message with more detailed information.
@ -176,6 +212,7 @@ Description includes a message with more detailed information.
| 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 |

2
examples/docs/en-US/badge.md
View File

@ -96,7 +96,7 @@ Use a red dot to mark content that needs to be noticed.
```html
<el-badge is-dot class="item">query</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="share" type="primary"></el-button>
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
<style>

15
examples/docs/en-US/breadcrumb.md
View File

@ -17,10 +17,25 @@ Displays the location of the current page, making it easier to browser back.
```
:::
### Icon separator
:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Breadcrumb Attributes
| Attribute | Description | Type | Accepted Values | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | separator character | string | — | / |
| separator-class | class name of icon separator | string | — | - |
### Breadcrumb Item Attributes
| Attribute | Description | Type | Accepted Values | Default|

176
examples/docs/en-US/button.md
View File

@ -1,27 +1,3 @@
<script>
import { addClass } from 'element-ui/src/utils/dom';
export default {
data() {
return {
isLoading: false,
isLoading2: false
};
},
methods: {
handleClick(event) {
console.log(event);
alert('button clicked!');
}
},
mounted() {
this.$nextTick(() => {
let demos = document.querySelectorAll('.source');
let thirdDemo = demos[2];
addClass(thirdDemo, 'intro-block');
});
}
}
</script>
<style>
.demo-box.demo-button {
.el-row {
@ -42,30 +18,6 @@
}
}
}
.demo-box.demo-button .intro-block {
padding: 0;
}
.demo-button .intro-block .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-button .intro-block .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-button .intro-block .wrapper {
float: right;
margin-right: 20px;
}
</style>
## Button
@ -74,66 +26,87 @@ Commonly used button.
### Basic usage
::: demo Button provides 7 themes defined by the `type` attribute.
::: demo Use `type`, `plain` and `round` to define Button's style.
```html
<el-button>Default Button</el-button>
<el-button type="primary">Primary Button</el-button>
<el-button type="text">Text Button</el-button>
<div>
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
<div style="margin: 20px 0">
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</div>
<div>
<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
</div>
```
:::
### Disabled Button
The `disableds` attribute determines if the button is disabled.
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
<el-button :plain="true" :disabled="true">Default Button</el-button>
<el-button type="primary" disabled>Primary Button</el-button>
<el-button type="text" disabled>Text Button</el-button>
<div>
<el-button disabled>Default</el-button>
<el-button type="primary" disabled>Primary</el-button>
<el-button type="success" disabled>Success</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Warning</el-button>
<el-button type="danger" disabled>Danger</el-button>
</div>
<div style="margin-top: 20px">
<el-button plain disabled>Plain</el-button>
<el-button type="primary" plain disabled>Primary</el-button>
<el-button type="success" plain disabled>Success</el-button>
<el-button type="info" plain disabled>Info</el-button>
<el-button type="warning" plain disabled>Warning</el-button>
<el-button type="danger" plain disabled>Danger</el-button>
</div>
```
:::
### Color Indication
### Text Button
Different colors represent different meanings.
Buttons without border and background.
:::demo Use `plain` attribute to create a plain button, and it accepts a `Boolean` value. You can assign different `type` to a plain button as mentioned above. **Note**: When using the plain button, you still can set `type` to `text`, but it makes no difference. A plain button will be styled like a `text button` by default.
:::demo
```html
<div class="block">
<span class="demonstration">Default</span>
<span class="wrapper">
<el-button type="success">Success</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button type="info">Info</el-button>
</span>
</div>
<div class="block">
<span class="demonstration">Hover to display color</span>
<span class="wrapper">
<el-button :plain="true" type="success">Success</el-button>
<el-button :plain="true" type="warning">Warning</el-button>
<el-button :plain="true" type="danger">Danger</el-button>
<el-button :plain="true" type="info">Info</el-button>
</span>
</div>
<el-button type="text">Text Button</el-button>
<el-button type="text" disabled>Text Button</el-button>
```
:::
### Icon Button
Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
```html
<el-button type="primary" icon="edit"></el-button>
<el-button type="primary" icon="share"></el-button>
<el-button type="primary" icon="delete"></el-button>
<el-button type="primary" icon="search">Search</el-button>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
```
:::
@ -146,13 +119,13 @@ Displayed as a button group, can be used to group a series of similar operations
```html
<el-button-group>
<el-button type="primary" icon="arrow-left">Previous Page</el-button>
<el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
<el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="edit"></el-button>
<el-button type="primary" icon="share"></el-button>
<el-button type="primary" icon="delete"></el-button>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
```
:::
@ -172,24 +145,33 @@ Click the button to load data, then the button displays a loading state.
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 `large`, `small` or `mini`.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
```html
<el-button type="primary" size="large">Large Button</el-button>
<el-button type="primary">Default Button</el-button>
<el-button type="primary" size="small">Small Button</el-button>
<el-button type="primary" size="mini">Mini Button</el-button>
<div>
<el-button>Default</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
</div>
<div style="margin-top: 20px">
<el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
</div>
```
:::
### Attributes
| Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- |
| size | button size | string | large/small/mini | — |
| type | button type | string | primary/success/warning/danger/info/text | — |
| plain | determine whether it's a plain button | Boolean | — | false |
| loading | determine whether it's loading | Boolean | — | false |
| 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 | button icon, accepts an icon name of Element icon component | string | — | — |
| 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 |
| native-type | same as native button's `type` | string | button / submit / reset | button |

14
examples/docs/en-US/card.md
View File

@ -25,7 +25,7 @@
}
.item {
padding: 18px 0;
margin-bottom: 18px;
}
.button {
@ -57,8 +57,8 @@ Card includes title, content and operations.
```html
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="line-height: 36px;">Card name</span>
<el-button style="float: right;" type="primary">Operation button</el-button>
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'List item ' + o }}
@ -71,16 +71,16 @@ Card includes title, content and operations.
}
.item {
padding: 18px 0;
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
display: table;
content: "";
}
.clearfix:after {
clear: both
clear: both
}
.box-card {

2
examples/docs/en-US/carousel.md
View File

@ -15,7 +15,7 @@
padding: 30px;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

8
examples/docs/en-US/cascader.md
View File

@ -263,7 +263,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
@ -1676,9 +1676,10 @@ Search and select options with a keyword.
| 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 millisecond | number | — | 300 |
| 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 | large / small / mini | — |
| 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 |
@ -1687,7 +1688,6 @@ Search and select options with a keyword.
| 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 | — | — |
| 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) | — | — |
### Events
| Event Name | Description | Parameters |

151
examples/docs/en-US/checkbox.md
View File

@ -8,6 +8,10 @@
checked: true,
checked1: false,
checked2: true,
checked3: true,
checked4: false,
checked5: false,
checked6: true,
isValid: 'valid',
checkAll: false,
cities: cityOptions,
@ -15,16 +19,19 @@
checkedCities1: ['Shanghai', 'Beijing'],
isIndeterminate: true,
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Beijing'],
checkboxGroup3: ['Guangzhou']
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
checkboxGroup5: [],
checkboxGroup6: []
};
},
methods: {
handleChange(ev) {
console.log(ev);
},
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
@ -135,15 +142,15 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
export default {
data() {
return {
checkAll: true,
checkAll: false,
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
@ -190,21 +197,29 @@ The `min` and `max` properties can help you to limit the number of checked items
Checkbox with button styles.
:::demo You just need to change `<el-checkbox>` element into `<el-checkbox-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
```html
<template>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
@ -213,8 +228,9 @@ Checkbox with button styles.
data () {
return {
checkboxGroup1: ['Shanghai'],
checkboxGroup2: ['Beijing'],
checkboxGroup3: ['Guangzhou'],
checkboxGroup2: ['Shanghai'],
checkboxGroup3: ['Shanghai'],
checkboxGroup4: ['Shanghai'],
cities: cityOptions
};
}
@ -223,28 +239,89 @@ Checkbox with button styles.
```
:::
### With borders
:::demo The `border` attribute adds a border to Checkboxes.
```html
<template>
<div>
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
};
}
}
</script>
```
:::
### Checkbox Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
| label | value of the checkbox when used inside a `checkbox-group` | string | — | — |
| 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 | — | — |
| 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 | — | — |
| disabled | if the checkbox is disabled | boolean | — | false |
| checked | if the checkbox is checked | boolean | — | false |
| checked | if the Checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
### Checkbox-group Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
|size | the size of checkbox buttons | string | large/small | —
|fill | border and background color when button is active | string | — | #20a0ff |
|text-color | font color when button is active | string | — | #ffffff |
| min | minimum number of checkbox checked | number | — | — |
| max | maximum number of checkbox checked | number | — | — |
### Checkbox Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | Event object |
| 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 |

36
examples/docs/en-US/color-picker.md
View File

@ -2,9 +2,10 @@
export default {
data() {
return {
color1: '#20a0ff',
color1: '#409EFF',
color2: null,
color3: 'rgba(19, 206, 102, 0.8)'
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF'
};
},
mounted() {
@ -21,7 +22,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
@ -34,6 +35,9 @@
font-size: 14px;
margin-bottom: 20px;
}
.demo-color-picker .el-color-picker + .el-color-picker {
margin-left: 20px;
}
</style>
## ColorPicker
@ -57,7 +61,7 @@ ColorPicker is a color selector supporting multiple color formats.
export default {
data() {
return {
color1: '#20a0ff',
color1: '#409EFF',
color2: null
}
}
@ -84,11 +88,35 @@ ColorPicker is a color selector supporting multiple color formats.
```
:::
### Sizes
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#409EFF'
}
}
};
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| disabled | whether to disable the ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | — | medium / small / mini |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
### Events
| Event Name | Description | Parameters |

105
examples/docs/en-US/color.md
View File

@ -24,15 +24,8 @@
border-radius: 0 0 4px 4px;
}
}
.bg-blue-light {
background-color: #58b7ff;
}
.bg-blue,
.bg-info {
background-color: #20a0ff;
}
.bg-blue-dark {
background-color: #1d8ce0;
.bg-blue {
background-color: #409EFF;
}
.bg-success {
@ -44,43 +37,38 @@
.bg-danger {
background-color: #ff4949;
}
.bg-black {
background-color: #1f2d3d;
}
.bg-black-light {
background-color: #324057;
}
.bg-black-lighter {
background-color: #475669;
.bg-info {
background-color: #878D99;
}
.bg-silver {
background-color: #8492a6;
.bg-text-primary {
background-color: #2d2f33;
}
.bg-silver-light {
background-color: #99a9bf;
.bg-text-regular {
background-color: #5a5e66;
}
.bg-silver-lighter {
background-color: #c0ccda;
.bg-text-secondary {
background-color: #878d99;
}
.bg-text-placeholder {
background-color: #b4bccc;
}
.bg-gray {
background-color: #d3dce6;
.bg-border-base {
background-color: #d8dce5;
}
.bg-gray-light {
background-color: #e5e9f2;
.bg-border-light {
background-color: #dfe4ed;
}
.bg-gray-lighter {
background-color: #eff2f7;
.bg-border-lighter {
background-color: #e6ebf5;
}
.bg-border-extra-light {
background-color: #edf2fc;
}
.bg-white-dark {
background-color: #f9fafc;
}
.color-gray {
color: #5e6d82;
[class*=" bg-border-"] {
color: #5a5e66;
}
</style>
@ -92,14 +80,8 @@ Element uses a specific set of palettes to specify colors to provide a consisten
The main color of Element is bright and friendly blue.
<el-row :gutter="12">
<el-col :span="8">
<div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
</el-col>
<el-col :span="8">
<div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
</el-col>
<el-col :span="8">
<div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
<el-col :span="6">
<div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
</el-col>
</el-row>
@ -109,16 +91,16 @@ Besides the main color, you need to use different scene colors in different scen
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
<div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
<div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
<div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
</el-col>
<el-col :span="6">
<div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
<div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
</el-col>
</el-row>
@ -129,29 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
<el-row :gutter="12">
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
<div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
<div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
<div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
<div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
<div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
<div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
<div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
<div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group">
<div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
<div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
<div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
</div>
</el-col>
<el-col :span="6">
<div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
<div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
<div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
<div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
<div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
<div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
<div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
</div>
</el-col>
</el-row>

299
examples/docs/en-US/container.md Normal file
View File

@ -0,0 +1,299 @@
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
#common-layouts + .demo-container {
.el-header, .el-footer {
text-align: center;
}
.el-aside {
background-color: #D3DCE6;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
& > .source > .el-container {
margin-bottom: 40px;
&:nth-child(5) .el-aside,
&:nth-child(6) .el-aside {
line-height: 260px;
}
&:nth-child(7) .el-aside {
line-height: 320px;
}
}
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
## Container
Container components for scaffolding basic structure of the page:
`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
`<el-header>`: container for headers.
`<el-aside>`: container for side sections (usually a side nav).
`<el-main>`: container for main sections.
`<el-footer>`: container for footers.
:::tip
These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
:::
### Common layouts
::: demo
```html
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
```
:::
### Example
::: demo
```html
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
```
:::
### Container Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
### Header Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the header | string | — | 60px |
### Aside Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| width | width of the side section | string | — | 300px |
### Footer Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the footer | string | — | 60px |

111
examples/docs/en-US/custom-theme.md
View File

@ -1,33 +1,76 @@
## 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, and this is where our theme customization tools kick in.
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-preview/#/en-US) is recommended.
The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
### 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).
## More customizations
### 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)
```
Note that it is required to override icon font path to the relative path of Element's font files. You can edit the following variables in this way:
| Variable | Description | Default value |
| ------ | ---- | ------ |
| $--sm | `sm` breakpoint for responsive layout | 768px |
| $--md | `md` breakpoint for responsive layout | 992px |
| $--lg | `lg` breakpoint for responsive layout | 1200px |
| $--xl | `xl` breakpoint for responsive layout | 1920px |
| $--color-primary | theme color | #409EFF |
| $--color-success | color for success | #67C23A |
| $--color-warning | color for warning | #EB9E05 |
| $--color-danger | color for danger | #FA5555 |
| $--color-info | color for info | #878D99 |
| $--color-text-primary | color for primary texts | #2D2F33 |
| $--color-text-regular | color for regular texts | #5A5E66 |
| $--color-text-secondary | color for secondary texts | #878D99 |
| $--color-text-placeholder | color for placeholder texts | #B4BCCC |
| $--border-color-base | base border color | #D8DCE5 |
| $--border-color-light | light border color | #DFE4ED |
| $--border-color-lighter | lighter border color | #E6EBF5 |
| $--border-color-extra-light | extra light border color | #EDF2FC |
| $--font-path | icon font file path | 'fonts' |
### More customizations
If you need more customization than just changing the theme color, please follow these steps:
### Install related tool
#### <strong>Install related tool</strong>
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
```shell
npm i element-theme -g
```
Then install the default theme from npm or GitHub.
Then install the chalk theme from npm or GitHub.
```shell
# from npm
npm i element-theme-default -D
npm i element-theme-chalk -D
# from GitHub
npm i https://github.com/ElementUI/theme-default -D
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.css` by default. And you can specify its output directory as you will.
#### <strong>Initialize variable file</strong>
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.
```shell
et -i [custom output file]
@ -35,32 +78,32 @@ et -i [custom output file]
> ✔ Generator variables file
```
In `element-variables.css` you can find all the variables we used to style Element and they are defined in CSS4 style:
In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format:
```css
:root {
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
/* Colors
-------------------------- */
--color-primary: #20a0ff;
--color-success: #13ce66;
--color-warning: #f7ba2a;
--color-danger: #ff4949;
--color-info: #50BFFF;
--color-blue: #2e90fe;
--color-blue-light: #5da9ff;
--color-blue-lighter: rgba(var(--color-blue), 0.12);
--color-white: #fff;
--color-black: #000;
--color-grey: #C0CCDA;
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;
```
### Modify variables
Just edit `element-variables.css`, e.g. changing the theme color to red:
#### <strong>Modify variables</strong>
Just edit `element-variables.scss`, e.g. changing the theme color to red:
```CSS
--color-primary: red;
$--color-primary: red;
```
### Build theme
#### <strong>Build theme</strong>
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
```shell
et
@ -69,7 +112,7 @@ et
> ✔ build element theme
```
### Import custom theme
#### <strong>Import custom theme</strong>
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
```javascript
@ -80,7 +123,7 @@ import Vue from 'vue'
Vue.use(ElementUI)
```
### Import component theme on demand
#### <strong>Import component theme on demand</strong>
If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
```json
{
@ -93,4 +136,4 @@ If you are using `babel-plugin-component` for on-demand import, just modify `.ba
}
```
If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.

133
examples/docs/en-US/date-picker.md
View File

@ -57,7 +57,11 @@
value4: '',
value5: '',
value6: '',
value7: ''
value7: '',
value8: '',
value9: '',
value10: '',
value11: ''
};
}
};
@ -206,7 +210,7 @@ You can choose week, month or year by extending the standard date picker compone
Picking a date range is supported.
:::demo
:::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
<template>
@ -215,7 +219,9 @@ Picking a date range is supported.
<el-date-picker
v-model="value6"
type="daterange"
placeholder="Pick a range">
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
</el-date-picker>
</div>
<div class="block">
@ -224,7 +230,10 @@ Picking a date range is supported.
v-model="value7"
type="daterange"
align="right"
placeholder="Pick a range"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:picker-options="pickerOptions2">
</el-date-picker>
</div>
@ -271,22 +280,117 @@ Picking a date range is supported.
:::
### 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
<template>
<div class="block">
<span class="demonstration">date</span>
<el-date-picker
v-model="value8"
type="date"
placeholder="Pick a date"
default-value="2010-10-01">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">daterange</span>
<el-date-picker
v-model="value9"
type="daterange"
start-placeholder="Start Date"
end-placeholder="End Date"
default-value="2010-10-01">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value8: '',
value9: ''
};
}
};
</script>
```
:::
### 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
<template>
<div class="block">
<span class="demonstration">Emits Date object</span>
<div class="demonstration">Value: {{ value10 }}</div>
<el-date-picker
v-model="value10"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Emits formatted date</span>
<div class="demonstration">Value: {{ value11 }}</div>
<el-date-picker
v-model="value11"
type="date"
placeholder="Pick a Date"
format="yyyy/MM/dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value10: '',
value11: '',
};
}
};
</script>
```
:::
### 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 | — |
| 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 | string | — | — |
| 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 picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
| 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 time of the picker | Date | anything accepted by `new Date()` | - |
| 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 |
@ -294,7 +398,7 @@ Picking a date range is supported.
| 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 seleted date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
| 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 |
@ -306,4 +410,11 @@ Picking a date range is supported.
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when input value changes | formatted value |
| 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 | — |

35
examples/docs/en-US/datetime-picker.md
View File

@ -100,6 +100,10 @@
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.
@ -171,7 +175,9 @@ Select date and time in one picker.
<el-date-picker
v-model="value3"
type="datetimerange"
placeholder="Select time range">
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
</el-date-picker>
</div>
<div class="block">
@ -180,7 +186,9 @@ Select date and time in one picker.
v-model="value4"
type="datetimerange"
:picker-options="pickerOptions2"
placeholder="Select time range"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
align="right">
</el-date-picker>
</div>
@ -234,19 +242,27 @@ Select date and time in one picker.
| 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 | string | — | — |
| 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 picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
| 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 | - | ' - ' |
| 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 |
@ -254,9 +270,14 @@ Select date and time in one picker.
| 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 input value changes | formatted value |
| 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 | — |

92
examples/docs/en-US/dialog.md
View File

@ -22,6 +22,9 @@
dialogVisible: false,
dialogTableVisible: false,
dialogFormVisible: false,
outerVisible: false,
innerVisible: false,
centerDialogVisible: false,
form: {
name: '',
region: '',
@ -86,7 +89,7 @@ Dialog pops up a dialog box, and it's quite customizable.
<el-dialog
title="Tips"
:visible.sync="dialogVisible"
size="tiny"
width="30%"
:before-close="handleClose">
<span>This is a message</span>
<span slot="footer" class="dialog-footer">
@ -116,6 +119,10 @@ Dialog pops up a dialog box, and it's quite customizable.
```
:::
:::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。
@ -196,22 +203,101 @@ The content of Dialog can be anything, even a table or a form. This example show
```
:::
### 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
<template>
<el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
<el-dialog title="Outter Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="Inner Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">Cancel</el-button>
<el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
```
:::
:::
### Centered content
Dialog's content can be centered.
:::demo Setting `center` to `true` will center dialog's header and footer horizontally.
```html
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
<el-dialog
title="Warning"
:visible.sync="centerDialogVisible"
width="30%"
center>
<span>It should be noted that the content will not be aligned in center by default</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
centerDialogVisible: false
};
}
};
</script>
```
:::
:::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 | — | — |
| size | size of Dialog | string | tiny/small/large/full | small |
| top | value for `top` of Dialog CSS, works when `size` is not `full` | string | — | 15% |
| 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

142
examples/docs/en-US/dropdown.md
View File

@ -9,9 +9,9 @@
}
.el-dropdown-link {
cursor: pointer;
color: #20a0ff;
color: #409EFF;
}
.el-icon-caret-bottom {
.el-icon-arrow-down {
font-size: 12px;
}
}
@ -61,7 +61,7 @@ Hover on the dropdown menu to unfold it for more actions.
```html
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
@ -71,6 +71,17 @@ Hover on the dropdown menu to unfold it for more actions.
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
```
:::
@ -83,7 +94,7 @@ Use the button to trigger the dropdown list.
```html
<el-dropdown>
<el-button type="primary">
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
@ -103,6 +114,28 @@ Use the button to trigger the dropdown list.
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleClick() {
alert('button click');
}
}
}
</script>
```
:::
@ -118,7 +151,7 @@ Click the triggering element or hover on it.
<span class="demonstration">hover to trigger</span>
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
@ -133,7 +166,7 @@ Click the triggering element or hover on it.
<span class="demonstration">click to trigger</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
@ -145,6 +178,22 @@ Click the triggering element or hover on it.
</el-dropdown>
</el-col>
</el-row>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
```
:::
@ -156,7 +205,7 @@ Use `hide-on-click` to define if menu closes on clicking.
```html
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
@ -166,6 +215,16 @@ Use `hide-on-click` to define if menu closes on clicking.
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
```
:::
@ -177,7 +236,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
```html
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Action 1</el-dropdown-item>
@ -187,6 +246,17 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
@ -199,15 +269,63 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
```
:::
### 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
<el-dropdown split-button type="primary">
Default
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
Medium
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
Small
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
Mini
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
:::
### 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 button size, refer to `Button` Component, only works when `split-button` is true | string | — | — |
| 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 |
| size | component size, refer to `Button` component | string | large, small, mini | — |
| menu-align | horizontal alignment | string | start/end | end |
| 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 |

139
examples/docs/en-US/form.md
View File

@ -5,17 +5,15 @@
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
callback();
}
}, 1000);
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
@ -47,6 +45,16 @@
resource: '',
desc: ''
},
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formInline: {
user: '',
region: ''
@ -264,7 +272,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
@ -426,7 +434,7 @@ Form component allows you to verify your data, helping you find and correct erro
</el-col>
</el-form-item>
<el-form-item label="Instant delivery" prop="delivery">
<el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type" prop="type">
<el-checkbox-group v-model="ruleForm.type">
@ -512,10 +520,11 @@ Form component allows you to verify your data, helping you find and correct erro
### Custom validation rules
:::demo This example shows how to customize your own validation rules to finish a two-factor password verification.
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
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
@ -537,17 +546,15 @@ Form component allows you to verify your data, helping you find and correct erro
if (!value) {
return callback(new Error('Please input the age'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
callback();
}
}, 1000);
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
@ -738,6 +745,75 @@ Form component allows you to verify your data, helping you find and correct erro
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
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
<el-form-item label="Activity name">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="sizeForm.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="sizeForm.type">
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio border label="Sponsor"></el-radio>
<el-radio border label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
}
}
};
</script>
```
:::
### Form Attributes
| Attribute | Description | Type | Accepted Values | Default |
@ -745,18 +821,22 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
| 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-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 | Function(callback: Function(boolean)) |
| 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
@ -769,10 +849,17 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
| 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 |
| Name | Description |
|------|--------|
| — | content of Form Item |
| label | content of label |
### Form-Item Methods
| Method | Description | Parameters |
| ---- | ---- | ---- |
| resetField | reset current field and remove validation result | — |

11
examples/docs/en-US/home.md
View File

@ -1,11 +0,0 @@
# Components Document
<script>
import { addClass } from 'examples/dom/class.js';
module.exports = {
ready() {
addClass(this.$el.parentNode, 'no-toc')
}
}
</script>

2
examples/docs/en-US/i18n.md
View File

@ -102,7 +102,7 @@ const i18n = new VueI18n({
})
Vue.use(Element, {
i18n: (key, value) => i18n.t(key. value)
i18n: (key, value) => i18n.t(key, value)
})
new Vue({ i18n }).$mount('#app')

35
examples/docs/en-US/icon.md
View File

@ -22,7 +22,7 @@
margin: 0 20px;
}
.icon-list {
.page-component .content > ul.icon-list {
overflow: hidden;
list-style: none;
padding: 0;
@ -79,7 +79,7 @@ Just assign the class name to `el-icon-iconName`.
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="search">Search</el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button>
```
:::
@ -94,34 +94,3 @@ Just assign the class name to `el-icon-iconName`.
</span>
</li>
</ul>
### Third-party icons
Some of Element's components has an `icon` attribute, e.g. Input. If you want to use a third-party icon in the `icon` attribute, here's what you need to do:
<p>
<span>1.</span> Modify the class name prefix of the third-party library
</p>
Please read third-party icon library documentation on how to do it. For example, if you're using [iconfont.cn](http://iconfont.cn/), you can find prefix editor in the "Edit Project" dialog. If you're using [Font Awesome](http://fontawesome.io/), you can refer to [this demo](https://github.com/ElementUI/element-font-awesome).
<p>
<span>2.</span> Add some CSS:
</p>
```CSS
[class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"your-font-family" !important;
/* The following is based on original CSS rules of third-party library */
font-size: inherit;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
Now you can use them as you do with Element built-in icons. For example, in el-input:
```html
<el-input icon="my-xxx" />
```

55
examples/docs/en-US/input-number.md
View File

@ -7,7 +7,9 @@
num3: 5,
num4: 1,
num5: 1,
num6: 1
num6: 1,
num7: 1,
num8: 1
}
},
methods: {
@ -99,15 +101,16 @@ Allows you to define incremental steps.
### Size
Additional `large` and `small` sizes of the input box are available
Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo
```html
<template>
<el-input-number size="large" v-model="num4"></el-input-number>
<el-input-number v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number v-model="num4"></el-input-number>
<el-input-number size="medium" v-model="num5"></el-input-number>
<el-input-number size="small" v-model="num6"></el-input-number>
<el-input-number size="mini" v-model="num7"></el-input-number>
</template>
<script>
export default {
@ -115,7 +118,32 @@ Additional `large` and `small` sizes of the input box are available
return {
num4: 1,
num5: 1,
num6: 1
num6: 1,
num7: 1
}
}
};
</script>
```
:::
### Controls Position
:::demo Set `controls-position` to decide the position of control buttons.
```html
<template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num8: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
@ -134,10 +162,19 @@ Additional `large` and `small` sizes of the input box are available
|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 millisecond | number | — | 300 |
|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 |
|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 | - |

189
examples/docs/en-US/input.md
View File

@ -1,18 +1,4 @@
<script>
import Vue from 'vue';
Vue.component('my-item-en', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', ctx.data, [
h('div', { attrs: { class: 'value' } }, [item.value]),
h('span', { attrs: { class: 'link' } }, [item.link])
]);
},
props: {
item: { type: Object, required: true }
}
});
export default {
data() {
return {
@ -20,6 +6,9 @@
input: '',
input1: '',
input2: '',
input21: '',
input22: '',
input23: '',
input3: '',
input4: '',
input5: '',
@ -66,7 +55,7 @@
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString.toLowerCase()) === 0);
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
@ -85,7 +74,7 @@
<style>
.demo-input.demo-en-US {
.el-select .el-input {
width: 110px;
width: 130px;
}
.el-input {
width: 180px;
@ -102,6 +91,19 @@
margin: 0 10px 10px 0;
}
}
.demo-input-suffix {
padding: 10px;
}
.demo-input-suffix .el-input {
margin-right: 15px;
}
.demo-input-label {
display: inline-block;
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.demo-autocomplete {
text-align: center;
@ -190,26 +192,50 @@ export default {
Add an icon to indicate input type.
::: demo You can add an icon at the end of Input by setting the `icon` attribute and use `on-icon-click` hook to complete some work after clicking the icon.
::: 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
<el-input
placeholder="Pick a date"
icon="search"
v-model="input2"
:on-icon-click="handleIconClick">
</el-input>
<div class="demo-input-suffix">
<span class="demo-input-label">Using attributes</span>
<el-input
placeholder="Pick a date"
suffix-icon="el-icon-date"
v-model="input2">
</el-input>
<el-input
placeholder="Type something"
prefix-icon="el-icon-search"
v-model="input21">
</el-input>
</div>
<div class="demo-input-suffix">
<span class="demo-input-label">Using slots</span>
<el-input
placeholder="Pick a date"
v-model="input22">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="Type something"
v-model="input23">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<style>
.demo-input-label {
display: inline-block;
width: 130px;
}
</style>
<script>
export default {
data() {
return {
input2: ''
}
},
methods: {
handleIconClick(ev) {
console.log(ev);
input2: '',
input21: '',
input22: '',
input23: ''
}
}
}
@ -295,13 +321,13 @@ Prepend or append an element, generally a label or a button.
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="Please input" v-model="input5">
<el-input placeholder="Please input" v-model="input5" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="Select">
<el-option label="Restaurant" value="1"></el-option>
<el-option label="Order No." value="2"></el-option>
<el-option label="Tel" value="3"></el-option>
</el-select>
<el-button slot="append" icon="search"></el-button>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
@ -309,6 +335,9 @@ Prepend or append an element, generally a label or a button.
.el-select .el-input {
width: 110px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>
<script>
export default {
@ -331,11 +360,11 @@ export default {
```html
<div class="demo-input-size">
<el-input
size="large"
placeholder="Please Input"
v-model="input6">
</el-input>
<el-input
size="medium"
placeholder="Please Input"
v-model="input7">
</el-input>
@ -413,7 +442,7 @@ You can get some recommended tips based on the current input.
},
createFilter(queryString) {
return (link) => {
return (link.value.indexOf(queryString.toLowerCase()) === 0);
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
@ -443,18 +472,24 @@ You can get some recommended tips based on the current input.
Customize how suggestions are displayed.
:::demo
:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
```html
<el-autocomplete
popper-class="my-autocomplete"
v-model="state3"
:fetch-suggestions="querySearch"
custom-item="my-item-en"
placeholder="Please input"
@select="handleSelect"
icon="edit"
:on-icon-click="handleIconClick"
></el-autocomplete>
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="props">
<div class="value">{{ props.item.value }}</div>
<span class="link">{{ props.item.link }}</span>
</template>
</el-autocomplete>
<style>
.my-autocomplete {
@ -475,19 +510,6 @@ Customize how suggestions are displayed.
</style>
<script>
Vue.component('my-item-en', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', ctx.data, [
h('div', { attrs: { class: 'value' } }, [item.value]),
h('span', { attrs: { class: 'link' } }, [item.link])
]);
},
props: {
item: { type: Object, required: true }
}
});
export default {
data() {
return {
@ -499,12 +521,12 @@ Customize how suggestions are displayed.
querySearch(queryString, cb) {
var links = this.links;
var results = queryString ? link.filter(this.createFilter(queryString)) : links;
// call callback function to return recommended data
// call callback function to return suggestion objects
cb(results);
},
createFilter(queryString) {
return (link) => {
return (link.value.indexOf(queryString.toLowerCase()) === 0);
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
@ -577,7 +599,7 @@ Search data from server-side.
},
createFilter(queryString) {
return (link) => {
return (link.value.indexOf(queryString.toLowerCase()) === 0);
return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
@ -596,16 +618,17 @@ Search data from server-side.
| Attribute | Description | Type | Accepted Values | Default |
| ----| ----| ----| ---- | ----- |
|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text |
|value| binding value | string/number| — | — |
|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 | large/small/mini | — |
|icon | icon name | string | — | — |
|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 |
|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 |
@ -615,15 +638,23 @@ Search data from server-side.
|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 | — | — |
| on-icon-click | hook function when clicking on the input icon | function | — | — |
| 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 |
|----| ----| ----|
|click | triggers when the icon inside Input is clicked | (event: Event) |
| blur | triggers when the icon inside Input is blur | (event: Event) |
| focus | triggers when the icon inside Input is focus | (event: Event) |
| 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
@ -632,21 +663,26 @@ Attribute | Description | Type | Options | Default
|----| ----| ----| ---- | -----|
|placeholder| the placeholder of Autocomplete| string | — | — |
|disabled | whether Autocomplete is disabled | boolean | — | false|
| props | configuration options, see the following table | object | — | — |
| valueKey | key name of the input suggestion object for display | string | — | value |
|icon | icon name | string | — | — |
|value | binding value | string | — | — |
|custom-item | component name of your customized suggestion list item | 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 | — | — |
### props
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------- | ------ | ------ | ------ |
| label | specify which key of option object is used as the option's label | string | — | value |
| value | specify which key of option object is used as the option's value | string | — | value |
### 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
@ -654,8 +690,7 @@ Attribute | Description | Type | Options | Default
|----| ----| ----|
|select | triggers when a suggestion is clicked | suggestion being clicked |
### Methods
| Method | Description | Parameters |
|------|--------|-------|
| focus | focus the Input component | — |

8
examples/docs/en-US/installation.md
View File

@ -12,13 +12,13 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
```html
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
### Hello world
If you are using CDN, a hello-world page is easy with Element. [Online Demo](http://codepen.io/QingWei-Li/pen/vXwJrY)
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
```html
<!DOCTYPE html>
@ -26,12 +26,12 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog v-model="visible" title="Hello world">
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>

36
examples/docs/en-US/layout.md
View File

@ -309,15 +309,15 @@ Use the flex layout to make flexible alignment of columns.
### Responsive Layout
Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
::: demo
```html
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<style>
@ -341,6 +341,27 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
```
:::
### 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 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
@ -359,8 +380,9 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
| 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 | `≥992` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200` 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 |

47
examples/docs/en-US/loading.md
View File

@ -32,7 +32,18 @@
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 3000);
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
@ -51,7 +62,7 @@ Displays animation in a container (such as a table) while loading data.
```html
<template>
<el-table
v-loading.body="loading"
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
@ -102,16 +113,18 @@ Displays animation in a container (such as a table) while loading data.
```
:::
### Loading text
### Customization
You can customize a text message.
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.
:::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
<template>
<el-table
v-loading="loading2"
element-loading-text="Loading..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%">
<el-table-column
@ -160,7 +173,7 @@ You can customize a text message.
Show a full screen animation while loading data.
:::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`.
:::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
<template>
@ -168,7 +181,12 @@ Show a full screen animation while loading data.
type="primary"
@click="openFullScreen"
v-loading.fullscreen.lock="fullscreenLoading">
Full screen loading for 3 seconds
As a directive
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
As a service
</el-button>
</template>
@ -184,7 +202,18 @@ Show a full screen animation while loading data.
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 3000);
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
@ -224,4 +253,6 @@ If Element is imported entirely, a globally method `$loading` will be registered
| 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 | — | — |

103
examples/docs/en-US/menu.md
View File

@ -4,7 +4,7 @@
padding-left: 55px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
width: 240px;
min-height: 400px;
}
.line {
@ -59,9 +59,9 @@ Menu that provides navigation for your website.
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.
::: 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
<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2">
<template slot="title">Workspace</template>
@ -72,7 +72,14 @@ Top bar NavMenu can be used in a variety of scenarios.
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">Processing Center</el-menu-item>
<el-submenu index="2">
<template slot="title">Workspace</template>
@ -108,11 +115,18 @@ 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
<el-row class="tac">
<el-col :span="8">
<h5>With icons</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-col :span="12">
<h5>Default colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<template slot="title">
<i class="el-icon-location"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
@ -125,18 +139,34 @@ Vertical NavMenu with sub-menus.
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span>Navigator Three</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8">
<h5>Without icons</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
<el-col :span="12">
<h5>Custom colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">Navigator One</template>
<template slot="title">
<i class="el-icon-location"></i>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
@ -146,21 +176,14 @@ Vertical NavMenu with sub-menus.
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">Navigator Two</el-menu-item>
<el-menu-item index="3">Navigator Three</el-menu-item>
</el-menu>
</el-col>
<el-col :span="8">
<h5>Groups</h5>
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
<el-menu-item-group title="Group One">
<el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>
<el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
<el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
</el-menu-item-group>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span>Navigator Three</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
@ -193,7 +216,7 @@ Vertical NavMenu could be collapsed.
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>
<i class="el-icon-location"></i>
<span slot="title">Navigator One</span>
</template>
<el-menu-item-group>
@ -249,15 +272,22 @@ Vertical NavMenu could be collapsed.
### Menu Attribute
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| mode | menu display mode | string | horizontal/vertical | vertical |
| mode | menu display mode | string | horizontal / vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
| theme | theme color | string | light/dark | light |
| 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 |
@ -286,10 +316,3 @@ Vertical NavMenu could be collapsed.
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| title | group title | string | — | — |

115
examples/docs/en-US/message-box.md
View File

@ -91,15 +91,42 @@
});
}, 200);
});
}
},
open5() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true
});
},
open6() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
};
</script>
## MessageBox
A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information.
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
@ -260,19 +287,88 @@ Can be customized to show various content.
```
:::
### Use HTML String
`message` supports HTML string.
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
```html
<template>
<el-button type="text" @click="open5">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open5() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true
});
}
}
}
</script>
```
:::
:::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
<template>
<el-button type="text" @click="open6">Click to open Message Box</el-button>
</template>
<script>
export default {
methods: {
open6() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: 'Delete completed'
});
}).catch(() => {
this.$message({
type: 'info',
message: 'Delete canceled'
});
});
}
}
}
</script>
```
:::
### Global method
Element has added 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.
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
Import `MessageBox`:
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 corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
### Options
@ -280,7 +376,8 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | title of the MessageBox | string | — | — |
| message | content of the MessageBox | string | — | — |
| type | message type, used for icon display | string | success/info/warning/error | — |
| 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 | — | — |
@ -293,9 +390,13 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
| 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 |
| 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 |

72
examples/docs/en-US/message.md
View File

@ -62,6 +62,20 @@
message: 'Oops, this is a error message.',
type: 'error'
});
},
openCenter() {
this.$message({
message: 'Centered text',
center: true
});
},
openHTML() {
this.$message({
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
}
}
};
@ -75,7 +89,7 @@ Used to show feedback after an activity. The difference with Notification is tha
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 VNode as parameter, and it will be shown as the main body.
:::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
<template>
@ -199,6 +213,60 @@ A close button can be added.
```
:::
### Centered text
Use the `center` attribute to center the text.
:::demo
```html
<template>
<el-button :plain="true" @click="openCenter">Centered text</el-button>
</template>
<script>
export default {
methods: {
openCenter() {
this.$message({
message: 'Centered text',
center: true
});
}
}
}
</script>
```
:::
### Use HTML string
`message` supports HTML string.
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
```html
<template>
<el-button :plain="true" @click="openHTML">Use HTML String</el-button>
</template>
<script>
export default {
methods: {
openHTML() {
this.$message({
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
}
}
}
</script>
```
:::
:::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.
@ -220,9 +288,11 @@ You can call `Message.closeAll()` to manually close all the instances.
| 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

196
examples/docs/en-US/notification.md
View File

@ -49,6 +49,37 @@
},
open7() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top right corner'
});
},
open8() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right'
});
},
open9() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left'
});
},
open10() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left'
});
},
open11() {
this.$notify.success({
title: 'Success',
message: 'This is a success message',
@ -56,6 +87,22 @@
});
},
open12() {
this.$notify({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
},
open13() {
this.$notify.success({
title: 'Info',
message: 'This is a message without close button',
showClose: false
});
},
onClose() {
console.log('Notification is closed');
}
@ -65,7 +112,7 @@
## Notification
Displays a global notification message at the upper right corner of the page.
Displays a global notification message at a corner of the page.
### Basic usage
@ -177,17 +224,32 @@ We provide four types: success, warning, info and error.
```
:::
### With offset
### Custom position
Customize Notification's offset from the top edge of the screen
Notification can emerge from any corner you like.
::: demo Set the `offset` attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.
::: 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
<template>
<el-button
plain
@click="open7">
Notification with offset
plain
@click="open7">
Top Right
</el-button>
<el-button
plain
@click="open8">
Bottom Right
</el-button>
<el-button
plain
@click="open9">
Bottom Left
</el-button>
<el-button
plain
@click="open10">
Top Left
</el-button>
</template>
@ -195,6 +257,59 @@ Customize Notification's offset from the top edge of the screen
export default {
methods: {
open7() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top right corner'
});
},
open8() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom right corner',
position: 'bottom-right'
});
},
open9() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the bottom left corner',
position: 'bottom-left'
});
},
open10() {
this.$notify({
title: 'Custom Position',
message: 'I\'m at the top left corner',
position: 'top-left'
});
}
}
}
</script>
```
:::
### 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
<template>
<el-button
plain
@click="open11">
Notification with offset
</el-button>
</template>
<script>
export default {
methods: {
open11() {
this.$notify.success({
title: 'Success',
message: 'This is a success message',
@ -207,6 +322,69 @@ Customize Notification's offset from the top edge of the screen
```
:::
### Use HTML string
`message` supports HTML string.
::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
```html
<template>
<el-button
plain
@click="open12">
Use HTML String
</el-button>
</template>
<script>
export default {
methods: {
open12() {
this.$notify({
title: 'HTML String',
dangerouslyUseHTMLString: true,
message: '<strong>This is <i>HTML</i> string</strong>'
});
}
}
}
</script>
```
:::
:::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
<template>
<el-button
plain
@click="open13">
Hide close button
</el-button>
</template>
<script>
export default {
methods: {
open13() {
this.$notify.success({
title: 'Info',
message: 'This is a message without close button',
showClose: false
});
}
}
}
</script>
```
:::
### 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.
@ -226,16 +404,18 @@ In this case you should call `Notification(options)`. We have also registered me
|---------- |-------------- |---------- |-------------------------------- |-------- |
| 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 |
| 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 Message instance. To manually close the instance, you can call `close` on it.
`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 |

5
examples/docs/en-US/pagination.md
View File

@ -7,7 +7,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
@ -205,6 +205,9 @@ Add more modules based on your scenario.
| 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 |

11
examples/docs/en-US/progress.md
View File

@ -1,3 +1,14 @@
<style>
.demo-box.demo-progress {
.el-progress--line {
margin-bottom: 15px;
width: 350px;
}
.el-progress--circle {
margin-right: 15px;
}
}
</style>
## Progress
Progress is used to show the progress of current operation, and inform the user the current status.

168
examples/docs/en-US/quickstart.md
View File

@ -4,127 +4,17 @@ 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 those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
Under construction.
If you prefer not to use them, please read the following.
### Use vue-cli
### Config files
It is recommended to start a project using [vue-cli](https://github.com/vuejs/vue-cli):
Create a new project, and its structure should be
```text
|- src/ --------------------- source code
|- App.vue
|- main.js -------------- entry
|- .babelrc ----------------- babel config
|- index.html --------------- HTML template
|- package.json ------------- npm config
|- README.md ---------------- readme
|- webpack.config.js -------- webpack config
```
Typical configurations for these config files are:
**.babelrc**
```json
{
"presets": ["vue-app"]
}
```
<br>
**package.json**
```json
{
"name": "element-starter",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"element-ui": "^1.0.0",
"vue": "^2.1.6"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-vue-app": "^1.2.0",
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"vue-loader": "^9.8.0",
"webpack": "beta",
"webpack-dev-server": "beta"
}
}
```
<br>
**webpack.config.js**
```javascript
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}
```shell
> npm i -g vue-cli
> mkdir my-project && cd my-project
> vue init webpack
> npm i && npm i element-ui
```
### Import Element
@ -137,7 +27,7 @@ In main.js:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
@ -168,7 +58,7 @@ Then edit .babelrc:
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
"styleLibraryName": "theme-chalk"
}
]]]
}
@ -194,7 +84,7 @@ new Vue({
})
```
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/dev/components.json))
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/carbon/components.json))
```javascript
import Vue from 'vue'
@ -215,6 +105,7 @@ import {
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
@ -244,19 +135,23 @@ import {
Col,
Upload,
Progress,
Spinner,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
Scrollbar,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Loading,
MessageBox,
Message,
@ -308,19 +203,22 @@ Vue.use(Row)
Vue.use(Col)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Spinner)
Vue.use(Badge)
Vue.use(Card)
Vue.use(Rate)
Vue.use(Steps)
Vue.use(Step)
Vue.use(Carousel)
Vue.use(Scrollbar)
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)
@ -333,6 +231,26 @@ 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:

152
examples/docs/en-US/radio.md
View File

@ -7,7 +7,12 @@
radio2: 3,
radio3: 'New York',
radio4: 'New York',
radio5: 'New York'
radio5: 'New York',
radio6: 'New York',
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
};
@ -21,11 +26,11 @@ Single selection among multiple options.
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` or `Number`.
:::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
<template>
<el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
<el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
<el-radio v-model="radio" label="1">Option A</el-radio>
<el-radio v-model="radio" label="2">Option B</el-radio>
</template>
<script>
@ -47,8 +52,8 @@ Radio should not have too many options. Otherwise, use the Select component inst
:::demo You just need to add the `disabled` attribute.
```html
<template>
<el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>
<el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
<el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
</template>
<script>
@ -67,13 +72,13 @@ Radio should not have too many options. Otherwise, use the Select component inst
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.
:::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
<el-radio-group v-model="radio2">
<el-radio :label="3">optionA</el-radio>
<el-radio :label="6">optionB</el-radio>
<el-radio :label="9">optionC</el-radio>
<el-radio :label="3">Option A</el-radio>
<el-radio :label="6">Option B</el-radio>
<el-radio :label="9">Option C</el-radio>
</el-radio-group>
<script>
@ -92,28 +97,42 @@ Suitable for choosing from some mutually exclusive options.
Radio with button styles.
:::demo You just need to change `<el-radio>` element into `<el-radio-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
```html
<el-radio-group v-model="radio3">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio4">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" :disabled="true"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
<div style="margin: 15px 0;"></div>
<el-radio-group v-model="radio5" :disabled="true">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
<template>
<div>
<el-radio-group v-model="radio3">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="medium">
<el-radio-button label="New York" ></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio5" size="small">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington" disabled ></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio6" disabled size="mini">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
export default {
@ -121,7 +140,50 @@ Radio with button styles.
return {
radio3: 'New York',
radio4: 'New York',
radio5: 'New York'
radio5: 'New York',
radio6: 'New York'
};
}
}
</script>
```
:::
### With borders
:::demo The `border` attribute adds a border to Radios.
```html
<template>
<div>
<el-radio v-model="radio7" label="1" border>Option A</el-radio>
<el-radio v-model="radio7" label="2" border>Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio9" size="small">
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border disabled>Option B</el-radio>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio10" size="mini" disabled>
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data () {
return {
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
}
@ -133,29 +195,37 @@ Radio with button styles.
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
label | the value of radio | string/number/boolean | — | —
disabled | whether radio is disabled | boolean | — | false
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 | string | large/small | —
fill | border and background color when button is active | string | — | #20a0ff |
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
| --- | --- | --- |
| 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 | — | —
label | the value of radio | string / number | — | —
disabled | whether radio is disabled | boolean | — | false
name | native 'name' attribute | string | — | —

11
examples/docs/en-US/rate.md
View File

@ -3,7 +3,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
@ -128,15 +128,15 @@ You can use different icons to distinguish different rate components.
Read-only Rate is for displaying rating score. Half star is supported.
:::demo Use attribute `disabled` to make the component read-only. Add `show-text` to display the rating score at the right side. Additionally, you can use attribute `text-template` to provide a text template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
:::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
<el-rate
v-model="value5"
disabled
show-text
show-score
text-color="#ff9900"
text-template="{value} points">
score-template="{value} points">
</el-rate>
<script>
@ -166,9 +166,10 @@ Read-only Rate is for displaying rating score. Half star is supported.
| 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 | — | ['极差', '失望', '一般', '满意', '惊喜'] |
| text-template | text template when the component is read-only | string | — | {value} |
| score-template | score template | string | — | {value} |
### Events
| Event Name | Description | Parameters |

8
examples/docs/en-US/select.md
View File

@ -530,6 +530,7 @@ Enter keywords and search data from server.
multiple
filterable
remote
reserve-keyword
placeholder="Please enter a keyword"
:remote-method="remoteMethod"
:loading="loading">
@ -662,6 +663,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| 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
@ -671,6 +673,8 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| 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 |
@ -685,3 +689,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| 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 | - |

34
examples/docs/en-US/slider.md
View File

@ -22,6 +22,33 @@
}
</script>
<style>
.demo-box.demo-slider .source {
padding: 0;
}
.demo-box.demo-slider .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-box.demo-slider .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-box.demo-slider .demonstration + .el-slider {
float: right;
width: 70%;
margin-right: 20px;
}
</style>
## Slider
Drag the slider within a fixed range.
@ -209,11 +236,12 @@ Selecting a range of values is supported.
| 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) | — | — |
| 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 | — | — |
|debounce| debounce delay when typing, in millisecond, works when `show-input` is true | number | — | 300 |
| 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 |

73
examples/docs/en-US/steps.md
View File

@ -25,7 +25,7 @@ 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
<el-steps :space="100" :active="active" finish-status="success">
<el-steps :active="active" finish-status="success">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
@ -58,7 +58,7 @@ 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
<el-steps :space="100" :active="1" finish-status="success">
<el-steps :space="200" :active="1" finish-status="success">
<el-step title="Done"></el-step>
<el-step title="Processing"></el-step>
<el-step title="Step 3"></el-step>
@ -66,13 +66,28 @@ Shows the status of the step for each step.
```
:::
### Center
Title and desription can be centered.
:::demo
```html
<el-steps :active="2" align-center>
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
<el-step title="Step 4" description="Some description"></el-step>
</el-steps>
```
:::
### Step bar with description
There is description for each step.
:::demo
```html
<el-steps :space="200" :active="1">
<el-steps :active="1">
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
@ -87,10 +102,10 @@ 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
<el-steps :space="100" :active="1">
<el-step title="Step 1" icon="edit"></el-step>
<el-step title="Step 2" icon="upload"></el-step>
<el-step title="Step 3" icon="picture"></el-step>
<el-steps :active="1">
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
```
:::
@ -102,10 +117,32 @@ Vertical step bars.
:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.
```html
<el-steps :space="100" direction="vertical" :active="1">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
<div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step>
</el-steps>
</div>
```
:::
### Simple step bar
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
:::demo
```html
<el-steps :space="200" :active="1" simple>
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="Step 1" ></el-step>
<el-step title="Step 2" ></el-step>
<el-step title="Step 3" ></el-step>
</el-steps>
```
:::
@ -114,21 +151,21 @@ Vertical step bars.
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| space | the spacing of each step, will be responsive if omitted. Support percentage. | Number,String | — | — |
| 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 | whether step description is centered | boolean | — | false |
| center | center whole `Steps` component | boolean | - | false |
| 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 | icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons | string | — |
| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - |
| 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 |

107
examples/docs/en-US/switch.md
View File

@ -12,8 +12,11 @@
return {
value1: true,
value2: true,
value3: '100',
value4: true
value3: true,
value4: true,
value5: '100',
value6: true,
value7: false
}
}
};
@ -24,19 +27,15 @@
Switch is used for switching between two opposing states.
### Basic usage
:::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states.
:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
```html
<el-switch
v-model="value1"
on-text=""
off-text="">
<el-switch v-model="value1">
</el-switch>
<el-switch
v-model="value2"
on-color="#13ce66"
off-color="#ff4949">
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
@ -52,18 +51,49 @@ Switch is used for switching between two opposing states.
```
:::
### Extended value types
:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
### Text description
:::demo You can add `active-text` and `inactive-text` attribute to show texts.
```html
<el-tooltip :content="'Switch value: ' + value3" placement="top">
<el-switch
v-model="value3"
active-text="Pay by month"
inactive-text="Pay by year">
</el-switch>
<el-switch
style="display: block"
v-model="value4"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="Pay by month"
inactive-text="Pay by year">
</el-switch>
<script>
export default {
data() {
return {
value3: true,
value4: true
}
}
};
</script>
```
:::
### Extended value types
:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
```html
<el-tooltip :content="'Switch value: ' + value5" placement="top">
<el-switch
v-model="value3"
on-color="#13ce66"
off-color="#ff4949"
on-value="100"
off-value="0">
v-model="value5"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip>
@ -71,7 +101,7 @@ Switch is used for switching between two opposing states.
export default {
data() {
return {
value3: '100'
value5: '100'
}
}
};
@ -86,13 +116,11 @@ Switch is used for switching between two opposing states.
```html
<el-switch
v-model="value4"
on-text=""
off-text=""
v-model="value6"
disabled>
</el-switch>
<el-switch
v-model="value4"
v-model="value7"
disabled>
</el-switch>
@ -100,7 +128,8 @@ Switch is used for switching between two opposing states.
export default {
data() {
return {
value4: true
value6: true,
value7: false
}
}
};
@ -113,22 +142,24 @@ Switch is used for switching between two opposing states.
Attribute | Description | Type | Accepted Values | Default
----| ----| ----| ----|----
disabled | whether Switch is disabled | boolean | — | false
width | width of Switch | number | — | 58 (with text) / 46 (no text)
on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | —
off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
on-text | text displayed when in `on` state | string | — | ON
off-text | text displayed when in `off` state | string | — | OFF
on-value | switch value when in `on` state | boolean / string / number | — | true
off-value | switch value when in `off` state | boolean / string / number | — | false
on-color | background color when in `on` state | string | — | #20A0FF
off-color | background color when in `off` state | string | — | #C0CCDA
name | input name of Switch | string | — | —
allow-focus | allow `focus` and `blur` events on the input | 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
blur | triggers on blur (if `allow-focus` is true) | event: Event
focus | triggers on focus (if `allow-focus` is true) | event: Event
### Methods
Method | Description | Parameters
------|--------|-------
focus | focus the Switch component | —

347
examples/docs/en-US/table.md
View File

@ -256,17 +256,47 @@
return row.tag === value;
},
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
} else if (index === 3) {
return 'positive-row';
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
deleteRow(index, rows) {
rows.splice(index, 1);
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
indexMethod(index) {
return index * 2;
}
},
@ -279,12 +309,12 @@
</script>
<style>
.el-table .info-row {
background: #c9e5f5;
.el-table .warning-row {
background: oldlace;
}
.el-table .positive-row {
background: #e2f0e4;
.el-table .success-row {
background: #f0f9eb;
}
.demo-table .name-wrapper {
@ -504,23 +534,23 @@ You can highlight your table content to distinguish between "success, informatio
</template>
<style>
.el-table .info-row {
background: #c9e5f5;
.el-table .warning-row {
background: oldlace;
}
.el-table .positive-row {
background: #e2f0e4;
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
methods: {
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
} else if (index === 3) {
return 'positive-row';
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
@ -561,7 +591,6 @@ When there are too many rows, you can use a fixed header.
<el-table
:data="tableData3"
height="250"
border
style="width: 100%">
<el-table-column
prop="date"
@ -629,7 +658,6 @@ When there are too many columns, you can fix some of them.
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
@ -666,7 +694,7 @@ When there are too many columns, you can fix some of them.
fixed="right"
label="Operations"
width="120">
<template scope="scope">
<template slot-scope="scope">
<el-button @click="handleClick" type="text" size="small">Detail</el-button>
<el-button type="text" size="small">Edit</el-button>
</template>
@ -732,7 +760,6 @@ When you have huge chunks of data to put in a table, you can fix the header and
<template>
<el-table
:data="tableData3"
border
style="width: 100%"
height="250">
<el-table-column
@ -839,7 +866,6 @@ When the the data is dynamically changed, you might want the table to have a max
<template>
<el-table
:data="tableData4"
border
style="width: 100%"
max-height="250">
<el-table-column
@ -877,7 +903,7 @@ When the the data is dynamically changed, you might want the table to have a max
fixed="right"
label="Operations"
width="120">
<template scope="scope">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData4)"
type="text"
@ -964,7 +990,6 @@ When the data structure is complex, you can use group header to show the data hi
<template>
<el-table
:data="tableData3"
border
style="width: 100%">
<el-table-column
prop="date"
@ -1150,7 +1175,6 @@ You can also select multiple rows.
<el-table
ref="multipleTable"
:data="tableData3"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
@ -1160,7 +1184,7 @@ You can also select multiple rows.
<el-table-column
label="Date"
width="120">
<template scope="scope">{{ scope.row.date }}</template>
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
property="name"
@ -1244,7 +1268,6 @@ Sort the data to find or compare data quickly.
<template>
<el-table
:data="tableData"
border
:default-sort = "{prop: 'date', order: 'descending'}"
style="width: 100%">
<el-table-column
@ -1308,7 +1331,6 @@ Filter the table to find desired data.
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
@ -1333,7 +1355,7 @@ Filter the table to find desired data.
:filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
:filter-method="filterTag"
filter-placement="bottom-end">
<template scope="scope">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
close-transition>{{scope.row.tag}}</el-tag>
@ -1390,37 +1412,36 @@ Customize table column so it can be integrated with other components.
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
label="Date"
width="180">
<template scope="scope">
<el-icon name="time"></el-icon>
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="Name"
width="180">
<template scope="scope">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>Name: {{ scope.row.name }}</p>
<p>Addr: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag>{{ scope.row.name }}</el-tag>
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="Operations">
<template scope="scope">
<template slot-scope="scope">
<el-button
size="small"
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="small"
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
@ -1474,7 +1495,7 @@ When the row content is too long and you do not want to display the horizontal s
:data="tableData3"
style="width: 100%">
<el-table-column type="expand">
<template scope="props">
<template slot-scope="props">
<p>State: {{ props.row.state }}</p>
<p>City: {{ props.row.city }}</p>
<p>Address: {{ props.row.address }}</p>
@ -1690,20 +1711,245 @@ For table of numbers, you can add an extra row at the table footer displaying ea
```
:::
### 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
<template>
<div>
<el-table
:data="tableData6"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="Amount 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="Amount 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="Amount 3">
</el-table-column>
</el-table>
<el-table
:data="tableData6"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="amount1"
label="Amount 1">
</el-table-column>
<el-table-column
prop="amount2"
label="Amount 2">
</el-table-column>
<el-table-column
prop="amount3"
label="Amount 3">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData6: [{
id: '12987122',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
```
:::
### Custom index
You can customize row index in `type=index` columns.
:::demo To customize row indices, use `index` attribute on <el-table-column> 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
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
type="index"
:index="indexMethod">
</el-table-column>
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}, {
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home'
}, {
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office'
}],
}
},
methods: {
indexMethod(index) {
return index * 2;
}
}
};
</script>
```
:::
### Table Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | table data | array | — | — |
| 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 |
| 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 |
| 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, index)/String | — | — |
| row-style | function that returns custom style for a row, or a string assigning custom style for every row | Function(row, index)/Object | — | — |
| 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 |
@ -1713,6 +1959,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
| 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 |
@ -1732,24 +1979,28 @@ For table of numbers, you can add an extra row at the table footer displaying ea
| 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 | triggers when user expands or collapses a row | row, expanded |
| 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. It is still nested inside the `<tbody>` tag. 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. |
| 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 | — | — |
@ -1758,7 +2009,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
| 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 boolean. | Function(a, b) | — | — |
| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |
| 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 |

39
examples/docs/en-US/tabs.md
View File

@ -24,7 +24,8 @@
name: '2',
content: 'Tab 2 content'
}],
tabIndex: 2
tabIndex: 2,
tabPosition: 'top'
}
},
methods: {
@ -174,6 +175,40 @@ Border card tabs.
:::
### 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
<template>
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
<el-radio-button label="top">top</el-radio-button>
<el-radio-button label="right">right</el-radio-button>
<el-radio-button label="bottom">bottom</el-radio-button>
<el-radio-button label="left">left</el-radio-button>
</el-radio-group>
<el-tabs :tab-position="tabPosition" style="height: 200px;">
<el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
tabPosition: 'top'
};
}
};
</script>
```
:::
### Custom Tab
You can use named slot to customize the tab label content.
@ -339,8 +374,8 @@ Only card type Tabs support addable & closeable.
| closable | whether Tab is closable | boolean | — | false |
| addable | whether Tab is addable | boolean | — | false |
| editable | whether Tab is addable and closable | boolean | — | false |
| active-name(deprecated) | name of the selected tab | string | — | name of first tab |
| 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 |

99
examples/docs/en-US/tag.md
View File

@ -4,11 +4,10 @@
return {
tags: [
{ name: 'Tag 1', type: '' },
{ name: 'Tag 2', type: 'gray' },
{ name: 'Tag 3', type: 'primary' },
{ name: 'Tag 4', type: 'success' },
{ name: 'Tag 5', type: 'warning' },
{ name: 'Tag 6', type: 'danger' }
{ name: 'Tag 2', type: 'success' },
{ name: 'Tag 3', type: 'info' },
{ name: 'Tag 4', type: 'warning' },
{ name: 'Tag 5', type: 'danger' }
],
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
inputVisible: false,
@ -46,18 +45,14 @@
}
.button-new-tag {
margin-left: 10px;
height: 24px;
line-height: 22px;
height: 32px;
line-height: 30px;
padding: 0 *;
}
.input-new-tag {
width: 78px;
width: 90px;
margin-left: 10px;
vertical-align: bottom;
.el-input__inner {
height: 24px;
}
}
}
</style>
@ -72,26 +67,24 @@ Used for marking and selection.
```html
<el-tag>Tag One</el-tag>
<el-tag type="gray">Tag Two</el-tag>
<el-tag type="primary">Tag Three</el-tag>
<el-tag type="success">Tag Four</el-tag>
<el-tag type="warning">Tag Five</el-tag>
<el-tag type="danger">Tag Six</el-tag>
<el-tag type="success">Tag Two</el-tag>
<el-tag type="info">Tag Three</el-tag>
<el-tag type="warning">Tag Four</el-tag>
<el-tag type="danger">Tag Five</el-tag>
```
:::
### 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 `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
:::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
<el-tag
v-for="tag in tags"
:key="tag.name"
:closable="true"
:type="tag.type"
>
{{tag.name}}
closable
:type="tag.type">
{{tag.name}}
</el-tag>
<script>
@ -100,11 +93,10 @@ Used for marking and selection.
return {
tags: [
{ name: 'Tag 1', type: '' },
{ name: 'Tag 2', type: 'gray' },
{ name: 'Tag 3', type: 'primary' },
{ name: 'Tag 4', type: 'success' },
{ name: 'Tag 5', type: 'warning' },
{ name: 'Tag 6', type: 'danger' }
{ name: 'Tag 2', type: 'success' },
{ name: 'Tag 3', type: 'info' },
{ name: 'Tag 4', type: 'warning' },
{ name: 'Tag 5', type: 'danger' }
]
};
}
@ -122,11 +114,10 @@ You can use the `close` event to add and remove tag dynamically.
<el-tag
:key="tag"
v-for="tag in dynamicTags"
:closable="true"
:close-transition="false"
@close="handleClose(tag)"
>
{{tag}}
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
@ -139,6 +130,25 @@ You can use the `close` event to add and remove tag dynamically.
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
<style>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
<script>
export default {
data() {
@ -174,17 +184,32 @@ You can use the `close` event to add and remove tag dynamically.
```
:::
### 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
<el-tag>Default</el-tag>
<el-tag size="medium">Medium</el-tag>
<el-tag size="small">Small</el-tag>
<el-tag size="mini">Mini</el-tag>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| type | theme | string | primary/gray/success/warning/danger | — |
| closable | whether Tab can be removed | boolean | — | false |
| close-transition | whether to disable animations | boolean | — | false |
| 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 | — | — |
| color | background color of the Tag | string | — | — |
| size | tag size | string | medium / small / mini | — |
### Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| close | triggers when Tab is removed | — |
| close | triggers when Tag is removed | — |

61
examples/docs/en-US/time-picker.md
View File

@ -42,7 +42,7 @@ Provide a list of fixed time for users to choose.
Can pick an arbitrary time.
:::demo Use `el-time-picker` label, and you can limit the time range by using `selectableRange`.
:::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
<template>
@ -53,13 +53,22 @@ Can pick an arbitrary time.
}"
placeholder="Arbitrary time">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value3"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="Arbitrary time">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value2: new Date(2016, 9, 10, 18, 40)
value2: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40)
};
}
}
@ -112,13 +121,23 @@ If start time is picked at first, then the end time will change accordingly.
Can pick an arbitrary time range.
:::demo We can pick a time range by adding an `is-range` attribute.
:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
```html
<template>
<el-time-picker
is-range
v-model="value3"
placeholder="Pick a time range">
v-model="value4"
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time">
</el-time-picker>
<el-time-picker
is-range
arrow-control
v-model="value5"
range-separator="To"
start-placeholder="Start time"
end-placeholder="End time">
</el-time-picker>
</template>
@ -126,7 +145,8 @@ Can pick an arbitrary time range.
export default {
data() {
return {
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
};
}
}
@ -140,7 +160,9 @@ Can pick an arbitrary time range.
return {
value1: '',
value2: new Date(2016, 9, 10, 18, 40),
value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value3: new Date(2016, 9, 10, 18, 40),
value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
startTime: '',
endTime: ''
};
@ -154,13 +176,21 @@ Can pick an arbitrary time range.
| 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 | string | — | — |
| 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 |
| 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 `<el-time-picker>` | boolean | — | false |
| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | 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 |
@ -174,12 +204,13 @@ Can pick an arbitrary time range.
### 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 | — | — |
| 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 input value changes | formatted value |
| 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) |

8
examples/docs/en-US/transfer.md
View File

@ -1,7 +1,7 @@
<style>
.demo-transfer {
.transfer-footer {
margin-left: 20px;
margin-left: 15px;
padding: 6px 5px;
}
}
@ -155,7 +155,7 @@ You can search and filter data items.
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 `footer-format` to respectively customize list titles, button texts, render function for data items, checking status texts in list footer. 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.
:::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
<template>
<el-transfer
@ -166,7 +166,7 @@ You can customize list titles, button texts, render function for data items, che
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:footer-format="{
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@ -267,7 +267,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
| 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) | — | — |
| footer-format | texts for checking status in list footer | object{noChecked, hasChecked} | — | { noChecked: '${total} items', hasChecked: '${checked}/${total} checked' } |
| 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 | — | [ ] |

10
examples/docs/en-US/transition.md
View File

@ -35,7 +35,7 @@ You can use Element's built-in transitions directly. Before that, please read th
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -84,7 +84,7 @@ You can use Element's built-in transitions directly. Before that, please read th
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -131,7 +131,7 @@ For collapse effect, use the `el-collapse-transition` component.
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
@ -146,7 +146,7 @@ For collapse effect, use the `el-collapse-transition` component.
```js
// fade/zoom
import 'element-ui/lib/theme-defaut/base.css';
import 'element-ui/lib/theme-chalk/base.css';
// collapse
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #20A0FF;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;

142
examples/docs/en-US/tree.md
View File

@ -137,6 +137,12 @@
children: 'zones'
};
const props1 = {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
};
const defaultProps = {
children: 'children',
label: 'label'
@ -185,6 +191,23 @@
resolve(data);
}, 500);
},
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
},
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
@ -209,23 +232,30 @@
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
append(store, data) {
store.append({ id: id++, label: 'testtest', children: [] }, data);
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(store, data) {
store.remove(data);
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span style="white-space: normal">
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
},
@ -241,9 +271,11 @@
data,
data2,
data3,
data4: JSON.parse(JSON.stringify(data2)),
regions,
defaultProps,
props,
props1,
defaultCheckedKeys: [5],
defaultExpandedKeys: [2, 3],
filterText: ''
@ -321,12 +353,11 @@ Basic tree structure.
### Selectable
Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.
Used for node selection.
::: demo
::: demo This example also shows how to load node data asynchronously.
```html
<el-tree
:data="regions"
:props="props"
:load="loadNode"
lazy
@ -338,11 +369,6 @@ Used for node selection. In the following example, data for each layer is acquir
export default {
data() {
return {
regions: [{
'name': 'region1'
}, {
'name': 'region2'
}],
props: {
label: 'name',
children: 'zones'
@ -393,6 +419,52 @@ Used for node selection. In the following example, data for each layer is acquir
```
:::
### 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
<el-tree
:props="props1"
:load="loadNode1"
lazy
show-checkbox>
</el-tree>
<script>
export default {
data() {
return {
props1: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
```
:::
### Disabled checkbox
The checkbox of a node can be set as disabled.
@ -616,7 +688,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
::: 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
<el-tree
:data="data2"
:data="data4"
:props="defaultProps"
show-checkbox
node-key="id"
@ -631,7 +703,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
export default {
data() {
return {
data2: [{
data4: [{
id: 1,
label: 'Level one 1',
children: [{
@ -674,23 +746,30 @@ The content of tree nodes can be customized, so you can add icons or buttons as
},
methods: {
append(store, data) {
store.append({ id: id++, label: 'testtest', children: [] }, data);
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(store, data) {
store.remove(data);
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span>
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
}
@ -859,9 +938,8 @@ Only one node among the same level can be expanded at one time.
| 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 } | — | — |
| render-content | render function for tree node | Function(h, { node, data, store } | — | — |
| highlight-current | whether current node is highlighted | boolean | — | false |
| current-node-key | key of current node, a set only prop | string, number | — | — |
| 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 |
@ -878,18 +956,24 @@ Only one node among the same level can be expanded at one time.
| --------- | ---------------------------------------- | ------ | --------------- | ------- |
| 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) | — | — |
| 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 |

19
examples/docs/en-US/upload.md
View File

@ -19,7 +19,7 @@
overflow: hidden;
&:hover {
border-color: #20a0ff;
border-color: #409EFF;
}
}
.avatar-uploader-icon {
@ -113,6 +113,9 @@
},
handleChange(file, fileList) {
this.fileList3 = fileList.slice(-3);
},
handleExceed(files, fileList) {
this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
}
}
}
@ -123,13 +126,16 @@ Upload files by clicking or drag-and-drop
### Click to upload files
:::demo Customize upload button type and text using `slot`.
:::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
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
@ -147,6 +153,9 @@ Upload files by clicking or drag-and-drop
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
}
}
}
@ -179,7 +188,7 @@ Use `before-upload` hook to limit the upload file format and size.
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #20a0ff;
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
@ -402,11 +411,13 @@ on-progress | hook function when some progress occurs | function(event, file, fi
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.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
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 |

36
examples/docs/zh-CN/alert.md
View File

@ -115,6 +115,41 @@
```
:::
### 文字居中
使用 `center` 属性让文字水平居中。
::: demo
```html
<template>
<el-alert
title="成功提示的文案"
type="success"
center
show-icon>
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
center
show-icon>
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
center
show-icon>
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
center
show-icon>
</el-alert>
</template>
```
:::
### 带有辅助性文字介绍
包含标题和内容，解释更详细的警告。
@ -171,6 +206,7 @@
| type | 主题 | string | success/warning/info/error | info |
| description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
| closable | 是否可关闭 | boolean | — | true |
| center | 文字是否居中 | boolean | — | true |
| close-text | 关闭按钮自定义文本 | string | — | — |
| show-icon | 是否显示图标 | boolean | — | false |

2
examples/docs/zh-CN/badge.md
View File

@ -98,7 +98,7 @@
```html
<el-badge is-dot class="item">数据查询</el-badge>
<el-badge is-dot class="item">
<el-button class="share-button" icon="share" type="primary"></el-button>
<el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
</el-badge>
<style>

15
examples/docs/zh-CN/breadcrumb.md
View File

@ -17,10 +17,25 @@
```
:::
### 图标分隔符
:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Breadcrumb Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | — | 斜杠'/' |
| separator-class | 图标分隔符 class | string | — | - |
### Breadcrumb Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

175
examples/docs/zh-CN/button.md
View File

@ -1,27 +1,3 @@
<script>
import { addClass } from 'element-ui/src/utils/dom';
export default {
data() {
return {
isLoading: false,
isLoading2: false
};
},
methods: {
handleClick(event) {
console.log(event);
alert('button clicked!');
}
},
mounted() {
this.$nextTick(() => {
let demos = document.querySelectorAll('.source');
let thirdDemo = demos[2];
addClass(thirdDemo, 'intro-block');
});
}
}
</script>
<style>
.demo-box.demo-button {
.el-row {
@ -42,30 +18,6 @@
}
}
}
.demo-box.demo-button .intro-block {
padding: 0;
}
.demo-button .intro-block .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-button .intro-block .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-button .intro-block .wrapper {
float: right;
margin-right: 20px;
}
</style>
## Button 按钮
@ -75,12 +27,35 @@
基础的按钮用法。
:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
:::demo 使用`type`、`plain`和`round`属性来定义 Button 的样式。
```html
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
<div>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>
<div style="margin: 20px 0">
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</div>
<div>
<el-button round>圆形按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</div>
```
:::
@ -91,51 +66,48 @@
:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
```html
<el-button :plain="true" :disabled="true">主要按钮</el-button>
<el-button type="primary" :disabled="true">主要按钮</el-button>
<el-button type="text" :disabled="true">文字按钮</el-button>
<div>
<el-button disabled>默认按钮</el-button>
<el-button type="primary" disabled>主要按钮</el-button>
<el-button type="success" disabled>成功按钮</el-button>
<el-button type="info" disabled>信息按钮</el-button>
<el-button type="warning" disabled>警告按钮</el-button>
<el-button type="danger" disabled>危险按钮</el-button>
</div>
<div style="margin-top: 20px">
<el-button plain disabled>朴素按钮</el-button>
<el-button type="primary" plain disabled>主要按钮</el-button>
<el-button type="success" plain disabled>成功按钮</el-button>
<el-button type="info" plain disabled>信息按钮</el-button>
<el-button type="warning" plain disabled>警告按钮</el-button>
<el-button type="danger" plain disabled>危险按钮</el-button>
</div>
```
:::
### 有颜色倾向
### 文字按钮
不同的颜色倾向代表不同的提示
:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
没有边框和背景色的按钮。
:::demo
```html
<div class="block">
<span class="demonstration">默认显示颜色</span>
<span class="wrapper">
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
</span>
</div>
<div class="block">
<span class="demonstration">hover 显示颜色</span>
<span class="wrapper">
<el-button :plain="true" type="success">成功按钮</el-button>
<el-button :plain="true" type="warning">警告按钮</el-button>
<el-button :plain="true" type="danger">危险按钮</el-button>
<el-button :plain="true" type="info">信息按钮</el-button>
</span>
</div>
<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>
```
:::
### 图标按钮
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
```html
<el-button type="primary" icon="edit"></el-button>
<el-button type="primary" icon="share"></el-button>
<el-button type="primary" icon="delete"></el-button>
<el-button type="primary" icon="search">搜索</el-button>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
```
:::
@ -148,13 +120,13 @@
```html
<el-button-group>
<el-button type="primary" icon="arrow-left">上一页</el-button>
<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="edit"></el-button>
<el-button type="primary" icon="share"></el-button>
<el-button type="primary" icon="delete"></el-button>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
```
:::
@ -174,24 +146,33 @@
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
```html
<el-button type="primary" size="large">大型按钮</el-button>
<el-button type="primary">正常按钮</el-button>
<el-button type="primary" size="small">小型按钮</el-button>
<el-button type="primary" size="mini">超小按钮</el-button>
<div>
<el-button>默认按钮</el-button>
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
</div>
<div style="margin-top: 20px">
<el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button>
</div>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | large,small,mini | — |
| type | 类型 | string | primary,success,warning,danger,info,text | — |
| plain | 是否朴素按钮 | Boolean | — | false |
| loading | 是否加载中状态 | Boolean | — | false |
| size | 尺寸 | string | medium / small / mini | — |
| type | 类型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆形按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标，已有的图标库中的图标名 | string | — | — |
| icon | 图标类名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button,submit,reset | button |
| native-type | 原生 type 属性 | string | button / submit / reset | button |

14
examples/docs/zh-CN/card.md
View File

@ -25,7 +25,7 @@
}
.item {
padding: 18px 0;
margin-bottom: 18px;
}
.button {
@ -58,8 +58,8 @@
```html
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="line-height: 36px;">卡片名称</span>
<el-button style="float: right;" type="primary">操作按钮</el-button>
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
@ -72,16 +72,16 @@
}
.item {
padding: 18px 0;
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
display: table;
content: "";
}
.clearfix:after {
clear: both
clear: both
}
.box-card {

2
examples/docs/zh-CN/carousel.md
View File

@ -15,7 +15,7 @@
padding: 30px;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {

6
examples/docs/zh-CN/cascader.md
View File

@ -263,7 +263,7 @@
padding: 30px 0;
text-align: center;
border-right: solid 1px #EFF2F6;
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
&:last-child {
@ -1678,7 +1678,8 @@
| filterable | 是否可搜索选项 | boolean | — | — |
| debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
| change-on-select | 是否允许选择任意一级的选项 | boolean | — | false |
| size | 尺寸 | string | large / small / mini | — |
| size | 尺寸 | string | medium / small / mini | — |
| before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |
### props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
@ -1687,7 +1688,6 @@
| label | 指定选项标签为选项对象的某个属性值 | string | — | — |
| children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
| disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
| before-filter | 可选参数, 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选。 | function(value) | — | — |
### Events
| 事件名称 | 说明 | 回调参数 |

161
examples/docs/zh-CN/checkbox.md
View File

@ -8,6 +8,10 @@
checked: true,
checked1: false,
checked2: true,
checked3: true,
checked4: false,
checked5: false,
checked6: true,
isValid: '可用',
checkAll: false,
cities: cityOptions,
@ -15,16 +19,19 @@
checkedCities1: ['上海', '北京'],
isIndeterminate: true,
checkboxGroup1: ['上海'],
checkboxGroup2: ['北京'],
checkboxGroup3: ['广州']
checkboxGroup2: ['上海'],
checkboxGroup3: ['上海'],
checkboxGroup4: ['上海'],
checkboxGroup5: [],
checkboxGroup6: []
};
},
methods: {
handleChange(ev) {
console.log(ev);
},
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
@ -35,18 +42,6 @@
}
};
</script>
<style>
.demo-box.demo-checkbox {
.checkbox {
margin-right: 5px;
& + .checkbox {
margin-left: 10px;
}
}
}
</style>
## Checkbox 多选框
一组备选项中进行多选
@ -145,15 +140,15 @@
export default {
data() {
return {
checkAll: true,
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
@ -201,21 +196,29 @@
按钮样式的多选组合。
:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性，支持`large`和`small`两种。
:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。
```html
<template>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
@ -223,38 +226,100 @@
data () {
return {
checkboxGroup1: ['上海'],
checkboxGroup2: ['北京'],
checkboxGroup3: ['广州'],
checkboxGroup2: ['上海'],
checkboxGroup3: ['上海'],
checkboxGroup4: ['上海'],
cities: cityOptions
};
}
}
</script>
```
:::
### 带有边框
:::demo 设置`border`属性可以渲染为带有边框的多选框。
```html
<template>
<div>
<el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
<el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
<el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup5" size="small">
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
<el-checkbox label="备选项1" border></el-checkbox>
<el-checkbox label="备选项2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data () {
return {
checked3: true,
checked4: false,
checked5: false,
checked6: true,
checkboxGroup5: [],
checkboxGroup6: []
};
}
}
</script>
```
:::
### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string | — | — |
| true-label | 选中时的值 | string, number | — | — |
| false-label | 没有选中时的值 | string, number | — | — |
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
| true-label | 选中时的值 | string / number | — | — |
| false-label | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| border | 是否显示边框 | boolean | — | false |
| size | Checkbox 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | — |
| name | 原生 name 属性 | string | — | — |
| disabled | 按钮禁用 | boolean | — | false |
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
### Checkbox-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | Checkbox 按钮组尺寸 | string | large, small | — |
| fill | 按钮激活时的填充色和边框色 | string | — | #20a0ff |
| text-color | 按钮激活时的文本颜色 | string | — | #ffffff |
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
### Checkbox Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | event 事件对象 |
| change | 当绑定值变化时触发的事件 | 更新后的值 |
### Checkbox-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效 | string | medium / small / mini | — |
| disabled | 是否禁用 | boolean | — | false |
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
| text-color | 按钮形式的 Checkbox 激活时的文本颜色 | string | — | #ffffff |
| fill | 按钮形式的 Checkbox 激活时的填充色和边框色 | string | — | #409EFF |
### Checkbox-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | 更新后的值 |
### Checkbox-button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean | — | — |
| true-label | 选中时的值 | string / number | — | — |
| false-label | 没有选中时的值 | string / number | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 原生 name 属性 | string | — | — |
| checked | 当前是否勾选 | boolean | — | false |

Some files were not shown because too many files have changed in this diff Show More