FloatLabel 將標籤與其表單元素視覺整合。
import FloatLabel from 'primevue/floatlabel';
FloatLabel 用於包裝輸入和其標籤。
<FloatLabel>
<InputText id="username" v-model="value" />
<label for="username">Username</label>
</FloatLabel>
variant 屬性定義標籤的位置。預設值為 over，而 in 和 on 是替代方案。
<FloatLabel variant="in">
<InputText id="in_label" v-model="value1" autocomplete="off" />
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<InputText id="on_label" v-model="value2" autocomplete="off" />
<label for="on_label">On Label</label>
</FloatLabel>
當表單元素無效時，標籤也會突出顯示。
<FloatLabel>
<InputText id="value1" v-model="value1" :invalid="!value1" />
<label for="value1">Username</label>
</FloatLabel>
<FloatLabel variant="in">
<InputText id="value2" v-model="value2" :invalid="!value2" />
<label for="value2">Username</label>
</FloatLabel>
<FloatLabel variant="on">
<InputText id="value3" v-model="value3" :invalid="!value3" />
<label for="value3">Username</label>
</FloatLabel>
FloatLabel 不需要任何角色和屬性。
元件不包含任何互動元素。