如何在角度飛鏢材料下拉列表上添加浮動標籤選擇

Question

某些角度飛鏢材料組件帶有位於輸入元件頂部的浮動標籤。

它是由例如使能下面的語法：

<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>