InputGroup and InputGroupAddon demo updates
tugcekucukoglu
parent
91c4766bed
commit
b6f452a700
|
|
@ -3,23 +3,23 @@
|
|||
<p>An InputGroup is created by wrapping the input and add-ons inside an element with a <i>p-inputgroup</i> class where add-ons also should be inside an element with <i>.p-inputgroup-addon</i> class.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">www</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>www</InputGroupAddon>
|
||||
<InputText placeholder="Website" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -30,67 +30,67 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">www</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>www</InputGroupAddon>
|
||||
<InputText placeholder="Website" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">www</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>www</InputGroupAddon>
|
||||
<InputText placeholder="Website" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">www</span>
|
||||
<InputGroup>
|
||||
<InputGroupAddon>www</InputGroupAddon>
|
||||
<InputText placeholder="Website" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -3,21 +3,21 @@
|
|||
<p>Buttons can be placed at either side of an input element.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Keyword" />
|
||||
<Button icon="pi pi-search" severity="warning" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button icon="pi pi-check" severity="success" />
|
||||
<InputText placeholder="Vote" />
|
||||
<Button icon="pi pi-times" severity="danger" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -28,57 +28,57 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Keyword" />
|
||||
<Button icon="pi pi-search" severity="warning" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button icon="pi pi-check" severity="success" />
|
||||
<InputText placeholder="Vote" />
|
||||
<Button icon="pi pi-times" severity="danger" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Keyword" />
|
||||
<Button icon="pi pi-search" severity="warning" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button icon="pi pi-check" severity="success" />
|
||||
<InputText placeholder="Vote" />
|
||||
<Button icon="pi pi-times" severity="danger" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button label="Search" />
|
||||
<InputText placeholder="Keyword" />
|
||||
</div>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Keyword" />
|
||||
<Button icon="pi pi-search" severity="warning" />
|
||||
</div>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<Button icon="pi pi-check" severity="success" />
|
||||
<InputText placeholder="Vote" />
|
||||
<Button icon="pi pi-times" severity="danger" />
|
||||
|
|
|
|||
|
|
@ -3,29 +3,29 @@
|
|||
<p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue1" name="rb1" value="rb1" />
|
||||
</span>
|
||||
</div>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked2" :binary="true" />
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Website" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue2" name="rb2" value="rb2" />
|
||||
</span>
|
||||
</div>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -40,56 +40,56 @@ export default {
|
|||
radioValue2: '',
|
||||
code: {
|
||||
basic: `
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue1" name="rb1" value="rb1" />
|
||||
</span>
|
||||
</div>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked2" :binary="true" />
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Website" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue2" name="rb2" value="rb2" />
|
||||
</span>
|
||||
</div>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue1" name="rb1" value="rb1" />
|
||||
</span>
|
||||
</div>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked2" :binary="true" />
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputText placeholder="Website" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue2" name="rb2" value="rb2" />
|
||||
</span>
|
||||
</div>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -109,26 +109,26 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-column md:flex-row gap-3">
|
||||
<div class="p-inputgroup flex-1">
|
||||
<InputGroup>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue1" name="rb1" value="rb1" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
</span>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
|
||||
<div class="p-inputgroup flex-1">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup>
|
||||
<InputGroupAddon>
|
||||
<Checkbox v-model="checked2" :binary="true" />
|
||||
</span>
|
||||
<InputText placeholder="Website" />
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroupAddon>
|
||||
<RadioButton v-model="radioValue2" name="rb2" value="rb2" />
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
<p>Multiple add-ons can be placed inside the same group.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="p-inputgroup w-full md:w-30rem">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup class="w-full md:w-30rem">
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-clock"></i>
|
||||
</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
</InputGroupAddon>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -24,49 +24,49 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<div class="p-inputgroup w-full md:w-30rem">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup class="w-full md:w-30rem">
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-clock"></i>
|
||||
</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
</InputGroupAddon>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="p-inputgroup w-full md:w-30rem">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup class="w-full md:w-30rem">
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-clock"></i>
|
||||
</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
</InputGroupAddon>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</template>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="p-inputgroup w-full md:w-30rem">
|
||||
<span class="p-inputgroup-addon">
|
||||
<InputGroup class="w-full md:w-30rem">
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-clock"></i>
|
||||
</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
</InputGroupAddon>
|
||||
<InputGroupAddon>
|
||||
<i class="pi pi-star-fill"></i>
|
||||
</span>
|
||||
</InputGroupAddon>
|
||||
<InputNumber placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
<InputGroupAddon>$</InputGroupAddon>
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</template>
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue