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>
|
||||
<CodeHighlight>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I">
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<AccordionTab header="Header II">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<AccordionTab header="Header III">
|
||||
Content
|
||||
</AccordionTab>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I" :active="true">
|
||||
<AccordionTab header="Header I" :active="true">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<AccordionTab header="Header II">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<AccordionTab header="Header III">
|
||||
Content
|
||||
</AccordionTab>
|
||||
</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
|
||||
tabs be active at the same time.</p>
|
||||
<CodeHighlight>
|
||||
<Accordion :multiple="true" >
|
||||
<AccordionTab header="Header I">
|
||||
<Accordion :multiple="true" >
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<AccordionTab header="Header II">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III">
|
||||
<AccordionTab header="Header III">
|
||||
Content
|
||||
</AccordionTab>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<Accordion>
|
||||
<AccordionTab header="Header I">
|
||||
<AccordionTab header="Header I">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II">
|
||||
<AccordionTab header="Header II">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III" :disabled="true">
|
||||
<AccordionTab header="Header III" :disabled="true">
|
||||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
|
|
@ -77,22 +77,22 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
|||
<CodeHighlight>
|
||||
<Accordion>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header II</span>
|
||||
</template>
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header III</span>
|
||||
</template>
|
||||
Content
|
||||
|
|
@ -104,19 +104,19 @@ import {Accordion, AccordionTab} from 'primevue/accordion';
|
|||
<p>Tabs can be controlled programmatically using active property.</p>
|
||||
<CodeHighlight>
|
||||
<div>
|
||||
<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="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||
<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="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||
</div>
|
||||
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I" :active="active1">
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Header I" :active="active1">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header II" :active="active2">
|
||||
<AccordionTab header="Header II" :active="active2">
|
||||
Content
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Header III" :active="active3">
|
||||
<AccordionTab header="Header III" :active="active3">
|
||||
Content
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
|
|
@ -258,27 +258,27 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>AccordionPanel</h1>
|
||||
<p>AccordionPanel groups a collection of contents in tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<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,
|
||||
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.
|
||||
</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,
|
||||
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.
|
||||
</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
|
||||
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.
|
||||
|
|
@ -286,45 +286,45 @@ export default {
|
|||
</Accordion>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Godfather I">
|
||||
<Accordion :multiple="true">
|
||||
<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,
|
||||
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.
|
||||
</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,
|
||||
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.
|
||||
</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
|
||||
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.
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Godfather IV" :disabled="true">
|
||||
<AccordionTab header="Godfather IV" :disabled="true">
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
|
||||
<h3>Programmatic</h3>
|
||||
<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="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" />
|
||||
<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="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" />
|
||||
</div>
|
||||
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Godfather I" :active="active1">
|
||||
<Accordion :multiple="true">
|
||||
<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,
|
||||
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.
|
||||
</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,
|
||||
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.
|
||||
</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
|
||||
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.
|
||||
|
|
@ -332,10 +332,10 @@ export default {
|
|||
</Accordion>
|
||||
|
||||
<h3>Custom Headers</h3>
|
||||
<Accordion class="accordion-custom">
|
||||
<Accordion class="accordion-custom">
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Godfather I</span>
|
||||
</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,
|
||||
|
|
@ -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.
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-user"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Godfather II</span>
|
||||
</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,
|
||||
|
|
@ -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.
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-search"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Godfather III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
<i class="pi pi-cog"></i>
|
||||
</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
|
||||
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
|
||||
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>
|
||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" />
|
||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountry($event)" field="name" />
|
||||
</CodeHighlight>
|
||||
<CodeHighlight lang="js">
|
||||
export default {
|
||||
|
|
@ -39,13 +39,13 @@ export default {
|
|||
"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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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.
|
||||
Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.</p>
|
||||
<CodeHighlight>
|
||||
<AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />
|
||||
<AutoComplete field="label" v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||
<div>{{slotProps.item}}</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
|
|
@ -259,35 +259,35 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>AutoComplete</h1>
|
||||
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||
|
||||
<h3>Dropdown and Templating</h3>
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<div class="p-clearfix p-autocomplete-brand-item">
|
||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<div class="p-clearfix p-autocomplete-brand-item">
|
||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||
<div>{{slotProps.item}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
|
||||
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<span class="p-fluid">
|
||||
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
||||
<span class="p-fluid">
|
||||
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
||||
</span>
|
||||
<ul>
|
||||
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
||||
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@ import Button from 'primevue/button';
|
|||
<h3>Label</h3>
|
||||
<p>Text of the button is defined using the <i>label</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" />
|
||||
</CodeHighlight>
|
||||
<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
|
||||
icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Events are defined with the standard notation.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Click" @click="handleClick($event)"/>
|
||||
<Button label="Click" @click="handleClick($event)"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Severity</h3>
|
||||
|
|
@ -43,18 +43,18 @@ import Button from 'primevue/button';
|
|||
</ul>
|
||||
|
||||
<CodeHighlight>
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<Button label="Primary" class="p-button-raised p-button-rounded" />
|
||||
<Button label="Primary" class="p-button-raised p-button-rounded" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -130,44 +130,44 @@ import Button from 'primevue/button';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Button</h1>
|
||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" icon="pi pi-check" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<Button icon="pi pi-check" />
|
||||
<Button label="Click" disabled="disabled" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" icon="pi pi-check" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<Button icon="pi pi-check" />
|
||||
<Button label="Click" disabled="disabled" />
|
||||
|
||||
<h3>Severities</h3>
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
|
||||
<h3>Raised Buttons</h3>
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
|
||||
<h3>Rounded Buttons</h3>
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
<Button label="Primary" class="p-button-rounded" />
|
||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -145,9 +145,9 @@ export default {
|
|||
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Calendar v-model="value">
|
||||
<template #date="slotProps">
|
||||
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
|
||||
<Calendar v-model="value">
|
||||
<template #date="slotProps">
|
||||
<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>
|
||||
</template>
|
||||
</Calendar>
|
||||
|
|
@ -535,84 +535,84 @@ export default {
|
|||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Calendar</h1>
|
||||
<p>Calendar is an input component to select a date.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation" style="padding-top:0">
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="content-section implementation" style="padding-top:0">
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Basic</h3>
|
||||
<Calendar v-model="date1" />
|
||||
<Calendar v-model="date1" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<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 class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Icon</h3>
|
||||
<Calendar v-model="date3" :showIcon="true" />
|
||||
<Calendar v-model="date3" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<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 class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<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 class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<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 class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Multiple</h3>
|
||||
<Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
||||
<Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Range</h3>
|
||||
<Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
|
||||
<Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Button Bar</h3>
|
||||
<Calendar v-model="date7" :showButtonBar="true" />
|
||||
<Calendar v-model="date7" :showButtonBar="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Time / 24h</h3>
|
||||
<Calendar v-model="date8" :showTime="true" :showSeconds="true" />
|
||||
<Calendar v-model="date8" :showTime="true" :showSeconds="true" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Time Only / 12h</h3>
|
||||
<Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
|
||||
<Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<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 class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Multiple Months</h3>
|
||||
<Calendar v-model="date11" :numberOfMonths="3" />
|
||||
<Calendar v-model="date11" :numberOfMonths="3" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Date Template</h3>
|
||||
<Calendar v-model="date12">
|
||||
<template #date="slotProps">
|
||||
<div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
|
||||
<Calendar v-model="date12">
|
||||
<template #date="slotProps">
|
||||
<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>
|
||||
</template>
|
||||
</Calendar>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Touch UI</h3>
|
||||
<Calendar v-model="date13" :touchUI="true" />
|
||||
<Calendar v-model="date13" :touchUI="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Inline</h3>
|
||||
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
||||
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -62,38 +62,38 @@ import Card from 'primevue/card';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Card</h1>
|
||||
<p>Card is a flexible container component.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Card style="width: 25em; margin-bottom: 2em">
|
||||
<template slot="title">
|
||||
<div class="content-section implementation">
|
||||
<Card style="width: 25em; margin-bottom: 2em">
|
||||
<template slot="title">
|
||||
Simple Card
|
||||
</template>
|
||||
<template slot="content">
|
||||
<template slot="content">
|
||||
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!
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card style="width: 25em">
|
||||
<template slot="header">
|
||||
<img alt="user header" src="demo/images/usercard.png">
|
||||
<Card style="width: 25em">
|
||||
<template slot="header">
|
||||
<img alt="user header" src="demo/images/usercard.png">
|
||||
</template>
|
||||
<template slot="title">
|
||||
<template slot="title">
|
||||
Advanced Card
|
||||
</template>
|
||||
<template slot="content">
|
||||
<template slot="content">
|
||||
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!
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<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" />
|
||||
<template slot="footer">
|
||||
<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" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="vertical">Vertical</h3>
|
||||
<Chart type="bar" :data="basicData" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="vertical">Vertical</h3>
|
||||
<Chart type="bar" :data="basicData" />
|
||||
|
||||
<h3>Horizontal</h3>
|
||||
<Chart type="horizontalBar" :data="basicData" />
|
||||
<Chart type="horizontalBar" :data="basicData" />
|
||||
|
||||
<h3>Multi Axis</h3>
|
||||
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||
|
||||
<h3>Stacked</h3>
|
||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import Chart from 'primevue/chart';
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<Chart type="bar" :data="basicData" />
|
||||
<Chart type="bar" :data="basicData" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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.
|
||||
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>
|
||||
<Chart type="line" :data="data" :options="options" />
|
||||
<Chart type="line" :data="data" :options="options" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Combo Chart</h1>
|
||||
<p>Different chart types can be combined in the same graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||
<div class="content-section implementation">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
<div class="content-section implementation">
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,22 +6,22 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Chart type="line" :data="basicData" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Chart type="line" :data="basicData" />
|
||||
|
||||
<h3>Multi Axis</h3>
|
||||
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||
|
||||
<h3>Line Styles</h3>
|
||||
<Chart type="line" :data="lineStylesData" />
|
||||
<Chart type="line" :data="lineStylesData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Pie Chart</h1>
|
||||
<p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="pie" :data="chartData" />
|
||||
<div class="content-section implementation">
|
||||
<Chart type="pie" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
<div class="content-section implementation">
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="radar" :data="chartData" />
|
||||
<div class="content-section implementation">
|
||||
<Chart type="radar" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@ import Checkbox from 'primevue/checkbox';
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
<Checkbox v-model="checked" :binary="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Multiple Values</h3>
|
||||
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
|
||||
<CodeHighlight>
|
||||
<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="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="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="city3" inputId="city3" name="city" value="New York" v-model="cities" />
|
||||
<Checkbox id="city4" inputId="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
@ -147,47 +147,47 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Checkbox</h1>
|
||||
<p>Checkbox is an extension to standard checkbox element with theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2" class="p-checkbox-label">Los Angeles</label>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2" class="p-checkbox-label">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||
<label for="city3" class="p-checkbox-label">New York</label>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||
<label for="city3" class="p-checkbox-label">New York</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
||||
</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>
|
||||
<div class="p-grid">
|
||||
<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'"/>
|
||||
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
||||
<div class="p-grid">
|
||||
<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'"/>
|
||||
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,18 +10,18 @@ import Chips from 'primevue/chips';
|
|||
<h3>Getting Started</h3>
|
||||
<p>An array as the value can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<Chips v-model="value" />
|
||||
<Chips v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Chips v-model="value">
|
||||
<template #chip="slotProps">
|
||||
<Chips v-model="value">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<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>
|
||||
</template>
|
||||
</Chips>
|
||||
|
|
@ -146,23 +146,23 @@ import Chips from 'primevue/chips';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Chips</h1>
|
||||
<p>Chips is used to enter multiple values on an input field.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Chips v-model="value1" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Chips v-model="value1" />
|
||||
|
||||
<h3>Template</h3>
|
||||
<Chips v-model="value2">
|
||||
<template #chip="slotProps">
|
||||
<Chips v-model="value2">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<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>
|
||||
</template>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template #listItem="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<template #listItem="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</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>Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -77,11 +77,11 @@ mounted() {
|
|||
</p>
|
||||
<CodeHighlight>
|
||||
<template #header>
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
</template>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<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>
|
||||
<Button type="button" icon="pi pi-refresh"/>
|
||||
<Button type="button" icon="pi pi-refresh"/>
|
||||
</template>
|
||||
<template #paginatorRight>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
<template #header>
|
||||
List of Cars
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<template #listItem="slotProps" >
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<template #gridItem="slotProps">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #paginatorLeft>
|
||||
<Button type="button" icon="pi pi-refresh"/>
|
||||
<Button type="button" icon="pi pi-refresh"/>
|
||||
</template>
|
||||
<template #paginatorRight>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
<template #header>
|
||||
List of Cars
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<template #listItem="slotProps" >
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<template #gridItem="slotProps">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
</template>
|
||||
</DataView>
|
||||
|
|
@ -342,52 +342,52 @@ mounted() {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DataView</h1>
|
||||
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<template #listItem="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</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>Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Dialog from 'primevue/dialog';
|
|||
<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>
|
||||
<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.
|
||||
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,
|
||||
|
|
@ -30,11 +30,11 @@ export default {
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<Dialog header="Godfather I" :visible.sync="display">
|
||||
<Dialog header="Godfather I" :visible.sync="display">
|
||||
Content
|
||||
<template slot="footer">
|
||||
<Button label="Yes" icon="pi pi-check" />
|
||||
<Button label="No" icon="pi pi-times" class="p-button-secondary"/>
|
||||
<template slot="footer">
|
||||
<Button label="Yes" icon="pi pi-check" />
|
||||
<Button label="No" icon="pi pi-times" class="p-button-secondary"/>
|
||||
</template>
|
||||
</Dialog>
|
||||
</CodeHighlight>
|
||||
|
|
@ -194,23 +194,23 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Dialog</h1>
|
||||
<p>Dialog is a container to display content in an overlay window.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
||||
<div class="content-section implementation">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||
<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.
|
||||
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,
|
||||
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">
|
||||
<Button label="Yes" icon="pi pi-check" @click="close" />
|
||||
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
||||
<template slot="footer">
|
||||
<Button label="Yes" icon="pi pi-check" @click="close" />
|
||||
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Dropdown from 'primevue/dropdown';
|
|||
<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>
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -247,25 +247,25 @@ data() {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Dropdown</h1>
|
||||
<p>Dropdown is used to select an item from a list of options.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
|
||||
<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>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,18 +10,18 @@ import Editor from 'primevue/editor';
|
|||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<Editor v-model="value" editorStyle="height: 320px"/>
|
||||
<Editor v-model="value" editorStyle="height: 320px"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<Editor v-model="value" editorStyle="height: 320px">
|
||||
<template slot="toolbar">
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
<Editor v-model="value" editorStyle="height: 320px">
|
||||
<template slot="toolbar">
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
</span>
|
||||
</template>
|
||||
</Editor>
|
||||
|
|
@ -146,24 +146,24 @@ npm install quill --save
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Editor</h1>
|
||||
<p>Editor is rich text editor component based on Quill.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||
|
||||
<h3>Customized</h3>
|
||||
<Editor v-model="value2" editorStyle="height: 320px">
|
||||
<template slot="toolbar">
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
<Editor v-model="value2" editorStyle="height: 320px">
|
||||
<template slot="toolbar">
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
</span>
|
||||
</template>
|
||||
</Editor>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Fieldset from 'primevue/fieldset';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Fieldset is a container component that accepts content as its children.</p>
|
||||
<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.
|
||||
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,
|
||||
|
|
@ -21,7 +21,7 @@ import Fieldset from 'primevue/fieldset';
|
|||
<h3>Toggleable</h3>
|
||||
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
|
||||
<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.
|
||||
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,
|
||||
|
|
@ -128,16 +128,16 @@ import Fieldset from 'primevue/fieldset';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Fieldset</h1>
|
||||
<p>Fieldset is a grouping component with the optional content toggle feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<Fieldset legend="Godfather I">
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<Fieldset legend="Godfather I">
|
||||
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.
|
||||
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>
|
||||
|
||||
<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.
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@ import FileUpload from 'primevue/fileupload';
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<FileUpload name="demo[]" url="./upload" />
|
||||
<FileUpload name="demo[]" url="./upload" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<FileUpload name="demo[]" url="./upload" :multiple="true" />
|
||||
<FileUpload name="demo[]" url="./upload" :multiple="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Basic UI</h3>
|
||||
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
|
||||
<CodeHighlight>
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload" />
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>DragDrop</h3>
|
||||
|
|
@ -31,19 +31,19 @@ import FileUpload from 'primevue/fileupload';
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" />
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" />
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>File Size</h3>
|
||||
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes.</p>
|
||||
<CodeHighlight>
|
||||
<FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" />
|
||||
<FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" />
|
||||
</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>
|
||||
|
|
@ -253,22 +253,22 @@ import FileUpload from 'primevue/fileupload';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>FileUpload</h1>
|
||||
<p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="content-section implementation">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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
|
||||
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>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
</div>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<!-- Row Reverse -->
|
||||
<div class="p-grid p-dir-rev">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
<div class="p-grid p-dir-rev">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
</div>
|
||||
|
||||
<!-- Column -->
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
</div>
|
||||
|
||||
<!-- Column Reverse -->
|
||||
<div class="p-grid p-dir-col-rev">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
<div class="p-grid p-dir-col-rev">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col">2</div>
|
||||
<div class="p-col">3</div>
|
||||
</div>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<div class="p-grid">
|
||||
<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-grid">
|
||||
<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>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-2">2</div>
|
||||
<div class="p-col-6">6</div>
|
||||
<div class="p-col-4">4</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-2">2</div>
|
||||
<div class="p-col-6">6</div>
|
||||
<div class="p-col-4">4</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -154,11 +154,11 @@
|
|||
<h3>MultiLine</h3>
|
||||
<p>When the number of columns exceed 12, columns wrap to a new line.</p>
|
||||
<CodeHighlight>
|
||||
<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-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>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -180,9 +180,9 @@
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">Fixed</div>
|
||||
<div class="p-col">Auto</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">Fixed</div>
|
||||
<div class="p-col">Auto</div>
|
||||
</div>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<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">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">D</div>
|
||||
<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">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">D</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -299,10 +299,10 @@
|
|||
</table>
|
||||
</div>
|
||||
<CodeHighlight>
|
||||
<div class="p-grid p-justify-between">
|
||||
<div class="p-col-2">2</div>
|
||||
<div class="p-col-1">1</div>
|
||||
<div class="p-col-4">4</div>
|
||||
<div class="p-grid p-justify-between">
|
||||
<div class="p-col-2">2</div>
|
||||
<div class="p-col-1">1</div>
|
||||
<div class="p-col-4">4</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -353,10 +353,10 @@
|
|||
</table>
|
||||
</div>
|
||||
<CodeHighlight>
|
||||
<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-grid p-align-center">
|
||||
<div class="p-col">4</div>
|
||||
<div class="p-col">4</div>
|
||||
<div class="p-col">4</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -405,10 +405,10 @@
|
|||
</table>
|
||||
</div>
|
||||
<CodeHighlight>
|
||||
<div class="p-grid">
|
||||
<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-end">4</div>
|
||||
<div class="p-grid">
|
||||
<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-end">4</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -427,13 +427,13 @@
|
|||
<h3>Offset</h3>
|
||||
<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">6</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">6</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">4</div>
|
||||
<div class="p-col-4 p-offset-4">4</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">4</div>
|
||||
<div class="p-col-4 p-offset-4">4</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -500,21 +500,21 @@
|
|||
<h3>Nested</h3>
|
||||
<p>Columns can be nested to create more complex layouts.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
6
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="p-col-6">
|
||||
6
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<div class="p-col-12">
|
||||
12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="p-col-4">
|
||||
4
|
||||
</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.
|
||||
</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col p-nogutter">2</div>
|
||||
<div class="p-col">3</div>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col">1</div>
|
||||
<div class="p-col p-nogutter">2</div>
|
||||
<div class="p-col">3</div>
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -564,375 +564,375 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>FlexGrid</h1>
|
||||
<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 class="content-section implementation flexgrid-demo">
|
||||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="content-section implementation flexgrid-demo">
|
||||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||
<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" />
|
||||
|
||||
<div style="margin-top: .5em">
|
||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||
<div v-for="col of columns" :key="col" class="p-col">
|
||||
<div class="box">{{col}}</div>
|
||||
<div style="margin-top: .5em">
|
||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||
<div v-for="col of columns" :key="col" class="p-col">
|
||||
<div class="box">{{col}}</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<h3>Reverse Direction</h3>
|
||||
<div class="p-grid p-dir-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-grid p-dir-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Column Direction</h3>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Reverse Column Direction</h3>
|
||||
<div class="p-grid p-dir-col-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-grid p-dir-col-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>12 Column Grid</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="box">8</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="box">8</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>MultiLine</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Fixed Width Column</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">
|
||||
<div class="box">100px</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">
|
||||
<div class="box">100px</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">auto</div>
|
||||
<div class="p-col">
|
||||
<div class="box">auto</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Responsive</h3>
|
||||
<div class="p-grid">
|
||||
<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="p-grid">
|
||||
<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>
|
||||
<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="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<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="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<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="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Start</h3>
|
||||
<div class="p-grid p-justify-start">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-grid p-justify-start">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - End</h3>
|
||||
<div class="p-grid p-justify-end">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-grid p-justify-end">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Center</h3>
|
||||
<div class="p-grid p-justify-center">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-grid p-justify-center">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Between</h3>
|
||||
<div class="p-grid p-justify-between">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-grid p-justify-between">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Around</h3>
|
||||
<div class="p-grid p-justify-around">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-grid p-justify-around">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Even</h3>
|
||||
<div class="p-grid p-justify-even">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
<div class="p-grid p-justify-even">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Start</h3>
|
||||
<div class="p-grid p-align-start vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-grid p-align-start vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - End</h3>
|
||||
<div class="p-grid p-align-end vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-grid p-align-end vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Center</h3>
|
||||
<div class="p-grid p-align-center vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-grid p-align-center vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Stretch</h3>
|
||||
<div class="p-grid p-align-stretch vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
<div class="p-grid p-align-stretch vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Per Column</h3>
|
||||
<div class="p-grid vertical-container">
|
||||
<div class="p-col p-col-align-start">
|
||||
<div class="box">4</div>
|
||||
<div class="p-grid vertical-container">
|
||||
<div class="p-col p-col-align-start">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-center">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col p-col-align-center">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-end">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col p-col-align-end">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Offset</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">
|
||||
<div class="box">6</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col-4 p-offset-4">
|
||||
<div class="box">4</div>
|
||||
<div class="p-col-4 p-offset-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Nested</h3>
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<div class="box">12</div>
|
||||
<div class="p-col-12">
|
||||
<div class="box">12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box box-stretched">4</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Panels</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
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.
|
||||
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.
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
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.
|
||||
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.
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
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.
|
||||
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>
|
||||
|
||||
<h3>Sample Layout</h3>
|
||||
<div class="p-grid sample-layout">
|
||||
<div class="p-col-12 p-md-2">
|
||||
<div class="p-grid sample-layout">
|
||||
<div class="p-col-12 p-md-2">
|
||||
Menu
|
||||
</div>
|
||||
<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-md-10 p-col-nogutter">
|
||||
<div class="p-col-12 p-col-nogutter">
|
||||
Top Bar
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<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">
|
||||
<div class="p-grid">
|
||||
<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.
|
||||
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
|
||||
at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
|
||||
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.
|
||||
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
||||
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 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 4" src="/demo/images/nature/nature4.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 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-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
|
||||
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
|
||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<div class="p-col-12">
|
||||
Footer
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ npm install @fullcalendar/interaction --save
|
|||
|
||||
<p>Events should be an array and defined using the events property.</p>
|
||||
<CodeHighlight>
|
||||
<FullCalendar :events="events" />
|
||||
<FullCalendar :events="events" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
@ -201,15 +201,15 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<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 class="content-section implementation">
|
||||
<FullCalendar :events="events" :options="options" />
|
||||
<div class="content-section implementation">
|
||||
<FullCalendar :events="events" :options="options" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,111 +9,111 @@
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputGroup</h1>
|
||||
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<InputText placeholder="Username" />
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<InputText placeholder="Website" />
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<InputText placeholder="Website" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Multiple Addons</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-star"></i>
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-star"></i>
|
||||
</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Button Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button label="Search"/>
|
||||
<InputText placeholder="Keyword"/>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button label="Search"/>
|
||||
<InputText placeholder="Keyword"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Keyword"/>
|
||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Keyword"/>
|
||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button icon="pi pi-check" class="p-button-success"/>
|
||||
<InputText placeholder="Vote"/>
|
||||
<Button icon="pi pi-times" class="p-button-danger"/>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button icon="pi pi-check" class="p-button-success"/>
|
||||
<InputText placeholder="Vote"/>
|
||||
<Button icon="pi pi-times" class="p-button-danger"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Checkbox and RadioButton</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked1" />
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked1" />
|
||||
</span>
|
||||
<InputText placeholder="Username"/>
|
||||
<InputText placeholder="Username"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Price"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Price"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked2" />
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked2" />
|
||||
</span>
|
||||
<InputText placeholder="Website"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
|
||||
<InputText placeholder="Website"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import InputSwitch from 'primevue/inputswitch';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<InputSwitch v-model="checked" />
|
||||
<InputSwitch v-model="checked" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
@ -155,21 +155,21 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputSwitch</h1>
|
||||
<p>InputSwitch is used to select a boolean value.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<InputSwitch v-model="checked1" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<InputSwitch v-model="checked1" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<h3>Preselection</h3>
|
||||
<InputSwitch v-model="checked2" />
|
||||
<p style="font-weight: bold">{{checked2}}</p>
|
||||
<InputSwitch v-model="checked2" />
|
||||
<p style="font-weight: bold">{{checked2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@ import InputText from 'primevue/inputtext';
|
|||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<InputText type="text" v-model="value" />
|
||||
<InputText type="text" v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value" />
|
||||
<label for="username">Username</label>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value" />
|
||||
<label for="username">Username</label>
|
||||
</span>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -56,26 +56,26 @@ import InputText from 'primevue/inputtext';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputText</h1>
|
||||
<p>InputText renders and input field where the user can enter data.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<InputText type="text" v-model="value1" />
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<InputText type="text" v-model="value1" />
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
|
||||
<h3>Floating Label</h3>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value2" />
|
||||
<label for="username">Username</label>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value2" />
|
||||
<label for="username">Username</label>
|
||||
</span>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<InputText type="text" v-model="value3" disabled />
|
||||
<InputText type="text" v-model="value3" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Listbox from 'primevue/listbox';
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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
|
||||
devices metaKeySelection is turned off automatically.</p>
|
||||
<CodeHighlight>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Listbox>
|
||||
|
|
@ -54,7 +54,7 @@ data() {
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -214,23 +214,23 @@ data() {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Listbox</h1>
|
||||
<p>Listbox is used to select one or more values from a list of items.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
|
||||
<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">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<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>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -42,20 +42,20 @@ data() {
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<Message severity="success" :closable="false">Order Submitted</Message>
|
||||
<Message severity="success" :closable="false">Order Submitted</Message>
|
||||
</CodeHighlight>
|
||||
|
||||
<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
|
||||
they are manually removed.</p>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<ValidationMessage>Field is required</ValidationMessage>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -163,36 +163,36 @@ data() {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Message</h1>
|
||||
<p>Messages is used to display inline messages with various severities.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Severities</h3>
|
||||
<Message severity="success">Order Submitted</Message>
|
||||
<Message severity="info">PrimeVue Rocks</Message>
|
||||
<Message severity="warn">There are unsaved changes</Message>
|
||||
<Message severity="error">Validation Failed</Message>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Severities</h3>
|
||||
<Message severity="success">Order Submitted</Message>
|
||||
<Message severity="info">PrimeVue Rocks</Message>
|
||||
<Message severity="warn">There are unsaved changes</Message>
|
||||
<Message severity="error">Validation Failed</Message>
|
||||
|
||||
<h3>Dynamic</h3>
|
||||
<Button label="Show" @click="addMessages()" />
|
||||
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||
<Button label="Show" @click="addMessages()" />
|
||||
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||
|
||||
<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>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<ValidationMessage>Field is required</ValidationMessage>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||
<ValidationMessage />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import MultiSelect from 'primevue/multiselect';
|
|||
<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>
|
||||
<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 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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
||||
<template #value="slotProps">
|
||||
<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'" />
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
||||
<template #value="slotProps">
|
||||
<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'" />
|
||||
<span>{{option.brand}}</span>
|
||||
</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
|
||||
</div>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -60,7 +60,7 @@ data() {
|
|||
<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>
|
||||
<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>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -237,31 +237,31 @@ data() {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>MultiSelect</h1>
|
||||
<p>MultiSelect is used to multiple values from a list of options.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||
|
||||
<h3>Advanced with Templating and Filtering</h3>
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||
<template #value="slotProps">
|
||||
<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'" />
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||
<template #value="slotProps">
|
||||
<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'" />
|
||||
<span>{{option.brand}}</span>
|
||||
</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
|
||||
</div>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import OverlayPanel from 'primevue/overlaypanel';
|
|||
<h3>Getting Started</h3>
|
||||
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
|
||||
<CodeHighlight>
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
<OverlayPanel ref="op">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -27,8 +27,8 @@ toggle(event) {
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
<OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -148,18 +148,18 @@ toggle(event) {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>OverlayPanel</h1>
|
||||
<p>OverlayPanel is a container component that can overlay other components on page.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
<div class="content-section implementation">
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,13 +54,13 @@ import Paginator from 'primevue/paginator';
|
|||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount">
|
||||
<template #left="slotProps">
|
||||
<template #left="slotProps">
|
||||
Page: {{slotProps.state.page}}
|
||||
First: {{slotProps.state.first}}
|
||||
Rows: {{slotProps.state.rows}}
|
||||
</template>
|
||||
<template #right>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
</Paginator>
|
||||
</template>
|
||||
|
|
@ -221,29 +221,29 @@ onPage(event) {
|
|||
<CodeHighlight>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Paginator</h1>
|
||||
<p>Paginator is a generic component to display content in paged format.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
<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>
|
||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||
</template>
|
||||
<template #right>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
</Paginator>
|
||||
|
||||
<div class="image-gallery">
|
||||
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
||||
<div class="image-gallery">
|
||||
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Panel from 'primevue/panel';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Panel is a container component that accepts content as its children.</p>
|
||||
<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.
|
||||
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,
|
||||
|
|
@ -21,7 +21,7 @@ import Panel from 'primevue/panel';
|
|||
<h3>Toggleable</h3>
|
||||
<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
|
||||
<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.
|
||||
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,
|
||||
|
|
@ -132,16 +132,16 @@ import Panel from 'primevue/panel';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Panel</h1>
|
||||
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<Panel header="Godfather I">
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<Panel header="Godfather I">
|
||||
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.
|
||||
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>
|
||||
|
||||
<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.
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Password from 'primevue/password';
|
|||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<Password v-model="value" />
|
||||
<Password v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -98,15 +98,15 @@ import Password from 'primevue/password';
|
|||
<CodeHighlight>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Password</h1>
|
||||
<p>Password displays strength indicator for password fields.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Password v-model="value" />
|
||||
<div class="content-section implementation">
|
||||
<Password v-model="value" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import ProgressBar from 'primevue/progressbar';
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<ProgressBar :value="value" />
|
||||
<ProgressBar :value="value" />
|
||||
</CodeHighlight>
|
||||
<CodeHighlight lang="js">
|
||||
data() {
|
||||
|
|
@ -22,7 +22,7 @@ data() {
|
|||
|
||||
<p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<ProgressBar mode="indeterminate"/>
|
||||
<ProgressBar mode="indeterminate"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -106,22 +106,22 @@ data() {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ProgressBar</h1>
|
||||
<p>ProgressBar is a process status indicator.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Dynamic</h3>
|
||||
<ProgressBar :value="value1" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Dynamic</h3>
|
||||
<ProgressBar :value="value1" />
|
||||
|
||||
<h3>Static</h3>
|
||||
<ProgressBar :value="value2" :showValue="false" />
|
||||
<ProgressBar :value="value2" :showValue="false" />
|
||||
|
||||
<h3>Indeterminate</h3>
|
||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import RadioButton from 'primevue/radiobutton';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Two-way value binding is defined using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
|
||||
<RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
</CodeHighlight>
|
||||
<CodeHighlight lang="js">
|
||||
export default {
|
||||
|
|
@ -139,43 +139,43 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>RadioButton</h1>
|
||||
<p>RadioButton is an extension to standard radio button element with theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
||||
<label for="city3" class="p-radiobutton-label">New York</label>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city3" name="city" value="New York" v-model="city" />
|
||||
<label for="city3" class="p-radiobutton-label">New York</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
||||
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
||||
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
||||
</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>
|
||||
<div class="p-grid">
|
||||
<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'" />
|
||||
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
||||
<div class="p-grid">
|
||||
<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'" />
|
||||
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@ import Rating from 'primevue/rating';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Two-way value binding is defined using v-model.</p>
|
||||
<CodeHighlight>
|
||||
<Rating v-model="val" />
|
||||
<Rating v-model="val" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Number of Stars</h3>
|
||||
<p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
|
||||
<CodeHighlight>
|
||||
<Rating v-model="val" :stars="7"/>
|
||||
<Rating v-model="val" :stars="7"/>
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<Rating v-model="val" :cancel="false" />
|
||||
<Rating v-model="val" :cancel="false" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -141,25 +141,25 @@ import Rating from 'primevue/rating';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Rating</h1>
|
||||
<p>Rating component is a star based selection input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic {{val1}}</h3>
|
||||
<Rating v-model="val1" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic {{val1}}</h3>
|
||||
<Rating v-model="val1" />
|
||||
|
||||
<h3>No Cancel {{val2}}</h3>
|
||||
<Rating v-model="val2" :cancel="false" />
|
||||
<Rating v-model="val2" :cancel="false" />
|
||||
|
||||
<h3>ReadOnly</h3>
|
||||
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
||||
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<Rating :value="8" :disabled="true" :stars="10" />
|
||||
<Rating :value="8" :disabled="true" :stars="10" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import SelectButton from 'primevue/selectbutton';
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
@ -31,18 +31,18 @@ export default {
|
|||
<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>
|
||||
<CodeHighlight>
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="brand" :multiple="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</SelectButton>
|
||||
|
|
@ -156,32 +156,32 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>SelectButton</h1>
|
||||
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
||||
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
||||
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
||||
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
||||
|
||||
<h3>Custom Content</h3>
|
||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<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" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@ import Sidebar from 'primevue/sidebar';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Sidebar is used as a container and visibility is controlled with <i>visible</i> property.</p>
|
||||
<CodeHighlight>
|
||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||
Content
|
||||
</Sidebar>
|
||||
|
||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight>
|
||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||
Content
|
||||
</Sidebar>
|
||||
</CodeHighlight>
|
||||
|
|
@ -28,15 +28,15 @@ import Sidebar from 'primevue/sidebar';
|
|||
<h3>Size</h3>
|
||||
<p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
|
||||
<CodeHighlight>
|
||||
<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-lg"></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-lg"></Sidebar>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Full Screen</h3>
|
||||
<p>Full screen mode allows the sidebar to cover whole screen.</p>
|
||||
<CodeHighlight>
|
||||
<Sidebar :visible.sync="visibleFull" position="full">
|
||||
<Sidebar :visible.sync="visibleFull" position="full">
|
||||
Content
|
||||
</Sidebar>
|
||||
</CodeHighlight>
|
||||
|
|
@ -200,49 +200,49 @@ import Sidebar from 'primevue/sidebar';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Sidebar</h1>
|
||||
<p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
<div class="content-section implementation">
|
||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
||||
<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="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<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-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-th-large" @click="visibleFull = true" />
|
||||
<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-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-th-large" @click="visibleFull = true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@ import Slider from 'primevue/slider';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Two-way binding is defined using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<Slider v-model="value" />
|
||||
<Slider v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
|
||||
<CodeHighlight>
|
||||
<Slider v-model="value" :range="true" />
|
||||
<Slider v-model="value" :range="true" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
@ -33,19 +33,19 @@ export default {
|
|||
<h3>Orientation</h3>
|
||||
<p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
|
||||
<CodeHighlight>
|
||||
<Slider v-model="value" orientation="vertical" />
|
||||
<Slider v-model="value" orientation="vertical" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Step</h3>
|
||||
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
||||
<CodeHighlight>
|
||||
<Slider v-model="value" :step="20" />
|
||||
<Slider v-model="value" :step="20" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Min-Max</h3>
|
||||
<p>Boundaries are specified with min and max attributes.</p>
|
||||
<CodeHighlight>
|
||||
<Slider v-model="value" :step="20" :min="50" :max="200" />
|
||||
<Slider v-model="value" :step="20" :min="50" :max="200" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -175,29 +175,29 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Slider</h1>
|
||||
<p>Slider is an input component to provide a numerical input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic: {{value1}}</h3>
|
||||
<Slider v-model="value1" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic: {{value1}}</h3>
|
||||
<Slider v-model="value1" />
|
||||
|
||||
<h3>Input: {{value2}}</h3>
|
||||
<InputText v-model.number="value2" />
|
||||
<Slider v-model="value2" />
|
||||
<InputText v-model.number="value2" />
|
||||
<Slider v-model="value2" />
|
||||
|
||||
<h3>Step: {{value3}}</h3>
|
||||
<Slider v-model="value3" :step="20" />
|
||||
<Slider v-model="value3" :step="20" />
|
||||
|
||||
<h3>Range: {{value4}}</h3>
|
||||
<Slider v-model="value4" :range="true" />
|
||||
<Slider v-model="value4" :range="true" />
|
||||
|
||||
<h3>Vertical: {{value5}}</h3>
|
||||
<Slider v-model="value5" orientation="vertical" />
|
||||
<Slider v-model="value5" orientation="vertical" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@ import Spinner from 'primevue/spinner';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Two-way value binding is defined using standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<Spinner v-model="value" />
|
||||
<Spinner v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Min-Max</h3>
|
||||
<p>Boundaries are specified with <i>min</i> and <i>max</i> attributes.</p>
|
||||
<CodeHighlight>
|
||||
<Spinner v-model="value" :min="0" :max="100" />
|
||||
<Spinner v-model="value" :min="0" :max="100" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Step</h3>
|
||||
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
||||
<CodeHighlight>
|
||||
<Spinner v-model="value" :step="0.25" />
|
||||
<Spinner v-model="value" :step="0.25" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -112,25 +112,25 @@ import Spinner from 'primevue/spinner';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Spinner</h1>
|
||||
<p>Spinner is an input component to provide a numerical input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Spinner v-model="value1" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Spinner v-model="value1" />
|
||||
|
||||
<h3>Min/Max</h3>
|
||||
<Spinner v-model="value2" :min="0" :max="100" />
|
||||
<Spinner v-model="value2" :min="0" :max="100" />
|
||||
|
||||
<h3>Step</h3>
|
||||
<Spinner v-model="value3" :step="0.25" />
|
||||
<Spinner v-model="value3" :step="0.25" />
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<Spinner v-model="value4" :disabled="true" />
|
||||
<Spinner v-model="value4" :disabled="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Severity</h3>
|
||||
|
|
@ -64,12 +64,12 @@ export default {
|
|||
</ul>
|
||||
|
||||
<CodeHighlight>
|
||||
<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-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-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"></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-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-danger"></SplitButton>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -189,16 +189,16 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>SplitButton</h1>
|
||||
<p>SplitButton groups a set of commands in an overlay with a default command.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<TabView>
|
||||
<TabPanel header="Header I">
|
||||
<TabPanel header="Header I">
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II">
|
||||
<TabPanel header="Header II">
|
||||
Content II
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III">
|
||||
<TabPanel header="Header III">
|
||||
Content III
|
||||
</TabPanel>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<div>
|
||||
<Button icon="pi pi-chevron-left" @click="prev"/>
|
||||
<Button icon="pi pi-chevron-right" @click="next"/>
|
||||
<Button icon="pi pi-chevron-left" @click="prev"/>
|
||||
<Button icon="pi pi-chevron-right" @click="next"/>
|
||||
</div>
|
||||
|
||||
<TabView>
|
||||
<TabPanel header="Header I" :active="activeIndex === 0">
|
||||
<TabPanel header="Header I" :active="activeIndex === 0">
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II" :active="activeIndex === 1">
|
||||
<TabPanel header="Header II" :active="activeIndex === 1">
|
||||
Content II
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III" :active="activeIndex === 2">
|
||||
<TabPanel header="Header III" :active="activeIndex === 2">
|
||||
Content III
|
||||
</TabPanel>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<TabView>
|
||||
<TabPanel header="Header I">
|
||||
<TabPanel header="Header I">
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II">
|
||||
<TabPanel header="Header II">
|
||||
Content II
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III" :disabled="true">
|
||||
<TabPanel header="Header III" :disabled="true">
|
||||
Content III
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
@ -81,18 +81,18 @@ export default {
|
|||
<h3>Header Template</h3>
|
||||
<p>Header of a tab supports templating to place custom html content instead of strings as well.</p>
|
||||
<CodeHighlight>
|
||||
<TabView class="tabview-custom">
|
||||
<TabView class="tabview-custom">
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template slot="header">
|
||||
<span>Header II</span>
|
||||
<i class="pi pi-user"></i>
|
||||
<i class="pi pi-user"></i>
|
||||
</template>
|
||||
Content II
|
||||
</TabPanel>
|
||||
|
|
@ -202,27 +202,27 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>TabView</h1>
|
||||
<p>TabView is a container component to group content with tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<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,
|
||||
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.
|
||||
</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,
|
||||
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.
|
||||
</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
|
||||
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.
|
||||
|
|
@ -230,23 +230,23 @@ export default {
|
|||
</TabView>
|
||||
|
||||
<h3>Programmatic</h3>
|
||||
<div style="padding: .5em 0">
|
||||
<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"/>
|
||||
<div style="padding: .5em 0">
|
||||
<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"/>
|
||||
</div>
|
||||
|
||||
<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,
|
||||
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.
|
||||
</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,
|
||||
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.
|
||||
</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
|
||||
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.
|
||||
|
|
@ -255,29 +255,29 @@ export default {
|
|||
|
||||
<h3>Disabled</h3>
|
||||
<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,
|
||||
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.
|
||||
</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,
|
||||
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.
|
||||
</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
|
||||
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.
|
||||
</TabPanel>
|
||||
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
||||
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
||||
</TabView>
|
||||
|
||||
<h3>Custom Headers</h3>
|
||||
<TabView class="tabview-custom">
|
||||
<TabView class="tabview-custom">
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Godfather I</span>
|
||||
</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,
|
||||
|
|
@ -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.
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template slot="header">
|
||||
<span>Godfather II</span>
|
||||
<i class="pi pi-user"></i>
|
||||
<i class="pi pi-user"></i>
|
||||
</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,
|
||||
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.
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<i class="pi pi-search"></i>
|
||||
<template slot="header">
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Godfather III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
<i class="pi pi-cog"></i>
|
||||
</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
|
||||
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>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<Textarea v-model="value" rows="5" cols="30" />
|
||||
<Textarea v-model="value" rows="5" cols="30" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>AutoResize</h3>
|
||||
<p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
|
||||
<CodeHighlight>
|
||||
<Textarea v-model="value" :autoResize="true" rows="5" cols="30" />
|
||||
<Textarea v-model="value" :autoResize="true" rows="5" cols="30" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -99,22 +99,22 @@ import Textarea from 'primevue/textarea';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Textarea</h1>
|
||||
<p>Textarea is a multi-line text input element.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Textarea v-model="value1" rows="5" cols="30" />
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Textarea v-model="value1" rows="5" cols="30" />
|
||||
|
||||
<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>
|
||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@ this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order s
|
|||
<h3>Showing Messages</h3>
|
||||
<p>Show method accepts either a single message or an array of messages.</p>
|
||||
<CodeHighlight>
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
@ -191,55 +191,55 @@ this.$toast.removeAllGroups();
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Toast</h1>
|
||||
<p>Toast is used to display messages in an overlay.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation p-fluid">
|
||||
<div class="content-section implementation p-fluid">
|
||||
<h3>Severities</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Positions</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Top Left" @click="showTopLeft" />
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Top Left" @click="showTopLeft" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Options</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<Button @click="showSticky" label="Sticky" />
|
||||
<div class="p-col-12 p-md-6">
|
||||
<Button @click="showSticky" label="Sticky" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Remove All</h3>
|
||||
<Button @click="clear" label="Clear" />
|
||||
<Button @click="clear" label="Clear" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import ToggleButton from 'primevue/togglebutton';
|
|||
<h3>Getting Started</h3>
|
||||
<p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<ToggleButton v-model="checked" />
|
||||
<ToggleButton v-model="checked" />
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
|
||||
<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>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -180,21 +180,21 @@ export default {
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ToggleButton</h1>
|
||||
<p>ToggleButton is used to select a boolean value using a button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<h3>Customized</h3>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<CodeHighlight>
|
||||
<Toolbar>
|
||||
<template slot="left">
|
||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||
<template slot="left">
|
||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||
</template>
|
||||
|
||||
<template slot="right">
|
||||
<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-times" class="p-button-danger" />
|
||||
<template slot="right">
|
||||
<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-times" class="p-button-danger" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</CodeHighlight>
|
||||
|
|
@ -65,26 +65,26 @@ import Toolbar from 'primevue/toolbar';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Toolbar</h1>
|
||||
<p>Toolbar is a grouping component for buttons and other content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="content-section implementation">
|
||||
<Toolbar>
|
||||
<template slot="left">
|
||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||
<template slot="left">
|
||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||
</template>
|
||||
|
||||
<template slot="right">
|
||||
<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-times" class="p-button-danger" />
|
||||
<template slot="right">
|
||||
<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-times" class="p-button-danger" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
|||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<TriStateCheckbox v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -119,16 +119,16 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
|||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<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 class="content-section implementation">
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||
<div class="content-section implementation">
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue