Demo update on source codes
cagataycivici
parent
84fb736e1f
commit
dad730398f
|
|
@ -273,116 +273,102 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>AccordionPanel</h1>
|
||||
<p>AccordionPanel groups a collection of contents in tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Default</h3>
|
||||
<Accordion>
|
||||
<AccordionTab header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Godfather II">
|
||||
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 class="first">Default</h3>
|
||||
<Accordion>
|
||||
<AccordionTab header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Godfather II">
|
||||
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>
|
||||
<h3>Multiple</h3>
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Godfather II">
|
||||
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>Multiple</h3>
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Godfather II">
|
||||
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>
|
||||
<div style="padding: .5em 0">
|
||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||
</div>
|
||||
|
||||
<h3>Programmatic</h3>
|
||||
<div style="padding: .5em 0">
|
||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||
</div>
|
||||
<Accordion :multiple="true">
|
||||
<AccordionTab header="Godfather I" :active="active1">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Godfather II" :active="active2">
|
||||
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">
|
||||
<AccordionTab header="Godfather I" :active="active1">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab header="Godfather II" :active="active2">
|
||||
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>
|
||||
|
||||
<h3>Custom Headers</h3>
|
||||
<Accordion class="accordion-custom">
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Godfather I</span>
|
||||
</template>
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Godfather II</span>
|
||||
</template>
|
||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||
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>
|
||||
<h3>Custom Headers</h3>
|
||||
<Accordion class="accordion-custom">
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Godfather I</span>
|
||||
</template>
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</AccordionTab>
|
||||
<AccordionTab>
|
||||
<template slot="header">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Godfather II</span>
|
||||
</template>
|
||||
Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, TheGodfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
|
||||
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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -257,41 +257,28 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>AutoComplete</h1>
|
||||
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||
<h3>Dropdown and Templating</h3>
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<div class="p-clearfix p-autocomplete-brand-item">
|
||||
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
||||
<div>{{slotProps.item}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
|
||||
|
||||
<h3>Dropdown and Templating</h3>
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<div class="p-clearfix p-autocomplete-brand-item">
|
||||
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
||||
<div>{{slotProps.item}}</div>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -129,49 +129,36 @@ import Button from 'primevue/button';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Button</h1>
|
||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" icon="pi pi-check" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<Button icon="pi pi-check" />
|
||||
<Button label="Click" disabled="disabled" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" icon="pi pi-check" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
<Button icon="pi pi-check" />
|
||||
<Button label="Click" disabled="disabled" />
|
||||
<h3>Severities</h3>
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
|
||||
<h3>Severities</h3>
|
||||
<Button label="Primary" />
|
||||
<Button label="Secondary" class="p-button-secondary" />
|
||||
<Button label="Success" class="p-button-success" />
|
||||
<Button label="Info" class="p-button-info" />
|
||||
<Button label="Warning" class="p-button-warning" />
|
||||
<Button label="Danger" class="p-button-danger" />
|
||||
<h3>Raised Buttons</h3>
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
|
||||
<h3>Raised Buttons</h3>
|
||||
<Button label="Primary" class="p-button-raised" />
|
||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||
<Button label="Success" class="p-button-raised p-button-success" />
|
||||
<Button label="Info" class="p-button-raised p-button-info" />
|
||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||
|
||||
<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>
|
||||
<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" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -534,87 +534,76 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Calendar</h1>
|
||||
<p>Calendar is an input component to select a date.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation" style="padding-top:0">
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<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 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" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -81,45 +81,32 @@ import Card from 'primevue/card';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Card</h1>
|
||||
<p>Card is a flexible container component.</p>
|
||||
</div>
|
||||
</div>
|
||||
<Card style="width: 25em; margin-bottom: 2em">
|
||||
<template slot="title">
|
||||
Simple 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>
|
||||
</Card>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Card style="width: 25em; margin-bottom: 2em">
|
||||
<template slot="title">
|
||||
Simple 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>
|
||||
</Card>
|
||||
|
||||
<Card style="width: 25em">
|
||||
<template slot="header">
|
||||
<img alt="user header" src="demo/images/usercard.png">
|
||||
</template>
|
||||
<template slot="title">
|
||||
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>
|
||||
<Card style="width: 25em">
|
||||
<template slot="header">
|
||||
<img alt="user header" src="demo/images/usercard.png">
|
||||
</template>
|
||||
<template slot="title">
|
||||
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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -4,30 +4,17 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3 class="vertical">Vertical</h3>
|
||||
<Chart type="bar" :data="basicData" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="vertical">Vertical</h3>
|
||||
<Chart type="bar" :data="basicData" />
|
||||
<h3>Horizontal</h3>
|
||||
<Chart type="horizontalBar" :data="basicData" />
|
||||
|
||||
<h3>Horizontal</h3>
|
||||
<Chart type="horizontalBar" :data="basicData" />
|
||||
<h3>Multi Axis</h3>
|
||||
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||
|
||||
<h3>Multi Axis</h3>
|
||||
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||
|
||||
<h3>Stacked</h3>
|
||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Stacked</h3>
|
||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<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>
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<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>
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,27 +4,14 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic</h3>
|
||||
<Chart type="line" :data="basicData" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Chart type="line" :data="basicData" />
|
||||
<h3>Multi Axis</h3>
|
||||
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||
|
||||
<h3>Multi Axis</h3>
|
||||
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||
|
||||
<h3>Line Styles</h3>
|
||||
<Chart type="line" :data="lineStylesData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Line Styles</h3>
|
||||
<Chart type="line" :data="lineStylesData" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<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>
|
||||
<Chart type="pie" :data="chartData" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<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>
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<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>
|
||||
<Chart type="radar" :data="chartData" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -145,52 +145,39 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Checkbox</h1>
|
||||
<p>Checkbox is an extension to standard checkbox element with theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||
<h3>Multiple</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||
</div>
|
||||
<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>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2" class="p-checkbox-label">Los Angeles</label>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -144,31 +144,18 @@ import Chips from 'primevue/chips';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic</h3>
|
||||
<Chips v-model="value1" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Chips v-model="value1" />
|
||||
|
||||
<h3>Template</h3>
|
||||
<Chips v-model="value2">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<span>{{slotProps.value}} - (active) </span>
|
||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</Chips>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Template</h3>
|
||||
<Chips v-model="value2">
|
||||
<template #chip="slotProps">
|
||||
<div>
|
||||
<span>{{slotProps.value}} - (active) </span>
|
||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</Chips>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
</div>
|
||||
|
||||
<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">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
|
|
|
|||
|
|
@ -415,63 +415,51 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DataView</h1>
|
||||
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<template #header>
|
||||
<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>
|
||||
</template>
|
||||
<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-col-12 p-md-3">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
</template>
|
||||
<template #list="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-col-12 p-md-8 car-details">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-details">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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 class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,36 +73,25 @@ import DeferredContent from 'primevue/deferredcontent';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<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 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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -203,30 +203,17 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Dialog</h1>
|
||||
<p>Dialog is a container to display content in an overlay window.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
||||
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>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
<template #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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -245,34 +245,21 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic</h3>
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
<h3>Editable</h3>
|
||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||
|
||||
<h3>Editable</h3>
|
||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||
|
||||
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
||||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -144,32 +144,19 @@ npm install quill --save
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Default</h3>
|
||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||
|
||||
<h3>Customized</h3>
|
||||
<Editor v-model="value2" editorStyle="height: 320px">
|
||||
<template slot="toolbar">
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
</span>
|
||||
</template>
|
||||
</Editor>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Customized</h3>
|
||||
<Editor v-model="value2" editorStyle="height: 320px">
|
||||
<template slot="toolbar">
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
</span>
|
||||
</template>
|
||||
</Editor>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -154,34 +154,21 @@ import Fieldset from 'primevue/fieldset';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Fieldset</h1>
|
||||
<p>Fieldset is a grouping component with the optional content toggle feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Regular</h3>
|
||||
<Fieldset legend="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Fieldset>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<Fieldset legend="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -251,27 +251,14 @@ import FileUpload from 'primevue/fileupload';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Advanced</h3>
|
||||
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Advanced</h3>
|
||||
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
||||
<h3>Basic</h3>
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
|
||||
<h3>Basic</h3>
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||
|
||||
<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>
|
||||
<h3>Basic with Auto</h3>
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -574,429 +574,415 @@ import 'primeflex/primeflex.css';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>FlexGrid</h1>
|
||||
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
||||
Flex Grid CSS is not included in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation flexgrid-demo">
|
||||
<h3 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Dynamic</h3>
|
||||
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
||||
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||
|
||||
<h3>Dynamic</h3>
|
||||
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
||||
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||
<div style="margin-top: .5em">
|
||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||
<div v-for="col of columns" :key="col" class="p-col">
|
||||
<div class="box">{{col}}</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: .5em">
|
||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||
<div v-for="col of columns" :key="col" class="p-col">
|
||||
<div class="box">{{col}}</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
<h3>Reverse Direction</h3>
|
||||
<div class="p-grid p-dir-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Reverse Direction</h3>
|
||||
<div class="p-grid p-dir-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Column Direction</h3>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Column Direction</h3>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Reverse Column Direction</h3>
|
||||
<div class="p-grid p-dir-col-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Reverse Column Direction</h3>
|
||||
<div class="p-grid p-dir-col-rev">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>12 Column Grid</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<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 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-col-4">
|
||||
<div class="box">4</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 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-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="box">8</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="box">8</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>MultiLine</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>MultiLine</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Fixed Width Column</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">
|
||||
<div class="box">100px</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">auto</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Fixed Width Column</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">
|
||||
<div class="box">100px</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Responsive</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<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 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>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
</div>
|
||||
<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>Horizontal Alignment - Start</h3>
|
||||
<div class="p-grid p-justify-start">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Start</h3>
|
||||
<div class="p-grid p-justify-start">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Horizontal Alignment - End</h3>
|
||||
<div class="p-grid p-justify-end">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - End</h3>
|
||||
<div class="p-grid p-justify-end">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Horizontal Alignment - Center</h3>
|
||||
<div class="p-grid p-justify-center">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Center</h3>
|
||||
<div class="p-grid p-justify-center">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Horizontal Alignment - Between</h3>
|
||||
<div class="p-grid p-justify-between">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Between</h3>
|
||||
<div class="p-grid p-justify-between">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Horizontal Alignment - Around</h3>
|
||||
<div class="p-grid p-justify-around">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Around</h3>
|
||||
<div class="p-grid p-justify-around">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Horizontal Alignment - Even</h3>
|
||||
<div class="p-grid p-justify-even">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Alignment - Even</h3>
|
||||
<div class="p-grid p-justify-even">
|
||||
<div class="p-col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Vertical Alignment - Start</h3>
|
||||
<div class="p-grid p-align-start vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Start</h3>
|
||||
<div class="p-grid p-align-start vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Vertical Alignment - End</h3>
|
||||
<div class="p-grid p-align-end vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - End</h3>
|
||||
<div class="p-grid p-align-end vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Vertical Alignment - Center</h3>
|
||||
<div class="p-grid p-align-center vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Center</h3>
|
||||
<div class="p-grid p-align-center vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Vertical Alignment - Stretch</h3>
|
||||
<div class="p-grid p-align-stretch vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Stretch</h3>
|
||||
<div class="p-grid p-align-stretch vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Vertical Alignment - Per Column</h3>
|
||||
<div class="p-grid vertical-container">
|
||||
<div class="p-col p-col-align-start">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-center">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-end">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical Alignment - Per Column</h3>
|
||||
<div class="p-grid vertical-container">
|
||||
<div class="p-col p-col-align-start">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-center">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-col-align-end">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Offset</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Offset</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col-4 p-offset-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col-4 p-offset-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Nested</h3>
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<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>Panels</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
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>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Panel header="Godfather">
|
||||
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>Sample Layout</h3>
|
||||
<div class="p-grid sample-layout">
|
||||
<div class="p-col-12 p-md-2">
|
||||
Menu
|
||||
</div>
|
||||
<div class="p-col-12 p-md-10 p-col-nogutter">
|
||||
<div class="p-col-12 p-col-nogutter">
|
||||
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>
|
||||
|
||||
<h3>Sample Layout</h3>
|
||||
<div class="p-grid sample-layout">
|
||||
<div class="p-col-12 p-md-2">
|
||||
Menu
|
||||
</div>
|
||||
<div class="p-col-12 p-md-10 p-col-nogutter">
|
||||
<div class="p-col-12 p-col-nogutter">
|
||||
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-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||
|
||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
||||
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
||||
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
||||
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
||||
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
Footer
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -199,20 +199,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<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>
|
||||
<FullCalendar :events="events" :options="options" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -171,54 +171,41 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Inplace</h1>
|
||||
<p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Input</h3>
|
||||
<Inplace :closable="true">
|
||||
<template #display>
|
||||
{{text || 'Click to Edit'}}
|
||||
</template>
|
||||
<template #content>
|
||||
<InputText v-model="text" autoFocus />
|
||||
</template>
|
||||
</Inplace>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Input</h3>
|
||||
<Inplace :closable="true">
|
||||
<template #display>
|
||||
{{text || 'Click to Edit'}}
|
||||
</template>
|
||||
<template #content>
|
||||
<InputText v-model="text" autoFocus />
|
||||
</template>
|
||||
</Inplace>
|
||||
<h3>Image</h3>
|
||||
<Inplace>
|
||||
<template #display>
|
||||
<span className="pi pi-search" style="vertical-align: middle"></span>
|
||||
<span style="margin-left:.5em; vertical-align: middle">View Picture</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<img src="demo/images/nature/nature1.jpg" />
|
||||
</template>
|
||||
</Inplace>
|
||||
|
||||
<h3>Image</h3>
|
||||
<Inplace>
|
||||
<template #display>
|
||||
<span className="pi pi-search" style="vertical-align: middle"></span>
|
||||
<span style="margin-left:.5em; vertical-align: middle">View Picture</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<img src="demo/images/nature/nature1.jpg" />
|
||||
</template>
|
||||
</Inplace>
|
||||
|
||||
<h3>Lazy Data</h3>
|
||||
<Inplace @open="loadData">
|
||||
<template #display>
|
||||
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>
|
||||
<h3>Lazy Data</h3>
|
||||
<Inplace @open="loadData">
|
||||
<template #display>
|
||||
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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,120 +7,107 @@
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputGroup</h1>
|
||||
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<InputText placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<InputText placeholder="Website" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<InputText placeholder="Website" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Multiple Addons</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
</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>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
</span>
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-star"></i>
|
||||
</span>
|
||||
<InputText placeholder="Price" />
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Button Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button label="Search"/>
|
||||
<InputText placeholder="Keyword"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Button Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button label="Search"/>
|
||||
<InputText placeholder="Keyword"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Keyword"/>
|
||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Keyword"/>
|
||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button icon="pi pi-check" class="p-button-success"/>
|
||||
<InputText placeholder="Vote"/>
|
||||
<Button icon="pi pi-times" class="p-button-danger"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button icon="pi pi-check" class="p-button-success"/>
|
||||
<InputText placeholder="Vote"/>
|
||||
<Button icon="pi pi-times" class="p-button-danger"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Checkbox and RadioButton</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
</span>
|
||||
<InputText placeholder="Username"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Checkbox and RadioButton</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
</span>
|
||||
<InputText placeholder="Username"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Price"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Price"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<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>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -153,26 +153,13 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputSwitch</h1>
|
||||
<p>InputSwitch is used to select a boolean value.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<InputSwitch v-model="checked1" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<InputSwitch v-model="checked1" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<h3>Preselection</h3>
|
||||
<InputSwitch v-model="checked2" />
|
||||
<p style="font-weight: bold">{{checked2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Preselection</h3>
|
||||
<InputSwitch v-model="checked2" />
|
||||
<p style="font-weight: bold">{{checked2}}</p>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -54,31 +54,18 @@ import InputText from 'primevue/inputtext';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputText</h1>
|
||||
<p>InputText renders and input field where the user can enter data.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<InputText type="text" v-model="value1" />
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<InputText type="text" v-model="value1" />
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
<h3>Floating Label</h3>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value2" />
|
||||
<label for="username">Username</label>
|
||||
</span>
|
||||
|
||||
<h3>Floating Label</h3>
|
||||
<span class="p-float-label">
|
||||
<InputText id="username" type="text" v-model="value2" />
|
||||
<label for="username">Username</label>
|
||||
</span>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<InputText type="text" v-model="value3" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Disabled</h3>
|
||||
<InputText type="text" v-model="value3" disabled />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -212,31 +212,18 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Single</h3>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
|
||||
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Listbox>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -203,23 +203,12 @@ let items: [
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Menu</h1>
|
||||
<p>Menu is a navigation / command component that supports dynamic and static positioning..</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Inline</h3>
|
||||
<Menu :model="items" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Inline</h3>
|
||||
<Menu :model="items" />
|
||||
|
||||
<h3>Overlay</h3>
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
<Menu ref="menu" :model="items" :popup="true" />
|
||||
</div>
|
||||
</div>
|
||||
<h3>Overlay</h3>
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
<Menu ref="menu" :model="items" :popup="true" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -231,47 +231,34 @@ import Message from 'primevue/message';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Message</h1>
|
||||
<p>Messages is used to display inline messages with various severities.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Severities</h3>
|
||||
<Message severity="success">Order Submitted</Message>
|
||||
<Message severity="info">PrimeVue Rocks</Message>
|
||||
<Message severity="warn">There are unsaved changes</Message>
|
||||
<Message severity="error">Validation Failed</Message>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Severities</h3>
|
||||
<Message severity="success">Order Submitted</Message>
|
||||
<Message severity="info">PrimeVue Rocks</Message>
|
||||
<Message severity="warn">There are unsaved changes</Message>
|
||||
<Message severity="error">Validation Failed</Message>
|
||||
<h3>Dynamic</h3>
|
||||
<Button label="Show" @click="addMessages()" />
|
||||
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||
|
||||
<h3>Dynamic</h3>
|
||||
<Button label="Show" @click="addMessages()" />
|
||||
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||
<transition-group name="p-messages" tag="div">
|
||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||
</transition-group>
|
||||
|
||||
<transition-group name="p-messages" tag="div">
|
||||
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||
</transition-group>
|
||||
<h3>Auto Dismiss</h3>
|
||||
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
|
||||
|
||||
<h3>Auto Dismiss</h3>
|
||||
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
|
||||
|
||||
<h3>Validation Message</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<ValidationMessage>Field is required</ValidationMessage>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||
<ValidationMessage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Validation Message</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Username" class="p-error" />
|
||||
<ValidationMessage>Field is required</ValidationMessage>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||
<ValidationMessage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -235,40 +235,27 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic</h3>
|
||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||
|
||||
<h3>Advanced with Templating and Filtering</h3>
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||
<template #value="slotProps">
|
||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||
<span>{{option.brand}}</span>
|
||||
</div>
|
||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
Select Brands
|
||||
</div>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Advanced with Templating and Filtering</h3>
|
||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||
<template #value="slotProps">
|
||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||
<span>{{option.brand}}</span>
|
||||
</div>
|
||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
Select Brands
|
||||
</div>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -164,28 +164,17 @@ import OrderList from 'primevue/orderlist';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>OrderList</h1>
|
||||
<p>OrderList is used to managed the order of a collection.</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</OrderList>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -485,38 +485,27 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>OrganizationChart</h1>
|
||||
<p>OrganizationChart visualizes hierarchical organization data.</p>
|
||||
<h3>Advanced</h3>
|
||||
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
||||
<template #person="slotProps">
|
||||
<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>
|
||||
</template>
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Advanced</h3>
|
||||
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
||||
<template #person="slotProps">
|
||||
<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>
|
||||
</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>
|
||||
<h3>Basic</h3>
|
||||
<OrganizationChart :value="data2">
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -146,24 +146,11 @@ toggle(event) {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<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>
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -235,38 +235,23 @@ onPage(event) {
|
|||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic</h3>
|
||||
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Basic</h3>
|
||||
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
<h3>Custom</h3>
|
||||
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
|
||||
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>
|
||||
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
|
||||
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>
|
||||
|
||||
<div class="image-gallery">
|
||||
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaginatorDoc />
|
||||
</div>
|
||||
</template>
|
||||
<div class="image-gallery">
|
||||
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
||||
</div>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
|
|
|
|||
|
|
@ -158,34 +158,21 @@ import Panel from 'primevue/panel';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Panel</h1>
|
||||
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Regular</h3>
|
||||
<Panel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<Panel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -96,20 +96,7 @@ import Password from 'primevue/password';
|
|||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template>
|
||||
<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>
|
||||
<Password v-model="value" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
|
|
|
|||
|
|
@ -220,33 +220,20 @@ import PickList from 'primevue/picklist';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>PickList</h1>
|
||||
<p>PickList is used to reorder items between different lists.</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</PickList>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -104,27 +104,14 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ProgressBar</h1>
|
||||
<p>ProgressBar is a process status indicator.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Dynamic</h3>
|
||||
<ProgressBar :value="value1" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Dynamic</h3>
|
||||
<ProgressBar :value="value1" />
|
||||
<h3>Static</h3>
|
||||
<ProgressBar :value="value2" :showValue="false" />
|
||||
|
||||
<h3>Static</h3>
|
||||
<ProgressBar :value="value2" :showValue="false" />
|
||||
|
||||
<h3>Indeterminate</h3>
|
||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Indeterminate</h3>
|
||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -108,24 +108,11 @@ import ProgressSpinner from 'primevue/progressspinner';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ProgressSpinner</h1>
|
||||
<p>ProgressSpinner is a process status indicator.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<ProgressSpinner />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<ProgressSpinner />
|
||||
|
||||
<h3>Custom</h3>
|
||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||
</div>
|
||||
|
||||
<ProgressSpinnerDoc/>
|
||||
</div>
|
||||
<h3>Custom</h3>
|
||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -137,48 +137,35 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>RadioButton</h1>
|
||||
<p>RadioButton is an extension to standard radio button element with theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
||||
</div>
|
||||
<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 class="first">Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
|
||||
<label for="city2" class="p-radiobutton-label">Los Angeles</label>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -139,30 +139,17 @@ import Rating from 'primevue/rating';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Rating</h1>
|
||||
<p>Rating component is a star based selection input.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic {{val1}}</h3>
|
||||
<Rating v-model="val1" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic {{val1}}</h3>
|
||||
<Rating v-model="val1" />
|
||||
<h3>No Cancel {{val2}}</h3>
|
||||
<Rating v-model="val2" :cancel="false" />
|
||||
|
||||
<h3>No Cancel {{val2}}</h3>
|
||||
<Rating v-model="val2" :cancel="false" />
|
||||
<h3>ReadOnly</h3>
|
||||
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
||||
|
||||
<h3>ReadOnly</h3>
|
||||
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<Rating :value="8" :disabled="true" :stars="10" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Disabled</h3>
|
||||
<Rating :value="8" :disabled="true" :stars="10" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -154,37 +154,24 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>SelectButton</h1>
|
||||
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Single</h3>
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||
<h3>Multiple</h3>
|
||||
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
||||
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
||||
|
||||
<h3>Multiple</h3>
|
||||
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
||||
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
||||
|
||||
<h3>Custom Content</h3>
|
||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<div style="text-align: center; padding: 1em; width: 125px">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</SelectButton>
|
||||
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Custom Content</h3>
|
||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<div style="text-align: center; padding: 1em; width: 125px">
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</SelectButton>
|
||||
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -198,54 +198,41 @@ import Sidebar from 'primevue/sidebar';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Sidebar</h1>
|
||||
<p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
||||
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
||||
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
||||
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
||||
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
||||
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
||||
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
||||
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
||||
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
||||
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
||||
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
||||
<h1 style="fontWeight:normal">Full Screen</h1>
|
||||
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
||||
<h1 style="fontWeight:normal">Full Screen</h1>
|
||||
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
||||
</Sidebar>
|
||||
|
||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
|
||||
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
|
||||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
|
||||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
|
||||
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -173,34 +173,21 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic: {{value1}}</h3>
|
||||
<Slider v-model="value1" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic: {{value1}}</h3>
|
||||
<Slider v-model="value1" />
|
||||
<h3>Input: {{value2}}</h3>
|
||||
<InputText v-model.number="value2" />
|
||||
<Slider v-model="value2" />
|
||||
|
||||
<h3>Input: {{value2}}</h3>
|
||||
<InputText v-model.number="value2" />
|
||||
<Slider v-model="value2" />
|
||||
<h3>Step: {{value3}}</h3>
|
||||
<Slider v-model="value3" :step="20" />
|
||||
|
||||
<h3>Step: {{value3}}</h3>
|
||||
<Slider v-model="value3" :step="20" />
|
||||
<h3>Range: {{value4}}</h3>
|
||||
<Slider v-model="value4" :range="true" />
|
||||
|
||||
<h3>Range: {{value4}}</h3>
|
||||
<Slider v-model="value4" :range="true" />
|
||||
|
||||
<h3>Vertical: {{value5}}</h3>
|
||||
<Slider v-model="value5" orientation="vertical" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Vertical: {{value5}}</h3>
|
||||
<Slider v-model="value5" orientation="vertical" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -110,30 +110,17 @@ import Spinner from 'primevue/spinner';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic</h3>
|
||||
<Spinner v-model="value1" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Spinner v-model="value1" />
|
||||
<h3>Min/Max</h3>
|
||||
<Spinner v-model="value2" :min="0" :max="100" />
|
||||
|
||||
<h3>Min/Max</h3>
|
||||
<Spinner v-model="value2" :min="0" :max="100" />
|
||||
<h3>Step</h3>
|
||||
<Spinner v-model="value3" :step="0.25" />
|
||||
|
||||
<h3>Step</h3>
|
||||
<Spinner v-model="value3" :step="0.25" />
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<Spinner v-model="value4" :disabled="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Disabled</h3>
|
||||
<Spinner v-model="value4" :disabled="true" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -190,21 +190,16 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<h3>Basic</h3>
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Severities</h3>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -236,114 +236,101 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>TabView</h1>
|
||||
<p>TabView is a container component to group content with tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Default</h3>
|
||||
<TabView>
|
||||
<TabPanel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel header="Godfather II">
|
||||
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 class="first">Default</h3>
|
||||
<TabView>
|
||||
<TabPanel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel header="Godfather II">
|
||||
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>
|
||||
<div style="padding: .5em 0">
|
||||
<Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" />
|
||||
<Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" />
|
||||
<Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" />
|
||||
</div>
|
||||
|
||||
<h3>Programmatic</h3>
|
||||
<div style="padding: .5em 0">
|
||||
<Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" />
|
||||
<Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" />
|
||||
<Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" />
|
||||
</div>
|
||||
<TabView>
|
||||
<TabPanel header="Godfather I" :active.sync="active[0]">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel header="Godfather II" :active.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>
|
||||
<TabPanel header="Godfather I" :active.sync="active[0]">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel header="Godfather II" :active.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>
|
||||
<h3>Disabled</h3>
|
||||
<TabView>
|
||||
<TabPanel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel header="Godfather II">
|
||||
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>
|
||||
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
||||
</TabView>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<TabView>
|
||||
<TabPanel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel header="Godfather II">
|
||||
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>
|
||||
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
||||
</TabView>
|
||||
|
||||
<h3>Custom Headers</h3>
|
||||
<TabView class="tabview-custom">
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Godfather I</span>
|
||||
</template>
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<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>
|
||||
<h3>Custom Headers</h3>
|
||||
<TabView class="tabview-custom">
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Godfather I</span>
|
||||
</template>
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||
just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -97,27 +97,14 @@ import Textarea from 'primevue/textarea';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Textarea</h1>
|
||||
<p>Textarea is a multi-line text input element.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<Textarea v-model="value1" rows="5" cols="30" />
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Textarea v-model="value1" rows="5" cols="30" />
|
||||
<h3>Auto Resize</h3>
|
||||
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
||||
|
||||
<h3>Auto Resize</h3>
|
||||
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<h3>Disabled</h3>
|
||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -248,60 +248,47 @@ this.$toast.removeAllGroups();
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Toast</h1>
|
||||
<p>Toast is used to display messages in an overlay.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Severities</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Warn" class="p-button-warning" @click="showWarn" />
|
||||
</div>
|
||||
<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>Severities</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<Button label="Info" class="p-button-info" @click="showInfo" />
|
||||
</div>
|
||||
<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>
|
||||
<h3>Positions</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Top Left" @click="showTopLeft" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Positions</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Top Left" @click="showTopLeft" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||
</div>
|
||||
</div>
|
||||
<h3>Options</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<Button @click="showSticky" label="Sticky" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Options</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||
</div>
|
||||
<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>
|
||||
<h3>Remove All</h3>
|
||||
<Button @click="clear" label="Clear" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -178,26 +178,13 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ToggleButton</h1>
|
||||
<p>ToggleButton is used to select a boolean value using a button.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Basic</h3>
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<h3>Customized</h3>
|
||||
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
|
||||
<p style="font-weight: bold">{{checked2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -63,33 +63,20 @@ import Toolbar from 'primevue/toolbar';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Toolbar</h1>
|
||||
<p>Toolbar is a grouping component for buttons and other content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<Toolbar>
|
||||
<template slot="left">
|
||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||
</template>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Toolbar>
|
||||
<template slot="left">
|
||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||
<i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
|
||||
<Button label="Save" icon="pi pi-check" class="p-button-warning" />
|
||||
</template>
|
||||
|
||||
<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 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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -117,21 +117,8 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue