堆栈md-chips垂直angularjs

时间:2017-02-13 14:16:47

标签: angularjs angular-material md-chip

我正在测试AngularJS中的md-chips指令。

有没有办法堆叠芯片'垂直而不是水平地附加芯片?

我一直在尝试这里发现的演示:

https://material.angularjs.org/latest/demo/chips

1 个答案:

答案 0 :(得分:2)

以下CSS样式是使芯片垂直堆叠所需的最小值:

md-chip {
  clear: left;
}

md-chip的默认CSS是       float: left并应用clear: left会导致芯片相互清除并垂直堆叠。应用float: none或其他一些样式来更改浮动似乎很容易打破默认指令,导致无法访问输入字段并添加新芯片。我注意到可能需要应用其他一些样式来修复包含芯片的.md-chips容器,例如限制其宽度以获得所需的结果。

请参阅:Vertically Stacking Chips Demo on Codepen