角ダーツ素材ドロップダウンの上にフローティングラベルを追加する方法

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>