Angular Material Select 带列

Question

我正在尝试设置 selection 面板的样式，使项目显示在多列中，但每列的最后一项似乎偏离中心并分开，从顶部开始溢出下一栏。理想情况下滚动是垂直的，但它似乎水平滚动以覆盖溢出。我的列表有 30 多个项目，并且允许多个 selection。目标是一次向用户显示尽可能多的选项，这样他们就不必滚动太多。

全栈闪电战： https://stackblitz.com/edit/angular-bt3gs6

select-多个-example.scss

.toppings-panel.mat-select-panel {
  column-count: 2;
  column-width: 200px;
  width: 400px;
  max-width: 400px;
}

select-多个-example.html

  <mat-select [formControl]="toppings" panelClass="toppings-panel" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>

select-多个-example.ts

export class SelectMultipleExample {
  toppings = new FormControl();
  toppingList: string[] = ['Pepperoni', 'Sausage', 'Ham', 'Bacon', 'Chicken', 
                           'Mushroom', 'Red onion', 'White onion', 'Tomato', 'Olives', 
                           'Green bell peppers', 'Pineapple', 'Artichoke', 'Spinach', 
                           'Basil', 'Hot pepper flakes', 
                           'Parmesan', 'Shredded cheddar', 'Extra mozzarella'];
}

Answer 1

偏离中心和分裂的列的问题是 .mat-select-panel 的高度。

它有max-height:256px;（在Angular Material代码中设置）。但是，由于它有一个水平滚动条（高度为 17px，在 Windows - Chrome 中），可用的剩余 space 将是：256 - 17 = 239px.

mat-option 的高度为 48px，因此一列中的 5 个选项需要 240px.

一个快速的解决方案是将 .mat-select-panel 的高度增加到 257px:

演示：https://stackblitz.com/edit/angular-bt3gs6-wxwkgg

但是，上面的例子在MacOS上无法正确显示；它显示像绝对定位内容一样的滚动条，并且它有更多 space 可用：

我找到了一个跨平台解决方案，删除列（这有点难以实现跨浏览器和跨平台）并采取 .mat-select-panel 元素的 display: flex 方法：

水平滚动:

.toppings-panel.mat-select-panel {
  width: 400px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 257px;   // min-height needed for windows browsers
}

 .toppings-panel.mat-select-panel .mat-option {
   min-width: 50%;  // 50% to have 2 columns visible
  }

演示：https://stackblitz.com/edit/angular-bt3gs6-lwvwav

垂直滚动:

如果您更喜欢垂直滚动，只需从上面的代码中删除 flex-direction: column; 并使用 max-height 来设置默认可见行：

.toppings-panel.mat-select-panel {
  width: 400px;
  max-width: 400px;
  display: flex;
  flex-wrap: wrap;

  max-height: 240px; /* 240px - for 5 items / column */
}

.toppings-panel.mat-select-panel .mat-option {
  min-width: 50%;
}

演示：https://stackblitz.com/edit/angular-bt3gs6-iykn4w

Angular Material Select 带列

Angular Material Select w/ Columns

css

multiple-columns

angular-material

angular