Skip to content

E
Element
Commit f9d799ce authored by Leopoldthecoder's avatar Leopoldthecoder
Browse files
Options

misc doc updates

parent 1b8657ce
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 74 deletions
examples/docs/en-US/checkbox.md
View file @ f9d799ce
<script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
module.exports = {
data() {
return {
......@@ -11,7 +11,7 @@
isValid: 'valid',
checkAll: false,
cities: cityOptions,
checkedCities: ['ShangHai', 'BeiJing'],
checkedCities: ['Shanghai', 'Beijing'],
isIndeterminate: true
};
},
......@@ -34,13 +34,13 @@
## 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
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
<template>
......@@ -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.
:::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
<template>
......@@ -127,12 +127,12 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
</el-checkbox-group>
</template>
<script>
const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
export default {
data() {
return {
checkAll: true,
checkedCities: ['ShangHai', 'BeiJing'],
checkedCities: ['Shanghai', 'Beijing'],
cities: cityOptions,
isIndeterminate: true
};
......
examples/docs/en-US/i18n.md
View file @ f9d799ce
......@@ -124,6 +124,9 @@ Currently Element ships with the following languages:
<li>Bulgarian (bg)</li>
<li>Polish (pl)</li>
<li>Finnish (fi)</li>
<li>Swedish (sv-SE)</li>
<li>Greek (el)</li>
<li>Slovak (sk)</li>
</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.
examples/docs/zh-CN/i18n.md
View file @ f9d799ce
......@@ -136,6 +136,9 @@ Vue.use(Element, {
<li>保加利亚语（bg）</li>
<li>波兰语（pl）</li>
<li>芬兰语（fi）</li>
<li>瑞典语（sv-SE）</li>
<li>希腊语（el）</li>
<li>斯洛伐克语（sk）</li>
</ul>
如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
examples/docs/zh-CN/table.md
View file @ f9d799ce
......@@ -161,6 +161,39 @@
address: '上海市普陀区金沙江路 1518 弄',
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,
multipleSelection: []
};
......@@ -229,6 +262,18 @@
.demo-table .name-wrapper {
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>
## Table 表格
......@@ -1371,87 +1416,101 @@
```html
<template>
<el-table
:data="tableData3"
:data="tableData5"
style="width: 100%">
<el-table-column type="expand">
<template scope="props">
<p>省: {{ props.row.province }}</p>
<p>市: {{ props.row.city }}</p>
<p>住址: {{ props.row.detailAddress }}</p>
<p>邮编: {{ props.row.zip }}</p>
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名称">
<span>{{ props.row.name }}</span>
</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>
</el-table-column>
<el-table-column
label="日期"
prop="date">
label="商品 ID"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
label="商品名称"
prop="name">
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table>
</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>
export default {
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
detailAddress: '金沙江路 1518 弄',
zip: 200333
}, {
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
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'
}]
}
}
......
packages/theme-default/src/common/var.css
View file @ f9d799ce
......@@ -521,12 +521,10 @@
--menu-item-color: var(--link-color);
--menu-item-fill: var(--color-extra-light-gray);
--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-fill: var(--color-light-black);
--dark-menu-item-hover-fill: var(--link-color);
--dark-submenu-item-fill: var(--color-base-black);
/* Rate
--------------------------*/
......
packages/theme-default/src/date-picker/time-picker.css
View file @ f9d799ce
......@@ -24,7 +24,7 @@
color: var(--color-white);
position: absolute;
font-size: 14px;
margin-top: -7px;
margin-top: -15px;
line-height: 16px;
background-color: var(--datepicker-active-color);
height: 32px;
......
packages/tree/src/tree.vue
View file @ f9d799ce
......@@ -110,6 +110,7 @@
},
currentNodeKey(newVal) {
this.store.setCurrentNodeKey(newVal);
this.store.currentNodeKey = newVal;
},
data(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