Skip to content

E
Element
Commit d1bcc796 authored by cinwell.li's avatar cinwell.li Committed by GitHub
Browse files
Options

Merge pull request #2954 from Leopoldthecoder/dev 

misc doc updates
parents 8ea9e715 f9d799ce
Show whitespace changes
Inline Side-by-side
Showing with 138 additions and 74 deletions
examples/docs/en-US/checkbox.md
View file @ d1bcc796
<script> <script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen']; const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
module.exports = { module.exports = {
data() { data() {
return { return {
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
isValid: 'valid', isValid: 'valid',
checkAll: false, checkAll: false,
cities: cityOptions, cities: cityOptions,
checkedCities: ['ShangHai', 'BeiJing'], checkedCities: ['Shanghai', 'Beijing'],
isIndeterminate: true isIndeterminate: true
}; };
}, },
...@@ -34,13 +34,13 @@ ...@@ -34,13 +34,13 @@
## Checkbox ## Checkbox
A group of options for multiple choices. content in that tag will become the description following the button of the checkbox. A group of options for multiple choices.
### Basic usage ### Basic usage
Checkbox can be used alone to switch between two states. Checkbox can be used alone to switch between two states.
:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. :::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox.
```html ```html
<template> <template>
...@@ -87,7 +87,7 @@ Disabled state for checkbox. ...@@ -87,7 +87,7 @@ Disabled state for checkbox.
It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked. It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. in `el-checkbox` element, `label` is the value of the checkbox. While no content in that tag, it's also modify the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa. :::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` is the value of the checkbox. If no content is nested in that tag, `label` will be rendered as the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.
```html ```html
<template> <template>
...@@ -127,12 +127,12 @@ The `indeterminate` property can help you to achieve a 'check all' effect. ...@@ -127,12 +127,12 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
</el-checkbox-group> </el-checkbox-group>
</template> </template>
<script> <script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen']; const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default { export default {
data() { data() {
return { return {
checkAll: true, checkAll: true,
checkedCities: ['ShangHai', 'BeiJing'], checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions, cities: cityOptions,
isIndeterminate: true isIndeterminate: true
}; };
......
examples/docs/en-US/i18n.md
View file @ d1bcc796
...@@ -124,6 +124,9 @@ Currently Element ships with the following languages: ...@@ -124,6 +124,9 @@ Currently Element ships with the following languages:
<li>Bulgarian (bg)</li> <li>Bulgarian (bg)</li>
<li>Polish (pl)</li> <li>Polish (pl)</li>
<li>Finnish (fi)</li> <li>Finnish (fi)</li>
<li>Swedish (sv-SE)</li>
<li>Greek (el)</li>
<li>Slovak (sk)</li>
</ul> </ul>
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request. If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
examples/docs/zh-CN/i18n.md
View file @ d1bcc796
...@@ -136,6 +136,9 @@ Vue.use(Element, { ...@@ -136,6 +136,9 @@ Vue.use(Element, {
<li>保加利亚语（bg）</li> <li>保加利亚语（bg）</li>
<li>波兰语（pl）</li> <li>波兰语（pl）</li>
<li>芬兰语（fi）</li> <li>芬兰语（fi）</li>
<li>瑞典语（sv-SE）</li>
<li>希腊语（el）</li>
<li>斯洛伐克语（sk）</li>
</ul> </ul>
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
examples/docs/zh-CN/table.md
View file @ d1bcc796
...@@ -161,6 +161,39 @@ ...@@ -161,6 +161,39 @@
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区金沙江路 1518 弄',
zip: 200333 zip: 200333
}], }],
tableData5: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],
currentRow: null, currentRow: null,
multipleSelection: [] multipleSelection: []
}; };
...@@ -229,6 +262,18 @@ ...@@ -229,6 +262,18 @@
.demo-table .name-wrapper { .demo-table .name-wrapper {
display: inline-block; display: inline-block;
} }
.demo-table .demo-table-expand {
label {
width: 90px;
color: #99a9bf;
}
.el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
}
</style> </style>
## Table 表格 ## Table 表格
...@@ -1371,87 +1416,101 @@ ...@@ -1371,87 +1416,101 @@
```html ```html
<template> <template>
<el-table <el-table
:data="tableData3" :data="tableData5"
style="width: 100%"> style="width: 100%">
<el-table-column type="expand"> <el-table-column type="expand">
<template scope="props"> <template scope="props">
<p>省: {{ props.row.province }}</p> <el-form label-position="left" inline class="demo-table-expand">
<p>市: {{ props.row.city }}</p> <el-form-item label="商品名称">
<p>住址: {{ props.row.detailAddress }}</p> <span>{{ props.row.name }}</span>
<p>邮编: {{ props.row.zip }}</p> </el-form-item>
<el-form-item label="所属店铺">
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label="店铺 ID">
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label="商品分类">
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label="店铺地址">
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="日期" label="商品 ID"
prop="date"> prop="id">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="姓名" label="商品名称"
prop="name"> prop="name">
</el-table-column> </el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table> </el-table>
</template> </template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<script> <script>
export default { export default {
data() { data() {
return { return {
tableData3: [{ tableData5: [{
date: '2016-05-03', id: '12987122',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, { }, {
date: '2016-05-02', id: '12987123',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, { }, {
date: '2016-05-04', id: '12987125',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, { }, {
date: '2016-05-01', id: '12987126',
name: '王小虎', name: '好滋好味鸡蛋仔',
province: '上海', category: '江浙小吃、小吃零食',
city: '普陀区', desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区金沙江路 1518 弄', address: '上海市普陀区真北路',
detailAddress: '金沙江路 1518 弄', shop: '王小虎夫妻店',
zip: 200333 shopId: '10333'
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}] }]
} }
} }
......
packages/theme-default/src/common/var.css
View file @ d1bcc796
...@@ -521,12 +521,10 @@ ...@@ -521,12 +521,10 @@
--menu-item-color: var(--link-color); --menu-item-color: var(--link-color);
--menu-item-fill: var(--color-extra-light-gray); --menu-item-fill: var(--color-extra-light-gray);
--menu-item-hover-fill: var(--disabled-border-base); --menu-item-hover-fill: var(--disabled-border-base);
--submenu-item-fill: var(--color-light-gray);
--dark-menu-item-color: var(--link-color); --dark-menu-item-color: var(--link-color);
--dark-menu-item-fill: var(--color-light-black); --dark-menu-item-fill: var(--color-light-black);
--dark-menu-item-hover-fill: var(--link-color); --dark-menu-item-hover-fill: var(--link-color);
--dark-submenu-item-fill: var(--color-base-black);
/* Rate /* Rate
--------------------------*/ --------------------------*/
......
packages/theme-default/src/date-picker/time-picker.css
View file @ d1bcc796
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
color: var(--color-white); color: var(--color-white);
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
margin-top: -7px; margin-top: -15px;
line-height: 16px; line-height: 16px;
background-color: var(--datepicker-active-color); background-color: var(--datepicker-active-color);
height: 32px; height: 32px;
......
packages/tree/src/tree.vue
View file @ d1bcc796
...@@ -110,6 +110,7 @@ ...@@ -110,6 +110,7 @@
}, },
currentNodeKey(newVal) { currentNodeKey(newVal) {
this.store.setCurrentNodeKey(newVal); this.store.setCurrentNodeKey(newVal);
this.store.currentNodeKey = newVal;
}, },
data(newVal) { data(newVal) {
this.store.setData(newVal); this.store.setData(newVal);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment