如何在新线上拆分材料芯片？

Question

按下输入后，我需要拆分下一行的每个项目。 Material Chips。有关如何入门的任何指示。

我开始使用textarea并开始编写自定义CSS来实现它。但UI并不像Material那样伟大。

Answer 1

您可以在md-chips指令上添加自定义css类。之后，将css规则添加到样式md-chip子元素。

CHECK THIS PLUNKER WITH 3 DIFFERENT EXAMPLES

<强> HTML：

<md-chips class="chip-new-line" ng-model="data" placeholder="Enter an animal"></md-chips>

<强> CSS

.chip-new-line md-chip {
  display: block;
  clear: left;
  float: left;
}

可选：如果您想要每个芯片占用100％的容器，请使用以下css代替：

.chip-new-line md-chip {
   display: block;
   width: 100%;
}