如何在角镖材料下拉选择顶部添加浮动标签

Question

一些 Angular-dart 材质 组件带有一个浮动标签，位于输入元素的顶部。

它由例如启用。以下语法：

<material-input type="number" floatingLabel label="Label text"></material-input>

我现在希望材质下拉选择也一样，但它似乎不提供此功能。所以问题是，我将如何最好地实现它？

Answer 1

我现在想出了以下 css 代码：

.dropdown_with_label {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.dropdown_with_label > span {
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(0, 0, 0, 0.54);
  display: inline-block;
  padding-bottom: 10px;
}

html 看起来像这样

<div class="dropdown_with_label">
    <span>Title</span>
    <material-dropdown-select [buttonText]="foo"
        <div header>
            <material-select-searchbox
                label="Search..."
                [filterable]="bar">
            </material-select-searchbox>
        </div>
    </material-dropdown-select>
</div>