文字、圖示、按鈕和其他內容可以分組在輸入框旁邊。
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>
內嵌頂部對齊標籤用於建立欄位內頂部對齊的標籤。如需更多資訊，請參閱 內嵌頂部對齊標籤 文件。
<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 不需要任何角色和屬性。
元件不包含任何互動元素。