Demo update on source codes
cagataycivici
parent
84fb736e1f
commit
dad730398f
|
|
@ -273,18 +273,8 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Default</h3>
|
||||||
<div>
|
<Accordion>
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>AccordionPanel</h1>
|
|
||||||
<p>AccordionPanel groups a collection of contents in tabs.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<h3 class="first">Default</h3>
|
|
||||||
<Accordion>
|
|
||||||
<AccordionTab header="Godfather I">
|
<AccordionTab header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
|
|
@ -300,10 +290,10 @@ export default {
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<Accordion :multiple="true">
|
<Accordion :multiple="true">
|
||||||
<AccordionTab header="Godfather I">
|
<AccordionTab header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
|
|
@ -321,16 +311,16 @@ export default {
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
<AccordionTab header="Godfather IV" :disabled="true">
|
<AccordionTab header="Godfather IV" :disabled="true">
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
<h3>Programmatic</h3>
|
<h3>Programmatic</h3>
|
||||||
<div style="padding: .5em 0">
|
<div style="padding: .5em 0">
|
||||||
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
|
||||||
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
<Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Accordion :multiple="true">
|
<Accordion :multiple="true">
|
||||||
<AccordionTab header="Godfather I" :active="active1">
|
<AccordionTab header="Godfather I" :active="active1">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
|
|
@ -346,10 +336,10 @@ export default {
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
<h3>Custom Headers</h3>
|
<h3>Custom Headers</h3>
|
||||||
<Accordion class="accordion-custom">
|
<Accordion class="accordion-custom">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
|
|
@ -378,11 +368,7 @@ export default {
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</AccordionTab>
|
</AccordionTab>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -257,41 +257,28 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||||
<div class="content-section introduction">
|
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>AutoComplete</h1>
|
|
||||||
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Dropdown and Templating</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
|
||||||
<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">
|
<template #item="slotProps">
|
||||||
<div class="p-clearfix p-autocomplete-brand-item">
|
<div class="p-clearfix p-autocomplete-brand-item">
|
||||||
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
||||||
<div>{{slotProps.item}}</div>
|
<div>{{slotProps.item}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</AutoComplete>
|
</AutoComplete>
|
||||||
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
|
<span style="marginLeft: .5em">Brand: {{brand || 'none'}}</span>
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Multiple</h3>
|
||||||
<span class="p-fluid">
|
<span class="p-fluid">
|
||||||
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
<AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" />
|
||||||
</span>
|
</span>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -129,49 +129,36 @@ import Button from 'primevue/button';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Button label="Click" />
|
||||||
<div class="content-section introduction">
|
<Button label="Click" icon="pi pi-check" />
|
||||||
<div class="feature-intro">
|
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||||
<h1>Button</h1>
|
<Button icon="pi pi-check" />
|
||||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
<Button label="Click" disabled="disabled" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Severities</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Button label="Primary" />
|
||||||
<Button label="Click" />
|
<Button label="Secondary" class="p-button-secondary" />
|
||||||
<Button label="Click" icon="pi pi-check" />
|
<Button label="Success" class="p-button-success" />
|
||||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
<Button label="Info" class="p-button-info" />
|
||||||
<Button icon="pi pi-check" />
|
<Button label="Warning" class="p-button-warning" />
|
||||||
<Button label="Click" disabled="disabled" />
|
<Button label="Danger" class="p-button-danger" />
|
||||||
|
|
||||||
<h3>Severities</h3>
|
<h3>Raised Buttons</h3>
|
||||||
<Button label="Primary" />
|
<Button label="Primary" class="p-button-raised" />
|
||||||
<Button label="Secondary" class="p-button-secondary" />
|
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-success" />
|
<Button label="Success" class="p-button-raised p-button-success" />
|
||||||
<Button label="Info" class="p-button-info" />
|
<Button label="Info" class="p-button-raised p-button-info" />
|
||||||
<Button label="Warning" class="p-button-warning" />
|
<Button label="Warning" class="p-button-raised p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-danger" />
|
<Button label="Danger" class="p-button-raised p-button-danger" />
|
||||||
|
|
||||||
<h3>Raised Buttons</h3>
|
<h3>Rounded Buttons</h3>
|
||||||
<Button label="Primary" class="p-button-raised" />
|
<Button label="Primary" class="p-button-rounded" />
|
||||||
<Button label="Secondary" class="p-button-raised p-button-secondary" />
|
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
||||||
<Button label="Success" class="p-button-raised p-button-success" />
|
<Button label="Success" class="p-button-rounded p-button-success" />
|
||||||
<Button label="Info" class="p-button-raised p-button-info" />
|
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||||
<Button label="Warning" class="p-button-raised p-button-warning" />
|
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||||
<Button label="Danger" class="p-button-raised p-button-danger" />
|
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||||
|
|
||||||
<h3>Rounded Buttons</h3>
|
|
||||||
<Button label="Primary" class="p-button-rounded" />
|
|
||||||
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
|
|
||||||
<Button label="Success" class="p-button-rounded p-button-success" />
|
|
||||||
<Button label="Info" class="p-button-rounded p-button-info" />
|
|
||||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
|
||||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -534,16 +534,7 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<div class="p-grid p-fluid">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Calendar</h1>
|
|
||||||
<p>Calendar is an input component to select a date.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation" style="padding-top:0">
|
|
||||||
<div class="p-grid p-fluid">
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<h3>Basic</h3>
|
<h3>Basic</h3>
|
||||||
<Calendar v-model="date1" />
|
<Calendar v-model="date1" />
|
||||||
|
|
@ -609,12 +600,10 @@ export default {
|
||||||
<h3>Touch UI</h3>
|
<h3>Touch UI</h3>
|
||||||
<Calendar v-model="date13" :touchUI="true" />
|
<Calendar v-model="date13" :touchUI="true" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Inline</h3>
|
<h3>Inline</h3>
|
||||||
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -81,17 +81,7 @@ import Card from 'primevue/card';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Card style="width: 25em; margin-bottom: 2em">
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Card</h1>
|
|
||||||
<p>Card is a flexible container component.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Card style="width: 25em; margin-bottom: 2em">
|
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
Simple Card
|
Simple Card
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -99,9 +89,9 @@ import Card from 'primevue/card';
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
|
||||||
</template>
|
</template>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card style="width: 25em">
|
<Card style="width: 25em">
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<img alt="user header" src="demo/images/usercard.png">
|
<img alt="user header" src="demo/images/usercard.png">
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -116,10 +106,7 @@ import Card from 'primevue/card';
|
||||||
<Button icon="pi pi-check" label="Save" class="p-button-raised" />
|
<Button icon="pi pi-check" label="Save" class="p-button-raised" />
|
||||||
<Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" />
|
<Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" />
|
||||||
</template>
|
</template>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
|
||||||
|
|
@ -4,30 +4,17 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3 class="vertical">Vertical</h3>
|
||||||
<div>
|
<Chart type="bar" :data="basicData" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>BarChart</h1>
|
|
||||||
<p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Horizontal</h3>
|
||||||
<h3 class="vertical">Vertical</h3>
|
<Chart type="horizontalBar" :data="basicData" />
|
||||||
<Chart type="bar" :data="basicData" />
|
|
||||||
|
|
||||||
<h3>Horizontal</h3>
|
<h3>Multi Axis</h3>
|
||||||
<Chart type="horizontalBar" :data="basicData" />
|
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
||||||
|
|
||||||
<h3>Multi Axis</h3>
|
<h3>Stacked</h3>
|
||||||
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
|
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||||
|
|
||||||
<h3>Stacked</h3>
|
|
||||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Combo Chart</h1>
|
|
||||||
<p>Different chart types can be combined in the same graph.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="doughnut" :data="chartData" />
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>DoughnutChart</h1>
|
|
||||||
<p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Chart type="doughnut" :data="chartData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,27 +4,14 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Chart type="line" :data="basicData" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Line Chart</h1>
|
|
||||||
<p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Multi Axis</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
||||||
<Chart type="line" :data="basicData" />
|
|
||||||
|
|
||||||
<h3>Multi Axis</h3>
|
<h3>Line Styles</h3>
|
||||||
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
|
<Chart type="line" :data="lineStylesData" />
|
||||||
|
|
||||||
<h3>Line Styles</h3>
|
|
||||||
<Chart type="line" :data="lineStylesData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="pie" :data="chartData" />
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Pie Chart</h1>
|
|
||||||
<p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Chart type="pie" :data="chartData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="polarArea" :data="chartData" />
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Polar Area Chart</h1>
|
|
||||||
<p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Chart type="polarArea" :data="chartData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,7 @@
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Chart type="radar" :data="chartData" />
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Radar Chart</h1>
|
|
||||||
<p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Chart type="radar" :data="chartData" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -145,22 +145,12 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||||
<div class="content-section introduction">
|
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Checkbox</h1>
|
|
||||||
<p>Checkbox is an extension to standard checkbox element with theming.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Multiple</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<div class="p-grid">
|
||||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
|
||||||
<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">
|
<div class="p-col-12">
|
||||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||||
<label for="city1" class="p-checkbox-label">Chicago</label>
|
<label for="city1" class="p-checkbox-label">Chicago</label>
|
||||||
|
|
@ -177,20 +167,17 @@ export default {
|
||||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||||
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
<label for="city4" class="p-checkbox-label">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
|
<p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
|
||||||
|
|
||||||
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
||||||
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
<Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
|
||||||
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
<label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
|
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -144,31 +144,18 @@ import Chips from 'primevue/chips';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Chips v-model="value1" />
|
||||||
<div class="content-section introduction p-fluid">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Chips</h1>
|
|
||||||
<p>Chips is used to enter multiple values on an input field.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Template</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Chips v-model="value2">
|
||||||
<Chips v-model="value1" />
|
|
||||||
|
|
||||||
<h3>Template</h3>
|
|
||||||
<Chips v-model="value2">
|
|
||||||
<template #chip="slotProps">
|
<template #chip="slotProps">
|
||||||
<div>
|
<div>
|
||||||
<span>{{slotProps.value}} - (active) </span>
|
<span>{{slotProps.value}} - (active) </span>
|
||||||
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
<i class="pi pi-user-plus" style="font-size: 14px"></i>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Chips>
|
</Chips>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-section implementation dataview-demo">
|
<div class="content-section implementation dataview-demo">
|
||||||
<h3 class="first">Default</h3>
|
|
||||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="p-grid p-nogutter">
|
<div class="p-grid p-nogutter">
|
||||||
|
|
|
||||||
|
|
@ -415,17 +415,7 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>DataView</h1>
|
|
||||||
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation dataview-demo">
|
|
||||||
<h3 class="first">Default</h3>
|
|
||||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="p-grid p-nogutter">
|
<div class="p-grid p-nogutter">
|
||||||
<div class="p-col-6" style="text-align: left">
|
<div class="p-col-6" style="text-align: left">
|
||||||
|
|
@ -469,9 +459,7 @@ export default {
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</DataView>
|
</DataView>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -73,36 +73,25 @@ import DeferredContent from 'primevue/deferredcontent';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<div style="height: 800px">
|
||||||
<div class="content-section introduction">
|
|
||||||
<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.
|
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>
|
</div>
|
||||||
|
|
||||||
<DeferredContent @load="onImageLoad">
|
<DeferredContent @load="onImageLoad">
|
||||||
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
|
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
|
|
||||||
<div style="height: 500px">
|
<div style="height: 500px">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DeferredContent @load="onDataLoad">
|
<DeferredContent @load="onDataLoad">
|
||||||
<DataTable :value="cars">
|
<DataTable :value="cars">
|
||||||
<Column field="vin" header="Vin"></Column>
|
<Column field="vin" header="Vin"></Column>
|
||||||
<Column field="year" header="Year"></Column>
|
<Column field="year" header="Year"></Column>
|
||||||
<Column field="brand" header="Brand"></Column>
|
<Column field="brand" header="Brand"></Column>
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="color" header="Color"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -203,18 +203,8 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||||
<div>
|
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
||||||
<div class="content-section introduction">
|
|
||||||
<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.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
|
|
@ -223,10 +213,7 @@ export default {
|
||||||
<Button label="Yes" icon="pi pi-check" @click="close" />
|
<Button label="Yes" icon="pi pi-check" @click="close" />
|
||||||
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
||||||
</template>
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -245,34 +245,21 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Dropdown</h1>
|
|
||||||
<p>Dropdown is used to select an item from a list of options.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Editable</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
||||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
|
||||||
|
|
||||||
<h3>Editable</h3>
|
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
|
||||||
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
|
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||||
|
|
||||||
<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">
|
<template #option="slotProps">
|
||||||
<div class="p-clearfix p-dropdown-car-option">
|
<div class="p-clearfix p-dropdown-car-option">
|
||||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||||
<span>{{slotProps.option.brand}}</span>
|
<span>{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -144,21 +144,11 @@ npm install quill --save
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Default</h3>
|
||||||
<div>
|
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Editor</h1>
|
|
||||||
<p>Editor is rich text editor component based on Quill.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Customized</h3>
|
||||||
<h3 class="first">Default</h3>
|
<Editor v-model="value2" editorStyle="height: 320px">
|
||||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
|
||||||
|
|
||||||
<h3>Customized</h3>
|
|
||||||
<Editor v-model="value2" editorStyle="height: 320px">
|
|
||||||
<template slot="toolbar">
|
<template slot="toolbar">
|
||||||
<span class="ql-formats">
|
<span class="ql-formats">
|
||||||
<button class="ql-bold"></button>
|
<button class="ql-bold"></button>
|
||||||
|
|
@ -166,10 +156,7 @@ npm install quill --save
|
||||||
<button class="ql-underline"></button>
|
<button class="ql-underline"></button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</Editor>
|
</Editor>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -154,34 +154,21 @@ import Fieldset from 'primevue/fieldset';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Regular</h3>
|
||||||
<div>
|
<Fieldset legend="Godfather I">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Fieldset</h1>
|
|
||||||
<p>Fieldset is a grouping component with the optional content toggle feature.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<h3 class="first">Regular</h3>
|
|
||||||
<Fieldset legend="Godfather I">
|
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</Fieldset>
|
</Fieldset>
|
||||||
|
|
||||||
<h3>Toggleable</h3>
|
<h3>Toggleable</h3>
|
||||||
<Fieldset legend="Godfather I" :toggleable="true">
|
<Fieldset legend="Godfather I" :toggleable="true">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</Fieldset>
|
</Fieldset>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -251,27 +251,14 @@ import FileUpload from 'primevue/fileupload';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Advanced</h3>
|
||||||
<div>
|
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>FileUpload</h1>
|
|
||||||
<p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Basic</h3>
|
||||||
<h3>Advanced</h3>
|
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
||||||
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
|
||||||
|
|
||||||
<h3>Basic</h3>
|
<h3>Basic with Auto</h3>
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
|
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||||
|
|
||||||
<h3>Basic with Auto</h3>
|
|
||||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -574,19 +574,8 @@ import 'primeflex/primeflex.css';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<div class="p-grid">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="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>
|
|
||||||
|
|
||||||
<div class="content-section implementation flexgrid-demo">
|
|
||||||
<h3 class="first">Basic</h3>
|
|
||||||
<div class="p-grid">
|
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -596,22 +585,22 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Dynamic</h3>
|
<h3>Dynamic</h3>
|
||||||
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
|
||||||
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||||
|
|
||||||
<div style="margin-top: .5em">
|
<div style="margin-top: .5em">
|
||||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||||
<div v-for="col of columns" :key="col" class="p-col">
|
<div v-for="col of columns" :key="col" class="p-col">
|
||||||
<div class="box">{{col}}</div>
|
<div class="box">{{col}}</div>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Direction</h3>
|
<h3>Reverse Direction</h3>
|
||||||
<div class="p-grid p-dir-rev">
|
<div class="p-grid p-dir-rev">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -621,10 +610,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Column Direction</h3>
|
<h3>Column Direction</h3>
|
||||||
<div class="p-grid p-dir-col">
|
<div class="p-grid p-dir-col">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -634,10 +623,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Column Direction</h3>
|
<h3>Reverse Column Direction</h3>
|
||||||
<div class="p-grid p-dir-col-rev">
|
<div class="p-grid p-dir-col-rev">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -647,10 +636,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>12 Column Grid</h3>
|
<h3>12 Column Grid</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -678,9 +667,9 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -690,9 +679,9 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col-8">
|
||||||
<div class="box">8</div>
|
<div class="box">8</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -702,10 +691,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>MultiLine</h3>
|
<h3>MultiLine</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -718,20 +707,20 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Fixed Width Column</h3>
|
<h3>Fixed Width Column</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-fixed" style="width:100px">
|
<div class="p-col-fixed" style="width:100px">
|
||||||
<div class="box">100px</div>
|
<div class="box">100px</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">auto</div>
|
<div class="box">auto</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Responsive</h3>
|
<h3>Responsive</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -744,10 +733,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Start</h3>
|
<h3>Horizontal Alignment - Start</h3>
|
||||||
<div class="p-grid p-justify-start">
|
<div class="p-grid p-justify-start">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -757,10 +746,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - End</h3>
|
<h3>Horizontal Alignment - End</h3>
|
||||||
<div class="p-grid p-justify-end">
|
<div class="p-grid p-justify-end">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -770,10 +759,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Center</h3>
|
<h3>Horizontal Alignment - Center</h3>
|
||||||
<div class="p-grid p-justify-center">
|
<div class="p-grid p-justify-center">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -783,10 +772,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Between</h3>
|
<h3>Horizontal Alignment - Between</h3>
|
||||||
<div class="p-grid p-justify-between">
|
<div class="p-grid p-justify-between">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -796,10 +785,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Around</h3>
|
<h3>Horizontal Alignment - Around</h3>
|
||||||
<div class="p-grid p-justify-around">
|
<div class="p-grid p-justify-around">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -809,10 +798,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Even</h3>
|
<h3>Horizontal Alignment - Even</h3>
|
||||||
<div class="p-grid p-justify-even">
|
<div class="p-grid p-justify-even">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -822,10 +811,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Start</h3>
|
<h3>Vertical Alignment - Start</h3>
|
||||||
<div class="p-grid p-align-start vertical-container">
|
<div class="p-grid p-align-start vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -835,10 +824,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - End</h3>
|
<h3>Vertical Alignment - End</h3>
|
||||||
<div class="p-grid p-align-end vertical-container">
|
<div class="p-grid p-align-end vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -848,10 +837,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Center</h3>
|
<h3>Vertical Alignment - Center</h3>
|
||||||
<div class="p-grid p-align-center vertical-container">
|
<div class="p-grid p-align-center vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -861,10 +850,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Stretch</h3>
|
<h3>Vertical Alignment - Stretch</h3>
|
||||||
<div class="p-grid p-align-stretch vertical-container">
|
<div class="p-grid p-align-stretch vertical-container">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -874,10 +863,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Per Column</h3>
|
<h3>Vertical Alignment - Per Column</h3>
|
||||||
<div class="p-grid vertical-container">
|
<div class="p-grid vertical-container">
|
||||||
<div class="p-col p-col-align-start">
|
<div class="p-col p-col-align-start">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -887,26 +876,26 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col p-col-align-end">
|
<div class="p-col p-col-align-end">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Offset</h3>
|
<h3>Offset</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6 p-offset-3">
|
<div class="p-col-6 p-offset-3">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4 p-offset-4">
|
<div class="p-col-4 p-offset-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Nested</h3>
|
<h3>Nested</h3>
|
||||||
<div class="p-grid nested-grid">
|
<div class="p-grid nested-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col-8">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
|
|
@ -923,10 +912,10 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Panels</h3>
|
<h3>Panels</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Godfather">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
|
|
@ -951,10 +940,10 @@ import 'primeflex/primeflex.css';
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Sample Layout</h3>
|
<h3>Sample Layout</h3>
|
||||||
<div class="p-grid sample-layout">
|
<div class="p-grid sample-layout">
|
||||||
<div class="p-col-12 p-md-2">
|
<div class="p-col-12 p-md-2">
|
||||||
Menu
|
Menu
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -993,10 +982,7 @@ import 'primeflex/primeflex.css';
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
Footer
|
Footer
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -199,20 +199,7 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<FullCalendar :events="events" :options="options" />
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>FullCalendar</h1>
|
|
||||||
<p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<FullCalendar :events="events" :options="options" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -171,28 +171,18 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Input</h3>
|
||||||
<div>
|
<Inplace :closable="true">
|
||||||
<div class="content-section introduction">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<h3>Input</h3>
|
|
||||||
<Inplace :closable="true">
|
|
||||||
<template #display>
|
<template #display>
|
||||||
{{text || 'Click to Edit'}}
|
{{text || 'Click to Edit'}}
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<InputText v-model="text" autoFocus />
|
<InputText v-model="text" autoFocus />
|
||||||
</template>
|
</template>
|
||||||
</Inplace>
|
</Inplace>
|
||||||
|
|
||||||
<h3>Image</h3>
|
<h3>Image</h3>
|
||||||
<Inplace>
|
<Inplace>
|
||||||
<template #display>
|
<template #display>
|
||||||
<span className="pi pi-search" style="vertical-align: middle"></span>
|
<span className="pi pi-search" style="vertical-align: middle"></span>
|
||||||
<span style="margin-left:.5em; vertical-align: middle">View Picture</span>
|
<span style="margin-left:.5em; vertical-align: middle">View Picture</span>
|
||||||
|
|
@ -200,10 +190,10 @@ export default {
|
||||||
<template #content>
|
<template #content>
|
||||||
<img src="demo/images/nature/nature1.jpg" />
|
<img src="demo/images/nature/nature1.jpg" />
|
||||||
</template>
|
</template>
|
||||||
</Inplace>
|
</Inplace>
|
||||||
|
|
||||||
<h3>Lazy Data</h3>
|
<h3>Lazy Data</h3>
|
||||||
<Inplace @open="loadData">
|
<Inplace @open="loadData">
|
||||||
<template #display>
|
<template #display>
|
||||||
View Data
|
View Data
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -215,10 +205,7 @@ export default {
|
||||||
<Column field="color" header="Color"></Column>
|
<Column field="color" header="Color"></Column>
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</template>
|
</template>
|
||||||
</Inplace>
|
</Inplace>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,18 +7,8 @@
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Addons</h3>
|
||||||
<div>
|
<div class="p-grid p-fluid">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>InputGroup</h1>
|
|
||||||
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<h3 class="first">Addons</h3>
|
|
||||||
<div class="p-grid p-fluid">
|
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
|
|
@ -42,10 +32,10 @@
|
||||||
<InputText placeholder="Website" />
|
<InputText placeholder="Website" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Multiple Addons</h3>
|
<h3>Multiple Addons</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
|
|
@ -59,10 +49,10 @@
|
||||||
<span class="p-inputgroup-addon">.00</span>
|
<span class="p-inputgroup-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Button Addons</h3>
|
<h3>Button Addons</h3>
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-grid p-fluid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<Button label="Search"/>
|
<Button label="Search"/>
|
||||||
|
|
@ -84,10 +74,10 @@
|
||||||
<Button icon="pi pi-times" class="p-button-danger"/>
|
<Button icon="pi pi-times" class="p-button-danger"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Checkbox and RadioButton</h3>
|
<h3>Checkbox and RadioButton</h3>
|
||||||
<div class="p-grid p-fluid">
|
<div class="p-grid p-fluid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<div class="p-inputgroup">
|
<div class="p-inputgroup">
|
||||||
<span class="p-inputgroup-addon">
|
<span class="p-inputgroup-addon">
|
||||||
|
|
@ -117,10 +107,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -153,26 +153,13 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<InputSwitch v-model="checked1" />
|
||||||
<div class="content-section introduction">
|
<p style="font-weight: bold">{{checked1}}</p>
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>InputSwitch</h1>
|
|
||||||
<p>InputSwitch is used to select a boolean value.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Preselection</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<InputSwitch v-model="checked2" />
|
||||||
<InputSwitch v-model="checked1" />
|
<p style="font-weight: bold">{{checked2}}</p>
|
||||||
<p style="font-weight: bold">{{checked1}}</p>
|
|
||||||
|
|
||||||
<h3>Preselection</h3>
|
|
||||||
<InputSwitch v-model="checked2" />
|
|
||||||
<p style="font-weight: bold">{{checked2}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -54,31 +54,18 @@ import InputText from 'primevue/inputtext';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<InputText type="text" v-model="value1" />
|
||||||
<div class="content-section introduction">
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>InputText</h1>
|
|
||||||
<p>InputText renders and input field where the user can enter data.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Floating Label</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<span class="p-float-label">
|
||||||
<InputText type="text" v-model="value1" />
|
|
||||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
|
||||||
|
|
||||||
<h3>Floating Label</h3>
|
|
||||||
<span class="p-float-label">
|
|
||||||
<InputText id="username" type="text" v-model="value2" />
|
<InputText id="username" type="text" v-model="value2" />
|
||||||
<label for="username">Username</label>
|
<label for="username">Username</label>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Disabled</h3>
|
||||||
<InputText type="text" v-model="value3" disabled />
|
<InputText type="text" v-model="value3" disabled />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -212,31 +212,18 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Single</h3>
|
||||||
<div>
|
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Listbox</h1>
|
|
||||||
<p>Listbox is used to select one or more values from a list of items.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||||
<h3 class="first">Single</h3>
|
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
|
||||||
|
|
||||||
<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">
|
<template #option="slotProps">
|
||||||
<div class="p-clearfix">
|
<div class="p-clearfix">
|
||||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Listbox>
|
</Listbox>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -203,23 +203,12 @@ let items: [
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<h3>Inline</h3>
|
||||||
<div class="content-section introduction">
|
<Menu :model="items" />
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Menu</h1>
|
|
||||||
<p>Menu is a navigation / command component that supports dynamic and static positioning..</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Overlay</h3>
|
||||||
<h3 class="first">Inline</h3>
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
<Menu :model="items" />
|
<Menu ref="menu" :model="items" :popup="true" />
|
||||||
|
|
||||||
<h3>Overlay</h3>
|
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
|
||||||
<Menu ref="menu" :model="items" :popup="true" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -231,35 +231,25 @@ import Message from 'primevue/message';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Severities</h3>
|
||||||
<div>
|
<Message severity="success">Order Submitted</Message>
|
||||||
<div class="content-section introduction">
|
<Message severity="info">PrimeVue Rocks</Message>
|
||||||
<div class="feature-intro">
|
<Message severity="warn">There are unsaved changes</Message>
|
||||||
<h1>Message</h1>
|
<Message severity="error">Validation Failed</Message>
|
||||||
<p>Messages is used to display inline messages with various severities.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Dynamic</h3>
|
||||||
<h3 class="first">Severities</h3>
|
<Button label="Show" @click="addMessages()" />
|
||||||
<Message severity="success">Order Submitted</Message>
|
<Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
|
||||||
<Message severity="info">PrimeVue Rocks</Message>
|
|
||||||
<Message severity="warn">There are unsaved changes</Message>
|
|
||||||
<Message severity="error">Validation Failed</Message>
|
|
||||||
|
|
||||||
<h3>Dynamic</h3>
|
<transition-group name="p-messages" tag="div">
|
||||||
<Button label="Show" @click="addMessages()" />
|
|
||||||
<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>
|
<Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
|
|
||||||
<h3>Auto Dismiss</h3>
|
<h3>Auto Dismiss</h3>
|
||||||
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
|
<Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
|
||||||
|
|
||||||
<h3>Validation Message</h3>
|
<h3>Validation Message</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<InputText placeholder="Username" class="p-error" />
|
<InputText placeholder="Username" class="p-error" />
|
||||||
<ValidationMessage>Field is required</ValidationMessage>
|
<ValidationMessage>Field is required</ValidationMessage>
|
||||||
|
|
@ -268,10 +258,7 @@ import Message from 'primevue/message';
|
||||||
<InputText placeholder="Email" class="p-error" :closable="false" />
|
<InputText placeholder="Email" class="p-error" :closable="false" />
|
||||||
<ValidationMessage />
|
<ValidationMessage />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -235,21 +235,11 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>MultiSelect</h1>
|
|
||||||
<p>MultiSelect is used to multiple values from a list of options.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Advanced with Templating and Filtering</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
|
||||||
|
|
||||||
<h3>Advanced with Templating and Filtering</h3>
|
|
||||||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
|
||||||
<template #value="slotProps">
|
<template #value="slotProps">
|
||||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||||
|
|
@ -265,10 +255,7 @@ data() {
|
||||||
<span>{{slotProps.option.brand}}</span>
|
<span>{{slotProps.option.brand}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</MultiSelect>
|
</MultiSelect>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -164,16 +164,7 @@ import OrderList from 'primevue/orderlist';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>OrderList</h1>
|
|
||||||
<p>OrderList is used to managed the order of a collection.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
|
|
||||||
<template #header>
|
<template #header>
|
||||||
List of Cars
|
List of Cars
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -183,9 +174,7 @@ import OrderList from 'primevue/orderlist';
|
||||||
<div>{{slotProps.item.brand} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
<div>{{slotProps.item.brand} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</OrderList>
|
</OrderList>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -485,17 +485,8 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<h3>Advanced</h3>
|
||||||
<div class="content-section introduction">
|
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>OrganizationChart</h1>
|
|
||||||
<p>OrganizationChart visualizes hierarchical organization data.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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">
|
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
||||||
<template #person="slotProps">
|
<template #person="slotProps">
|
||||||
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
|
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
|
||||||
|
|
@ -507,16 +498,14 @@ export default {
|
||||||
<template #default="slotProps">
|
<template #default="slotProps">
|
||||||
<span>{{slotProps.node.data.label}}</span>
|
<span>{{slotProps.node.data.label}}</span>
|
||||||
</template>
|
</template>
|
||||||
</OrganizationChart>
|
</OrganizationChart>
|
||||||
|
|
||||||
<h3>Basic</h3>
|
<h3>Basic</h3>
|
||||||
<OrganizationChart :value="data2">
|
<OrganizationChart :value="data2">
|
||||||
<template #default="slotProps">
|
<template #default="slotProps">
|
||||||
<span>{{slotProps.node.data.label}}</span>
|
<span>{{slotProps.node.data.label}}</span>
|
||||||
</template>
|
</template>
|
||||||
</OrganizationChart>
|
</OrganizationChart>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -146,24 +146,11 @@ toggle(event) {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>OverlayPanel</h1>
|
|
||||||
<p>OverlayPanel is a container component that can overlay other components on page.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
|
||||||
|
|
||||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
|
||||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||||
</OverlayPanel>
|
</OverlayPanel>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -235,21 +235,11 @@ onPage(event) {
|
||||||
<span>View on GitHub</span>
|
<span>View on GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Paginator</h1>
|
|
||||||
<p>Paginator is a generic component to display content in paged format.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Custom</h3>
|
||||||
<h3>Basic</h3>
|
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
|
||||||
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
|
||||||
|
|
||||||
<h3>Custom</h3>
|
|
||||||
<Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
|
|
||||||
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
||||||
<template #left>
|
<template #left>
|
||||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||||
|
|
@ -257,16 +247,11 @@ onPage(event) {
|
||||||
<template #right>
|
<template #right>
|
||||||
<Button type="button" icon="pi pi-search" />
|
<Button type="button" icon="pi pi-search" />
|
||||||
</template>
|
</template>
|
||||||
</Paginator>
|
</Paginator>
|
||||||
|
|
||||||
<div class="image-gallery">
|
<div class="image-gallery">
|
||||||
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<PaginatorDoc />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
|
|
|
||||||
|
|
@ -158,34 +158,21 @@ import Panel from 'primevue/panel';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Regular</h3>
|
||||||
<div>
|
<Panel header="Godfather I">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Panel</h1>
|
|
||||||
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<h3 class="first">Regular</h3>
|
|
||||||
<Panel header="Godfather I">
|
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</Panel>
|
</Panel>
|
||||||
|
|
||||||
<h3>Toggleable</h3>
|
<h3>Toggleable</h3>
|
||||||
<Panel header="Godfather I" :toggleable="true">
|
<Panel header="Godfather I" :toggleable="true">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
|
||||||
|
|
@ -96,20 +96,7 @@ import Password from 'primevue/password';
|
||||||
<span>View on GitHub</span>
|
<span>View on GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template>
|
<Password v-model="value" />
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Password</h1>
|
|
||||||
<p>Password displays strength indicator for password fields.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Password v-model="value" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
|
|
|
||||||
|
|
@ -220,16 +220,7 @@ import PickList from 'primevue/picklist';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>PickList</h1>
|
|
||||||
<p>PickList is used to reorder items between different lists.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
|
|
||||||
<template #sourceHeader>
|
<template #sourceHeader>
|
||||||
Available
|
Available
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -242,11 +233,7 @@ import PickList from 'primevue/picklist';
|
||||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</PickList>
|
</PickList>
|
||||||
</div>
|
|
||||||
|
|
||||||
<PickListDoc />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -104,27 +104,14 @@ data() {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Dynamic</h3>
|
||||||
<div>
|
<ProgressBar :value="value1" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>ProgressBar</h1>
|
|
||||||
<p>ProgressBar is a process status indicator.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Static</h3>
|
||||||
<h3 class="first">Dynamic</h3>
|
<ProgressBar :value="value2" :showValue="false" />
|
||||||
<ProgressBar :value="value1" />
|
|
||||||
|
|
||||||
<h3>Static</h3>
|
<h3>Indeterminate</h3>
|
||||||
<ProgressBar :value="value2" :showValue="false" />
|
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||||
|
|
||||||
<h3>Indeterminate</h3>
|
|
||||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -108,24 +108,11 @@ import ProgressSpinner from 'primevue/progressspinner';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<div>
|
<h3>Basic</h3>
|
||||||
<div class="content-section introduction">
|
<ProgressSpinner />
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>ProgressSpinner</h1>
|
|
||||||
<p>ProgressSpinner is a process status indicator.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Custom</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||||
<ProgressSpinner />
|
|
||||||
|
|
||||||
<h3>Custom</h3>
|
|
||||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ProgressSpinnerDoc/>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
|
||||||
|
|
@ -137,18 +137,8 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<div class="p-grid">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>RadioButton</h1>
|
|
||||||
<p>RadioButton is an extension to standard radio button element with theming.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<h3 class="first">Basic</h3>
|
|
||||||
<div class="p-grid">
|
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||||
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
<label for="city1" class="p-radiobutton-label">Chicago</label>
|
||||||
|
|
@ -165,20 +155,17 @@ export default {
|
||||||
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
<RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
|
||||||
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
<label for="city4" class="p-radiobutton-label">San Francisco</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
|
<p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
|
||||||
|
|
||||||
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
<h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
<div v-for="theme of themes" :key="theme.key" class="p-col-12">
|
||||||
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
<RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
|
||||||
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
<label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
|
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -139,30 +139,17 @@ import Rating from 'primevue/rating';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic {{val1}}</h3>
|
||||||
<div>
|
<Rating v-model="val1" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Rating</h1>
|
|
||||||
<p>Rating component is a star based selection input.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>No Cancel {{val2}}</h3>
|
||||||
<h3 class="first">Basic {{val1}}</h3>
|
<Rating v-model="val2" :cancel="false" />
|
||||||
<Rating v-model="val1" />
|
|
||||||
|
|
||||||
<h3>No Cancel {{val2}}</h3>
|
<h3>ReadOnly</h3>
|
||||||
<Rating v-model="val2" :cancel="false" />
|
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
||||||
|
|
||||||
<h3>ReadOnly</h3>
|
<h3>Disabled</h3>
|
||||||
<Rating :value="5" :readonly="true" :stars="10" :cancel="false" />
|
<Rating :value="8" :disabled="true" :stars="10" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
|
||||||
<Rating :value="8" :disabled="true" :stars="10" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -154,37 +154,24 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Single</h3>
|
||||||
<div>
|
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||||
<div class="content-section introduction">
|
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>SelectButton</h1>
|
|
||||||
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Multiple</h3>
|
||||||
<h3 class="first">Single</h3>
|
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
||||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
||||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
|
||||||
|
|
||||||
<h3>Multiple</h3>
|
<h3>Custom Content</h3>
|
||||||
<SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" />
|
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||||
<p>Selected Cars: <span style="font-weight: bold">{{selectedCars}}</span></p>
|
|
||||||
|
|
||||||
<h3>Custom Content</h3>
|
|
||||||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
|
||||||
<template #option="slotProps">
|
<template #option="slotProps">
|
||||||
<div style="text-align: center; padding: 1em; width: 125px">
|
<div style="text-align: center; padding: 1em; width: 125px">
|
||||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</SelectButton>
|
</SelectButton>
|
||||||
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -198,54 +198,41 @@ import Sidebar from 'primevue/sidebar';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||||
<div>
|
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Sidebar</h1>
|
|
||||||
<p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
|
||||||
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
||||||
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
|
||||||
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
<h1 style="fontWeight:normal">Right Sidebar</h1>
|
||||||
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
|
||||||
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
<h1 style="fontWeight:normal">Top Sidebar</h1>
|
||||||
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
|
||||||
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
|
||||||
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
|
||||||
<h1 style="fontWeight:normal">Full Screen</h1>
|
<h1 style="fontWeight:normal">Full Screen</h1>
|
||||||
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||||
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
|
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
|
||||||
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -173,34 +173,21 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic: {{value1}}</h3>
|
||||||
<div>
|
<Slider v-model="value1" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Slider</h1>
|
|
||||||
<p>Slider is an input component to provide a numerical input.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Input: {{value2}}</h3>
|
||||||
<h3 class="first">Basic: {{value1}}</h3>
|
<InputText v-model.number="value2" />
|
||||||
<Slider v-model="value1" />
|
<Slider v-model="value2" />
|
||||||
|
|
||||||
<h3>Input: {{value2}}</h3>
|
<h3>Step: {{value3}}</h3>
|
||||||
<InputText v-model.number="value2" />
|
<Slider v-model="value3" :step="20" />
|
||||||
<Slider v-model="value2" />
|
|
||||||
|
|
||||||
<h3>Step: {{value3}}</h3>
|
<h3>Range: {{value4}}</h3>
|
||||||
<Slider v-model="value3" :step="20" />
|
<Slider v-model="value4" :range="true" />
|
||||||
|
|
||||||
<h3>Range: {{value4}}</h3>
|
<h3>Vertical: {{value5}}</h3>
|
||||||
<Slider v-model="value4" :range="true" />
|
<Slider v-model="value5" orientation="vertical" />
|
||||||
|
|
||||||
<h3>Vertical: {{value5}}</h3>
|
|
||||||
<Slider v-model="value5" orientation="vertical" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -110,30 +110,17 @@ import Spinner from 'primevue/spinner';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Spinner v-model="value1" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Spinner</h1>
|
|
||||||
<p>Spinner is an input component to provide a numerical input.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Min/Max</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Spinner v-model="value2" :min="0" :max="100" />
|
||||||
<Spinner v-model="value1" />
|
|
||||||
|
|
||||||
<h3>Min/Max</h3>
|
<h3>Step</h3>
|
||||||
<Spinner v-model="value2" :min="0" :max="100" />
|
<Spinner v-model="value3" :step="0.25" />
|
||||||
|
|
||||||
<h3>Step</h3>
|
<h3>Disabled</h3>
|
||||||
<Spinner v-model="value3" :step="0.25" />
|
<Spinner v-model="value4" :disabled="true" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
|
||||||
<Spinner v-model="value4" :disabled="true" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -190,21 +190,16 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>SplitButton</h1>
|
|
||||||
<p>SplitButton groups a set of commands in an overlay with a default command.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Severities</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
|
||||||
</div>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
|
||||||
</div>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
|
||||||
</template>
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
|
||||||
|
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -236,18 +236,8 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Default</h3>
|
||||||
<div>
|
<TabView>
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>TabView</h1>
|
|
||||||
<p>TabView is a container component to group content with tabs.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<h3 class="first">Default</h3>
|
|
||||||
<TabView>
|
|
||||||
<TabPanel header="Godfather I">
|
<TabPanel header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
|
|
@ -263,16 +253,16 @@ export default {
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
||||||
<h3>Programmatic</h3>
|
<h3>Programmatic</h3>
|
||||||
<div style="padding: .5em 0">
|
<div style="padding: .5em 0">
|
||||||
<Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" />
|
<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(1)" class="p-button-secondary" label="Activate 2st" />
|
||||||
<Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" />
|
<Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Godfather I" :active.sync="active[0]">
|
<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,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
|
|
@ -288,10 +278,10 @@ export default {
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
<h3>Disabled</h3>
|
||||||
<TabView>
|
<TabView>
|
||||||
<TabPanel header="Godfather I">
|
<TabPanel header="Godfather I">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||||
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
|
||||||
|
|
@ -308,10 +298,10 @@ export default {
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
<TabPanel header="Godfather IV" :disabled="true"></TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
||||||
<h3>Custom Headers</h3>
|
<h3>Custom Headers</h3>
|
||||||
<TabView class="tabview-custom">
|
<TabView class="tabview-custom">
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
<template slot="header">
|
<template slot="header">
|
||||||
<i class="pi pi-calendar"></i>
|
<i class="pi pi-calendar"></i>
|
||||||
|
|
@ -340,10 +330,7 @@ export default {
|
||||||
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
|
||||||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -97,27 +97,14 @@ import Textarea from 'primevue/textarea';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<Textarea v-model="value1" rows="5" cols="30" />
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Textarea</h1>
|
|
||||||
<p>Textarea is a multi-line text input element.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Auto Resize</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
||||||
<Textarea v-model="value1" rows="5" cols="30" />
|
|
||||||
|
|
||||||
<h3>Auto Resize</h3>
|
<h3>Disabled</h3>
|
||||||
<Textarea v-model="value2" :autoResize="true" rows="5" cols="30" />
|
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||||
|
|
||||||
<h3>Disabled</h3>
|
|
||||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -248,18 +248,8 @@ this.$toast.removeAllGroups();
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Severities</h3>
|
||||||
<div>
|
<div class="p-grid">
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>Toast</h1>
|
|
||||||
<p>Toast is used to display messages in an overlay.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation p-fluid">
|
|
||||||
<h3>Severities</h3>
|
|
||||||
<div class="p-grid">
|
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
<Button label="Success" class="p-button-success" @click="showSuccess" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -272,10 +262,10 @@ this.$toast.removeAllGroups();
|
||||||
<div class="p-col-12 p-md-3">
|
<div class="p-col-12 p-md-3">
|
||||||
<Button label="Error" class="p-button-danger" @click="showError" />
|
<Button label="Error" class="p-button-danger" @click="showError" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Positions</h3>
|
<h3>Positions</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<Button label="Top Left" @click="showTopLeft" />
|
<Button label="Top Left" @click="showTopLeft" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -285,23 +275,20 @@ this.$toast.removeAllGroups();
|
||||||
<div class="p-col-12 p-md-4">
|
<div class="p-col-12 p-md-4">
|
||||||
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
<Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-6">
|
<div class="p-col-12 p-md-6">
|
||||||
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
<Button @click="showMultiple" label="Multiple" class="p-button-warning" />
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6">
|
<div class="p-col-12 p-md-6">
|
||||||
<Button @click="showSticky" label="Sticky" />
|
<Button @click="showSticky" label="Sticky" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Remove All</h3>
|
<h3>Remove All</h3>
|
||||||
<Button @click="clear" label="Clear" />
|
<Button @click="clear" label="Clear" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -178,26 +178,13 @@ export default {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<h3>Basic</h3>
|
||||||
<div>
|
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||||
<div class="content-section introduction">
|
<p style="font-weight: bold">{{checked1}}</p>
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>ToggleButton</h1>
|
|
||||||
<p>ToggleButton is used to select a boolean value using a button.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
<h3>Customized</h3>
|
||||||
<h3 class="first">Basic</h3>
|
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
|
||||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
<p style="font-weight: bold">{{checked2}}</p>
|
||||||
<p style="font-weight: bold">{{checked1}}</p>
|
|
||||||
|
|
||||||
<h3>Customized</h3>
|
|
||||||
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
|
|
||||||
<p style="font-weight: bold">{{checked2}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -63,17 +63,7 @@ import Toolbar from 'primevue/toolbar';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<Toolbar>
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<Toolbar>
|
|
||||||
<template slot="left">
|
<template slot="left">
|
||||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||||
|
|
@ -86,10 +76,7 @@ import Toolbar from 'primevue/toolbar';
|
||||||
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
|
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
|
||||||
<Button icon="pi pi-times" class="p-button-danger" />
|
<Button icon="pi pi-times" class="p-button-danger" />
|
||||||
</template>
|
</template>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -117,21 +117,8 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<template>
|
<TriStateCheckbox v-model="value" />
|
||||||
<div>
|
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||||
<div class="content-section introduction">
|
|
||||||
<div class="feature-intro">
|
|
||||||
<h1>TriStateCheckbox</h1>
|
|
||||||
<p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-section implementation">
|
|
||||||
<TriStateCheckbox v-model="value" />
|
|
||||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue