浮动标签在视觉上将标签与其表单元素集成在一起。
import FloatLabel from 'primevue/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>
浮动标签不需要任何角色和属性。
组件不包含任何交互元素。