vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

InputGroup and InputGroupAddon demo updates

pull/4762/head
tugcekucukoglu 2023-11-06 13:38:32 +03:00
parent 91c4766bed
commit b6f452a700
4 changed files with 146 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
doc/inputgroup/BasicDoc.vue
View File

@ -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> <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> </DocSectionText>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
</span> </InputGroupAddon>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">www</span> <InputGroupAddon>www</InputGroupAddon>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
</div> </InputGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -30,67 +30,67 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
</span> </InputGroupAddon>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">www</span> <InputGroupAddon>www</InputGroupAddon>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
</div> </InputGroup>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
</span> </InputGroupAddon>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">www</span> <InputGroupAddon>www</InputGroupAddon>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
</div> </InputGroup>
</div> </div>
</template> </template>
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
</span> </InputGroupAddon>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon">www</span> <InputGroupAddon>www</InputGroupAddon>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
</div> </InputGroup>
</div> </div>
</template> </template>
` `

42
doc/inputgroup/ButtonDoc.vue
View File

@ -3,21 +3,21 @@
<p>Buttons can be placed at either side of an input element.</p> <p>Buttons can be placed at either side of an input element.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<Button label="Search" /> <Button label="Search" />
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <Button icon="pi pi-times" severity="danger" />
</div> </InputGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -28,57 +28,57 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<div class="p-inputgroup flex-1"> <InputGroup>
<Button label="Search" /> <Button label="Search" />
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <Button icon="pi pi-times" severity="danger" />
</div> </InputGroup>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<Button label="Search" /> <Button label="Search" />
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <Button icon="pi pi-times" severity="danger" />
</div> </InputGroup>
</div> </div>
</template> </template>
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<Button label="Search" /> <Button label="Search" />
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
</div> </div>
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Keyword" /> <InputText placeholder="Keyword" />
<Button icon="pi pi-search" severity="warning" /> <Button icon="pi pi-search" severity="warning" />
</div> </div>
<div class="p-inputgroup flex-1"> <InputGroup>
<Button icon="pi pi-check" severity="success" /> <Button icon="pi pi-check" severity="success" />
<InputText placeholder="Vote" /> <InputText placeholder="Vote" />
<Button icon="pi pi-times" severity="danger" /> <Button icon="pi pi-times" severity="danger" />

98
doc/inputgroup/CheckboxDoc.vue
View File

@ -3,29 +3,29 @@
<p>Checkbox and RadioButton components can be combined with an input element under the same group.</p> <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
</DocSectionText> </DocSectionText>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Price" /> <InputText placeholder="Price" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue1" name="rb1" value="rb1" /> <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
</span> </InputGroupAddon>
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked1" :binary="true" /> <Checkbox v-model="checked1" :binary="true" />
</span> </InputGroupAddon>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked2" :binary="true" /> <Checkbox v-model="checked2" :binary="true" />
</span> </InputGroupAddon>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue2" name="rb2" value="rb2" /> <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
</span> </InputGroupAddon>
</div> </InputGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -40,56 +40,56 @@ export default {
radioValue2: '', radioValue2: '',
code: { code: {
basic: ` basic: `
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Price" /> <InputText placeholder="Price" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue1" name="rb1" value="rb1" /> <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
</span> </InputGroupAddon>
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked1" :binary="true" /> <Checkbox v-model="checked1" :binary="true" />
</span> </InputGroupAddon>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked2" :binary="true" /> <Checkbox v-model="checked2" :binary="true" />
</span> </InputGroupAddon>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue2" name="rb2" value="rb2" /> <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
</span> </InputGroupAddon>
</div> </InputGroup>
`, `,
options: ` options: `
<template> <template>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Price" /> <InputText placeholder="Price" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue1" name="rb1" value="rb1" /> <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
</span> </InputGroupAddon>
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked1" :binary="true" /> <Checkbox v-model="checked1" :binary="true" />
</span> </InputGroupAddon>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </InputGroup>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked2" :binary="true" /> <Checkbox v-model="checked2" :binary="true" />
</span> </InputGroupAddon>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue2" name="rb2" value="rb2" /> <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
</span> </InputGroupAddon>
</div> </InputGroup>
</div> </div>
</template> </template>
@ -109,26 +109,26 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex flex-column md:flex-row gap-3"> <div class="card flex flex-column md:flex-row gap-3">
<div class="p-inputgroup flex-1"> <InputGroup>
<InputText placeholder="Price" /> <InputText placeholder="Price" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue1" name="rb1" value="rb1" /> <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
</span> </span>
</div> </div>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked1" :binary="true" /> <Checkbox v-model="checked1" :binary="true" />
</span> </span>
<InputText placeholder="Username" /> <InputText placeholder="Username" />
</div> </div>
<div class="p-inputgroup flex-1"> <InputGroup>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<Checkbox v-model="checked2" :binary="true" /> <Checkbox v-model="checked2" :binary="true" />
</span> </span>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
<span class="p-inputgroup-addon"> <InputGroupAddon>
<RadioButton v-model="radioValue2" name="rb2" value="rb2" /> <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
</span> </span>
</div> </div>

64
doc/inputgroup/MultipleDoc.vue
View File

@ -3,17 +3,17 @@
<p>Multiple add-ons can be placed inside the same group.</p> <p>Multiple add-ons can be placed inside the same group.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-inputgroup w-full md:w-30rem"> <InputGroup class="w-full md:w-30rem">
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
</span> </InputGroupAddon>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-star-fill"></i> <i class="pi pi-star-fill"></i>
</span> </InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -24,49 +24,49 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<div class="p-inputgroup w-full md:w-30rem"> <InputGroup class="w-full md:w-30rem">
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
</span> </InputGroupAddon>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-star-fill"></i> <i class="pi pi-star-fill"></i>
</span> </InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-inputgroup w-full md:w-30rem"> <InputGroup class="w-full md:w-30rem">
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
</span> </InputGroupAddon>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-star-fill"></i> <i class="pi pi-star-fill"></i>
</span> </InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
</div> </div>
</template> </template>
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-inputgroup w-full md:w-30rem"> <InputGroup class="w-full md:w-30rem">
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
</span> </InputGroupAddon>
<span class="p-inputgroup-addon"> <InputGroupAddon>
<i class="pi pi-star-fill"></i> <i class="pi pi-star-fill"></i>
</span> </InputGroupAddon>
<InputNumber placeholder="Price" /> <InputNumber placeholder="Price" />
<span class="p-inputgroup-addon">$</span> <InputGroupAddon>$</InputGroupAddon>
<span class="p-inputgroup-addon">.00</span> <InputGroupAddon>.00</InputGroupAddon>
</div> </InputGroup>
</div> </div>
</template> </template>
` `