文本、图标、按钮和其他内容可以分组在输入框旁边。
import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';
通过使用 InputGroup 组件包裹输入框和附加组件来创建一个组。每个附加组件元素都定义为 InputGroupAddon 组件的子组件。
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<InputText v-model="text1" placeholder="Username" />
</InputGroup>
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<InputNumber v-model="number" placeholder="Price" />
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>www</InputGroupAddon>
<InputText v-model="text2" placeholder="Website" />
</InputGroup>
<InputGroup>
<InputGroupAddon>
<i class="pi pi-map"></i>
</InputGroupAddon>
<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="City" />
</InputGroup>
多个附加组件可以放在同一个组内。
<InputGroup class="sm:!w-96">
<InputGroupAddon>
<i class="pi pi-clock"></i>
</InputGroupAddon>
<InputGroupAddon>
<i class="pi pi-star-fill"></i>
</InputGroupAddon>
<InputNumber placeholder="Price" />
<InputGroupAddon>$</InputGroupAddon>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
按钮可以放在输入元素的任一侧。
<InputGroup>
<Button label="Search" />
<InputText placeholder="Keyword" />
</InputGroup>
<InputGroup>
<InputText placeholder="Keyword" />
<InputGroupAddon>
<Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
</InputGroupAddon>
</InputGroup>
<Menu ref="menu" :model="items" popup class="!min-w-fit" />
<InputGroup>
<InputGroupAddon>
<Button icon="pi pi-check" severity="secondary" />
</InputGroupAddon>
<InputText placeholder="Vote" />
<InputGroupAddon>
<Button icon="pi pi-times" severity="secondary" />
</InputGroupAddon>
</InputGroup>
复选框和单选按钮组件可以与同一组下的输入元素组合。
<InputGroup>
<InputText placeholder="Price" />
<InputGroupAddon>
<RadioButton v-model="radioValue1" name="rb1" value="rb1" />
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>
<Checkbox v-model="checked1" :binary="true" />
</InputGroupAddon>
<InputText placeholder="Username" />
</InputGroup>
<InputGroup>
<InputGroupAddon>
<Checkbox v-model="checked2" :binary="true" />
</InputGroupAddon>
<InputText placeholder="Website" />
<InputGroupAddon>
<RadioButton v-model="radioValue2" name="rb2" value="rb2" />
</InputGroupAddon>
</InputGroup>
浮动标签在视觉上将标签与其表单元素集成在一起。请访问 浮动标签 文档了解更多信息。
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<FloatLabel>
<InputText id="over_label" v-model="value1" />
<label for="over_label">Over Label</label>
</FloatLabel>
</InputGroup>
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<FloatLabel variant="in">
<InputText id="in_label" v-model="value2" />
<label for="in_label">In Label</label>
</FloatLabel>
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupAddon>www</InputGroupAddon>
<FloatLabel variant="on">
<InputText id="on_label" v-model="value3" />
<label for="on_label">On Label</label>
</FloatLabel>
</InputGroup>
IftaLabel 用于创建内嵌顶部对齐标签。请访问 Ifta 标签 文档了解更多信息。
<InputGroup class="md:w-80">
<InputGroupAddon>
<i class="pi pi-shopping-cart"></i>
</InputGroupAddon>
<IftaLabel>
<InputNumber v-model="value" inputId="price" mode="currency" currency="USD" locale="en-US" />
<label for="price">Price</label>
</IftaLabel>
</InputGroup>
InputGroup 和 InputGroupAddon 不需要任何角色和属性。
该组件不包含任何交互元素。