So fügen Sie ein schwebendes Etikett oben auf eckigem Pfeilmaterial hinzu Dropdown-Menü wählen Sie

Question

Einige der Komponenten des Angular Dart-Materials werden mit einem schwebenden Etikett geliefert, das auf dem Eingangselement sitzt.

Es wird beispielsweise durch aktiviert die folgende Syntax:

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

Ich würde nun das gleiche für einen Material-Drop-Down-select will, aber es scheint es diese Funktion nicht zur Verfügung stellen. Die Frage ist also, wie würde ich das am besten umsetzen?

Answer 1

kam ich nun mit dem folgenden CSS-Code auf:

.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; 
} 

und die html wie folgt aussieht

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