[Feature Request] wants a new size to adjust components to smaller points

xing1994
创建于
2018-12-28 10:00:22

Existing Component

Component Name

日期选择器,时间选择器,选择器

Description

我感觉 这个UI的 组件 总体来说偏大, 即使 size = mini 的时候,还是感觉比较大。特别是日期选择器,差不多占了半个屏幕。页面根本无法显示更多数据,对比下 大小程度,感觉ant-design的好一点,但我还是喜欢element-UI。所以希望组件的可以小一点。

11条回答
element-bot
回复于
2018-12-28 10:00:25
#1

Translation of this issue:

Existing Component
yes

Component Name
Date selector, time selector, selector

Description
I feel that the components of this UI are generally larger, even when size = mini, they still feel larger. Date selectors, in particular, account for almost half of the screen. The page can't display more data at all. It feels better to compare the size of ant-design, but I still like element-UI. So I hope the components can be smaller.

georgyfarniev
回复于
2018-12-29 03:37:49
#2

I agree. It’s convenient to have smaller size that would fit inside table with size mini row height. For now we have custom solution for this.

c5ms
回复于
2019-01-07 08:05:44
#3

I agree.
Now we make a theme named "compact",and override some scss .
juse like

@import "~element-ui/packages/theme-chalk/src/mixins/mixins";
@import "~element-ui/packages/theme-chalk/src/common/var";

@include b(input) {
  @include m(compact) {
    @include e(inner) {
      height: $line-height;
      line-height: $line-height;
      font-size: $--size-base;
      padding: 0 6px;
      width: 100%;
    }
    .el-input__icon {
      height: $line-height - 2;
      line-height: $line-height - 2;
    }

    &.el-textarea {
      vertical-align: top;
    }
    .el-textarea__inner {
      padding: 0 6px;
      font-size: $--size-base;
      border: 1px solid #ecf0f4;
      width: 100%;
    }

    @include m(suffix) {
      .el-input__inner {
        padding-right: 10px;
      }
    }
  }

  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0 10px;

    .el-select,
    .el-button {
      margin: -10px -10px;
    }
  }
}

ChuckFields
回复于
2019-02-05 13:46:59
#4

I very much agree with this as well. We have pages with hundreds of UI components and even 'mini' is too big. We are also using custom css to make it all fit. It would be nice to have a 'compact' size built into this library.

IssueHuntBot
回复于
2019-02-14 19:26:32
#5

@ChuckFields has funded $50.00 to this issue. See it on IssueHunt

wacky6
回复于
2019-02-15 07:31:50
#6

Can you elaborate on which size to change? Only the input box or picker's popup calendar?

ChuckFields
回复于
2019-02-15 14:04:55
#7

@wacky6 I'm proposing adding a new size called 'compact'. This would be for every component that has the size attribute. Buttons, radio groups, checkbox groups, all inputs, all date pickers, tags, tables, dropdowns, forms etc. This compact size would be even smaller than mini. You can see everywhere that mini is used in SCSS here. This new 'compact' size should be one step smaller than mini and should look consistent everywhere. Here you can see an example of large, medium, small and mini. You'll probably also want to update any documentation as well for the pull request to be accepted.

wacky6
回复于
2019-02-15 16:03:46
#8

How would you expect this size to fit with other component (i.e. table, dialog slots)

As far as I can recall, size prop only affects the input box. It does not change popup panel’s size. Is this expected, or should we adjust their sizes accordingly (this change will be breaking, it will only land in 3.0 [if possible]).

ChuckFields
回复于
2019-02-15 16:54:43
#9

The table has a size attribute. I'm not too concerned with dialog slots.
It would be nice if the date picker popup panels size reflected the size the date picker was given, but it's not necessary. I might create a separate FR for that.

ChuckFields
回复于
2019-03-26 13:02:03
#10

Moving my request here

当前位于第1页,总计11 条回复

推荐相似问题

[Bug Report] el-table component adds show-overflow-tooltip, how to style the tooltip here without affecting the global tooltip style

Element UI version 2.4.11 OS/Browsers version windows10/chrome 71 Vue version 2.5.21 Reproduction Link https://jsfiddle.
讨论数 4
element
创建时间:2018-12-28 09:42:46

Can [Feature Request] Table Components Support Search

Existing Component 是 Component Name table Description 现有的例子中只有一个带搜索的,而且不是表格组件本身的搜索功能,我使用这种方式的搜索后,会跟表格组件的selection功能冲突,当表
讨论数 3
element
创建时间:2018-12-28 09:22:57

[Bug Report] el-table组件添加 show-overflow-tooltip,当鼠标移到<td><div class="cell el-tooltip"></div></td>的边框时,会触发tooltip不断出现消失

Element UI version 2.4.11 OS/Browsers version windows10/chrome 71 Vue version 2.5.21 Reproduction Link https://jsfiddle.
讨论数 2
element
创建时间:2018-12-28 09:18:36

[Bug Report] el-table component adds show-overflow-tooltip, and text in tooltip cannot be copied by mouse selection

Element UI version 2.4.11 OS/Browsers version windows10/chrome 71 Vue version 2.5.21 Reproduction Link https://jsfiddle.
讨论数 4
element
创建时间:2018-12-28 09:10:22

[Feature Request] tree组件大量数据渲染性能问题

tree下级出现大量数据的时候,点击展开会很慢很卡,问题出现在展开渲染,七百多条数据不行,使用Dropdown组件时渲染这么多数据很快,有没有什么解决方案,或者提供思路
讨论数 2
element
创建时间:2018-12-28 08:21:33

[Bug Report] When show-summary and fixed are opened under the multilevel header, a column does not display summary.

Element UI version 2.4.11 OS/Browsers version Chrome Vue version 2.5.21 Reproduction Link https://jsfiddle.net/leaping/5
讨论数 2
element
创建时间:2018-12-28 08:17:00
讨论数 2
element
创建时间:2018-12-28 08:04:03

tree组件大量数据渲染性能问题

tree下级出现大量数据的时候,点击展开会很慢很卡,问题出现在展开渲染,七百多条数据不行,使用Dropdown组件时渲染这么多数据很快,有没有什么解决方案,或者提供思路
讨论数 2
element
创建时间:2018-12-28 07:58:22

[Bug Report] table filter failed: there's no proper filter value in filter object which passes into filter change handler.

Element UI version 2.4.11 OS/Browsers version mac / chrome Vue version 2.5.21 Reproduction Link https://github.com/Eleme
讨论数 3
element
创建时间:2018-12-28 07:11:42
讨论数 2
element
创建时间:2018-12-28 07:02:39