IconField 包裹一个输入框和一个图标。
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
IconField 包裹 InputIcon 和输入字段组件。
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Search" />
</IconField>
<IconField>
<InputText v-model="value2" variant="filled" />
<InputIcon class="pi pi-spin pi-spinner" />
</IconField>
InputIcon 内的自定义内容定义为子元素。
<IconField>
<InputIcon>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--p-primary-color)" />
<path d="..." fill="var(--p-text-color)" />
</svg>
</InputIcon>
<InputText v-model="value" placeholder="Search" />
</IconField>
浮动标签在视觉上将标签与其表单元素集成在一起。请访问 浮动标签 文档以获取更多信息。
<FloatLabel>
<IconField>
<InputIcon class="pi pi-search" />
<InputText id="over_label" v-model="value1" autocomplete="off" />
</IconField>
<label for="over_label">Over Label</label>
</FloatLabel>
<FloatLabel variant="in">
<IconField>
<InputIcon class="pi pi-search" />
<InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
</IconField>
<label for="in_label">In Label</label>
</FloatLabel>
<FloatLabel variant="on">
<IconField>
<InputIcon class="pi pi-search" />
<InputText id="on_label" v-model="value3" autocomplete="off" />
</IconField>
<label for="on_label">On Label</label>
</FloatLabel>
内联标签用于创建内嵌顶部对齐的标签。请访问 内联标签 文档以获取更多信息。
<IftaLabel>
<IconField>
<InputIcon class="pi pi-user" />
<InputText id="username" v-model="value" variant="filled" />
</IconField>
<label for="username">Username</label>
</IftaLabel>
IconField 与输入字段的尺寸设置兼容。
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Small" size="small" />
</IconField>
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value2" placeholder="Normal" />
</IconField>
<IconField>
<InputText v-model="value3" placeholder="Large" size="large" />
<InputIcon class="pi pi-spin pi-spinner" />
</IconField>
IconField 和 InputIcon 不需要任何角色和属性。
组件不包含任何交互元素。