Demo update on source codes
cagataycivici
parent
84fb736e1f
commit
dad730398f
|
|
@ -273,116 +273,102 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Default</h3>
|
||||||
<div>
|
<Accordion>
|
||||||
<div class="content-section introduction">
|
<AccordionTab header="Godfather I">
|
||||||
<div class="feature-intro">
|
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,
|
||||||
<h1>AccordionPanel</h1>
|
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
|
||||||
<p>AccordionPanel groups a collection of contents in tabs.</p>
|
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.
|
||||||
</div>
|
</AccordionTab>
|
||||||
</div>
|
<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">
|
||||||
|
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>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Multiple</h3>
|
||||||
<h3 class="first">Default</h3>
|
<Accordion :multiple="true">
|
||||||
<Accordion>
|
<AccordionTab header="Godfather I">
|
||||||
<AccordionTab header="Godfather I">
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
</AccordionTab>
|
||||||
</AccordionTab>
|
<AccordionTab header="Godfather II">
|
||||||
<AccordionTab header="Godfather II">
|
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
||||||
deepening The Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
</AccordionTab>
|
||||||
</AccordionTab>
|
<AccordionTab header="Godfather III">
|
||||||
<AccordionTab header="Godfather III">
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
</AccordionTab>
|
||||||
</AccordionTab>
|
<AccordionTab header="Godfather IV" :disabled="true">
|
||||||
</Accordion>
|
</AccordionTab>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Programmatic</h3>
|
||||||
<Accordion :multiple="true">
|
<div style="padding: .5em 0">
|
||||||
<AccordionTab header="Godfather I">
|
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
||||||
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,
|
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
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
|
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
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.
|
</div>
|
||||||
</AccordionTab>
|
|
||||||
<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">
|
|
||||||
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>
|
|
||||||
</Accordion>
|
|
||||||
|
|
||||||
<h3>Programmatic</h3>
|
<Accordion :multiple="true">
|
||||||
<div style="padding: .5em 0">
|
<AccordionTab header="Godfather I" :active="active1">
|
||||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
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,
|
||||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
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
|
||||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
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.
|
||||||
</div>
|
</AccordionTab>
|
||||||
|
<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">
|
||||||
|
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>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
<Accordion :multiple="true">
|
<h3>Custom Headers</h3>
|
||||||
<AccordionTab header="Godfather I" :active="active1">
|
<Accordion class="accordion-custom">
|
||||||
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,
|
<AccordionTab>
|
||||||
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
|
<template slot="header">
|
||||||
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.
|
<i class="pi pi-calendar"></i>
|
||||||
</AccordionTab>
|
<span>Godfather I</span>
|
||||||
<AccordionTab header="Godfather II" :active="active2">
|
</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,
|
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,
|
||||||
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
|
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
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather III" :active="active3">
|
<AccordionTab>
|
||||||
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
|
<template slot="header">
|
||||||
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.
|
<i class="pi pi-user"></i>
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
<span>Godfather II</span>
|
||||||
</AccordionTab>
|
</template>
|
||||||
</Accordion>
|
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
|
||||||
<h3>Custom Headers</h3>
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
<Accordion class="accordion-custom">
|
</AccordionTab>
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-search"></i>
|
||||||
<span>Godfather I</span>
|
<span>Godfather III</span>
|
||||||
</template>
|
<i class="pi pi-cog"></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,
|
</template>
|
||||||
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
|
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
|
||||||
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.
|
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.
|
||||||
</AccordionTab>
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
<AccordionTab>
|
</AccordionTab>
|
||||||
<template slot="header">
|
</Accordion>
|
||||||
<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,
|
|
||||||
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>
|
|
||||||
<template slot="header">
|
|
||||||
<i class="pi pi-search"></i>
|
|
||||||
<span>Godfather III</span>
|
|
||||||
<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.
|
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
|
||||||
</AccordionTab>
|
|
||||||
</Accordion>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -257,41 +257,28 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||||
<div class="content-section introduction">
|
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||||
<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>Dropdown and Templating</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
<template #item="slotProps">
|
||||||
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
<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>
|
||||||
|
|
||||||
<h3>Dropdown and Templating</h3>
|
<h3>Multiple</h3>
|
||||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
<span class="p-fluid">
|
||||||
<template #item="slotProps">
|
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
||||||
<div class="p-clearfix p-autocomplete-brand-item">
|
</span>
|
||||||
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
<ul>
|
||||||
<div>{{slotProps.item}}</div>
|
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
||||||
</div>
|
</ul>
|
||||||
</template>
|
|
||||||
</AutoComplete>
|
|
||||||
<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>
|
|
||||||
<ul>
|
|
||||||
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -129,49 +129,36 @@ import Button from 'primevue/button';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Button label="Click" />
|
||||||
<div class="content-section introduction">
|
<Button label="Click" icon="pi pi-check" />
|
||||||
<div class="feature-intro">
|
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||||
<h1>Button</h1>
|
<Button icon="pi pi-check" />
|
||||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
<Button label="Click" disabled="disabled" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Severities</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Button label="Primary" />
|
||||||
<Button label="Click" />
|
<Button label="Secondary" class="p-button-secondary" />
|
||||||
<Button label="Click" icon="pi pi-check" />
|
<Button label="Success" class="p-button-success" />
|
||||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
<Button label="Info" class="p-button-info" />
|
||||||
<Button icon="pi pi-check" />
|
<Button label="Warning" class="p-button-warning" />
|
||||||
<Button label="Click" disabled="disabled" />
|
<Button label="Danger" class="p-button-danger" />
|
||||||
|
|
||||||
<h3>Severities</h3>
|
<h3>Raised Buttons</h3>
|
||||||
<Button label="Primary" />
|
<Button label="Primary" class="p-button-raised" />
|
||||||
<Button label="Secondary" class="p-button-secondary" />
|
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-success" />
|
<Button label="Success" class="p-button-raised p-button-success" />
|
||||||
<Button label="Info" class="p-button-info" />
|
<Button label="Info" class="p-button-raised p-button-info" />
|
||||||
<Button label="Warning" class="p-button-warning" />
|
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-danger" />
|
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||||
|
|
||||||
<h3>Raised Buttons</h3>
|
<h3>Rounded Buttons</h3>
|
||||||
<Button label="Primary" class="p-button-raised" />
|
<Button label="Primary" class="p-button-rounded" />
|
||||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-raised p-button-success" />
|
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||||
<Button label="Info" class="p-button-raised p-button-info" />
|
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
<Button label="Danger" class="p-button-rounded 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" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -534,87 +534,76 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<div class="p-grid p-fluid">
|
||||||
<div class="content-section introduction">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="feature-intro">
|
<h3>Basic</h3>
|
||||||
<h1>Calendar</h1>
|
<Calendar v-model="date1" />
|
||||||
<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">
|
|
||||||
<h3>Basic</h3>
|
|
||||||
<Calendar v-model="date1" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Spanish</h3>
|
|
||||||
<Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Icon</h3>
|
|
||||||
<Calendar v-model="date3" :showIcon="true" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Min-Max</h3>
|
|
||||||
<Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Disable Days</h3>
|
|
||||||
<Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Navigators</h3>
|
|
||||||
<Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Multiple</h3>
|
|
||||||
<Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Range</h3>
|
|
||||||
<Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Button Bar</h3>
|
|
||||||
<Calendar v-model="date7" :showButtonBar="true" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Time / 24h</h3>
|
|
||||||
<Calendar v-model="date8" :showTime="true" :showSeconds="true" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Time Only / 12h</h3>
|
|
||||||
<Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
|
|
||||||
</div>
|
|
||||||
<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" />
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Multiple Months</h3>
|
|
||||||
<Calendar v-model="date11" :numberOfMonths="3" />
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
<span v-else>{{slotProps.date.day}}</span>
|
|
||||||
</template>
|
|
||||||
</Calendar>
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-4">
|
|
||||||
<h3>Touch UI</h3>
|
|
||||||
<Calendar v-model="date13" :touchUI="true" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Inline</h3>
|
|
||||||
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Spanish</h3>
|
||||||
|
<Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Icon</h3>
|
||||||
|
<Calendar v-model="date3" :showIcon="true" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Min-Max</h3>
|
||||||
|
<Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Disable Days</h3>
|
||||||
|
<Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Navigators</h3>
|
||||||
|
<Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Multiple</h3>
|
||||||
|
<Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Range</h3>
|
||||||
|
<Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Button Bar</h3>
|
||||||
|
<Calendar v-model="date7" :showButtonBar="true" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Time / 24h</h3>
|
||||||
|
<Calendar v-model="date8" :showTime="true" :showSeconds="true" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Time Only / 12h</h3>
|
||||||
|
<Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
|
||||||
|
</div>
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Multiple Months</h3>
|
||||||
|
<Calendar v-model="date11" :numberOfMonths="3" />
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<span v-else>{{slotProps.date.day}}</span>
|
||||||
|
</template>
|
||||||
|
</Calendar>
|
||||||
|
</div>
|
||||||
|
<div class="p-col-12 p-md-4">
|
||||||
|
<h3>Touch UI</h3>
|
||||||
|
<Calendar v-model="date13" :touchUI="true" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Inline</h3>
|
||||||
|
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -81,45 +81,32 @@ import Card from 'primevue/card';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Card style="width: 25em; margin-bottom: 2em">
|
||||||
<div>
|
<template slot="title">
|
||||||
<div class="content-section introduction">
|
Simple Card
|
||||||
<div class="feature-intro">
|
</template>
|
||||||
<h1>Card</h1>
|
<template slot="content">
|
||||||
<p>Card is a flexible container component.</p>
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||||
</div>
|
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
||||||
</div>
|
</template>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<Card style="width: 25em">
|
||||||
<Card style="width: 25em; margin-bottom: 2em">
|
<template slot="header">
|
||||||
<template slot="title">
|
<img alt="user header" src="demo/images/usercard.png">
|
||||||
Simple Card
|
</template>
|
||||||
</template>
|
<template slot="title">
|
||||||
<template slot="content">
|
Advanced Card
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
</template>
|
||||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
<template slot="content">
|
||||||
</template>
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||||
</Card>
|
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
||||||
|
</template>
|
||||||
<Card style="width: 25em">
|
<template slot="footer">
|
||||||
<template slot="header">
|
<Button icon="pi pi-check" label="Save" class="p-button-raised" />
|
||||||
<img alt="user header" src="demo/images/usercard.png">
|
<Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" />
|
||||||
</template>
|
</template>
|
||||||
<template slot="title">
|
</Card>
|
||||||
Advanced Card
|
|
||||||
</template>
|
|
||||||
<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>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
|
||||||
|
|
@ -4,30 +4,17 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3 class="vertical">Vertical</h3>
|
||||||
<div>
|
<Chart type="bar" :data="basicData" />
|
||||||
<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>Horizontal</h3>
|
||||||
<h3 class="vertical">Vertical</h3>
|
<Chart type="horizontalBar" :data="basicData" />
|
||||||
<Chart type="bar" :data="basicData" />
|
|
||||||
|
|
||||||
<h3>Horizontal</h3>
|
<h3>Multi Axis</h3>
|
||||||
<Chart type="horizontalBar" :data="basicData" />
|
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||||
|
|
||||||
<h3>Multi Axis</h3>
|
<h3>Stacked</h3>
|
||||||
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||||
|
|
||||||
<h3>Stacked</h3>
|
|
||||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="doughnut" :data="chartData" />
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,27 +4,14 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Chart type="line" :data="basicData" />
|
||||||
<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>Multi Axis</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||||
<Chart type="line" :data="basicData" />
|
|
||||||
|
|
||||||
<h3>Multi Axis</h3>
|
<h3>Line Styles</h3>
|
||||||
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
<Chart type="line" :data="lineStylesData" />
|
||||||
|
|
||||||
<h3>Line Styles</h3>
|
|
||||||
<Chart type="line" :data="lineStylesData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="pie" :data="chartData" />
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="polarArea" :data="chartData" />
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="radar" :data="chartData" />
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -145,52 +145,39 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||||
<div class="content-section introduction">
|
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||||
<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>Multiple</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<div class="p-grid">
|
||||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
<div class="p-col-12">
|
||||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12">
|
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
||||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
||||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
</div>
|
||||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -144,31 +144,18 @@ import Chips from 'primevue/chips';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Chips v-model="value1" />
|
||||||
<div class="content-section introduction p-fluid">
|
|
||||||
<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>Template</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Chips v-model="value2">
|
||||||
<Chips v-model="value1" />
|
<template #chip="slotProps">
|
||||||
|
<div>
|
||||||
<h3>Template</h3>
|
<span>{{slotProps.value}} - (active) </span>
|
||||||
<Chips v-model="value2">
|
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||||
<template #chip="slotProps">
|
</div>
|
||||||
<div>
|
</template>
|
||||||
<span>{{slotProps.value}} - (active) </span>
|
</Chips>
|
||||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Chips>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation dataview-demo">
|
<div class="content-section implementation dataview-demo">
|
||||||
<h3 class="first">Default</h3>
|
|
||||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="p-grid p-nogutter">
|
<div class="p-grid p-nogutter">
|
||||||
|
|
|
||||||
|
|
@ -415,63 +415,51 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
<div class="content-section introduction">
|
<template #header>
|
||||||
<div class="feature-intro">
|
<div class="p-grid p-nogutter">
|
||||||
<h1>DataView</h1>
|
<div class="p-col-6" style="text-align: left">
|
||||||
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
<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 v-model="layout" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
<template #list="slotProps" >
|
||||||
<div class="content-section implementation dataview-demo">
|
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||||
<h3 class="first">Default</h3>
|
<div class="p-grid">
|
||||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
<div class="p-col-12 p-md-3">
|
||||||
<template #header>
|
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||||
<div class="p-grid p-nogutter">
|
|
||||||
<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 v-model="layout" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="p-col-12 p-md-8 car-details">
|
||||||
<template #list="slotProps" >
|
|
||||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-8 car-details">
|
|
||||||
<div class="p-grid">
|
|
||||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
|
||||||
|
|
||||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||||
|
|
||||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||||
|
|
||||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
|
||||||
<Button icon="pi pi-search"></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||||
<template #grid="slotProps">
|
<Button icon="pi pi-search"></Button>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</DataView>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
<template #grid="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>
|
||||||
|
</DataView>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -73,36 +73,25 @@ import DeferredContent from 'primevue/deferredcontent';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<div style="height: 800px">
|
||||||
<div class="content-section introduction">
|
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>DeferredContent</h1>
|
|
||||||
<p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll..</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<div style="height: 800px">
|
|
||||||
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DeferredContent @load="onImageLoad">
|
|
||||||
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
|
|
||||||
</DeferredContent>
|
|
||||||
|
|
||||||
<div style="height: 500px">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DeferredContent @load="onDataLoad">
|
|
||||||
<DataTable :value="cars">
|
|
||||||
<Column field="vin" header="Vin"></Column>
|
|
||||||
<Column field="year" header="Year"></Column>
|
|
||||||
<Column field="brand" header="Brand"></Column>
|
|
||||||
<Column field="color" header="Color"></Column>
|
|
||||||
</DataTable>
|
|
||||||
</DeferredContent>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DeferredContent @load="onImageLoad">
|
||||||
|
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
|
||||||
|
</DeferredContent>
|
||||||
|
|
||||||
|
<div style="height: 500px">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DeferredContent @load="onDataLoad">
|
||||||
|
<DataTable :value="cars">
|
||||||
|
<Column field="vin" header="Vin"></Column>
|
||||||
|
<Column field="year" header="Year"></Column>
|
||||||
|
<Column field="brand" header="Brand"></Column>
|
||||||
|
<Column field="color" header="Color"></Column>
|
||||||
|
</DataTable>
|
||||||
|
</DeferredContent>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -203,30 +203,17 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||||
<div>
|
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
||||||
<div class="content-section introduction">
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
<div class="feature-intro">
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
<h1>Dialog</h1>
|
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,
|
||||||
<p>Dialog is a container to display content in an overlay window.</p>
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</div>
|
<template #footer>
|
||||||
</div>
|
<Button label="Yes" icon="pi pi-check" @click="close" />
|
||||||
|
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
||||||
<div class="content-section implementation">
|
</template>
|
||||||
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
</Dialog>
|
||||||
<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 #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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -245,34 +245,21 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||||
<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>Editable</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
|
||||||
|
|
||||||
<h3>Editable</h3>
|
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
||||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||||
|
<template #option="slotProps">
|
||||||
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
<div class="p-clearfix p-dropdown-car-option">
|
||||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||||
<template #option="slotProps">
|
<span>{{slotProps.option.brand}}</span>
|
||||||
<div class="p-clearfix p-dropdown-car-option">
|
</div>
|
||||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
</template>
|
||||||
<span>{{slotProps.option.brand}}</span>
|
</Dropdown>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -144,32 +144,19 @@ npm install quill --save
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Default</h3>
|
||||||
<div>
|
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||||
<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>Customized</h3>
|
||||||
<h3 class="first">Default</h3>
|
<Editor v-model="value2" editorStyle="height: 320px">
|
||||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
<template slot="toolbar">
|
||||||
|
<span class="ql-formats">
|
||||||
<h3>Customized</h3>
|
<button class="ql-bold"></button>
|
||||||
<Editor v-model="value2" editorStyle="height: 320px">
|
<button class="ql-italic"></button>
|
||||||
<template slot="toolbar">
|
<button class="ql-underline"></button>
|
||||||
<span class="ql-formats">
|
</span>
|
||||||
<button class="ql-bold"></button>
|
</template>
|
||||||
<button class="ql-italic"></button>
|
</Editor>
|
||||||
<button class="ql-underline"></button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</Editor>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -154,34 +154,21 @@ import Fieldset from 'primevue/fieldset';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Regular</h3>
|
||||||
<div>
|
<Fieldset legend="Godfather I">
|
||||||
<div class="content-section introduction">
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
<div class="feature-intro">
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
<h1>Fieldset</h1>
|
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,
|
||||||
<p>Fieldset is a grouping component with the optional content toggle feature.</p>
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</div>
|
</Fieldset>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Toggleable</h3>
|
||||||
<h3 class="first">Regular</h3>
|
<Fieldset legend="Godfather I" :toggleable="true">
|
||||||
<Fieldset legend="Godfather I">
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
</Fieldset>
|
||||||
</Fieldset>
|
|
||||||
|
|
||||||
<h3>Toggleable</h3>
|
|
||||||
<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,
|
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
|
||||||
</Fieldset>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -251,27 +251,14 @@ import FileUpload from 'primevue/fileupload';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Advanced</h3>
|
||||||
<div>
|
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
||||||
<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">
|
<h3>Basic</h3>
|
||||||
<h3>Advanced</h3>
|
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
|
||||||
|
|
||||||
<h3>Basic</h3>
|
<h3>Basic with Auto</h3>
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||||
|
|
||||||
<h3>Basic with Auto</h3>
|
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -574,429 +574,415 @@ import 'primeflex/primeflex.css';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<div class="p-grid">
|
||||||
<div class="content-section introduction">
|
<div class="p-col">
|
||||||
<div class="feature-intro">
|
<div class="box">1</div>
|
||||||
<h1>FlexGrid</h1>
|
</div>
|
||||||
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
<div class="p-col">
|
||||||
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 class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="p-col">
|
||||||
|
<div class="box">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation flexgrid-demo">
|
<h3>Dynamic</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
||||||
<div class="p-grid">
|
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">1</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">2</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Dynamic</h3>
|
<div style="margin-top: .5em">
|
||||||
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||||
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
<div v-for="col of columns" :key="col" class="p-col">
|
||||||
|
<div class="box">{{col}}</div>
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: .5em">
|
<h3>Reverse Direction</h3>
|
||||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
<div class="p-grid p-dir-rev">
|
||||||
<div v-for="col of columns" :key="col" class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">{{col}}</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
<div class="p-col">
|
||||||
</div>
|
<div class="box">2</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Direction</h3>
|
<h3>Column Direction</h3>
|
||||||
<div class="p-grid p-dir-rev">
|
<div class="p-grid p-dir-col">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Column Direction</h3>
|
<h3>Reverse Column Direction</h3>
|
||||||
<div class="p-grid p-dir-col">
|
<div class="p-grid p-dir-col-rev">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Column Direction</h3>
|
<h3>12 Column Grid</h3>
|
||||||
<div class="p-grid p-dir-col-rev">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col-4">
|
||||||
<div class="box">1</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-col">
|
||||||
|
<div class="box">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>12 Column Grid</h3>
|
<div class="p-grid">
|
||||||
<div class="p-grid">
|
<div class="p-col-2">
|
||||||
<div class="p-col-4">
|
<div class="box">2</div>
|
||||||
<div class="box">4</div>
|
</div>
|
||||||
</div>
|
<div class="p-col-6">
|
||||||
<div class="p-col">
|
<div class="box">6</div>
|
||||||
<div class="box">1</div>
|
</div>
|
||||||
</div>
|
<div class="p-col-4">
|
||||||
<div class="p-col">
|
<div class="box">4</div>
|
||||||
<div class="box">1</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">1</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">1</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">1</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">1</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">1</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col">
|
|
||||||
<div class="box">1</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-2">
|
<div class="p-col-8">
|
||||||
<div class="box">2</div>
|
<div class="box">8</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-2">
|
||||||
<div class="box">6</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-2">
|
||||||
<div class="box">4</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<h3>MultiLine</h3>
|
||||||
<div class="p-col-8">
|
<div class="p-grid">
|
||||||
<div class="box">8</div>
|
<div class="p-col-6">
|
||||||
</div>
|
<div class="box">6</div>
|
||||||
<div class="p-col-2">
|
</div>
|
||||||
<div class="box">2</div>
|
<div class="p-col-6">
|
||||||
</div>
|
<div class="box">6</div>
|
||||||
<div class="p-col-2">
|
</div>
|
||||||
<div class="box">2</div>
|
<div class="p-col-6">
|
||||||
</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>MultiLine</h3>
|
<h3>Fixed Width Column</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-fixed" style="width:100px">
|
||||||
<div class="box">6</div>
|
<div class="box">100px</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col">
|
||||||
<div class="box">6</div>
|
<div class="box">auto</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
</div>
|
||||||
<div class="box">6</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col-6">
|
|
||||||
<div class="box">6</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Fixed Width Column</h3>
|
<h3>Responsive</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-fixed" style="width:100px">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">100px</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">auto</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</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>
|
||||||
|
<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>Responsive</h3>
|
<h3>Horizontal Alignment - Start</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid p-justify-start">
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-2">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-1">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-4">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
</div>
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Start</h3>
|
<h3>Horizontal Alignment - End</h3>
|
||||||
<div class="p-grid p-justify-start">
|
<div class="p-grid p-justify-end">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - End</h3>
|
<h3>Horizontal Alignment - Center</h3>
|
||||||
<div class="p-grid p-justify-end">
|
<div class="p-grid p-justify-center">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Center</h3>
|
<h3>Horizontal Alignment - Between</h3>
|
||||||
<div class="p-grid p-justify-center">
|
<div class="p-grid p-justify-between">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Between</h3>
|
<h3>Horizontal Alignment - Around</h3>
|
||||||
<div class="p-grid p-justify-between">
|
<div class="p-grid p-justify-around">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Around</h3>
|
<h3>Horizontal Alignment - Even</h3>
|
||||||
<div class="p-grid p-justify-around">
|
<div class="p-grid p-justify-even">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Even</h3>
|
<h3>Vertical Alignment - Start</h3>
|
||||||
<div class="p-grid p-justify-even">
|
<div class="p-grid p-align-start vertical-container">
|
||||||
<div class="p-col-2">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-1">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Start</h3>
|
<h3>Vertical Alignment - End</h3>
|
||||||
<div class="p-grid p-align-start vertical-container">
|
<div class="p-grid p-align-end vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - End</h3>
|
<h3>Vertical Alignment - Center</h3>
|
||||||
<div class="p-grid p-align-end vertical-container">
|
<div class="p-grid p-align-center vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Center</h3>
|
<h3>Vertical Alignment - Stretch</h3>
|
||||||
<div class="p-grid p-align-center vertical-container">
|
<div class="p-grid p-align-stretch vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Stretch</h3>
|
<h3>Vertical Alignment - Per Column</h3>
|
||||||
<div class="p-grid p-align-stretch vertical-container">
|
<div class="p-grid vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col p-col-align-start">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col p-col-align-center">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col p-col-align-end">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Per Column</h3>
|
<h3>Offset</h3>
|
||||||
<div class="p-grid vertical-container">
|
<div class="p-grid">
|
||||||
<div class="p-col p-col-align-start">
|
<div class="p-col-6 p-offset-3">
|
||||||
<div class="box">4</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col p-col-align-center">
|
</div>
|
||||||
<div class="box">4</div>
|
|
||||||
</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-grid">
|
<div class="p-col-4">
|
||||||
<div class="p-col-6 p-offset-3">
|
<div class="box">4</div>
|
||||||
<div class="box">6</div>
|
</div>
|
||||||
</div>
|
<div class="p-col-4 p-offset-4">
|
||||||
</div>
|
<div class="box">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<h3>Nested</h3>
|
||||||
<div class="p-col-4">
|
<div class="p-grid nested-grid">
|
||||||
<div class="box">4</div>
|
<div class="p-col-8">
|
||||||
</div>
|
<div class="p-grid">
|
||||||
<div class="p-col-4 p-offset-4">
|
<div class="p-col-6">
|
||||||
<div class="box">4</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="p-col-6">
|
||||||
|
<div class="box">6</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Nested</h3>
|
<h3>Panels</h3>
|
||||||
<div class="p-grid nested-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col">
|
||||||
<div class="p-grid">
|
<Panel header="Godfather">
|
||||||
<div class="p-col-6">
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
<div class="box">6</div>
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
</div>
|
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,
|
||||||
<div class="p-col-6">
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
<div class="box">6</div>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col">
|
||||||
<div class="box">12</div>
|
<Panel header="Godfather">
|
||||||
</div>
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
</div>
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
</div>
|
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,
|
||||||
<div class="p-col-4">
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
<div class="box box-stretched">4</div>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
<h3>Panels</h3>
|
<h3>Sample Layout</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid sample-layout">
|
||||||
<div class="p-col">
|
<div class="p-col-12 p-md-2">
|
||||||
<Panel header="Godfather">
|
Menu
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
</div>
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
<div class="p-col-12 p-md-10 p-col-nogutter">
|
||||||
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,
|
<div class="p-col-12 p-col-nogutter">
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
Top Bar
|
||||||
</Panel>
|
</div>
|
||||||
</div>
|
<div class="p-col-12">
|
||||||
<div class="p-col">
|
<div class="p-grid">
|
||||||
<Panel header="Godfather">
|
<div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
|
||||||
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,
|
<div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
|
||||||
</Panel>
|
at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
|
||||||
</div>
|
nulla nec, rutrum sapien.</div>
|
||||||
<div class="p-col">
|
<div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
|
||||||
<Panel header="Godfather">
|
sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
condimentum eget hendrerit sit amet.</div>
|
||||||
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>
|
|
||||||
|
|
||||||
<h3>Sample Layout</h3>
|
<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-grid sample-layout">
|
<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-12 p-md-2">
|
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||||
Menu
|
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||||
</div>
|
|
||||||
<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
|
|
||||||
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
|
|
||||||
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
|
|
||||||
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-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</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">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
|
||||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
||||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
</div>
|
||||||
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
</div>
|
||||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
<div class="p-col-12">
|
||||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
Footer
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="p-col-12">
|
|
||||||
Footer
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -199,20 +199,7 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<FullCalendar :events="events" :options="options" />
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<FullCalendar :events="events" :options="options" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -171,54 +171,41 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Input</h3>
|
||||||
<div>
|
<Inplace :closable="true">
|
||||||
<div class="content-section introduction">
|
<template #display>
|
||||||
<div class="feature-intro">
|
{{text || 'Click to Edit'}}
|
||||||
<h1>Inplace</h1>
|
</template>
|
||||||
<p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
|
<template #content>
|
||||||
</div>
|
<InputText v-model="text" autoFocus />
|
||||||
</div>
|
</template>
|
||||||
|
</Inplace>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Image</h3>
|
||||||
<h3>Input</h3>
|
<Inplace>
|
||||||
<Inplace :closable="true">
|
<template #display>
|
||||||
<template #display>
|
<span className="pi pi-search" style="vertical-align: middle"></span>
|
||||||
{{text || 'Click to Edit'}}
|
<span style="margin-left:.5em; vertical-align: middle">View Picture</span>
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<InputText v-model="text" autoFocus />
|
<img src="demo/images/nature/nature1.jpg" />
|
||||||
</template>
|
</template>
|
||||||
</Inplace>
|
</Inplace>
|
||||||
|
|
||||||
<h3>Image</h3>
|
<h3>Lazy Data</h3>
|
||||||
<Inplace>
|
<Inplace @open="loadData">
|
||||||
<template #display>
|
<template #display>
|
||||||
<span className="pi pi-search" style="vertical-align: middle"></span>
|
View Data
|
||||||
<span style="margin-left:.5em; vertical-align: middle">View Picture</span>
|
</template>
|
||||||
</template>
|
<template #content>
|
||||||
<template #content>
|
<DataTable :value="cars">
|
||||||
<img src="demo/images/nature/nature1.jpg" />
|
<Column field="vin" header="Vin"></Column>
|
||||||
</template>
|
<Column field="year" header="Year"></Column>
|
||||||
</Inplace>
|
<Column field="brand" header="Brand"></Column>
|
||||||
|
<Column field="color" header="Color"></Column>
|
||||||
<h3>Lazy Data</h3>
|
</DataTable>
|
||||||
<Inplace @open="loadData">
|
</template>
|
||||||
<template #display>
|
</Inplace>
|
||||||
View Data
|
|
||||||
</template>
|
|
||||||
<template #content>
|
|
||||||
<DataTable :value="cars">
|
|
||||||
<Column field="vin" header="Vin"></Column>
|
|
||||||
<Column field="year" header="Year"></Column>
|
|
||||||
<Column field="brand" header="Brand"></Column>
|
|
||||||
<Column field="color" header="Color"></Column>
|
|
||||||
</DataTable>
|
|
||||||
</template>
|
|
||||||
</Inplace>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,120 +7,107 @@
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Addons</h3>
|
||||||
<div>
|
<div class="p-grid p-fluid">
|
||||||
<div class="content-section introduction">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="feature-intro">
|
<div class="p-inputgroup">
|
||||||
<h1>InputGroup</h1>
|
<span class="p-inputgroup-addon">
|
||||||
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
|
<i class="pi pi-user"></i>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
<InputText placeholder="Username" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3 class="first">Addons</h3>
|
<div class="p-inputgroup">
|
||||||
<div class="p-grid p-fluid">
|
<span class="p-inputgroup-addon">$</span>
|
||||||
<div class="p-col-12 p-md-4">
|
<InputText placeholder="Price" />
|
||||||
<div class="p-inputgroup">
|
<span class="p-inputgroup-addon">.00</span>
|
||||||
<span class="p-inputgroup-addon">
|
</div>
|
||||||
<i class="pi pi-user"></i>
|
</div>
|
||||||
</span>
|
|
||||||
<InputText placeholder="Username" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">$</span>
|
<span class="p-inputgroup-addon">W</span>
|
||||||
<InputText placeholder="Price" />
|
<InputText placeholder="Website" />
|
||||||
<span class="p-inputgroup-addon">.00</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<h3>Multiple Addons</h3>
|
||||||
<div class="p-inputgroup">
|
<div class="p-grid">
|
||||||
<span class="p-inputgroup-addon">W</span>
|
<div class="p-col-12">
|
||||||
<InputText placeholder="Website" />
|
<div class="p-inputgroup">
|
||||||
</div>
|
<span class="p-inputgroup-addon">
|
||||||
</div>
|
<i class="pi pi-clock"></i>
|
||||||
</div>
|
</span>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Multiple Addons</h3>
|
<h3>Button Addons</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid p-fluid">
|
||||||
<div class="p-col-12">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<Button label="Search"/>
|
||||||
<i class="pi pi-clock"></i>
|
<InputText placeholder="Keyword"/>
|
||||||
</span>
|
</div>
|
||||||
<span class="p-inputgroup-addon">
|
</div>
|
||||||
<i class="pi pi-star"></i>
|
|
||||||
</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-col-12 p-md-4">
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-inputgroup">
|
||||||
<div class="p-col-12 p-md-4">
|
<InputText placeholder="Keyword"/>
|
||||||
<div class="p-inputgroup">
|
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||||
<Button label="Search"/>
|
</div>
|
||||||
<InputText placeholder="Keyword"/>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<InputText placeholder="Keyword"/>
|
<Button icon="pi pi-check" class="p-button-success"/>
|
||||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
<InputText placeholder="Vote"/>
|
||||||
</div>
|
<Button icon="pi pi-times" class="p-button-danger"/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<h3>Checkbox and RadioButton</h3>
|
||||||
<div class="p-inputgroup">
|
<div class="p-grid p-fluid">
|
||||||
<Button icon="pi pi-check" class="p-button-success"/>
|
<div class="p-col-12 p-md-4">
|
||||||
<InputText placeholder="Vote"/>
|
<div class="p-inputgroup">
|
||||||
<Button icon="pi pi-times" class="p-button-danger"/>
|
<span class="p-inputgroup-addon">
|
||||||
</div>
|
<Checkbox v-model="checked1" :binary="true" />
|
||||||
</div>
|
</span>
|
||||||
</div>
|
<InputText placeholder="Username"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Checkbox and RadioButton</h3>
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-inputgroup">
|
||||||
<div class="p-col-12 p-md-4">
|
<InputText placeholder="Price"/>
|
||||||
<div class="p-inputgroup">
|
<span class="p-inputgroup-addon">
|
||||||
<span class="p-inputgroup-addon">
|
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
||||||
<Checkbox v-model="checked1" :binary="true" />
|
</span>
|
||||||
</span>
|
</div>
|
||||||
<InputText placeholder="Username"/>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<InputText placeholder="Price"/>
|
<span class="p-inputgroup-addon">
|
||||||
<span class="p-inputgroup-addon">
|
<Checkbox v-model="checked2" :binary="true" />
|
||||||
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
</span>
|
||||||
</span>
|
<InputText placeholder="Website"/>
|
||||||
</div>
|
<span class="p-inputgroup-addon">
|
||||||
</div>
|
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
|
||||||
|
</span>
|
||||||
<div class="p-col-12 p-md-4">
|
</div>
|
||||||
<div class="p-inputgroup">
|
</div>
|
||||||
<span class="p-inputgroup-addon">
|
</div>
|
||||||
<Checkbox v-model="checked2" :binary="true" />
|
|
||||||
</span>
|
|
||||||
<InputText placeholder="Website"/>
|
|
||||||
<span class="p-inputgroup-addon">
|
|
||||||
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -153,26 +153,13 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<InputSwitch v-model="checked1" />
|
||||||
<div class="content-section introduction">
|
<p style="font-weight: bold">{{checked1}}</p>
|
||||||
<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>Preselection</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<InputSwitch v-model="checked2" />
|
||||||
<InputSwitch v-model="checked1" />
|
<p style="font-weight: bold">{{checked2}}</p>
|
||||||
<p style="font-weight: bold">{{checked1}}</p>
|
|
||||||
|
|
||||||
<h3>Preselection</h3>
|
|
||||||
<InputSwitch v-model="checked2" />
|
|
||||||
<p style="font-weight: bold">{{checked2}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -54,31 +54,18 @@ import InputText from 'primevue/inputtext';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<InputText type="text" v-model="value1" />
|
||||||
<div class="content-section introduction">
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||||
<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>Floating Label</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<span class="p-float-label">
|
||||||
<InputText type="text" v-model="value1" />
|
<InputText id="username" type="text" v-model="value2" />
|
||||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
<label for="username">Username</label>
|
||||||
|
</span>
|
||||||
|
|
||||||
<h3>Floating Label</h3>
|
<h3>Disabled</h3>
|
||||||
<span class="p-float-label">
|
<InputText type="text" v-model="value3" disabled />
|
||||||
<InputText id="username" type="text" v-model="value2" />
|
|
||||||
<label for="username">Username</label>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
|
||||||
<InputText type="text" v-model="value3" disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -212,31 +212,18 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Single</h3>
|
||||||
<div>
|
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
<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>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||||
<h3 class="first">Single</h3>
|
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
<template #option="slotProps">
|
||||||
|
<div class="p-clearfix">
|
||||||
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||||
<template #option="slotProps">
|
</div>
|
||||||
<div class="p-clearfix">
|
</template>
|
||||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
</Listbox>
|
||||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Listbox>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -203,23 +203,12 @@ let items: [
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<h3>Inline</h3>
|
||||||
<div class="content-section introduction">
|
<Menu :model="items" />
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Menu</h1>
|
|
||||||
<p>Menu is a navigation / command component that supports dynamic and static positioning..</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Overlay</h3>
|
||||||
<h3 class="first">Inline</h3>
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
<Menu :model="items" />
|
<Menu ref="menu" :model="items" :popup="true" />
|
||||||
|
|
||||||
<h3>Overlay</h3>
|
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
|
||||||
<Menu ref="menu" :model="items" :popup="true" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -231,47 +231,34 @@ import Message from 'primevue/message';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Severities</h3>
|
||||||
<div>
|
<Message severity="success">Order Submitted</Message>
|
||||||
<div class="content-section introduction">
|
<Message severity="info">PrimeVue Rocks</Message>
|
||||||
<div class="feature-intro">
|
<Message severity="warn">There are unsaved changes</Message>
|
||||||
<h1>Message</h1>
|
<Message severity="error">Validation Failed</Message>
|
||||||
<p>Messages is used to display inline messages with various severities.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Dynamic</h3>
|
||||||
<h3 class="first">Severities</h3>
|
<Button label="Show" @click="addMessages()" />
|
||||||
<Message severity="success">Order Submitted</Message>
|
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||||
<Message severity="info">PrimeVue Rocks</Message>
|
|
||||||
<Message severity="warn">There are unsaved changes</Message>
|
|
||||||
<Message severity="error">Validation Failed</Message>
|
|
||||||
|
|
||||||
<h3>Dynamic</h3>
|
<transition-group name="p-messages" tag="div">
|
||||||
<Button label="Show" @click="addMessages()" />
|
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||||
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
</transition-group>
|
||||||
|
|
||||||
<transition-group name="p-messages" tag="div">
|
<h3>Auto Dismiss</h3>
|
||||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
|
||||||
</transition-group>
|
|
||||||
|
|
||||||
<h3>Auto Dismiss</h3>
|
<h3>Validation Message</h3>
|
||||||
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
|
<div class="p-grid">
|
||||||
|
<div class="p-col-12">
|
||||||
<h3>Validation Message</h3>
|
<InputText placeholder="Username" class="p-error" />
|
||||||
<div class="p-grid">
|
<ValidationMessage>Field is required</ValidationMessage>
|
||||||
<div class="p-col-12">
|
</div>
|
||||||
<InputText placeholder="Username" class="p-error" />
|
<div class="p-col-12">
|
||||||
<ValidationMessage>Field is required</ValidationMessage>
|
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||||
</div>
|
<ValidationMessage />
|
||||||
<div class="p-col-12">
|
</div>
|
||||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
</div>
|
||||||
<ValidationMessage />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -235,40 +235,27 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||||
<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>Advanced with Templating and Filtering</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
<template #value="slotProps">
|
||||||
|
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||||
<h3>Advanced with Templating and Filtering</h3>
|
<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">
|
<span>{{option.brand}}</span>
|
||||||
<template #value="slotProps">
|
</div>
|
||||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
Select Brands
|
||||||
<span>{{option.brand}}</span>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
<template #option="slotProps">
|
||||||
Select Brands
|
<div class="p-multiselect-car-option">
|
||||||
</div>
|
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||||
</template>
|
<span>{{slotProps.option.brand}}</span>
|
||||||
<template #option="slotProps">
|
</div>
|
||||||
<div class="p-multiselect-car-option">
|
</template>
|
||||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
</MultiSelect>
|
||||||
<span>{{slotProps.option.brand}}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</MultiSelect>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -164,28 +164,17 @@ import OrderList from 'primevue/orderlist';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
|
||||||
<div class="content-section introduction">
|
<template #header>
|
||||||
<div class="feature-intro">
|
List of Cars
|
||||||
<h1>OrderList</h1>
|
</template>
|
||||||
<p>OrderList is used to managed the order of a collection.</p>
|
<template #item="slotProps">
|
||||||
|
<div class="p-caritem">
|
||||||
|
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||||
|
<div>{{slotProps.item.brand} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
</OrderList>
|
||||||
<div class="content-section implementation">
|
|
||||||
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
|
|
||||||
<template #header>
|
|
||||||
List of Cars
|
|
||||||
</template>
|
|
||||||
<template #item="slotProps">
|
|
||||||
<div class="p-caritem">
|
|
||||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
|
||||||
<div>{{slotProps.item.brand} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</OrderList>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -485,38 +485,27 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<h3>Advanced</h3>
|
||||||
<div class="content-section introduction">
|
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
|
||||||
<div class="feature-intro">
|
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
||||||
<h1>OrganizationChart</h1>
|
<template #person="slotProps">
|
||||||
<p>OrganizationChart visualizes hierarchical organization data.</p>
|
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
|
||||||
|
<div class="node-content">
|
||||||
|
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
|
||||||
|
<div>{{slotProps.node.data.name}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
<template #default="slotProps">
|
||||||
|
<span>{{slotProps.node.data.label}}</span>
|
||||||
|
</template>
|
||||||
|
</OrganizationChart>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Basic</h3>
|
||||||
<h3>Advanced</h3>
|
<OrganizationChart :value="data2">
|
||||||
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
|
<template #default="slotProps">
|
||||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
<span>{{slotProps.node.data.label}}</span>
|
||||||
<template #person="slotProps">
|
</template>
|
||||||
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
|
</OrganizationChart>
|
||||||
<div class="node-content">
|
|
||||||
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
|
|
||||||
<div>{{slotProps.node.data.name}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #default="slotProps">
|
|
||||||
<span>{{slotProps.node.data.label}}</span>
|
|
||||||
</template>
|
|
||||||
</OrganizationChart>
|
|
||||||
|
|
||||||
<h3>Basic</h3>
|
|
||||||
<OrganizationChart :value="data2">
|
|
||||||
<template #default="slotProps">
|
|
||||||
<span>{{slotProps.node.data.label}}</span>
|
|
||||||
</template>
|
|
||||||
</OrganizationChart>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -146,24 +146,11 @@ toggle(event) {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
<div>
|
|
||||||
<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">
|
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||||
|
</OverlayPanel>
|
||||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
|
||||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
|
||||||
</OverlayPanel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -235,38 +235,23 @@ onPage(event) {
|
||||||
<span>View on GitHub</span>
|
<span>View on GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||||
<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>Custom</h3>
|
||||||
<h3>Basic</h3>
|
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
|
||||||
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
||||||
|
<template #left>
|
||||||
|
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<Button type="button" icon="pi pi-search" />
|
||||||
|
</template>
|
||||||
|
</Paginator>
|
||||||
|
|
||||||
<h3>Custom</h3>
|
<div class="image-gallery">
|
||||||
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
|
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
||||||
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
</div>
|
||||||
<template #left>
|
|
||||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
|
||||||
</template>
|
|
||||||
<template #right>
|
|
||||||
<Button type="button" icon="pi pi-search" />
|
|
||||||
</template>
|
|
||||||
</Paginator>
|
|
||||||
|
|
||||||
<div class="image-gallery">
|
|
||||||
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PaginatorDoc />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
|
|
|
||||||
|
|
@ -158,34 +158,21 @@ import Panel from 'primevue/panel';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Regular</h3>
|
||||||
<div>
|
<Panel header="Godfather I">
|
||||||
<div class="content-section introduction">
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
<div class="feature-intro">
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
<h1>Panel</h1>
|
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,
|
||||||
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</div>
|
</Panel>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Toggleable</h3>
|
||||||
<h3 class="first">Regular</h3>
|
<Panel header="Godfather I" :toggleable="true">
|
||||||
<Panel header="Godfather I">
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
</Panel>
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<h3>Toggleable</h3>
|
|
||||||
<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,
|
|
||||||
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>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
|
||||||
|
|
@ -96,20 +96,7 @@ import Password from 'primevue/password';
|
||||||
<span>View on GitHub</span>
|
<span>View on GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template>
|
<Password v-model="value" />
|
||||||
<div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
|
|
|
||||||
|
|
@ -220,33 +220,20 @@ import PickList from 'primevue/picklist';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
|
||||||
<div class="content-section introduction">
|
<template #sourceHeader>
|
||||||
<div class="feature-intro">
|
Available
|
||||||
<h1>PickList</h1>
|
</template>
|
||||||
<p>PickList is used to reorder items between different lists.</p>
|
<template #targetHeader>
|
||||||
|
Selected
|
||||||
|
</template>
|
||||||
|
<template #item="slotProps">
|
||||||
|
<div class="p-caritem">
|
||||||
|
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||||
|
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
</PickList>
|
||||||
<div class="content-section implementation">
|
|
||||||
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
|
|
||||||
<template #sourceHeader>
|
|
||||||
Available
|
|
||||||
</template>
|
|
||||||
<template #targetHeader>
|
|
||||||
Selected
|
|
||||||
</template>
|
|
||||||
<template #item="slotProps">
|
|
||||||
<div class="p-caritem">
|
|
||||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
|
||||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</PickList>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PickListDoc />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -104,27 +104,14 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Dynamic</h3>
|
||||||
<div>
|
<ProgressBar :value="value1" />
|
||||||
<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>Static</h3>
|
||||||
<h3 class="first">Dynamic</h3>
|
<ProgressBar :value="value2" :showValue="false" />
|
||||||
<ProgressBar :value="value1" />
|
|
||||||
|
|
||||||
<h3>Static</h3>
|
<h3>Indeterminate</h3>
|
||||||
<ProgressBar :value="value2" :showValue="false" />
|
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||||
|
|
||||||
<h3>Indeterminate</h3>
|
|
||||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -108,24 +108,11 @@ import ProgressSpinner from 'primevue/progressspinner';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<h3>Basic</h3>
|
||||||
<div class="content-section introduction">
|
<ProgressSpinner />
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>ProgressSpinner</h1>
|
|
||||||
<p>ProgressSpinner is a process status indicator.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Custom</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||||
<ProgressSpinner />
|
|
||||||
|
|
||||||
<h3>Custom</h3>
|
|
||||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ProgressSpinnerDoc/>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
|
||||||
|
|
@ -137,48 +137,35 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<div class="p-grid">
|
||||||
<div class="content-section introduction">
|
<div class="p-col-12">
|
||||||
<div class="feature-intro">
|
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||||
<h1>RadioButton</h1>
|
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||||
<p>RadioButton is an extension to standard radio button element with theming.</p>
|
</div>
|
||||||
</div>
|
<div class="p-col-12">
|
||||||
</div>
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<div class="p-grid">
|
||||||
<div class="p-grid">
|
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
||||||
<div class="p-col-12">
|
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
||||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
||||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -139,30 +139,17 @@ import Rating from 'primevue/rating';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic {{val1}}</h3>
|
||||||
<div>
|
<Rating v-model="val1" />
|
||||||
<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>No Cancel {{val2}}</h3>
|
||||||
<h3 class="first">Basic {{val1}}</h3>
|
<Rating v-model="val2" :cancel="false" />
|
||||||
<Rating v-model="val1" />
|
|
||||||
|
|
||||||
<h3>No Cancel {{val2}}</h3>
|
<h3>ReadOnly</h3>
|
||||||
<Rating v-model="val2" :cancel="false" />
|
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
||||||
|
|
||||||
<h3>ReadOnly</h3>
|
<h3>Disabled</h3>
|
||||||
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
<Rating :value="8" :disabled="true" :stars="10" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
|
||||||
<Rating :value="8" :disabled="true" :stars="10" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -154,37 +154,24 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Single</h3>
|
||||||
<div>
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
<div class="content-section introduction">
|
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||||
<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>Multiple</h3>
|
||||||
<h3 class="first">Single</h3>
|
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
||||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
||||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Custom Content</h3>
|
||||||
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||||
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
<template #option="slotProps">
|
||||||
|
<div style="text-align: center; padding: 1em; width: 125px">
|
||||||
<h3>Custom Content</h3>
|
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||||
<template #option="slotProps">
|
</div>
|
||||||
<div style="text-align: center; padding: 1em; width: 125px">
|
</template>
|
||||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
</SelectButton>
|
||||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</SelectButton>
|
|
||||||
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -198,54 +198,41 @@ import Sidebar from 'primevue/sidebar';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||||
<div>
|
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
||||||
<div class="content-section introduction">
|
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<div class="feature-intro">
|
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
||||||
<h1>Sidebar</h1>
|
</Sidebar>
|
||||||
<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="visibleRight" :baseZIndex="1000" position="right">
|
||||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
||||||
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
||||||
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
</Sidebar>
|
||||||
</Sidebar>
|
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
||||||
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
||||||
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||||
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
||||||
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
||||||
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
<h1 style="fontWeight:normal">Full Screen</h1>
|
||||||
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
|
||||||
<h1 style="fontWeight:normal">Full Screen</h1>
|
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
|
||||||
</Sidebar>
|
<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>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -173,34 +173,21 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic: {{value1}}</h3>
|
||||||
<div>
|
<Slider v-model="value1" />
|
||||||
<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>Input: {{value2}}</h3>
|
||||||
<h3 class="first">Basic: {{value1}}</h3>
|
<InputText v-model.number="value2" />
|
||||||
<Slider v-model="value1" />
|
<Slider v-model="value2" />
|
||||||
|
|
||||||
<h3>Input: {{value2}}</h3>
|
<h3>Step: {{value3}}</h3>
|
||||||
<InputText v-model.number="value2" />
|
<Slider v-model="value3" :step="20" />
|
||||||
<Slider v-model="value2" />
|
|
||||||
|
|
||||||
<h3>Step: {{value3}}</h3>
|
<h3>Range: {{value4}}</h3>
|
||||||
<Slider v-model="value3" :step="20" />
|
<Slider v-model="value4" :range="true" />
|
||||||
|
|
||||||
<h3>Range: {{value4}}</h3>
|
<h3>Vertical: {{value5}}</h3>
|
||||||
<Slider v-model="value4" :range="true" />
|
<Slider v-model="value5" orientation="vertical" />
|
||||||
|
|
||||||
<h3>Vertical: {{value5}}</h3>
|
|
||||||
<Slider v-model="value5" orientation="vertical" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -110,30 +110,17 @@ import Spinner from 'primevue/spinner';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Spinner v-model="value1" />
|
||||||
<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>Min/Max</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Spinner v-model="value2" :min="0" :max="100" />
|
||||||
<Spinner v-model="value1" />
|
|
||||||
|
|
||||||
<h3>Min/Max</h3>
|
<h3>Step</h3>
|
||||||
<Spinner v-model="value2" :min="0" :max="100" />
|
<Spinner v-model="value3" :step="0.25" />
|
||||||
|
|
||||||
<h3>Step</h3>
|
<h3>Disabled</h3>
|
||||||
<Spinner v-model="value3" :step="0.25" />
|
<Spinner v-model="value4" :disabled="true" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
|
||||||
<Spinner v-model="value4" :disabled="true" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -190,21 +190,16 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||||
<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>Severities</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
|
||||||
</div>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
|
||||||
</div>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
|
||||||
</template>
|
<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>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -236,114 +236,101 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Default</h3>
|
||||||
<div>
|
<TabView>
|
||||||
<div class="content-section introduction">
|
<TabPanel header="Godfather I">
|
||||||
<div class="feature-intro">
|
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,
|
||||||
<h1>TabView</h1>
|
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
|
||||||
<p>TabView is a container component to group content with tabs.</p>
|
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.
|
||||||
</div>
|
</TabPanel>
|
||||||
</div>
|
<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">
|
||||||
|
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>
|
||||||
|
</TabView>
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Programmatic</h3>
|
||||||
<h3 class="first">Default</h3>
|
<div style="padding: .5em 0">
|
||||||
<TabView>
|
<Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" />
|
||||||
<TabPanel header="Godfather I">
|
<Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" />
|
||||||
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,
|
<Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" />
|
||||||
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
|
</div>
|
||||||
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">
|
|
||||||
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">
|
|
||||||
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>
|
|
||||||
</TabView>
|
|
||||||
|
|
||||||
<h3>Programmatic</h3>
|
<TabView>
|
||||||
<div style="padding: .5em 0">
|
<TabPanel header="Godfather I" :active.sync="active[0]">
|
||||||
<Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" />
|
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,
|
||||||
<Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" />
|
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
|
||||||
<Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" />
|
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.
|
||||||
</div>
|
</TabPanel>
|
||||||
|
<TabPanel header="Godfather II" :active.sync="active[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.sync="active[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.
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
|
||||||
<TabView>
|
<h3>Disabled</h3>
|
||||||
<TabPanel header="Godfather I" :active.sync="active[0]">
|
<TabView>
|
||||||
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,
|
<TabPanel header="Godfather I">
|
||||||
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
|
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,
|
||||||
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.
|
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
|
||||||
</TabPanel>
|
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 header="Godfather II" :active.sync="active[1]">
|
</TabPanel>
|
||||||
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,
|
<TabPanel header="Godfather II">
|
||||||
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
|
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,
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
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
|
||||||
</TabPanel>
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
<TabPanel header="Godfather III" :active.sync="active[2]">
|
</TabPanel>
|
||||||
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
|
<TabPanel header="Godfather III">
|
||||||
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.
|
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
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
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.
|
||||||
</TabPanel>
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</TabView>
|
</TabPanel>
|
||||||
|
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
||||||
|
</TabView>
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Custom Headers</h3>
|
||||||
<TabView>
|
<TabView class="tabview-custom">
|
||||||
<TabPanel header="Godfather I">
|
<TabPanel>
|
||||||
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,
|
<template slot="header">
|
||||||
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
|
<i class="pi pi-calendar"></i>
|
||||||
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.
|
<span>Godfather I</span>
|
||||||
</TabPanel>
|
</template>
|
||||||
<TabPanel header="Godfather II">
|
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,
|
||||||
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,
|
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
|
||||||
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
|
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.
|
||||||
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
</TabPanel>
|
||||||
</TabPanel>
|
<TabPanel>
|
||||||
<TabPanel header="Godfather III">
|
<template slot="header">
|
||||||
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
|
<span>Godfather II</span>
|
||||||
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.
|
<i class="pi pi-user"></i>
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
</template>
|
||||||
</TabPanel>
|
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,
|
||||||
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
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
|
||||||
</TabView>
|
his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.
|
||||||
|
</TabPanel>
|
||||||
<h3>Custom Headers</h3>
|
<TabPanel>
|
||||||
<TabView class="tabview-custom">
|
<template slot="header">
|
||||||
<TabPanel>
|
<i class="pi pi-search"></i>
|
||||||
<template slot="header">
|
<span>Godfather III</span>
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-cog"></i>
|
||||||
<span>Godfather I</span>
|
</template>
|
||||||
</template>
|
The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
|
||||||
The 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,
|
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.
|
||||||
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
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
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>
|
</TabView>
|
||||||
<TabPanel>
|
|
||||||
<template slot="header">
|
|
||||||
<span>Godfather II</span>
|
|
||||||
<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>
|
|
||||||
<span>Godfather III</span>
|
|
||||||
<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.
|
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
|
||||||
</TabPanel>
|
|
||||||
</TabView>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -97,27 +97,14 @@ import Textarea from 'primevue/textarea';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Textarea v-model="value1" rows="5" cols="30" />
|
||||||
<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>Auto Resize</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
||||||
<Textarea v-model="value1" rows="5" cols="30" />
|
|
||||||
|
|
||||||
<h3>Auto Resize</h3>
|
<h3>Disabled</h3>
|
||||||
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
|
||||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -248,60 +248,47 @@ this.$toast.removeAllGroups();
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Severities</h3>
|
||||||
<div>
|
<div class="p-grid">
|
||||||
<div class="content-section introduction">
|
<div class="p-col-12 p-md-3">
|
||||||
<div class="feature-intro">
|
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||||
<h1>Toast</h1>
|
</div>
|
||||||
<p>Toast is used to display messages in an overlay.</p>
|
<div class="p-col-12 p-md-3">
|
||||||
</div>
|
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||||
</div>
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation p-fluid">
|
<h3>Positions</h3>
|
||||||
<h3>Severities</h3>
|
<div class="p-grid">
|
||||||
<div class="p-grid">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-col-12 p-md-3">
|
<Button label="Top Left" @click="showTopLeft" />
|
||||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
</div>
|
||||||
</div>
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-col-12 p-md-3">
|
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
</div>
|
||||||
</div>
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-col-12 p-md-3">
|
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-3">
|
|
||||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Positions</h3>
|
<h3>Options</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-6">
|
||||||
<Button label="Top Left" @click="showTopLeft" />
|
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-6">
|
||||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
<Button @click="showSticky" label="Sticky" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-4">
|
</div>
|
||||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Remove All</h3>
|
||||||
<div class="p-grid">
|
<Button @click="clear" label="Clear" />
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Remove All</h3>
|
|
||||||
<Button @click="clear" label="Clear" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -178,26 +178,13 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||||
<div class="content-section introduction">
|
<p style="font-weight: bold">{{checked1}}</p>
|
||||||
<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>Customized</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
|
||||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
<p style="font-weight: bold">{{checked2}}</p>
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -63,33 +63,20 @@ import Toolbar from 'primevue/toolbar';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Toolbar>
|
||||||
<div>
|
<template slot="left">
|
||||||
<div class="content-section introduction">
|
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||||
<div class="feature-intro">
|
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||||
<h1>Toolbar</h1>
|
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||||
<p>Toolbar is a grouping component for buttons and other content.</p>
|
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||||
</div>
|
</template>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<template slot="right">
|
||||||
<Toolbar>
|
<Button icon="pi pi-search" style="margin-right: .25em" />
|
||||||
<template slot="left">
|
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
|
||||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
<Button icon="pi pi-times" class="p-button-danger" />
|
||||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
</template>
|
||||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
</Toolbar>
|
||||||
<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>
|
|
||||||
</Toolbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -117,21 +117,8 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<TriStateCheckbox v-model="value" />
|
||||||
<div>
|
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue