Demo update
cagataycivici
parent
a05b0a5758
commit
66fa8030df
|
|
@ -11,13 +11,13 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
||||||
<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
|
<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionTab header="Header I">
|
<AccordionTab header="Header I">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header II">
|
<AccordionTab header="Header II">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header III">
|
<AccordionTab header="Header III">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
@ -27,13 +27,13 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
||||||
<p>Visibility of the content is specified with the active property that supports one or two-way binding.</p>
|
<p>Visibility of the content is specified with the active property that supports one or two-way binding.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionTab header="Header I" :active="true">
|
<AccordionTab header="Header I" :active="true">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header II">
|
<AccordionTab header="Header II">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header III">
|
<AccordionTab header="Header III">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
@ -43,14 +43,14 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
||||||
<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple
|
<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple
|
||||||
tabs be active at the same time.</p>
|
tabs be active at the same time.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Accordion :multiple="true" >
|
<Accordion :multiple="true" >
|
||||||
<AccordionTab header="Header I">
|
<AccordionTab header="Header I">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header II">
|
<AccordionTab header="Header II">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header III">
|
<AccordionTab header="Header III">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
@ -60,13 +60,13 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
||||||
<p>A tab can be disabled by setting the disabled property to true.</p>
|
<p>A tab can be disabled by setting the disabled property to true.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionTab header="Header I">
|
<AccordionTab header="Header I">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header II">
|
<AccordionTab header="Header II">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header III" :disabled="true">
|
<AccordionTab header="Header III" :disabled="true">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
@ -77,22 +77,22 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
<span>Header I</span>
|
<span>Header I</span>
|
||||||
</template>
|
</template>
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
<span>Header II</span>
|
<span>Header II</span>
|
||||||
</template>
|
</template>
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
<span>Header III</span>
|
<span>Header III</span>
|
||||||
</template>
|
</template>
|
||||||
Content
|
Content
|
||||||
|
|
@ -104,19 +104,19 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
||||||
<p>Tabs can be controlled programmatically using active property.</p>
|
<p>Tabs can be controlled programmatically using active property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div>
|
<div>
|
||||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
||||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion :multiple="true">
|
<Accordion :multiple="true">
|
||||||
<AccordionTab header="Header I" :active="active1">
|
<AccordionTab header="Header I" :active="active1">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header II" :active="active2">
|
<AccordionTab header="Header II" :active="active2">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Header III" :active="active3">
|
<AccordionTab header="Header III" :active="active3">
|
||||||
Content
|
Content
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
@ -258,27 +258,27 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>AccordionPanel</h1>
|
<h1>AccordionPanel</h1>
|
||||||
<p>AccordionPanel groups a collection of contents in tabs.</p>
|
<p>AccordionPanel groups a collection of contents in tabs.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Default</h3>
|
<h3 class="first">Default</h3>
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionTab header="Godfather I">
|
<AccordionTab header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather II">
|
<AccordionTab header="Godfather II">
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather III">
|
<AccordionTab header="Godfather III">
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
|
|
@ -286,45 +286,45 @@ export default {
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<Accordion :multiple="true">
|
<Accordion :multiple="true">
|
||||||
<AccordionTab header="Godfather I">
|
<AccordionTab header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather II">
|
<AccordionTab header="Godfather II">
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather III">
|
<AccordionTab header="Godfather III">
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather IV" :disabled="true">
|
<AccordionTab header="Godfather IV" :disabled="true">
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
<h3>Programmatic</h3>
|
<h3>Programmatic</h3>
|
||||||
<div style="padding: .5em 0">
|
<div style="padding: .5em 0">
|
||||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
||||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion :multiple="true">
|
<Accordion :multiple="true">
|
||||||
<AccordionTab header="Godfather I" :active="active1">
|
<AccordionTab header="Godfather I" :active="active1">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather II" :active="active2">
|
<AccordionTab header="Godfather II" :active="active2">
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather III" :active="active3">
|
<AccordionTab header="Godfather III" :active="active3">
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
|
|
@ -332,10 +332,10 @@ export default {
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
<h3>Custom Headers</h3>
|
<h3>Custom Headers</h3>
|
||||||
<Accordion class="accordion-custom">
|
<Accordion class="accordion-custom">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
<span>Godfather I</span>
|
<span>Godfather I</span>
|
||||||
</template>
|
</template>
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
|
|
@ -343,8 +343,8 @@ export default {
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-user"></i>
|
<i class="pi pi-user"></i>
|
||||||
<span>Godfather II</span>
|
<span>Godfather II</span>
|
||||||
</template>
|
</template>
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
|
|
@ -352,10 +352,10 @@ export default {
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-search"></i>
|
<i class="pi pi-search"></i>
|
||||||
<span>Godfather III</span>
|
<span>Godfather III</span>
|
||||||
<i class="pi pi-cog"></i>
|
<i class="pi pi-cog"></i>
|
||||||
</template>
|
</template>
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import AutoComplete from 'primevue/autocomplete';
|
||||||
<p>AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method
|
<p>AutoComplete uses v-model for two-way binding, requires a list of suggestions and a complete method to query for the results. The complete method
|
||||||
gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;</p>
|
gets the query text as event.query property and should update the suggestions with the search results. Example below connects to a remote datasource to fetch the results;</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" />
|
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -39,13 +39,13 @@ export default {
|
||||||
"blank" is the default mode to send a query with an empty string whereas
|
"blank" is the default mode to send a query with an empty string whereas
|
||||||
"current" setting sends a query with the current value of the input.</p>
|
"current" setting sends a query with the current value of the input.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" />
|
<AutoComplete v-model="brand" :dropdown="true" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Multiple Mode</h3>
|
<h3>Multiple Mode</h3>
|
||||||
<p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
|
<p>Multiple mode is enabled using <i>multiple</i> property to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Objects</h3>
|
<h3>Objects</h3>
|
||||||
|
|
@ -53,16 +53,16 @@ export default {
|
||||||
as a suggestion. The value passed to the model would still be the object instance of a suggestion.
|
as a suggestion. The value passed to the model would still be the object instance of a suggestion.
|
||||||
Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.</p>
|
Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />
|
<AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Templating</h3>
|
<h3>Templating</h3>
|
||||||
<p>Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.</p>
|
<p>Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||||
<template #item="slotProps">
|
<template #item="slotProps">
|
||||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||||
<div>{{slotProps.item}}</div>
|
<div>{{slotProps.item}}</div>
|
||||||
</template>
|
</template>
|
||||||
</AutoComplete>
|
</AutoComplete>
|
||||||
|
|
@ -259,35 +259,35 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>AutoComplete</h1>
|
<h1>AutoComplete</h1>
|
||||||
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
|
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||||
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||||
|
|
||||||
<h3>Dropdown and Templating</h3>
|
<h3>Dropdown and Templating</h3>
|
||||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||||
<template #item="slotProps">
|
<template #item="slotProps">
|
||||||
<div class="p-clearfix p-autocomplete-brand-item">
|
<div class="p-clearfix p-autocomplete-brand-item">
|
||||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||||
<div>{{slotProps.item}}</div>
|
<div>{{slotProps.item}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</AutoComplete>
|
</AutoComplete>
|
||||||
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
|
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<span class="p-fluid">
|
<span class="p-fluid">
|
||||||
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
||||||
</span>
|
</span>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,19 +16,19 @@ import Button from 'primevue/button';
|
||||||
<h3>Label</h3>
|
<h3>Label</h3>
|
||||||
<p>Text of the button is defined using the <i>label</i> property.</p>
|
<p>Text of the button is defined using the <i>label</i> property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button label="Click" />
|
<Button label="Click" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
<h3>Icons</h3>
|
<h3>Icons</h3>
|
||||||
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
|
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
|
||||||
icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
|
icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Events are defined with the standard notation.</p>
|
<p>Events are defined with the standard notation.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button label="Click" @click="handleClick($event)"/>
|
<Button label="Click" @click="handleClick($event)"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Severity</h3>
|
<h3>Severity</h3>
|
||||||
|
|
@ -43,18 +43,18 @@ import Button from 'primevue/button';
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button label="Primary" />
|
<Button label="Primary" />
|
||||||
<Button label="Secondary" class="p-button-secondary" />
|
<Button label="Secondary" class="p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-success" />
|
<Button label="Success" class="p-button-success" />
|
||||||
<Button label="Info" class="p-button-info" />
|
<Button label="Info" class="p-button-info" />
|
||||||
<Button label="Warning" class="p-button-warning" />
|
<Button label="Warning" class="p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-danger" />
|
<Button label="Danger" class="p-button-danger" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Raised and Rounded Buttons</h3>
|
<h3>Raised and Rounded Buttons</h3>
|
||||||
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
|
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button label="Primary" class="p-button-raised p-button-rounded" />
|
<Button label="Primary" class="p-button-raised p-button-rounded" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -130,44 +130,44 @@ import Button from 'primevue/button';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Button</h1>
|
<h1>Button</h1>
|
||||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
<p>Button is an extension to standard button element with icons and theming.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<Button label="Click" />
|
<Button label="Click" />
|
||||||
<Button label="Click" icon="pi pi-check" />
|
<Button label="Click" icon="pi pi-check" />
|
||||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||||
<Button icon="pi pi-check" />
|
<Button icon="pi pi-check" />
|
||||||
<Button label="Click" disabled="disabled" />
|
<Button label="Click" disabled="disabled" />
|
||||||
|
|
||||||
<h3>Severities</h3>
|
<h3>Severities</h3>
|
||||||
<Button label="Primary" />
|
<Button label="Primary" />
|
||||||
<Button label="Secondary" class="p-button-secondary" />
|
<Button label="Secondary" class="p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-success" />
|
<Button label="Success" class="p-button-success" />
|
||||||
<Button label="Info" class="p-button-info" />
|
<Button label="Info" class="p-button-info" />
|
||||||
<Button label="Warning" class="p-button-warning" />
|
<Button label="Warning" class="p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-danger" />
|
<Button label="Danger" class="p-button-danger" />
|
||||||
|
|
||||||
<h3>Raised Buttons</h3>
|
<h3>Raised Buttons</h3>
|
||||||
<Button label="Primary" class="p-button-raised" />
|
<Button label="Primary" class="p-button-raised" />
|
||||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-raised p-button-success" />
|
<Button label="Success" class="p-button-raised p-button-success" />
|
||||||
<Button label="Info" class="p-button-raised p-button-info" />
|
<Button label="Info" class="p-button-raised p-button-info" />
|
||||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||||
|
|
||||||
<h3>Rounded Buttons</h3>
|
<h3>Rounded Buttons</h3>
|
||||||
<Button label="Primary" class="p-button-rounded" />
|
<Button label="Primary" class="p-button-rounded" />
|
||||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -145,9 +145,9 @@ export default {
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<Calendar v-model="value">
|
<Calendar v-model="value">
|
||||||
<template #date="slotProps">
|
<template #date="slotProps">
|
||||||
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
|
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
|
||||||
<span v-else>{{slotProps.date.day}}</span>
|
<span v-else>{{slotProps.date.day}}</span>
|
||||||
</template>
|
</template>
|
||||||
</Calendar>
|
</Calendar>
|
||||||
|
|
@ -535,84 +535,84 @@ export default {
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Calendar</h1>
|
<h1>Calendar</h1>
|
||||||
<p>Calendar is an input component to select a date.</p>
|
<p>Calendar is an input component to select a date.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation" style="padding-top:0">
|
<div class="content-section implementation" style="padding-top:0">
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-grid p-fluid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Basic</h3>
|
<h3>Basic</h3>
|
||||||
<Calendar v-model="date1" />
|
<Calendar v-model="date1" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Spanish</h3>
|
<h3>Spanish</h3>
|
||||||
<Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
|
<Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Icon</h3>
|
<h3>Icon</h3>
|
||||||
<Calendar v-model="date3" :showIcon="true" />
|
<Calendar v-model="date3" :showIcon="true" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Min-Max</h3>
|
<h3>Min-Max</h3>
|
||||||
<Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
|
<Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Disable Days</h3>
|
<h3>Disable Days</h3>
|
||||||
<Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
|
<Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Navigators</h3>
|
<h3>Navigators</h3>
|
||||||
<Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
|
<Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
<Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Range</h3>
|
<h3>Range</h3>
|
||||||
<Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
|
<Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Button Bar</h3>
|
<h3>Button Bar</h3>
|
||||||
<Calendar v-model="date7" :showButtonBar="true" />
|
<Calendar v-model="date7" :showButtonBar="true" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Time / 24h</h3>
|
<h3>Time / 24h</h3>
|
||||||
<Calendar v-model="date8" :showTime="true" :showSeconds="true" />
|
<Calendar v-model="date8" :showTime="true" :showSeconds="true" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Time Only / 12h</h3>
|
<h3>Time Only / 12h</h3>
|
||||||
<Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
|
<Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Month/Year Picker</h3>
|
<h3>Month/Year Picker</h3>
|
||||||
<Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
|
<Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Multiple Months</h3>
|
<h3>Multiple Months</h3>
|
||||||
<Calendar v-model="date11" :numberOfMonths="3" />
|
<Calendar v-model="date11" :numberOfMonths="3" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Date Template</h3>
|
<h3>Date Template</h3>
|
||||||
<Calendar v-model="date12">
|
<Calendar v-model="date12">
|
||||||
<template #date="slotProps">
|
<template #date="slotProps">
|
||||||
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
|
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
|
||||||
<span v-else>{{slotProps.date.day}}</span>
|
<span v-else>{{slotProps.date.day}}</span>
|
||||||
</template>
|
</template>
|
||||||
</Calendar>
|
</Calendar>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Touch UI</h3>
|
<h3>Touch UI</h3>
|
||||||
<Calendar v-model="date13" :touchUI="true" />
|
<Calendar v-model="date13" :touchUI="true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Inline</h3>
|
<h3>Inline</h3>
|
||||||
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -62,38 +62,38 @@ import Card from 'primevue/card';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Card</h1>
|
<h1>Card</h1>
|
||||||
<p>Card is a flexible container component.</p>
|
<p>Card is a flexible container component.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Card style="width: 25em; margin-bottom: 2em">
|
<Card style="width: 25em; margin-bottom: 2em">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
Simple Card
|
Simple Card
|
||||||
</template>
|
</template>
|
||||||
<template slot="content">
|
<template slot="content">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
||||||
</template>
|
</template>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card style="width: 25em">
|
<Card style="width: 25em">
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<img alt="user header" src="demo/images/usercard.png">
|
<img alt="user header" src="demo/images/usercard.png">
|
||||||
</template>
|
</template>
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
Advanced Card
|
Advanced Card
|
||||||
</template>
|
</template>
|
||||||
<template slot="content">
|
<template slot="content">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
||||||
</template>
|
</template>
|
||||||
<template slot="footer">
|
<template slot="footer">
|
||||||
<Button icon="pi pi-check" label="Save" class="p-button-raised" />
|
<Button icon="pi pi-check" label="Save" class="p-button-raised" />
|
||||||
<Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" />
|
<Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" />
|
||||||
</template>
|
</template>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,25 +6,25 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>BarChart</h1>
|
<h1>BarChart</h1>
|
||||||
<p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
|
<p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="vertical">Vertical</h3>
|
<h3 class="vertical">Vertical</h3>
|
||||||
<Chart type="bar" :data="basicData" />
|
<Chart type="bar" :data="basicData" />
|
||||||
|
|
||||||
<h3>Horizontal</h3>
|
<h3>Horizontal</h3>
|
||||||
<Chart type="horizontalBar" :data="basicData" />
|
<Chart type="horizontalBar" :data="basicData" />
|
||||||
|
|
||||||
<h3>Multi Axis</h3>
|
<h3>Multi Axis</h3>
|
||||||
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||||
|
|
||||||
<h3>Stacked</h3>
|
<h3>Stacked</h3>
|
||||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import Chart from 'primevue/chart';
|
||||||
<h3>Data</h3>
|
<h3>Data</h3>
|
||||||
<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.</p>
|
<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Chart type="bar" :data="basicData" />
|
<Chart type="bar" :data="basicData" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -42,7 +42,7 @@ export default {
|
||||||
<p>While a series can be customized per dataset, general chart options are defined with options property.
|
<p>While a series can be customized per dataset, general chart options are defined with options property.
|
||||||
Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.</p>
|
Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Chart type="line" :data="data" :options="options" />
|
<Chart type="line" :data="data" :options="options" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
|
||||||
|
|
@ -6,15 +6,15 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Combo Chart</h1>
|
<h1>Combo Chart</h1>
|
||||||
<p>Different chart types can be combined in the same graph.</p>
|
<p>Different chart types can be combined in the same graph.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,15 +6,15 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>DoughnutChart</h1>
|
<h1>DoughnutChart</h1>
|
||||||
<p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
|
<p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="doughnut" :data="chartData" />
|
<Chart type="doughnut" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,22 +6,22 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Line Chart</h1>
|
<h1>Line Chart</h1>
|
||||||
<p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
|
<p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<Chart type="line" :data="basicData" />
|
<Chart type="line" :data="basicData" />
|
||||||
|
|
||||||
<h3>Multi Axis</h3>
|
<h3>Multi Axis</h3>
|
||||||
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||||
|
|
||||||
<h3>Line Styles</h3>
|
<h3>Line Styles</h3>
|
||||||
<Chart type="line" :data="lineStylesData" />
|
<Chart type="line" :data="lineStylesData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,15 +6,15 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Pie Chart</h1>
|
<h1>Pie Chart</h1>
|
||||||
<p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
|
<p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="pie" :data="chartData" />
|
<Chart type="pie" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,15 +6,15 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Polar Area Chart</h1>
|
<h1>Polar Area Chart</h1>
|
||||||
<p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
|
<p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="polarArea" :data="chartData" />
|
<Chart type="polarArea" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,15 +6,15 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Radar Chart</h1>
|
<h1>Radar Chart</h1>
|
||||||
<p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
|
<p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Chart type="radar" :data="chartData" />
|
<Chart type="radar" :data="chartData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,16 +10,16 @@ import Checkbox from 'primevue/checkbox';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
|
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Checkbox v-model="checked" :binary="true" />
|
<Checkbox v-model="checked" :binary="true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Multiple Values</h3>
|
<h3>Multiple Values</h3>
|
||||||
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
|
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Checkbox id="city1" inputId="city1" name="city" value="Chicago" v-model="cities" />
|
<Checkbox id="city1" inputId="city1" name="city" value="Chicago" v-model="cities" />
|
||||||
<Checkbox id="city2" inputId="city2" name="city" value="Los Angeles" v-model="cities" />
|
<Checkbox id="city2" inputId="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||||
<Checkbox id="city3" inputId="city3" name="city" value="New York" v-model="cities" />
|
<Checkbox id="city3" inputId="city3" name="city" value="New York" v-model="cities" />
|
||||||
<Checkbox id="city4" inputId="city4" name="city" value="San Francisco" v-model="cities" />
|
<Checkbox id="city4" inputId="city4" name="city" value="San Francisco" v-model="cities" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -147,47 +147,47 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Checkbox</h1>
|
<h1>Checkbox</h1>
|
||||||
<p>Checkbox is an extension to standard checkbox element with theming.</p>
|
<p>Checkbox is an extension to standard checkbox element with theming.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||||
<label for="city2" class="p-checkbox-label">Los Angeles</label>
|
<label for="city2" class="p-checkbox-label">Los Angeles</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||||
<label for="city3" class="p-checkbox-label">New York</label>
|
<label for="city3" class="p-checkbox-label">New York</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||||
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
|
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
|
||||||
|
|
||||||
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
||||||
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
||||||
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
|
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,18 +10,18 @@ import Chips from 'primevue/chips';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>An array as the value can be bound using the standard v-model directive.</p>
|
<p>An array as the value can be bound using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Chips v-model="value" />
|
<Chips v-model="value" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Custom Content</h3>
|
<h3>Custom Content</h3>
|
||||||
<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
|
<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<Chips v-model="value">
|
<Chips v-model="value">
|
||||||
<template #chip="slotProps">
|
<template #chip="slotProps">
|
||||||
<div>
|
<div>
|
||||||
<span>{{slotProps.value}} - (active) </span>
|
<span>{{slotProps.value}} - (active) </span>
|
||||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Chips>
|
</Chips>
|
||||||
|
|
@ -146,23 +146,23 @@ import Chips from 'primevue/chips';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Chips</h1>
|
<h1>Chips</h1>
|
||||||
<p>Chips is used to enter multiple values on an input field.</p>
|
<p>Chips is used to enter multiple values on an input field.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<Chips v-model="value1" />
|
<Chips v-model="value1" />
|
||||||
|
|
||||||
<h3>Template</h3>
|
<h3>Template</h3>
|
||||||
<Chips v-model="value2">
|
<Chips v-model="value2">
|
||||||
<template #chip="slotProps">
|
<template #chip="slotProps">
|
||||||
<div>
|
<div>
|
||||||
<span>{{slotProps.value}} - (active) </span>
|
<span>{{slotProps.value}} - (active) </span>
|
||||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Chips>
|
</Chips>
|
||||||
|
|
|
||||||
|
|
@ -32,32 +32,32 @@ mounted() {
|
||||||
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
|
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template #listItem="slotProps" >
|
<template #listItem="slotProps" >
|
||||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-8 car-data">
|
<div class="p-col-12 p-md-8 car-data">
|
||||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
||||||
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||||
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||||
<Button icon="pi pi-search"></Button>
|
<Button icon="pi pi-search"></Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #gridItem="slotProps">
|
<template #gridItem="slotProps">
|
||||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||||
<hr class="ui-widget-content" style="border-top: 0" />
|
<hr class="ui-widget-content" style="border-top: 0" />
|
||||||
<Button icon="pi pi-search"></Button>
|
<Button icon="pi pi-search"></Button>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -77,11 +77,11 @@ mounted() {
|
||||||
</p>
|
</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template #header>
|
<template #header>
|
||||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -90,20 +90,20 @@ mounted() {
|
||||||
of page links to display. To customize the left and right side of the paginators, use "paginatorLeft" and "paginatorRight" templates.</p>
|
of page links to display. To customize the left and right side of the paginators, use "paginatorLeft" and "paginatorRight" templates.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20">
|
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20">
|
||||||
<template #paginatorLeft>
|
<template #paginatorLeft>
|
||||||
<Button type="button" icon="pi pi-refresh"/>
|
<Button type="button" icon="pi pi-refresh"/>
|
||||||
</template>
|
</template>
|
||||||
<template #paginatorRight>
|
<template #paginatorRight>
|
||||||
<Button type="button" icon="pi pi-search" />
|
<Button type="button" icon="pi pi-search" />
|
||||||
</template>
|
</template>
|
||||||
<template #header>
|
<template #header>
|
||||||
List of Cars
|
List of Cars
|
||||||
</template>
|
</template>
|
||||||
<template #listItem="slotProps" >
|
<template #listItem="slotProps" >
|
||||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
</template>
|
</template>
|
||||||
<template #gridItem="slotProps">
|
<template #gridItem="slotProps">
|
||||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
</template>
|
</template>
|
||||||
</DataView>
|
</DataView>
|
||||||
|
|
@ -115,20 +115,20 @@ mounted() {
|
||||||
Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
|
Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField">
|
<DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
<template #paginatorLeft>
|
<template #paginatorLeft>
|
||||||
<Button type="button" icon="pi pi-refresh"/>
|
<Button type="button" icon="pi pi-refresh"/>
|
||||||
</template>
|
</template>
|
||||||
<template #paginatorRight>
|
<template #paginatorRight>
|
||||||
<Button type="button" icon="pi pi-search" />
|
<Button type="button" icon="pi pi-search" />
|
||||||
</template>
|
</template>
|
||||||
<template #header>
|
<template #header>
|
||||||
List of Cars
|
List of Cars
|
||||||
</template>
|
</template>
|
||||||
<template #listItem="slotProps" >
|
<template #listItem="slotProps" >
|
||||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
</template>
|
</template>
|
||||||
<template #gridItem="slotProps">
|
<template #gridItem="slotProps">
|
||||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
</template>
|
</template>
|
||||||
</DataView>
|
</DataView>
|
||||||
|
|
@ -342,52 +342,52 @@ mounted() {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>DataView</h1>
|
<h1>DataView</h1>
|
||||||
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Default</h3>
|
<h3 class="first">Default</h3>
|
||||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6" style="text-align: left">
|
<div class="p-col-6" style="text-align: left">
|
||||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6" style="text-align: right">
|
<div class="p-col-6" style="text-align: right">
|
||||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #listItem="slotProps" >
|
<template #listItem="slotProps" >
|
||||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-8 car-data">
|
<div class="p-col-12 p-md-8 car-data">
|
||||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
||||||
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||||
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||||
<Button icon="pi pi-search"></Button>
|
<Button icon="pi pi-search"></Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #gridItem="slotProps">
|
<template #gridItem="slotProps">
|
||||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||||
<hr class="ui-widget-content" style="border-top: 0" />
|
<hr class="ui-widget-content" style="border-top: 0" />
|
||||||
<Button icon="pi pi-search"></Button>
|
<Button icon="pi pi-search"></Button>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import Dialog from 'primevue/dialog';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property, use the sync operator for two-way binding.</p>
|
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property, use the sync operator for two-way binding.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog header="Godfather I" :visible.sync="display" >
|
<Dialog header="Godfather I" :visible.sync="display" >
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -30,11 +30,11 @@ export default {
|
||||||
<h3>Header and Footer</h3>
|
<h3>Header and Footer</h3>
|
||||||
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or slots for custom content.</p>
|
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or slots for custom content.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog header="Godfather I" :visible.sync="display">
|
<Dialog header="Godfather I" :visible.sync="display">
|
||||||
Content
|
Content
|
||||||
<template slot="footer">
|
<template slot="footer">
|
||||||
<Button label="Yes" icon="pi pi-check" />
|
<Button label="Yes" icon="pi pi-check" />
|
||||||
<Button label="No" icon="pi pi-times" class="p-button-secondary"/>
|
<Button label="No" icon="pi pi-times" class="p-button-secondary"/>
|
||||||
</template>
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -194,23 +194,23 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Dialog</h1>
|
<h1>Dialog</h1>
|
||||||
<p>Dialog is a container to display content in an overlay window.</p>
|
<p>Dialog is a container to display content in an overlay window.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||||
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
<template slot="footer">
|
<template slot="footer">
|
||||||
<Button label="Yes" icon="pi pi-check" @click="close" />
|
<Button label="Yes" icon="pi pi-check" @click="close" />
|
||||||
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
||||||
</template>
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import Dropdown from 'primevue/dropdown';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Dropdown requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
<p>Dropdown requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />
|
<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -35,17 +35,17 @@ data() {
|
||||||
<p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property.</p>
|
<p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property.</p>
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/>
|
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Custom Content</h3>
|
<h3>Custom Content</h3>
|
||||||
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div class="p-clearfix p-dropdown-car-option">
|
<div class="p-clearfix p-dropdown-car-option">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||||
<span>{{slotProps.option.brand}}</span>
|
<span>{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -247,25 +247,25 @@ data() {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Dropdown</h1>
|
<h1>Dropdown</h1>
|
||||||
<p>Dropdown is used to select an item from a list of options.</p>
|
<p>Dropdown is used to select an item from a list of options.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||||
|
|
||||||
<h3>Editable</h3>
|
<h3>Editable</h3>
|
||||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||||
|
|
||||||
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
||||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div class="p-clearfix p-dropdown-car-option">
|
<div class="p-clearfix p-dropdown-car-option">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||||
<span>{{slotProps.option.brand}}</span>
|
<span>{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,18 +10,18 @@ import Editor from 'primevue/editor';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>A model can be bound using the standard v-model directive.</p>
|
<p>A model can be bound using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Editor v-model="value" editorStyle="height: 320px"/>
|
<Editor v-model="value" editorStyle="height: 320px"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Toolbar</h3>
|
<h3>Toolbar</h3>
|
||||||
<p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
|
<p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Editor v-model="value" editorStyle="height: 320px">
|
<Editor v-model="value" editorStyle="height: 320px">
|
||||||
<template slot="toolbar">
|
<template slot="toolbar">
|
||||||
<span class="ql-formats">
|
<span class="ql-formats">
|
||||||
<button class="ql-bold"></button>
|
<button class="ql-bold"></button>
|
||||||
<button class="ql-italic"></button>
|
<button class="ql-italic"></button>
|
||||||
<button class="ql-underline"></button>
|
<button class="ql-underline"></button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</Editor>
|
</Editor>
|
||||||
|
|
@ -146,24 +146,24 @@ npm install quill --save
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Editor</h1>
|
<h1>Editor</h1>
|
||||||
<p>Editor is rich text editor component based on Quill.</p>
|
<p>Editor is rich text editor component based on Quill.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Default</h3>
|
<h3 class="first">Default</h3>
|
||||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||||
|
|
||||||
<h3>Customized</h3>
|
<h3>Customized</h3>
|
||||||
<Editor v-model="value2" editorStyle="height: 320px">
|
<Editor v-model="value2" editorStyle="height: 320px">
|
||||||
<template slot="toolbar">
|
<template slot="toolbar">
|
||||||
<span class="ql-formats">
|
<span class="ql-formats">
|
||||||
<button class="ql-bold"></button>
|
<button class="ql-bold"></button>
|
||||||
<button class="ql-italic"></button>
|
<button class="ql-italic"></button>
|
||||||
<button class="ql-underline"></button>
|
<button class="ql-underline"></button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</Editor>
|
</Editor>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import Fieldset from 'primevue/fieldset';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Fieldset is a container component that accepts content as its children.</p>
|
<p>Fieldset is a container component that accepts content as its children.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Fieldset legend="Godfather I">
|
<Fieldset legend="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -21,7 +21,7 @@ import Fieldset from 'primevue/fieldset';
|
||||||
<h3>Toggleable</h3>
|
<h3>Toggleable</h3>
|
||||||
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
|
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Fieldset legend="Godfather I" :toggleable="true">
|
<Fieldset legend="Godfather I" :toggleable="true">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -128,16 +128,16 @@ import Fieldset from 'primevue/fieldset';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Fieldset</h1>
|
<h1>Fieldset</h1>
|
||||||
<p>Fieldset is a grouping component with the optional content toggle feature.</p>
|
<p>Fieldset is a grouping component with the optional content toggle feature.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Regular</h3>
|
<h3 class="first">Regular</h3>
|
||||||
<Fieldset legend="Godfather I">
|
<Fieldset legend="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -145,7 +145,7 @@ import Fieldset from 'primevue/fieldset';
|
||||||
</Fieldset>
|
</Fieldset>
|
||||||
|
|
||||||
<h3>Toggleable</h3>
|
<h3>Toggleable</h3>
|
||||||
<Fieldset legend="Godfather I" :toggleable="true">
|
<Fieldset legend="Godfather I" :toggleable="true">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
|
||||||
|
|
@ -10,19 +10,19 @@ import FileUpload from 'primevue/fileupload';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
|
<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<FileUpload name="demo[]" url="./upload" />
|
<FileUpload name="demo[]" url="./upload" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Multiple Uploads</h3>
|
<h3>Multiple Uploads</h3>
|
||||||
<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
|
<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<FileUpload name="demo[]" url="./upload" :multiple="true" />
|
<FileUpload name="demo[]" url="./upload" :multiple="true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Basic UI</h3>
|
<h3>Basic UI</h3>
|
||||||
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
|
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload" />
|
<FileUpload mode="basic" name="demo[]" url="./upload" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>DragDrop</h3>
|
<h3>DragDrop</h3>
|
||||||
|
|
@ -31,19 +31,19 @@ import FileUpload from 'primevue/fileupload';
|
||||||
<h3>Auto Uploads</h3>
|
<h3>Auto Uploads</h3>
|
||||||
<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
|
<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" />
|
<FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>File Types</h3>
|
<h3>File Types</h3>
|
||||||
<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
|
<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" />
|
<FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>File Size</h3>
|
<h3>File Size</h3>
|
||||||
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes.</p>
|
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" />
|
<FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> option. In messages, {0} placeholder refers to the filename and in detail message, the file size.</p>
|
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> option. In messages, {0} placeholder refers to the filename and in detail message, the file size.</p>
|
||||||
|
|
@ -253,22 +253,22 @@ import FileUpload from 'primevue/fileupload';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>FileUpload</h1>
|
<h1>FileUpload</h1>
|
||||||
<p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
|
<p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3>Advanced</h3>
|
<h3>Advanced</h3>
|
||||||
<FileUpload name="demo[]" url="http://192.168.1.110:4000/upload" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
<FileUpload name="demo[]" url="http://192.168.1.110:4000/upload" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
||||||
|
|
||||||
<h3>Basic</h3>
|
<h3>Basic</h3>
|
||||||
<FileUpload mode="basic" name="demo[]" url="http://192.168.1.110:4000/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
<FileUpload mode="basic" name="demo[]" url="http://192.168.1.110:4000/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||||
|
|
||||||
<h3>Basic with Auto</h3>
|
<h3>Basic with Auto</h3>
|
||||||
<FileUpload mode="basic" name="demo[]" url="http://192.168.1.110:4000/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
<FileUpload mode="basic" name="demo[]" url="http://192.168.1.110:4000/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,10 @@
|
||||||
<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
|
<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
|
||||||
a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
|
a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">2</div>
|
<div class="p-col">2</div>
|
||||||
<div class="p-col">3</div>
|
<div class="p-col">3</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -29,24 +29,24 @@
|
||||||
<p>Default direction is <b>row</b> and <i>p-dir-*</i> class at the container defines the other possible directions which can be <b>row reverse</b>, <b>column</b> and <b>column reverse</b></p>
|
<p>Default direction is <b>row</b> and <i>p-dir-*</i> class at the container defines the other possible directions which can be <b>row reverse</b>, <b>column</b> and <b>column reverse</b></p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<!-- Row Reverse -->
|
<!-- Row Reverse -->
|
||||||
<div class="p-grid p-dir-rev">
|
<div class="p-grid p-dir-rev">
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">2</div>
|
<div class="p-col">2</div>
|
||||||
<div class="p-col">3</div>
|
<div class="p-col">3</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Column -->
|
<!-- Column -->
|
||||||
<div class="p-grid p-dir-col">
|
<div class="p-grid p-dir-col">
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">2</div>
|
<div class="p-col">2</div>
|
||||||
<div class="p-col">3</div>
|
<div class="p-col">3</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Column Reverse -->
|
<!-- Column Reverse -->
|
||||||
<div class="p-grid p-dir-col-rev">
|
<div class="p-grid p-dir-col-rev">
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">2</div>
|
<div class="p-col">2</div>
|
||||||
<div class="p-col">3</div>
|
<div class="p-col">3</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -90,22 +90,22 @@
|
||||||
|
|
||||||
<p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
|
<p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">4</div>
|
<div class="p-col-4">4</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-2">2</div>
|
<div class="p-col-2">2</div>
|
||||||
<div class="p-col-6">6</div>
|
<div class="p-col-6">6</div>
|
||||||
<div class="p-col-4">4</div>
|
<div class="p-col-4">4</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -154,11 +154,11 @@
|
||||||
<h3>MultiLine</h3>
|
<h3>MultiLine</h3>
|
||||||
<p>When the number of columns exceed 12, columns wrap to a new line.</p>
|
<p>When the number of columns exceed 12, columns wrap to a new line.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">6</div>
|
<div class="p-col-6">6</div>
|
||||||
<div class="p-col-6">6</div>
|
<div class="p-col-6">6</div>
|
||||||
<div class="p-col-6">6</div>
|
<div class="p-col-6">6</div>
|
||||||
<div class="p-col-6">6</div>
|
<div class="p-col-6">6</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -180,9 +180,9 @@
|
||||||
<h3>Fixed Width Column</h3>
|
<h3>Fixed Width Column</h3>
|
||||||
<p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
|
<p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-fixed" style="width:100px">Fixed</div>
|
<div class="p-col-fixed" style="width:100px">Fixed</div>
|
||||||
<div class="p-col">Auto</div>
|
<div class="p-col">Auto</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -237,11 +237,11 @@
|
||||||
|
|
||||||
<p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
|
<p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">A</div>
|
<div class="p-col-12 p-md-6 p-lg-3">A</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">B</div>
|
<div class="p-col-12 p-md-6 p-lg-3">B</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">C</div>
|
<div class="p-col-12 p-md-6 p-lg-3">C</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">D</div>
|
<div class="p-col-12 p-md-6 p-lg-3">D</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -299,10 +299,10 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid p-justify-between">
|
<div class="p-grid p-justify-between">
|
||||||
<div class="p-col-2">2</div>
|
<div class="p-col-2">2</div>
|
||||||
<div class="p-col-1">1</div>
|
<div class="p-col-1">1</div>
|
||||||
<div class="p-col-4">4</div>
|
<div class="p-col-4">4</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -353,10 +353,10 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid p-align-center">
|
<div class="p-grid p-align-center">
|
||||||
<div class="p-col">4</div>
|
<div class="p-col">4</div>
|
||||||
<div class="p-col">4</div>
|
<div class="p-col">4</div>
|
||||||
<div class="p-col">4</div>
|
<div class="p-col">4</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -405,10 +405,10 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col p-col-align-start">4</div>
|
<div class="p-col p-col-align-start">4</div>
|
||||||
<div class="p-col p-col-align-center">4</div>
|
<div class="p-col p-col-align-center">4</div>
|
||||||
<div class="p-col p-col-align-end">4</div>
|
<div class="p-col p-col-align-end">4</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -427,13 +427,13 @@
|
||||||
<h3>Offset</h3>
|
<h3>Offset</h3>
|
||||||
<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
|
<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6 p-offset-3">6</div>
|
<div class="p-col-6 p-offset-3">6</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">4</div>
|
<div class="p-col-4">4</div>
|
||||||
<div class="p-col-4 p-offset-4">4</div>
|
<div class="p-col-4 p-offset-4">4</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -500,21 +500,21 @@
|
||||||
<h3>Nested</h3>
|
<h3>Nested</h3>
|
||||||
<p>Columns can be nested to create more complex layouts.</p>
|
<p>Columns can be nested to create more complex layouts.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid nested-grid">
|
<div class="p-grid nested-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col-8">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
6
|
6
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
6
|
6
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
12
|
12
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
4
|
4
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -544,10 +544,10 @@
|
||||||
<i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
|
<i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
|
||||||
</p>
|
</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-grid p-nogutter">
|
<div class="p-grid p-nogutter">
|
||||||
<div class="p-col">1</div>
|
<div class="p-col">1</div>
|
||||||
<div class="p-col p-nogutter">2</div>
|
<div class="p-col p-nogutter">2</div>
|
||||||
<div class="p-col">3</div>
|
<div class="p-col">3</div>
|
||||||
</div>
|
</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -564,375 +564,375 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>FlexGrid</h1>
|
<h1>FlexGrid</h1>
|
||||||
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
||||||
Flex Grid CSS is not included in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
Flex Grid CSS is not included in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation flexgrid-demo">
|
<div class="content-section implementation flexgrid-demo">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Dynamic</h3>
|
<h3>Dynamic</h3>
|
||||||
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
||||||
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||||
|
|
||||||
<div style="margin-top: .5em">
|
<div style="margin-top: .5em">
|
||||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||||
<div v-for="col of columns" :key="col" class="p-col">
|
<div v-for="col of columns" :key="col" class="p-col">
|
||||||
<div class="box">{{col}}</div>
|
<div class="box">{{col}}</div>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Direction</h3>
|
<h3>Reverse Direction</h3>
|
||||||
<div class="p-grid p-dir-rev">
|
<div class="p-grid p-dir-rev">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Column Direction</h3>
|
<h3>Column Direction</h3>
|
||||||
<div class="p-grid p-dir-col">
|
<div class="p-grid p-dir-col">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Column Direction</h3>
|
<h3>Reverse Column Direction</h3>
|
||||||
<div class="p-grid p-dir-col-rev">
|
<div class="p-grid p-dir-col-rev">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>12 Column Grid</h3>
|
<h3>12 Column Grid</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col-8">
|
||||||
<div class="box">8</div>
|
<div class="box">8</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>MultiLine</h3>
|
<h3>MultiLine</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Fixed Width Column</h3>
|
<h3>Fixed Width Column</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-fixed" style="width:100px">
|
<div class="p-col-fixed" style="width:100px">
|
||||||
<div class="box">100px</div>
|
<div class="box">100px</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">auto</div>
|
<div class="box">auto</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Responsive</h3>
|
<h3>Responsive</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Start</h3>
|
<h3>Horizontal Alignment - Start</h3>
|
||||||
<div class="p-grid p-justify-start">
|
<div class="p-grid p-justify-start">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - End</h3>
|
<h3>Horizontal Alignment - End</h3>
|
||||||
<div class="p-grid p-justify-end">
|
<div class="p-grid p-justify-end">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Center</h3>
|
<h3>Horizontal Alignment - Center</h3>
|
||||||
<div class="p-grid p-justify-center">
|
<div class="p-grid p-justify-center">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Between</h3>
|
<h3>Horizontal Alignment - Between</h3>
|
||||||
<div class="p-grid p-justify-between">
|
<div class="p-grid p-justify-between">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Around</h3>
|
<h3>Horizontal Alignment - Around</h3>
|
||||||
<div class="p-grid p-justify-around">
|
<div class="p-grid p-justify-around">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Even</h3>
|
<h3>Horizontal Alignment - Even</h3>
|
||||||
<div class="p-grid p-justify-even">
|
<div class="p-grid p-justify-even">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Start</h3>
|
<h3>Vertical Alignment - Start</h3>
|
||||||
<div class="p-grid p-align-start vertical-container">
|
<div class="p-grid p-align-start vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - End</h3>
|
<h3>Vertical Alignment - End</h3>
|
||||||
<div class="p-grid p-align-end vertical-container">
|
<div class="p-grid p-align-end vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Center</h3>
|
<h3>Vertical Alignment - Center</h3>
|
||||||
<div class="p-grid p-align-center vertical-container">
|
<div class="p-grid p-align-center vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Stretch</h3>
|
<h3>Vertical Alignment - Stretch</h3>
|
||||||
<div class="p-grid p-align-stretch vertical-container">
|
<div class="p-grid p-align-stretch vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Per Column</h3>
|
<h3>Vertical Alignment - Per Column</h3>
|
||||||
<div class="p-grid vertical-container">
|
<div class="p-grid vertical-container">
|
||||||
<div class="p-col p-col-align-start">
|
<div class="p-col p-col-align-start">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col p-col-align-center">
|
<div class="p-col p-col-align-center">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col p-col-align-end">
|
<div class="p-col p-col-align-end">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Offset</h3>
|
<h3>Offset</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6 p-offset-3">
|
<div class="p-col-6 p-offset-3">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4 p-offset-4">
|
<div class="p-col-4 p-offset-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Nested</h3>
|
<h3>Nested</h3>
|
||||||
<div class="p-grid nested-grid">
|
<div class="p-grid nested-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col-8">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<div class="box">12</div>
|
<div class="box">12</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Panels</h3>
|
<h3>Panels</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Godfather">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Godfather">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Godfather">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -942,43 +942,43 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Sample Layout</h3>
|
<h3>Sample Layout</h3>
|
||||||
<div class="p-grid sample-layout">
|
<div class="p-grid sample-layout">
|
||||||
<div class="p-col-12 p-md-2">
|
<div class="p-col-12 p-md-2">
|
||||||
Menu
|
Menu
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-10 p-col-nogutter">
|
<div class="p-col-12 p-md-10 p-col-nogutter">
|
||||||
<div class="p-col-12 p-col-nogutter">
|
<div class="p-col-12 p-col-nogutter">
|
||||||
Top Bar
|
Top Bar
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
|
<div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
|
||||||
dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
|
dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
|
||||||
In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
|
In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
|
||||||
<div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
|
<div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
|
||||||
tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
|
tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
|
||||||
at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
|
at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
|
||||||
nulla nec, rutrum sapien.</div>
|
nulla nec, rutrum sapien.</div>
|
||||||
<div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
|
<div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
|
||||||
sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
|
sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
|
||||||
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
||||||
condimentum eget hendrerit sit amet.</div>
|
condimentum eget hendrerit sit amet.</div>
|
||||||
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
||||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
||||||
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
||||||
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
||||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
||||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
Footer
|
Footer
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ npm install @fullcalendar/interaction --save
|
||||||
|
|
||||||
<p>Events should be an array and defined using the events property.</p>
|
<p>Events should be an array and defined using the events property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<FullCalendar :events="events" />
|
<FullCalendar :events="events" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -201,15 +201,15 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>FullCalendar</h1>
|
<h1>FullCalendar</h1>
|
||||||
<p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
|
<p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<FullCalendar :events="events" :options="options" />
|
<FullCalendar :events="events" :options="options" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -9,111 +9,111 @@
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>InputGroup</h1>
|
<h1>InputGroup</h1>
|
||||||
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
|
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Addons</h3>
|
<h3 class="first">Addons</h3>
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-grid p-fluid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
<i class="pi pi-user"></i>
|
<i class="pi pi-user"></i>
|
||||||
</span>
|
</span>
|
||||||
<InputText placeholder="Username" />
|
<InputText placeholder="Username" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">$</span>
|
<span class="p-inputgroup-addon">$</span>
|
||||||
<InputText placeholder="Price" />
|
<InputText placeholder="Price" />
|
||||||
<span class="p-inputgroup-addon">.00</span>
|
<span class="p-inputgroup-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">W</span>
|
<span class="p-inputgroup-addon">W</span>
|
||||||
<InputText placeholder="Website" />
|
<InputText placeholder="Website" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Multiple Addons</h3>
|
<h3>Multiple Addons</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
<i class="pi pi-clock"></i>
|
<i class="pi pi-clock"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
<i class="pi pi-star"></i>
|
<i class="pi pi-star"></i>
|
||||||
</span>
|
</span>
|
||||||
<InputText placeholder="Price" />
|
<InputText placeholder="Price" />
|
||||||
<span class="p-inputgroup-addon">$</span>
|
<span class="p-inputgroup-addon">$</span>
|
||||||
<span class="p-inputgroup-addon">.00</span>
|
<span class="p-inputgroup-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Button Addons</h3>
|
<h3>Button Addons</h3>
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-grid p-fluid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<Button label="Search"/>
|
<Button label="Search"/>
|
||||||
<InputText placeholder="Keyword"/>
|
<InputText placeholder="Keyword"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<InputText placeholder="Keyword"/>
|
<InputText placeholder="Keyword"/>
|
||||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<Button icon="pi pi-check" class="p-button-success"/>
|
<Button icon="pi pi-check" class="p-button-success"/>
|
||||||
<InputText placeholder="Vote"/>
|
<InputText placeholder="Vote"/>
|
||||||
<Button icon="pi pi-times" class="p-button-danger"/>
|
<Button icon="pi pi-times" class="p-button-danger"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Checkbox and RadioButton</h3>
|
<h3>Checkbox and RadioButton</h3>
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-grid p-fluid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
<Checkbox v-model="checked1" />
|
<Checkbox v-model="checked1" />
|
||||||
</span>
|
</span>
|
||||||
<InputText placeholder="Username"/>
|
<InputText placeholder="Username"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<InputText placeholder="Price"/>
|
<InputText placeholder="Price"/>
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
<Checkbox v-model="checked2" />
|
<Checkbox v-model="checked2" />
|
||||||
</span>
|
</span>
|
||||||
<InputText placeholder="Website"/>
|
<InputText placeholder="Website"/>
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
|
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import InputSwitch from 'primevue/inputswitch';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
|
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<InputSwitch v-model="checked" />
|
<InputSwitch v-model="checked" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -155,21 +155,21 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>InputSwitch</h1>
|
<h1>InputSwitch</h1>
|
||||||
<p>InputSwitch is used to select a boolean value.</p>
|
<p>InputSwitch is used to select a boolean value.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<InputSwitch v-model="checked1" />
|
<InputSwitch v-model="checked1" />
|
||||||
<p style="font-weight: bold">{{checked1}}</p>
|
<p style="font-weight: bold">{{checked1}}</p>
|
||||||
|
|
||||||
<h3>Preselection</h3>
|
<h3>Preselection</h3>
|
||||||
<InputSwitch v-model="checked2" />
|
<InputSwitch v-model="checked2" />
|
||||||
<p style="font-weight: bold">{{checked2}}</p>
|
<p style="font-weight: bold">{{checked2}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,15 +10,15 @@ import InputText from 'primevue/inputtext';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>A model can be bound using the standard v-model directive.</p>
|
<p>A model can be bound using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<InputText type="text" v-model="value" />
|
<InputText type="text" v-model="value" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Float Label</h3>
|
<h3>Float Label</h3>
|
||||||
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
|
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<span class="p-float-label">
|
<span class="p-float-label">
|
||||||
<InputText id="username" type="text" v-model="value" />
|
<InputText id="username" type="text" v-model="value" />
|
||||||
<label for="username">Username</label>
|
<label for="username">Username</label>
|
||||||
</span>
|
</span>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -56,26 +56,26 @@ import InputText from 'primevue/inputtext';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>InputText</h1>
|
<h1>InputText</h1>
|
||||||
<p>InputText renders and input field where the user can enter data.</p>
|
<p>InputText renders and input field where the user can enter data.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<InputText type="text" v-model="value1" />
|
<InputText type="text" v-model="value1" />
|
||||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||||
|
|
||||||
<h3>Floating Label</h3>
|
<h3>Floating Label</h3>
|
||||||
<span class="p-float-label">
|
<span class="p-float-label">
|
||||||
<InputText id="username" type="text" v-model="value2" />
|
<InputText id="username" type="text" v-model="value2" />
|
||||||
<label for="username">Username</label>
|
<label for="username">Username</label>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Disabled</h3>
|
||||||
<InputText type="text" v-model="value3" disabled />
|
<InputText type="text" v-model="value3" disabled />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import Listbox from 'primevue/listbox';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
<p>Listbox requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -33,18 +33,18 @@ data() {
|
||||||
using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
|
using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
|
||||||
devices metaKeySelection is turned off automatically.</p>
|
devices metaKeySelection is turned off automatically.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/>
|
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Custom Content</h3>
|
<h3>Custom Content</h3>
|
||||||
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div class="p-clearfix">
|
<div class="p-clearfix">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Listbox>
|
</Listbox>
|
||||||
|
|
@ -54,7 +54,7 @@ data() {
|
||||||
<h3>Filter</h3>
|
<h3>Filter</h3>
|
||||||
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property.</p>
|
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>
|
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -214,23 +214,23 @@ data() {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Listbox</h1>
|
<h1>Listbox</h1>
|
||||||
<p>Listbox is used to select one or more values from a list of items.</p>
|
<p>Listbox is used to select one or more values from a list of items.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Single</h3>
|
<h3 class="first">Single</h3>
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
|
|
||||||
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div class="p-clearfix">
|
<div class="p-clearfix">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Listbox>
|
</Listbox>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ import ValidationMessage from 'primevue/validationmessage';
|
||||||
Messages to display can either be defined using the value property which should an array of Message instances.</p>
|
Messages to display can either be defined using the value property which should an array of Message instances.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -42,20 +42,20 @@ data() {
|
||||||
<h3>Closable</h3>
|
<h3>Closable</h3>
|
||||||
<p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
|
<p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Message severity="success" :closable="false">Order Submitted</Message>
|
<Message severity="success" :closable="false">Order Submitted</Message>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Sticky</h3>
|
<h3>Sticky</h3>
|
||||||
<p>Messages are cleared automatically after the timeout defined by <i>life</i> property which is 3 seconds by default. Use <i>sticky</i> mode to make them stay until
|
<p>Messages are cleared automatically after the timeout defined by <i>life</i> property which is 3 seconds by default. Use <i>sticky</i> mode to make them stay until
|
||||||
they are manually removed.</p>
|
they are manually removed.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>ValidationMessage Component</h3>
|
<h3>ValidationMessage Component</h3>
|
||||||
<p>ValidationMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
|
<p>ValidationMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<InputText placeholder="Username" class="p-error" />
|
<InputText placeholder="Username" class="p-error" />
|
||||||
<ValidationMessage>Field is required</ValidationMessage>
|
<ValidationMessage>Field is required</ValidationMessage>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -163,36 +163,36 @@ data() {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Message</h1>
|
<h1>Message</h1>
|
||||||
<p>Messages is used to display inline messages with various severities.</p>
|
<p>Messages is used to display inline messages with various severities.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Severities</h3>
|
<h3 class="first">Severities</h3>
|
||||||
<Message severity="success">Order Submitted</Message>
|
<Message severity="success">Order Submitted</Message>
|
||||||
<Message severity="info">PrimeVue Rocks</Message>
|
<Message severity="info">PrimeVue Rocks</Message>
|
||||||
<Message severity="warn">There are unsaved changes</Message>
|
<Message severity="warn">There are unsaved changes</Message>
|
||||||
<Message severity="error">Validation Failed</Message>
|
<Message severity="error">Validation Failed</Message>
|
||||||
|
|
||||||
<h3>Dynamic</h3>
|
<h3>Dynamic</h3>
|
||||||
<Button label="Show" @click="addMessages()" />
|
<Button label="Show" @click="addMessages()" />
|
||||||
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||||
|
|
||||||
<h3>Auto Dismiss</h3>
|
<h3>Auto Dismiss</h3>
|
||||||
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
<Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
|
||||||
|
|
||||||
<h3>Validation Message</h3>
|
<h3>Validation Message</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<InputText placeholder="Username" class="p-error" />
|
<InputText placeholder="Username" class="p-error" />
|
||||||
<ValidationMessage>Field is required</ValidationMessage>
|
<ValidationMessage>Field is required</ValidationMessage>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||||
<ValidationMessage />
|
<ValidationMessage />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import MultiSelect from 'primevue/multiselect';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>MultiSelect requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
<p>MultiSelect requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
<MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -37,19 +37,19 @@ data() {
|
||||||
<p>In addition the <i>value</i> template can be used to customize the selected values display instead of the default comma separated list.</p>
|
<p>In addition the <i>value</i> template can be used to customize the selected values display instead of the default comma separated list.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
||||||
<template #value="slotProps">
|
<template #value="slotProps">
|
||||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||||
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
||||||
<span>{{option.brand}}</span>
|
<span>{{option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||||
Select Brands
|
Select Brands
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div class="p-multiselect-car-option">
|
<div class="p-multiselect-car-option">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||||
<span>{{slotProps.option.brand}}</span>
|
<span>{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -60,7 +60,7 @@ data() {
|
||||||
<h3>Filter</h3>
|
<h3>Filter</h3>
|
||||||
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable the <i>filter</i> property.</p>
|
<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable the <i>filter</i> property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/>
|
<MultiSelect v-model="selectedCars" :options="cars" :filter="true" optionLabel="brand" placeholder="Select Brands"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -237,31 +237,31 @@ data() {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>MultiSelect</h1>
|
<h1>MultiSelect</h1>
|
||||||
<p>MultiSelect is used to multiple values from a list of options.</p>
|
<p>MultiSelect is used to multiple values from a list of options.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||||
|
|
||||||
<h3>Advanced with Templating and Filtering</h3>
|
<h3>Advanced with Templating and Filtering</h3>
|
||||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||||
<template #value="slotProps">
|
<template #value="slotProps">
|
||||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||||
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
||||||
<span>{{option.brand}}</span>
|
<span>{{option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||||
Select Brands
|
Select Brands
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div class="p-multiselect-car-option">
|
<div class="p-multiselect-car-option">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||||
<span>{{slotProps.option.brand}}</span>
|
<span>{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,10 @@ import OverlayPanel from 'primevue/overlaypanel';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
|
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
|
|
||||||
<OverlayPanel ref="op">
|
<OverlayPanel ref="op">
|
||||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||||
</OverlayPanel>
|
</OverlayPanel>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -27,8 +27,8 @@ toggle(event) {
|
||||||
<p>Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior.
|
<p>Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior.
|
||||||
Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel.</p>
|
Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true">
|
<OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true">
|
||||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||||
</OverlayPanel>
|
</OverlayPanel>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -148,18 +148,18 @@ toggle(event) {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>OverlayPanel</h1>
|
<h1>OverlayPanel</h1>
|
||||||
<p>OverlayPanel is a container component that can overlay other components on page.</p>
|
<p>OverlayPanel is a container component that can overlay other components on page.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
|
|
||||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||||
</OverlayPanel>
|
</OverlayPanel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -54,13 +54,13 @@ import Paginator from 'primevue/paginator';
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount">
|
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount">
|
||||||
<template #left="slotProps">
|
<template #left="slotProps">
|
||||||
Page: {{slotProps.state.page}}
|
Page: {{slotProps.state.page}}
|
||||||
First: {{slotProps.state.first}}
|
First: {{slotProps.state.first}}
|
||||||
Rows: {{slotProps.state.rows}}
|
Rows: {{slotProps.state.rows}}
|
||||||
</template>
|
</template>
|
||||||
<template #right>
|
<template #right>
|
||||||
<Button type="button" icon="pi pi-search" />
|
<Button type="button" icon="pi pi-search" />
|
||||||
</template>
|
</template>
|
||||||
</Paginator>
|
</Paginator>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -221,29 +221,29 @@ onPage(event) {
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Paginator</h1>
|
<h1>Paginator</h1>
|
||||||
<p>Paginator is a generic component to display content in paged format.</p>
|
<p>Paginator is a generic component to display content in paged format.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Default</h3>
|
<h3 class="first">Default</h3>
|
||||||
<Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
<Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||||
|
|
||||||
<h3>Custom Template</h3>
|
<h3>Custom Template</h3>
|
||||||
<Paginator :first.sync="first2" :rows="1" :totalRecords="totalRecords2" @page-change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
<Paginator :first.sync="first2" :rows="1" :totalRecords="totalRecords2" @page-change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
||||||
<template #left>
|
<template #left>
|
||||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||||
</template>
|
</template>
|
||||||
<template #right>
|
<template #right>
|
||||||
<Button type="button" icon="pi pi-search" />
|
<Button type="button" icon="pi pi-search" />
|
||||||
</template>
|
</template>
|
||||||
</Paginator>
|
</Paginator>
|
||||||
|
|
||||||
<div class="image-gallery">
|
<div class="image-gallery">
|
||||||
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import Panel from 'primevue/panel';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Panel is a container component that accepts content as its children.</p>
|
<p>Panel is a container component that accepts content as its children.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Panel header="Godfather I">
|
<Panel header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -21,7 +21,7 @@ import Panel from 'primevue/panel';
|
||||||
<h3>Toggleable</h3>
|
<h3>Toggleable</h3>
|
||||||
<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
|
<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Panel header="Godfather I" :toggleable="true">
|
<Panel header="Godfather I" :toggleable="true">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -132,16 +132,16 @@ import Panel from 'primevue/panel';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Panel</h1>
|
<h1>Panel</h1>
|
||||||
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Regular</h3>
|
<h3 class="first">Regular</h3>
|
||||||
<Panel header="Godfather I">
|
<Panel header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -149,7 +149,7 @@ import Panel from 'primevue/panel';
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
||||||
<h3>Toggleable</h3>
|
<h3>Toggleable</h3>
|
||||||
<Panel header="Godfather I" :toggleable="true">
|
<Panel header="Godfather I" :toggleable="true">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import Password from 'primevue/password';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>A model can be bound using the standard v-model directive.</p>
|
<p>A model can be bound using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Password v-model="value" />
|
<Password v-model="value" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -98,15 +98,15 @@ import Password from 'primevue/password';
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Password</h1>
|
<h1>Password</h1>
|
||||||
<p>Password displays strength indicator for password fields.</p>
|
<p>Password displays strength indicator for password fields.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Password v-model="value" />
|
<Password v-model="value" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import ProgressBar from 'primevue/progressbar';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
|
<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<ProgressBar :value="value" />
|
<ProgressBar :value="value" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -22,7 +22,7 @@ data() {
|
||||||
|
|
||||||
<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
|
<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<ProgressBar mode="indeterminate"/>
|
<ProgressBar mode="indeterminate"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -106,22 +106,22 @@ data() {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>ProgressBar</h1>
|
<h1>ProgressBar</h1>
|
||||||
<p>ProgressBar is a process status indicator.</p>
|
<p>ProgressBar is a process status indicator.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Dynamic</h3>
|
<h3 class="first">Dynamic</h3>
|
||||||
<ProgressBar :value="value1" />
|
<ProgressBar :value="value1" />
|
||||||
|
|
||||||
<h3>Static</h3>
|
<h3>Static</h3>
|
||||||
<ProgressBar :value="value2" :showValue="false" />
|
<ProgressBar :value="value2" :showValue="false" />
|
||||||
|
|
||||||
<h3>Indeterminate</h3>
|
<h3>Indeterminate</h3>
|
||||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,8 @@ import RadioButton from 'primevue/radiobutton';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Two-way value binding is defined using the standard v-model directive.</p>
|
<p>Two-way value binding is defined using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||||
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -139,43 +139,43 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>RadioButton</h1>
|
<h1>RadioButton</h1>
|
||||||
<p>RadioButton is an extension to standard radio button element with theming.</p>
|
<p>RadioButton is an extension to standard radio button element with theming.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
||||||
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
||||||
<label for="city3" class="p-radiobutton-label">New York</label>
|
<label for="city3" class="p-radiobutton-label">New York</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
||||||
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
|
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
|
||||||
|
|
||||||
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
||||||
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
||||||
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
|
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,19 +10,19 @@ import Rating from 'primevue/rating';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Two-way value binding is defined using v-model.</p>
|
<p>Two-way value binding is defined using v-model.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Rating v-model="val" />
|
<Rating v-model="val" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Number of Stars</h3>
|
<h3>Number of Stars</h3>
|
||||||
<p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
|
<p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Rating v-model="val" :stars="7"/>
|
<Rating v-model="val" :stars="7"/>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Cancel</h3>
|
<h3>Cancel</h3>
|
||||||
<p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
|
<p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Rating v-model="val" :cancel="false" />
|
<Rating v-model="val" :cancel="false" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -141,25 +141,25 @@ import Rating from 'primevue/rating';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Rating</h1>
|
<h1>Rating</h1>
|
||||||
<p>Rating component is a star based selection input.</p>
|
<p>Rating component is a star based selection input.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic {{val1}}</h3>
|
<h3 class="first">Basic {{val1}}</h3>
|
||||||
<Rating v-model="val1" />
|
<Rating v-model="val1" />
|
||||||
|
|
||||||
<h3>No Cancel {{val2}}</h3>
|
<h3>No Cancel {{val2}}</h3>
|
||||||
<Rating v-model="val2" :cancel="false" />
|
<Rating v-model="val2" :cancel="false" />
|
||||||
|
|
||||||
<h3>ReadOnly</h3>
|
<h3>ReadOnly</h3>
|
||||||
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Disabled</h3>
|
||||||
<Rating :value="8" :disabled="true" :stars="10" />
|
<Rating :value="8" :disabled="true" :stars="10" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import SelectButton from 'primevue/selectbutton';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
<p>SelectButton requires a value to bind and a collection of arbitrary objects along with the <i>optionLabel</i> property to specify the label property of the option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -31,18 +31,18 @@ export default {
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
|
<p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Templating</h3>
|
<h3>Templating</h3>
|
||||||
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div style="text-align: center; padding: 1em; width: 125px">
|
<div style="text-align: center; padding: 1em; width: 125px">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</SelectButton>
|
</SelectButton>
|
||||||
|
|
@ -156,32 +156,32 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>SelectButton</h1>
|
<h1>SelectButton</h1>
|
||||||
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
|
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Single</h3>
|
<h3 class="first">Single</h3>
|
||||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
||||||
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
||||||
|
|
||||||
<h3>Custom Content</h3>
|
<h3>Custom Content</h3>
|
||||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div style="text-align: center; padding: 1em; width: 125px">
|
<div style="text-align: center; padding: 1em; width: 125px">
|
||||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</SelectButton>
|
</SelectButton>
|
||||||
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,17 +10,17 @@ import Sidebar from 'primevue/sidebar';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Sidebar is used as a container and visibility is controlled with <i>visible</i> property.</p>
|
<p>Sidebar is used as a container and visibility is controlled with <i>visible</i> property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||||
Content
|
Content
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Position</h3>
|
<h3>Position</h3>
|
||||||
<p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
|
<p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||||
Content
|
Content
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -28,15 +28,15 @@ import Sidebar from 'primevue/sidebar';
|
||||||
<h3>Size</h3>
|
<h3>Size</h3>
|
||||||
<p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
|
<p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Sidebar :visible.sync="visibleLeft" class="p-sidebar-sm"></Sidebar>
|
<Sidebar :visible.sync="visibleLeft" class="p-sidebar-sm"></Sidebar>
|
||||||
<Sidebar :visible.sync="visibleLeft" class="p-sidebar-md"></Sidebar>
|
<Sidebar :visible.sync="visibleLeft" class="p-sidebar-md"></Sidebar>
|
||||||
<Sidebar :visible.sync="visibleLeft" class="p-sidebar-lg"></Sidebar>
|
<Sidebar :visible.sync="visibleLeft" class="p-sidebar-lg"></Sidebar>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Full Screen</h3>
|
<h3>Full Screen</h3>
|
||||||
<p>Full screen mode allows the sidebar to cover whole screen.</p>
|
<p>Full screen mode allows the sidebar to cover whole screen.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Sidebar :visible.sync="visibleFull" position="full">
|
<Sidebar :visible.sync="visibleFull" position="full">
|
||||||
Content
|
Content
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -200,49 +200,49 @@ import Sidebar from 'primevue/sidebar';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Sidebar</h1>
|
<h1>Sidebar</h1>
|
||||||
<p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
|
<p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||||
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
||||||
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||||
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
||||||
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
||||||
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
||||||
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||||
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
||||||
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
||||||
<h1 style="fontWeight:normal">Full Screen</h1>
|
<h1 style="fontWeight:normal">Full Screen</h1>
|
||||||
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,14 @@ import Slider from 'primevue/slider';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Two-way binding is defined using the standard v-model directive.</p>
|
<p>Two-way binding is defined using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Slider v-model="value" />
|
<Slider v-model="value" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Range</h3>
|
<h3>Range</h3>
|
||||||
<p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
|
<p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Slider v-model="value" :range="true" />
|
<Slider v-model="value" :range="true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -33,19 +33,19 @@ export default {
|
||||||
<h3>Orientation</h3>
|
<h3>Orientation</h3>
|
||||||
<p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
|
<p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Slider v-model="value" orientation="vertical" />
|
<Slider v-model="value" orientation="vertical" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Step</h3>
|
<h3>Step</h3>
|
||||||
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Slider v-model="value" :step="20" />
|
<Slider v-model="value" :step="20" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Min-Max</h3>
|
<h3>Min-Max</h3>
|
||||||
<p>Boundaries are specified with min and max attributes.</p>
|
<p>Boundaries are specified with min and max attributes.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Slider v-model="value" :step="20" :min="50" :max="200" />
|
<Slider v-model="value" :step="20" :min="50" :max="200" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -175,29 +175,29 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Slider</h1>
|
<h1>Slider</h1>
|
||||||
<p>Slider is an input component to provide a numerical input.</p>
|
<p>Slider is an input component to provide a numerical input.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic: {{value1}}</h3>
|
<h3 class="first">Basic: {{value1}}</h3>
|
||||||
<Slider v-model="value1" />
|
<Slider v-model="value1" />
|
||||||
|
|
||||||
<h3>Input: {{value2}}</h3>
|
<h3>Input: {{value2}}</h3>
|
||||||
<InputText v-model.number="value2" />
|
<InputText v-model.number="value2" />
|
||||||
<Slider v-model="value2" />
|
<Slider v-model="value2" />
|
||||||
|
|
||||||
<h3>Step: {{value3}}</h3>
|
<h3>Step: {{value3}}</h3>
|
||||||
<Slider v-model="value3" :step="20" />
|
<Slider v-model="value3" :step="20" />
|
||||||
|
|
||||||
<h3>Range: {{value4}}</h3>
|
<h3>Range: {{value4}}</h3>
|
||||||
<Slider v-model="value4" :range="true" />
|
<Slider v-model="value4" :range="true" />
|
||||||
|
|
||||||
<h3>Vertical: {{value5}}</h3>
|
<h3>Vertical: {{value5}}</h3>
|
||||||
<Slider v-model="value5" orientation="vertical" />
|
<Slider v-model="value5" orientation="vertical" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,19 +10,19 @@ import Spinner from 'primevue/spinner';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Two-way value binding is defined using standard v-model directive.</p>
|
<p>Two-way value binding is defined using standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Spinner v-model="value" />
|
<Spinner v-model="value" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Min-Max</h3>
|
<h3>Min-Max</h3>
|
||||||
<p>Boundaries are specified with <i>min</i> and <i>max</i> attributes.</p>
|
<p>Boundaries are specified with <i>min</i> and <i>max</i> attributes.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Spinner v-model="value" :min="0" :max="100" />
|
<Spinner v-model="value" :min="0" :max="100" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Step</h3>
|
<h3>Step</h3>
|
||||||
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Spinner v-model="value" :step="0.25" />
|
<Spinner v-model="value" :step="0.25" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -112,25 +112,25 @@ import Spinner from 'primevue/spinner';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Spinner</h1>
|
<h1>Spinner</h1>
|
||||||
<p>Spinner is an input component to provide a numerical input.</p>
|
<p>Spinner is an input component to provide a numerical input.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<Spinner v-model="value1" />
|
<Spinner v-model="value1" />
|
||||||
|
|
||||||
<h3>Min/Max</h3>
|
<h3>Min/Max</h3>
|
||||||
<Spinner v-model="value2" :min="0" :max="100" />
|
<Spinner v-model="value2" :min="0" :max="100" />
|
||||||
|
|
||||||
<h3>Step</h3>
|
<h3>Step</h3>
|
||||||
<Spinner v-model="value3" :step="0.25" />
|
<Spinner v-model="value3" :step="0.25" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Disabled</h3>
|
||||||
<Spinner v-model="value4" :disabled="true" />
|
<Spinner v-model="value4" :disabled="true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@ export default {
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Severity</h3>
|
<h3>Severity</h3>
|
||||||
|
|
@ -64,12 +64,12 @@ export default {
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -189,16 +189,16 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>SplitButton</h1>
|
<h1>SplitButton</h1>
|
||||||
<p>SplitButton groups a set of commands in an overlay with a default command.</p>
|
<p>SplitButton groups a set of commands in an overlay with a default command.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -11,13 +11,13 @@ import {TabView, TabPanel} from 'primevue/tabview';
|
||||||
<p>Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.</p>
|
<p>Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Header I">
|
<TabPanel header="Header I">
|
||||||
Content I
|
Content I
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Header II">
|
<TabPanel header="Header II">
|
||||||
Content II
|
Content II
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Header III">
|
<TabPanel header="Header III">
|
||||||
Content III
|
Content III
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
@ -27,18 +27,18 @@ import {TabView, TabPanel} from 'primevue/tabview';
|
||||||
<p>Tabs can be controlled programmatically using active property that defines the active tab.</p>
|
<p>Tabs can be controlled programmatically using active property that defines the active tab.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div>
|
<div>
|
||||||
<Button icon="pi pi-chevron-left" @click="prev"/>
|
<Button icon="pi pi-chevron-left" @click="prev"/>
|
||||||
<Button icon="pi pi-chevron-right" @click="next"/>
|
<Button icon="pi pi-chevron-right" @click="next"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Header I" :active="activeIndex === 0">
|
<TabPanel header="Header I" :active="activeIndex === 0">
|
||||||
Content I
|
Content I
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Header II" :active="activeIndex === 1">
|
<TabPanel header="Header II" :active="activeIndex === 1">
|
||||||
Content II
|
Content II
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Header III" :active="activeIndex === 2">
|
<TabPanel header="Header III" :active="activeIndex === 2">
|
||||||
Content III
|
Content III
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
@ -66,13 +66,13 @@ export default {
|
||||||
<p>A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.</p>
|
<p>A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Header I">
|
<TabPanel header="Header I">
|
||||||
Content I
|
Content I
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Header II">
|
<TabPanel header="Header II">
|
||||||
Content II
|
Content II
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Header III" :disabled="true">
|
<TabPanel header="Header III" :disabled="true">
|
||||||
Content III
|
Content III
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
@ -81,18 +81,18 @@ export default {
|
||||||
<h3>Header Template</h3>
|
<h3>Header Template</h3>
|
||||||
<p>Header of a tab supports templating to place custom html content instead of strings as well.</p>
|
<p>Header of a tab supports templating to place custom html content instead of strings as well.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<TabView class="tabview-custom">
|
<TabView class="tabview-custom">
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
<span>Header I</span>
|
<span>Header I</span>
|
||||||
</template>
|
</template>
|
||||||
Content I
|
Content I
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<span>Header II</span>
|
<span>Header II</span>
|
||||||
<i class="pi pi-user"></i>
|
<i class="pi pi-user"></i>
|
||||||
</template>
|
</template>
|
||||||
Content II
|
Content II
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
@ -202,27 +202,27 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>TabView</h1>
|
<h1>TabView</h1>
|
||||||
<p>TabView is a container component to group content with tabs.</p>
|
<p>TabView is a container component to group content with tabs.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Default</h3>
|
<h3 class="first">Default</h3>
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Godfather I">
|
<TabPanel header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather II">
|
<TabPanel header="Godfather II">
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather III">
|
<TabPanel header="Godfather III">
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
|
|
@ -230,23 +230,23 @@ export default {
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
||||||
<h3>Programmatic</h3>
|
<h3>Programmatic</h3>
|
||||||
<div style="padding: .5em 0">
|
<div style="padding: .5em 0">
|
||||||
<Button icon="pi pi-chevron-left" @click="prev" class="p-button-secondary" />
|
<Button icon="pi pi-chevron-left" @click="prev" class="p-button-secondary" />
|
||||||
<Button icon="pi pi-chevron-right" @click="next" style="margin-left: .5em" class="p-button-secondary"/>
|
<Button icon="pi pi-chevron-right" @click="next" style="margin-left: .5em" class="p-button-secondary"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Godfather I" :active="activeIndex === 0">
|
<TabPanel header="Godfather I" :active="activeIndex === 0">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather II" :active="activeIndex === 1">
|
<TabPanel header="Godfather II" :active="activeIndex === 1">
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather III" :active="activeIndex === 2">
|
<TabPanel header="Godfather III" :active="activeIndex === 2">
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
|
|
@ -255,29 +255,29 @@ export default {
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Disabled</h3>
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Godfather I">
|
<TabPanel header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather II">
|
<TabPanel header="Godfather II">
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather III">
|
<TabPanel header="Godfather III">
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
||||||
<h3>Custom Headers</h3>
|
<h3>Custom Headers</h3>
|
||||||
<TabView class="tabview-custom">
|
<TabView class="tabview-custom">
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
<span>Godfather I</span>
|
<span>Godfather I</span>
|
||||||
</template>
|
</template>
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
|
|
@ -285,19 +285,19 @@ export default {
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<span>Godfather II</span>
|
<span>Godfather II</span>
|
||||||
<i class="pi pi-user"></i>
|
<i class="pi pi-user"></i>
|
||||||
</template>
|
</template>
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-search"></i>
|
<i class="pi pi-search"></i>
|
||||||
<span>Godfather III</span>
|
<span>Godfather III</span>
|
||||||
<i class="pi pi-cog"></i>
|
<i class="pi pi-cog"></i>
|
||||||
</template>
|
</template>
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
|
|
|
||||||
|
|
@ -10,13 +10,13 @@ import Textarea from 'primevue/textarea';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>A model can be bound using the standard v-model directive.</p>
|
<p>A model can be bound using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Textarea v-model="value" rows="5" cols="30" />
|
<Textarea v-model="value" rows="5" cols="30" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>AutoResize</h3>
|
<h3>AutoResize</h3>
|
||||||
<p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
|
<p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Textarea v-model="value" :autoResize="true" rows="5" cols="30" />
|
<Textarea v-model="value" :autoResize="true" rows="5" cols="30" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -99,22 +99,22 @@ import Textarea from 'primevue/textarea';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Textarea</h1>
|
<h1>Textarea</h1>
|
||||||
<p>Textarea is a multi-line text input element.</p>
|
<p>Textarea is a multi-line text input element.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<Textarea v-model="value1" rows="5" cols="30" />
|
<Textarea v-model="value1" rows="5" cols="30" />
|
||||||
|
|
||||||
<h3>Auto Resize</h3>
|
<h3>Auto Resize</h3>
|
||||||
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Disabled</h3>
|
||||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -79,8 +79,8 @@ this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order s
|
||||||
<h3>Showing Messages</h3>
|
<h3>Showing Messages</h3>
|
||||||
<p>Show method accepts either a single message or an array of messages.</p>
|
<p>Show method accepts either a single message or an array of messages.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -191,55 +191,55 @@ this.$toast.removeAllGroups();
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Toast</h1>
|
<h1>Toast</h1>
|
||||||
<p>Toast is used to display messages in an overlay.</p>
|
<p>Toast is used to display messages in an overlay.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation p-fluid">
|
<div class="content-section implementation p-fluid">
|
||||||
<h3>Severities</h3>
|
<h3>Severities</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
<Button label="Error" class="p-button-danger" @click="showError" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Positions</h3>
|
<h3>Positions</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<Button label="Top Left" @click="showTopLeft" />
|
<Button label="Top Left" @click="showTopLeft" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-6">
|
<div class="p-col-12 p-md-6">
|
||||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6">
|
<div class="p-col-12 p-md-6">
|
||||||
<Button @click="showSticky" label="Sticky" />
|
<Button @click="showSticky" label="Sticky" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Remove All</h3>
|
<h3>Remove All</h3>
|
||||||
<Button @click="clear" label="Clear" />
|
<Button @click="clear" label="Clear" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import ToggleButton from 'primevue/togglebutton';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
|
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<ToggleButton v-model="checked" />
|
<ToggleButton v-model="checked" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked.</p>
|
<p>As model is two-way binding enabled, setting the bound value as true displays the state as checked.</p>
|
||||||
|
|
@ -27,7 +27,7 @@ export default {
|
||||||
<h3>Labels and Icons</h3>
|
<h3>Labels and Icons</h3>
|
||||||
<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
|
<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" />
|
<ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -180,21 +180,21 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>ToggleButton</h1>
|
<h1>ToggleButton</h1>
|
||||||
<p>ToggleButton is used to select a boolean value using a button.</p>
|
<p>ToggleButton is used to select a boolean value using a button.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<h3 class="first">Basic</h3>
|
<h3 class="first">Basic</h3>
|
||||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||||
<p style="font-weight: bold">{{checked1}}</p>
|
<p style="font-weight: bold">{{checked1}}</p>
|
||||||
|
|
||||||
<h3>Customized</h3>
|
<h3>Customized</h3>
|
||||||
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
|
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
|
||||||
<p style="font-weight: bold">{{checked2}}</p>
|
<p style="font-weight: bold">{{checked2}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -11,17 +11,17 @@ import Toolbar from 'primevue/toolbar';
|
||||||
<p>Toolbar is a container component defined using Toolbar element. Left aligned content is placed inside a template with "left" name and similarly "right" for right alignment..</p>
|
<p>Toolbar is a container component defined using Toolbar element. Left aligned content is placed inside a template with "left" name and similarly "right" for right alignment..</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<template slot="left">
|
<template slot="left">
|
||||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<Button icon="pi pi-search" style="margin-right: .25em" />
|
<Button icon="pi pi-search" style="margin-right: .25em" />
|
||||||
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
|
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
|
||||||
<Button icon="pi pi-times" class="p-button-danger" />
|
<Button icon="pi pi-times" class="p-button-danger" />
|
||||||
</template>
|
</template>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
@ -65,26 +65,26 @@ import Toolbar from 'primevue/toolbar';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>Toolbar</h1>
|
<h1>Toolbar</h1>
|
||||||
<p>Toolbar is a grouping component for buttons and other content.</p>
|
<p>Toolbar is a grouping component for buttons and other content.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<template slot="left">
|
<template slot="left">
|
||||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template slot="right">
|
<template slot="right">
|
||||||
<Button icon="pi pi-search" style="margin-right: .25em" />
|
<Button icon="pi pi-search" style="margin-right: .25em" />
|
||||||
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
|
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
|
||||||
<Button icon="pi pi-times" class="p-button-danger" />
|
<Button icon="pi pi-times" class="p-button-danger" />
|
||||||
</template>
|
</template>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>A model can be bound using the standard v-model directive.</p>
|
<p>A model can be bound using the standard v-model directive.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<TriStateCheckbox v-model="value" />
|
<TriStateCheckbox v-model="value" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -119,16 +119,16 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section introduction">
|
<div class="content-section introduction">
|
||||||
<div class="feature-intro">
|
<div class="feature-intro">
|
||||||
<h1>TriStateCheckbox</h1>
|
<h1>TriStateCheckbox</h1>
|
||||||
<p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
|
<p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="content-section implementation">
|
||||||
<TriStateCheckbox v-model="value" />
|
<TriStateCheckbox v-model="value" />
|
||||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue