From 333a010d3b4879774e02d3ba7bf94ea93c78c328 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Wed, 25 Oct 2017 11:58:58 +0800 Subject: [PATCH] Table: add size --- README.md | 15 +++++++------ examples/app.vue | 2 +- examples/components/footer.vue | 6 ++++- examples/docs/en-US/input.md | 8 ++++++- examples/docs/en-US/table.md | 33 ++++++++++++++-------------- examples/docs/en-US/tree.md | 6 ++--- examples/docs/zh-CN/input.md | 8 ++++++- examples/docs/zh-CN/table.md | 25 +++++++++++---------- examples/docs/zh-CN/tree.md | 6 ++--- examples/i18n/component.json | 4 ++++ examples/pages/template/resource.tpl | 2 +- packages/select/src/select.vue | 13 ++++++----- packages/table/src/table.vue | 10 +++++++-- packages/theme-chalk/src/input.scss | 2 +- packages/theme-chalk/src/table.scss | 20 +++++++++++++++++ 15 files changed, 105 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 56a7afcb5..a00ef83fd 100644 --- a/README.md +++ b/README.md @@ -23,23 +23,24 @@ ## 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 diff --git a/examples/app.vue b/examples/app.vue index fcc12cdf0..c8532ef28 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -76,7 +76,7 @@ .main-cnt { margin-top: -80px; - padding: 80px 0 120px; + padding: 80px 0 340px; box-sizing: border-box; min-height: 100%; } diff --git a/examples/components/footer.vue b/examples/components/footer.vue index bc2801edc..64caddd65 100644 --- a/examples/components/footer.vue +++ b/examples/components/footer.vue @@ -7,6 +7,8 @@ {{ langConfig.changelog }} {{ langConfig.faq }} {{ langConfig.starter }} + {{ langConfig.theme }} + {{ langConfig.preview }} Element-React Element-Angular @@ -15,6 +17,7 @@ {{ langConfig.gitter }} {{ langConfig.feedback }} {{ langConfig.contribution }} + SegmentFault Awesome Element
@@ -45,8 +48,9 @@ background-color: #F7FBFD; width: 100%; padding: 40px 150px; - margin-top: -120px; + margin-top: -340px; box-sizing: border-box; + height: 340px; .container { box-sizing: border-box; diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index e6e963641..1d387c6cd 100644 --- a/examples/docs/en-US/input.md +++ b/examples/docs/en-US/input.md @@ -101,6 +101,9 @@ display: inline-block; width: 130px; } + .input-with-select .el-input-group__prepend { + background-color: #fff; + } .demo-autocomplete { text-align: center; @@ -318,7 +321,7 @@ Prepend or append an element, generally a label or a button.
- + @@ -332,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; + } @@ -544,9 +544,9 @@ You can highlight your table content to distinguish between "success, informatio methods: { tableRowClassName(row, index) { if (index === 1) { - return 'info-row'; + return 'warning-row'; } else if (index === 3) { - return 'positive-row'; + return 'success-row'; } return ''; } @@ -1848,13 +1848,14 @@ Configuring rowspan and colspan allows you to merge cells ### 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 | — | — | diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index f77bcb3b2..835cfaa8c 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -353,9 +353,9 @@ 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
- + @@ -357,6 +360,9 @@ export default { .el-select .el-input { width: 130px; } + .input-with-select .el-input-group__prepend { + background-color: #fff; + } @@ -584,9 +584,9 @@ methods: { tableRowClassName(row, index) { if (index === 1) { - return 'info-row'; + return 'warning-row'; } else if (index === 3) { - return 'positive-row'; + return 'success-row'; } return ''; } @@ -1916,6 +1916,7 @@ | max-height | Table 的最大高度 | string/number | — | — | | stripe | 是否为斑马纹 table | boolean | — | false | | border | 是否带有纵向边框 | boolean | — | false | +| size | Table 的尺寸 | string | medium / small / mini | — | | fit | 列的宽度是否自撑开 | boolean | — | true | | show-header | 是否显示表头 | boolean | — | true | | highlight-current-row | 是否要高亮当前行 | boolean | — | false | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index 0e1ff8c1a..cc823ca7a 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -353,9 +353,9 @@ ### 可选择 -适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。 +适用于需要选择层级时使用。 -::: demo +::: demo 本例还展示了动态加载节点数据的方法。 ```html { - if (!this.$refs.reference || !this.$refs.tags) return; + if (!this.$refs.reference) return; let inputChildNodes = this.$refs.reference.$el.childNodes; let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]; - input.style.height = this.selected.length === 0 && this.size === 'mini' - ? sizeMap[this.size] - : Math.max(this.$refs.tags.clientHeight + 10, sizeMap[this.size] || 40) + 'px'; + const tags = this.$refs.tags; + input.style.height = this.selected.length === 0 && this.selectSize === 'mini' + ? sizeMap[this.selectSize] + : Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px'; if (this.visible && this.emptyText !== false) { this.broadcast('ElSelectDropdown', 'updatePopper'); } diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index e2797f260..5d0c6eef0 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -1,6 +1,6 @@