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

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>