Demo update on source codes

pull/41/head
cagataycivici 2019-08-04 15:19:34 +03:00
parent 84fb736e1f
commit dad730398f
54 changed files with 1338 additions and 2013 deletions

View File

@ -273,18 +273,8 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Default&lt;/h3&gt;
&lt;div&gt; &lt;Accordion&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;AccordionPanel&lt;/h1&gt;
&lt;p&gt;AccordionPanel groups a collection of contents in tabs.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;Accordion&gt;
&lt;AccordionTab header="Godfather I"&gt; &lt;AccordionTab header="Godfather I"&gt;
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.
&lt;/AccordionTab&gt; &lt;/AccordionTab&gt;
&lt;/Accordion&gt; &lt;/Accordion&gt;
&lt;h3&gt;Multiple&lt;/h3&gt; &lt;h3&gt;Multiple&lt;/h3&gt;
&lt;Accordion :multiple="true"&gt; &lt;Accordion :multiple="true"&gt;
&lt;AccordionTab header="Godfather I"&gt; &lt;AccordionTab header="Godfather I"&gt;
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 {
&lt;/AccordionTab&gt; &lt;/AccordionTab&gt;
&lt;AccordionTab header="Godfather IV" :disabled="true"&gt; &lt;AccordionTab header="Godfather IV" :disabled="true"&gt;
&lt;/AccordionTab&gt; &lt;/AccordionTab&gt;
&lt;/Accordion&gt; &lt;/Accordion&gt;
&lt;h3&gt;Programmatic&lt;/h3&gt; &lt;h3&gt;Programmatic&lt;/h3&gt;
&lt;div style="padding: .5em 0"&gt; &lt;div style="padding: .5em 0"&gt;
&lt;Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" /&gt; &lt;Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" /&gt;
&lt;Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" /&gt; &lt;Button :icon="active2 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 2nd" @click="active2 = !active2" class="p-button-secondary" style="margin-left: .5em" /&gt;
&lt;Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" /&gt; &lt;Button :icon="active3 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 3rd" @click="active3 = !active3" class="p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;Accordion :multiple="true"&gt; &lt;Accordion :multiple="true"&gt;
&lt;AccordionTab header="Godfather I" :active="active1"&gt; &lt;AccordionTab header="Godfather I" :active="active1"&gt;
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.
&lt;/AccordionTab&gt; &lt;/AccordionTab&gt;
&lt;/Accordion&gt; &lt;/Accordion&gt;
&lt;h3&gt;Custom Headers&lt;/h3&gt; &lt;h3&gt;Custom Headers&lt;/h3&gt;
&lt;Accordion class="accordion-custom"&gt; &lt;Accordion class="accordion-custom"&gt;
&lt;AccordionTab&gt; &lt;AccordionTab&gt;
&lt;template slot="header"&gt; &lt;template slot="header"&gt;
&lt;i class="pi pi-calendar"&gt;&lt;/i&gt; &lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
@ -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.
&lt;/AccordionTab&gt; &lt;/AccordionTab&gt;
&lt;/Accordion&gt; &lt;/Accordion&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -257,41 +257,28 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" /&gt;
&lt;div class="content-section introduction"&gt; &lt;span style="marginLeft: .5em"&gt;Country: {{selectedCountry || 'none'}}&lt;/span&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;AutoComplete&lt;/h1&gt;
&lt;p&gt;AutoComplete is an input component that provides real-time suggestions when being typed.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Dropdown and Templating&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" /&gt;
&lt;span style="marginLeft: .5em"&gt;Country: {{selectedCountry || 'none'}}&lt;/span&gt;
&lt;h3&gt;Dropdown and Templating&lt;/h3&gt;
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-clearfix p-autocomplete-brand-item"&gt; &lt;div class="p-clearfix p-autocomplete-brand-item"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt; &lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt; &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/AutoComplete&gt; &lt;/AutoComplete&gt;
&lt;span style="marginLeft: .5em"&gt;Brand: {{brand || 'none'}}&lt;/span&gt; &lt;span style="marginLeft: .5em"&gt;Brand: {{brand || 'none'}}&lt;/span&gt;
&lt;h3&gt;Multiple&lt;/h3&gt; &lt;h3&gt;Multiple&lt;/h3&gt;
&lt;span class="p-fluid"&gt; &lt;span class="p-fluid"&gt;
&lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt; &lt;AutoComplete :multiple="true" v-model="selectedCountries" :suggestions="filteredCountriesMultiple" @complete="searchCountryMultiple($event)" field="name" /&gt;
&lt;/span&gt; &lt;/span&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li v-for="(c,i) of selectedCountries" :key="i"&gt;{{c}}&lt;/li&gt; &lt;li v-for="(c,i) of selectedCountries" :key="i"&gt;{{c}}&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -129,49 +129,36 @@ import Button from 'primevue/button';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Button label="Click" /&gt;
&lt;div class="content-section introduction"&gt; &lt;Button label="Click" icon="pi pi-check" /&gt;
&lt;div class="feature-intro"&gt; &lt;Button label="Click" icon="pi pi-check" iconPos="right" /&gt;
&lt;h1&gt;Button&lt;/h1&gt; &lt;Button icon="pi pi-check" /&gt;
&lt;p&gt;Button is an extension to standard button element with icons and theming.&lt;/p&gt; &lt;Button label="Click" disabled="disabled" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Severities&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;Button label="Primary" /&gt;
&lt;Button label="Click" /&gt; &lt;Button label="Secondary" class="p-button-secondary" /&gt;
&lt;Button label="Click" icon="pi pi-check" /&gt; &lt;Button label="Success" class="p-button-success" /&gt;
&lt;Button label="Click" icon="pi pi-check" iconPos="right" /&gt; &lt;Button label="Info" class="p-button-info" /&gt;
&lt;Button icon="pi pi-check" /&gt; &lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Click" disabled="disabled" /&gt; &lt;Button label="Danger" class="p-button-danger" /&gt;
&lt;h3&gt;Severities&lt;/h3&gt; &lt;h3&gt;Raised Buttons&lt;/h3&gt;
&lt;Button label="Primary" /&gt; &lt;Button label="Primary" class="p-button-raised" /&gt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt; &lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-success" /&gt; &lt;Button label="Success" class="p-button-raised p-button-success" /&gt;
&lt;Button label="Info" class="p-button-info" /&gt; &lt;Button label="Info" class="p-button-raised p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-warning" /&gt; &lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt; &lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt;
&lt;h3&gt;Raised Buttons&lt;/h3&gt; &lt;h3&gt;Rounded Buttons&lt;/h3&gt;
&lt;Button label="Primary" class="p-button-raised" /&gt; &lt;Button label="Primary" class="p-button-rounded" /&gt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt; &lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-raised p-button-success" /&gt; &lt;Button label="Success" class="p-button-rounded p-button-success" /&gt;
&lt;Button label="Info" class="p-button-raised p-button-info" /&gt; &lt;Button label="Info" class="p-button-rounded p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt; &lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt; &lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
&lt;h3&gt;Rounded Buttons&lt;/h3&gt;
&lt;Button label="Primary" class="p-button-rounded" /&gt;
&lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-rounded p-button-success" /&gt;
&lt;Button label="Info" class="p-button-rounded p-button-info" /&gt;
&lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
&lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -534,16 +534,7 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;div class="p-grid p-fluid"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Calendar&lt;/h1&gt;
&lt;p&gt;Calendar is an input component to select a date.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation" style="padding-top:0"&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4"&gt;
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;Calendar v-model="date1" /&gt; &lt;Calendar v-model="date1" /&gt;
@ -609,12 +600,10 @@ export default {
&lt;h3&gt;Touch UI&lt;/h3&gt; &lt;h3&gt;Touch UI&lt;/h3&gt;
&lt;Calendar v-model="date13" :touchUI="true" /&gt; &lt;Calendar v-model="date13" :touchUI="true" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Inline&lt;/h3&gt; &lt;h3&gt;Inline&lt;/h3&gt;
&lt;Calendar v-model="date14" :inline="true" :showWeek="true" /&gt; &lt;Calendar v-model="date14" :inline="true" :showWeek="true" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -81,17 +81,7 @@ import Card from 'primevue/card';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Card style="width: 25em; margin-bottom: 2em"&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Card&lt;/h1&gt;
&lt;p&gt;Card is a flexible container component.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Card style="width: 25em; margin-bottom: 2em"&gt;
&lt;template slot="title"&gt; &lt;template slot="title"&gt;
Simple Card Simple Card
&lt;/template&gt; &lt;/template&gt;
@ -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!
&lt;/template&gt; &lt;/template&gt;
&lt;/Card&gt; &lt;/Card&gt;
&lt;Card style="width: 25em"&gt; &lt;Card style="width: 25em"&gt;
&lt;template slot="header"&gt; &lt;template slot="header"&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt; &lt;img alt="user header" src="demo/images/usercard.png"&gt;
&lt;/template&gt; &lt;/template&gt;
@ -116,10 +106,7 @@ import Card from 'primevue/card';
&lt;Button icon="pi pi-check" label="Save" class="p-button-raised" /&gt; &lt;Button icon="pi pi-check" label="Save" class="p-button-raised" /&gt;
&lt;Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" /&gt; &lt;Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Card&gt; &lt;/Card&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

View File

@ -4,30 +4,17 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3 class="vertical"&gt;Vertical&lt;/h3&gt;
&lt;div&gt; &lt;Chart type="bar" :data="basicData" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;BarChart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;h3 class="vertical"&gt;Vertical&lt;/h3&gt; &lt;Chart type="horizontalBar" :data="basicData" /&gt;
&lt;Chart type="bar" :data="basicData" /&gt;
&lt;h3&gt;Horizontal&lt;/h3&gt; &lt;h3&gt;Multi Axis&lt;/h3&gt;
&lt;Chart type="horizontalBar" :data="basicData" /&gt; &lt;Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/&gt;
&lt;h3&gt;Multi Axis&lt;/h3&gt; &lt;h3&gt;Stacked&lt;/h3&gt;
&lt;Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/&gt; &lt;Chart type="bar" :data="stackedData" :options="stackedOptions"/&gt;
&lt;h3&gt;Stacked&lt;/h3&gt;
&lt;Chart type="bar" :data="stackedData" :options="stackedOptions"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -4,20 +4,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Combo Chart&lt;/h1&gt;
&lt;p&gt;Different chart types can be combined in the same graph.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -4,20 +4,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Chart type="doughnut" :data="chartData" /&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;DoughnutChart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Chart type="doughnut" :data="chartData" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -4,27 +4,14 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Chart type="line" :data="basicData" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Line Chart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Multi Axis&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;Chart type="line" :data="multiAxisData" :options="multiAxisOptions" /&gt;
&lt;Chart type="line" :data="basicData" /&gt;
&lt;h3&gt;Multi Axis&lt;/h3&gt; &lt;h3&gt;Line Styles&lt;/h3&gt;
&lt;Chart type="line" :data="multiAxisData" :options="multiAxisOptions" /&gt; &lt;Chart type="line" :data="lineStylesData" /&gt;
&lt;h3&gt;Line Styles&lt;/h3&gt;
&lt;Chart type="line" :data="lineStylesData" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -4,20 +4,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Chart type="pie" :data="chartData" /&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Pie Chart&lt;/h1&gt;
&lt;p&gt;A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Chart type="pie" :data="chartData" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -4,20 +4,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Chart type="polarArea" :data="chartData" /&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Polar Area Chart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Chart type="polarArea" :data="chartData" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -4,20 +4,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Chart type="radar" :data="chartData" /&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Radar Chart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Chart type="radar" :data="chartData" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -145,22 +145,12 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Checkbox id="binary" v-model="checked" :binary="true"/&gt;
&lt;div class="content-section introduction"&gt; &lt;label for="binary" class="p-checkbox-label" style="font-weight: bold"&gt;{{checked}}&lt;/label&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Checkbox&lt;/h1&gt;
&lt;p&gt;Checkbox is an extension to standard checkbox element with theming.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Multiple&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;div class="p-grid"&gt;
&lt;Checkbox id="binary" v-model="checked" :binary="true"/&gt;
&lt;label for="binary" class="p-checkbox-label" style="font-weight: bold"&gt;{{checked}}&lt;/label&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt; &lt;div class="p-col-12"&gt;
&lt;Checkbox id="city1" name="city" value="Chicago" v-model="cities" /&gt; &lt;Checkbox id="city1" name="city" value="Chicago" v-model="cities" /&gt;
&lt;label for="city1" class="p-checkbox-label"&gt;Chicago&lt;/label&gt; &lt;label for="city1" class="p-checkbox-label"&gt;Chicago&lt;/label&gt;
@ -177,20 +167,17 @@ export default {
&lt;Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /&gt; &lt;Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /&gt;
&lt;label for="city4" class="p-checkbox-label"&gt;San Francisco&lt;/label&gt; &lt;label for="city4" class="p-checkbox-label"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;p&gt;Selected Cities : &lt;span style="font-weight: bold"&gt;{{cities}}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Selected Cities : &lt;span style="font-weight: bold"&gt;{{cities}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt; &lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt; &lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt;
&lt;Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/&gt; &lt;Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/&gt;
&lt;label :for="theme.key" class="p-checkbox-label"&gt;{{theme.name}}&lt;/label&gt; &lt;label :for="theme.key" class="p-checkbox-label"&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;p&gt;Selected Themes: &lt;span style="font-weight: bold"&gt;{{this.selectedThemes}}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Selected Themes: &lt;span style="font-weight: bold"&gt;{{this.selectedThemes}}&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -144,31 +144,18 @@ import Chips from 'primevue/chips';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Chips v-model="value1" /&gt;
&lt;div class="content-section introduction p-fluid"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Chips&lt;/h1&gt;
&lt;p&gt;Chips is used to enter multiple values on an input field.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Template&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;Chips v-model="value2"&gt;
&lt;Chips v-model="value1" /&gt;
&lt;h3&gt;Template&lt;/h3&gt;
&lt;Chips v-model="value2"&gt;
&lt;template #chip="slotProps"&gt; &lt;template #chip="slotProps"&gt;
&lt;div&gt; &lt;div&gt;
&lt;span&gt;{{slotProps.value}} - (active) &lt;/span&gt; &lt;span&gt;{{slotProps.value}} - (active) &lt;/span&gt;
&lt;i class="pi pi-user-plus" style="font-size: 14px"&gt;&lt;/i&gt; &lt;i class="pi pi-user-plus" style="font-size: 14px"&gt;&lt;/i&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Chips&gt; &lt;/Chips&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -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">

View File

@ -415,17 +415,7 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;DataView&lt;/h1&gt;
&lt;p&gt;DataView displays data in grid or list layout with pagination and sorting features.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation dataview-demo"&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt; &lt;div class="p-col-6" style="text-align: left"&gt;
@ -469,9 +459,7 @@ export default {
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -73,36 +73,25 @@ import DeferredContent from 'primevue/deferredcontent';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;div style="height: 800px"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;DeferredContent&lt;/h1&gt;
&lt;p&gt;DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll..&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;div style="height: 800px"&gt;
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.
&lt;/div&gt; &lt;/div&gt;
&lt;DeferredContent @load="onImageLoad"&gt; &lt;DeferredContent @load="onImageLoad"&gt;
&lt;img src="demo/images/nature/nature4.jpg" alt="Nature"/&gt; &lt;img src="demo/images/nature/nature4.jpg" alt="Nature"/&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
&lt;div style="height: 500px"&gt; &lt;div style="height: 500px"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;DeferredContent @load="onDataLoad"&gt; &lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -203,18 +203,8 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="open" /&gt;
&lt;div&gt; &lt;Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Dialog&lt;/h1&gt;
&lt;p&gt;Dialog is a container to display content in an overlay window.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="open" /&gt;
&lt;Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true"&gt;
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 {
&lt;Button label="Yes" icon="pi pi-check" @click="close" /&gt; &lt;Button label="Yes" icon="pi pi-check" @click="close" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/&gt; &lt;Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -245,34 +245,21 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Dropdown&lt;/h1&gt;
&lt;p&gt;Dropdown is used to select an item from a list of options.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Editable&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/&gt;
&lt;Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
&lt;h3&gt;Editable&lt;/h3&gt; &lt;h3&gt;Advanced with Templating, Filtering and Clear Icon&lt;/h3&gt;
&lt;Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/&gt; &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;h3&gt;Advanced with Templating, Filtering and Clear Icon&lt;/h3&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt; &lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Dropdown&gt; &lt;/Dropdown&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -144,21 +144,11 @@ npm install quill --save
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Default&lt;/h3&gt;
&lt;div&gt; &lt;Editor v-model="value1" editorStyle="height: 320px"/&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Editor&lt;/h1&gt;
&lt;p&gt;Editor is rich text editor component based on Quill.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Customized&lt;/h3&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt; &lt;Editor v-model="value2" editorStyle="height: 320px"&gt;
&lt;Editor v-model="value1" editorStyle="height: 320px"/&gt;
&lt;h3&gt;Customized&lt;/h3&gt;
&lt;Editor v-model="value2" editorStyle="height: 320px"&gt;
&lt;template slot="toolbar"&gt; &lt;template slot="toolbar"&gt;
&lt;span class="ql-formats"&gt; &lt;span class="ql-formats"&gt;
&lt;button class="ql-bold"&gt;&lt;/button&gt; &lt;button class="ql-bold"&gt;&lt;/button&gt;
@ -166,10 +156,7 @@ npm install quill --save
&lt;button class="ql-underline"&gt;&lt;/button&gt; &lt;button class="ql-underline"&gt;&lt;/button&gt;
&lt;/span&gt; &lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Editor&gt; &lt;/Editor&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -154,34 +154,21 @@ import Fieldset from 'primevue/fieldset';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Regular&lt;/h3&gt;
&lt;div&gt; &lt;Fieldset legend="Godfather I"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Fieldset&lt;/h1&gt;
&lt;p&gt;Fieldset is a grouping component with the optional content toggle feature.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Regular&lt;/h3&gt;
&lt;Fieldset legend="Godfather I"&gt;
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.
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
&lt;h3&gt;Toggleable&lt;/h3&gt; &lt;h3&gt;Toggleable&lt;/h3&gt;
&lt;Fieldset legend="Godfather I" :toggleable="true"&gt; &lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
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.
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -251,27 +251,14 @@ import FileUpload from 'primevue/fileupload';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Advanced&lt;/h3&gt;
&lt;div&gt; &lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;FileUpload&lt;/h1&gt;
&lt;p&gt;FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;h3&gt;Advanced&lt;/h3&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" /&gt;
&lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" /&gt;
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic with Auto&lt;/h3&gt;
&lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" /&gt;
&lt;h3&gt;Basic with Auto&lt;/h3&gt;
&lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -574,19 +574,8 @@ import 'primeflex/primeflex.css';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;div class="p-grid"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;FlexGrid&lt;/h1&gt;
&lt;p&gt;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 &lt;a href="https://github.com/primefaces/primeflex"&gt;PrimeFlex&lt;/a&gt; , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation flexgrid-demo"&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -596,22 +585,22 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt; &lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Dynamic&lt;/h3&gt; &lt;h3&gt;Dynamic&lt;/h3&gt;
&lt;Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" /&gt; &lt;Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" /&gt;
&lt;Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" /&gt; &lt;Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" /&gt;
&lt;div style="margin-top: .5em"&gt; &lt;div style="margin-top: .5em"&gt;
&lt;transition-group name="dynamic-box" tag="div" class="p-grid"&gt; &lt;transition-group name="dynamic-box" tag="div" class="p-grid"&gt;
&lt;div v-for="col of columns" :key="col" class="p-col"&gt; &lt;div v-for="col of columns" :key="col" class="p-col"&gt;
&lt;div class="box"&gt;{{col}}&lt;/div&gt; &lt;div class="box"&gt;{{col}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/transition-group&gt; &lt;/transition-group&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Reverse Direction&lt;/h3&gt; &lt;h3&gt;Reverse Direction&lt;/h3&gt;
&lt;div class="p-grid p-dir-rev"&gt; &lt;div class="p-grid p-dir-rev"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -621,10 +610,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt; &lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Column Direction&lt;/h3&gt; &lt;h3&gt;Column Direction&lt;/h3&gt;
&lt;div class="p-grid p-dir-col"&gt; &lt;div class="p-grid p-dir-col"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -634,10 +623,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt; &lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Reverse Column Direction&lt;/h3&gt; &lt;h3&gt;Reverse Column Direction&lt;/h3&gt;
&lt;div class="p-grid p-dir-col-rev"&gt; &lt;div class="p-grid p-dir-col-rev"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -647,10 +636,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt; &lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;12 Column Grid&lt;/h3&gt; &lt;h3&gt;12 Column Grid&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -678,9 +667,9 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -690,9 +679,9 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-8"&gt; &lt;div class="p-col-8"&gt;
&lt;div class="box"&gt;8&lt;/div&gt; &lt;div class="box"&gt;8&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -702,10 +691,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;MultiLine&lt;/h3&gt; &lt;h3&gt;MultiLine&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-6"&gt; &lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt; &lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -718,20 +707,20 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-6"&gt; &lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt; &lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Fixed Width Column&lt;/h3&gt; &lt;h3&gt;Fixed Width Column&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-fixed" style="width:100px"&gt; &lt;div class="p-col-fixed" style="width:100px"&gt;
&lt;div class="box"&gt;100px&lt;/div&gt; &lt;div class="box"&gt;100px&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;auto&lt;/div&gt; &lt;div class="box"&gt;auto&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Responsive&lt;/h3&gt; &lt;h3&gt;Responsive&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt; &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt; &lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -744,10 +733,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt; &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt; &lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Start&lt;/h3&gt; &lt;h3&gt;Horizontal Alignment - Start&lt;/h3&gt;
&lt;div class="p-grid p-justify-start"&gt; &lt;div class="p-grid p-justify-start"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -757,10 +746,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - End&lt;/h3&gt; &lt;h3&gt;Horizontal Alignment - End&lt;/h3&gt;
&lt;div class="p-grid p-justify-end"&gt; &lt;div class="p-grid p-justify-end"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -770,10 +759,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Center&lt;/h3&gt; &lt;h3&gt;Horizontal Alignment - Center&lt;/h3&gt;
&lt;div class="p-grid p-justify-center"&gt; &lt;div class="p-grid p-justify-center"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -783,10 +772,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Between&lt;/h3&gt; &lt;h3&gt;Horizontal Alignment - Between&lt;/h3&gt;
&lt;div class="p-grid p-justify-between"&gt; &lt;div class="p-grid p-justify-between"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -796,10 +785,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Around&lt;/h3&gt; &lt;h3&gt;Horizontal Alignment - Around&lt;/h3&gt;
&lt;div class="p-grid p-justify-around"&gt; &lt;div class="p-grid p-justify-around"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -809,10 +798,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Even&lt;/h3&gt; &lt;h3&gt;Horizontal Alignment - Even&lt;/h3&gt;
&lt;div class="p-grid p-justify-even"&gt; &lt;div class="p-grid p-justify-even"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -822,10 +811,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Start&lt;/h3&gt; &lt;h3&gt;Vertical Alignment - Start&lt;/h3&gt;
&lt;div class="p-grid p-align-start vertical-container"&gt; &lt;div class="p-grid p-align-start vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -835,10 +824,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - End&lt;/h3&gt; &lt;h3&gt;Vertical Alignment - End&lt;/h3&gt;
&lt;div class="p-grid p-align-end vertical-container"&gt; &lt;div class="p-grid p-align-end vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -848,10 +837,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Center&lt;/h3&gt; &lt;h3&gt;Vertical Alignment - Center&lt;/h3&gt;
&lt;div class="p-grid p-align-center vertical-container"&gt; &lt;div class="p-grid p-align-center vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -861,10 +850,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Stretch&lt;/h3&gt; &lt;h3&gt;Vertical Alignment - Stretch&lt;/h3&gt;
&lt;div class="p-grid p-align-stretch vertical-container"&gt; &lt;div class="p-grid p-align-stretch vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt; &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -874,10 +863,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt; &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Per Column&lt;/h3&gt; &lt;h3&gt;Vertical Alignment - Per Column&lt;/h3&gt;
&lt;div class="p-grid vertical-container"&gt; &lt;div class="p-grid vertical-container"&gt;
&lt;div class="p-col p-col-align-start"&gt; &lt;div class="p-col p-col-align-start"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -887,26 +876,26 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col p-col-align-end"&gt; &lt;div class="p-col p-col-align-end"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Offset&lt;/h3&gt; &lt;h3&gt;Offset&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-6 p-offset-3"&gt; &lt;div class="p-col-6 p-offset-3"&gt;
&lt;div class="box"&gt;6&lt;/div&gt; &lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-4 p-offset-4"&gt; &lt;div class="p-col-4 p-offset-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Nested&lt;/h3&gt; &lt;h3&gt;Nested&lt;/h3&gt;
&lt;div class="p-grid nested-grid"&gt; &lt;div class="p-grid nested-grid"&gt;
&lt;div class="p-col-8"&gt; &lt;div class="p-col-8"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-6"&gt; &lt;div class="p-col-6"&gt;
@ -923,10 +912,10 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt; &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Panels&lt;/h3&gt; &lt;h3&gt;Panels&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;Panel header="Godfather"&gt; &lt;Panel header="Godfather"&gt;
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.
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Sample Layout&lt;/h3&gt; &lt;h3&gt;Sample Layout&lt;/h3&gt;
&lt;div class="p-grid sample-layout"&gt; &lt;div class="p-grid sample-layout"&gt;
&lt;div class="p-col-12 p-md-2"&gt; &lt;div class="p-col-12 p-md-2"&gt;
Menu Menu
&lt;/div&gt; &lt;/div&gt;
@ -993,10 +982,7 @@ import 'primeflex/primeflex.css';
&lt;div class="p-col-12"&gt; &lt;div class="p-col-12"&gt;
Footer Footer
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -199,20 +199,7 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;FullCalendar :events="events" :options="options" /&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;FullCalendar&lt;/h1&gt;
&lt;p&gt;An event calendar based on the &lt;a href="https://fullcalendar.io/"&gt;FullCalendar&lt;/a&gt; library.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;FullCalendar :events="events" :options="options" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -171,28 +171,18 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Input&lt;/h3&gt;
&lt;div&gt; &lt;Inplace :closable="true"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Inplace&lt;/h1&gt;
&lt;p&gt;Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3&gt;Input&lt;/h3&gt;
&lt;Inplace :closable="true"&gt;
&lt;template #display&gt; &lt;template #display&gt;
&#123;&#123;text || 'Click to Edit'&#125;&#125; &#123;&#123;text || 'Click to Edit'&#125;&#125;
&lt;/template&gt; &lt;/template&gt;
&lt;template #content&gt; &lt;template #content&gt;
&lt;InputText v-model="text" autoFocus /&gt; &lt;InputText v-model="text" autoFocus /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
&lt;h3&gt;Image&lt;/h3&gt; &lt;h3&gt;Image&lt;/h3&gt;
&lt;Inplace&gt; &lt;Inplace&gt;
&lt;template #display&gt; &lt;template #display&gt;
&lt;span className="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt; &lt;span className="pi pi-search" style="vertical-align: middle"&gt;&lt;/span&gt;
&lt;span style="margin-left:.5em; vertical-align: middle"&gt;View Picture&lt;/span&gt; &lt;span style="margin-left:.5em; vertical-align: middle"&gt;View Picture&lt;/span&gt;
@ -200,10 +190,10 @@ export default {
&lt;template #content&gt; &lt;template #content&gt;
&lt;img src="demo/images/nature/nature1.jpg" /&gt; &lt;img src="demo/images/nature/nature1.jpg" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
&lt;h3&gt;Lazy Data&lt;/h3&gt; &lt;h3&gt;Lazy Data&lt;/h3&gt;
&lt;Inplace @open="loadData"&gt; &lt;Inplace @open="loadData"&gt;
&lt;template #display&gt; &lt;template #display&gt;
View Data View Data
&lt;/template&gt; &lt;/template&gt;
@ -215,10 +205,7 @@ export default {
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -7,18 +7,8 @@
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Addons&lt;/h3&gt;
&lt;div&gt; &lt;div class="p-grid p-fluid"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;InputGroup&lt;/h1&gt;
&lt;p&gt;Text, icon, buttons and other content can be grouped next to an input.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Addons&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt; &lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt; &lt;span class="p-inputgroup-addon"&gt;
@ -42,10 +32,10 @@
&lt;InputText placeholder="Website" /&gt; &lt;InputText placeholder="Website" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Multiple Addons&lt;/h3&gt; &lt;h3&gt;Multiple Addons&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt; &lt;div class="p-col-12"&gt;
&lt;div class="p-inputgroup"&gt; &lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt; &lt;span class="p-inputgroup-addon"&gt;
@ -59,10 +49,10 @@
&lt;span class="p-inputgroup-addon"&gt;.00&lt;/span&gt; &lt;span class="p-inputgroup-addon"&gt;.00&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Button Addons&lt;/h3&gt; &lt;h3&gt;Button Addons&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt; &lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt; &lt;div class="p-inputgroup"&gt;
&lt;Button label="Search"/&gt; &lt;Button label="Search"/&gt;
@ -84,10 +74,10 @@
&lt;Button icon="pi pi-times" class="p-button-danger"/&gt; &lt;Button icon="pi pi-times" class="p-button-danger"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Checkbox and RadioButton&lt;/h3&gt; &lt;h3&gt;Checkbox and RadioButton&lt;/h3&gt;
&lt;div class="p-grid p-fluid"&gt; &lt;div class="p-grid p-fluid"&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4"&gt;
&lt;div class="p-inputgroup"&gt; &lt;div class="p-inputgroup"&gt;
&lt;span class="p-inputgroup-addon"&gt; &lt;span class="p-inputgroup-addon"&gt;
@ -117,10 +107,7 @@
&lt;/span&gt; &lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -153,26 +153,13 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;InputSwitch v-model="checked1" /&gt;
&lt;div class="content-section introduction"&gt; &lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;InputSwitch&lt;/h1&gt;
&lt;p&gt;InputSwitch is used to select a boolean value.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Preselection&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;InputSwitch v-model="checked2" /&gt;
&lt;InputSwitch v-model="checked1" /&gt; &lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
&lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
&lt;h3&gt;Preselection&lt;/h3&gt;
&lt;InputSwitch v-model="checked2" /&gt;
&lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -54,31 +54,18 @@ import InputText from 'primevue/inputtext';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;InputText type="text" v-model="value1" /&gt;
&lt;div class="content-section introduction"&gt; &lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;InputText&lt;/h1&gt;
&lt;p&gt;InputText renders and input field where the user can enter data.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Floating Label&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;span class="p-float-label"&gt;
&lt;InputText type="text" v-model="value1" /&gt;
&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
&lt;h3&gt;Floating Label&lt;/h3&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value2" /&gt; &lt;InputText id="username" type="text" v-model="value2" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt; &lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt; &lt;/span&gt;
&lt;h3&gt;Disabled&lt;/h3&gt; &lt;h3&gt;Disabled&lt;/h3&gt;
&lt;InputText type="text" v-model="value3" disabled /&gt; &lt;InputText type="text" v-model="value3" disabled /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -212,31 +212,18 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Single&lt;/h3&gt;
&lt;div&gt; &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Listbox&lt;/h1&gt;
&lt;p&gt;Listbox is used to select one or more values from a list of items.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt;
&lt;h3 class="first"&gt;Single&lt;/h3&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
&lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt;
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix"&gt; &lt;div class="p-clearfix"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Listbox&gt; &lt;/Listbox&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -203,23 +203,12 @@ let items: [
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;h3&gt;Inline&lt;/h3&gt;
&lt;div class="content-section introduction"&gt; &lt;Menu :model="items" /&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Menu&lt;/h1&gt;
&lt;p&gt;Menu is a navigation / command component that supports dynamic and static positioning..&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Overlay&lt;/h3&gt;
&lt;h3 class="first"&gt;Inline&lt;/h3&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;Menu :model="items" /&gt; &lt;Menu ref="menu" :model="items" :popup="true" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;Menu ref="menu" :model="items" :popup="true" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -231,35 +231,25 @@ import Message from 'primevue/message';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Severities&lt;/h3&gt;
&lt;div&gt; &lt;Message severity="success"&gt;Order Submitted&lt;/Message&gt;
&lt;div class="content-section introduction"&gt; &lt;Message severity="info"&gt;PrimeVue Rocks&lt;/Message&gt;
&lt;div class="feature-intro"&gt; &lt;Message severity="warn"&gt;There are unsaved changes&lt;/Message&gt;
&lt;h1&gt;Message&lt;/h1&gt; &lt;Message severity="error"&gt;Validation Failed&lt;/Message&gt;
&lt;p&gt;Messages is used to display inline messages with various severities.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Dynamic&lt;/h3&gt;
&lt;h3 class="first"&gt;Severities&lt;/h3&gt; &lt;Button label="Show" @click="addMessages()" /&gt;
&lt;Message severity="success"&gt;Order Submitted&lt;/Message&gt; &lt;Button label="Clear" @click="removeMessages()" class="p-button-secondary"/&gt;
&lt;Message severity="info"&gt;PrimeVue Rocks&lt;/Message&gt;
&lt;Message severity="warn"&gt;There are unsaved changes&lt;/Message&gt;
&lt;Message severity="error"&gt;Validation Failed&lt;/Message&gt;
&lt;h3&gt;Dynamic&lt;/h3&gt; &lt;transition-group name="p-messages" tag="div"&gt;
&lt;Button label="Show" @click="addMessages()" /&gt;
&lt;Button label="Clear" @click="removeMessages()" class="p-button-secondary"/&gt;
&lt;transition-group name="p-messages" tag="div"&gt;
&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt; &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
&lt;/transition-group&gt; &lt;/transition-group&gt;
&lt;h3&gt;Auto Dismiss&lt;/h3&gt; &lt;h3&gt;Auto Dismiss&lt;/h3&gt;
&lt;Message severity="warn" :life="10000" :sticky="false"&gt;This message will hide in 10 seconds.&lt;/Message&gt; &lt;Message severity="warn" :life="10000" :sticky="false"&gt;This message will hide in 10 seconds.&lt;/Message&gt;
&lt;h3&gt;Validation Message&lt;/h3&gt; &lt;h3&gt;Validation Message&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt; &lt;div class="p-col-12"&gt;
&lt;InputText placeholder="Username" class="p-error" /&gt; &lt;InputText placeholder="Username" class="p-error" /&gt;
&lt;ValidationMessage&gt;Field is required&lt;/ValidationMessage&gt; &lt;ValidationMessage&gt;Field is required&lt;/ValidationMessage&gt;
@ -268,10 +258,7 @@ import Message from 'primevue/message';
&lt;InputText placeholder="Email" class="p-error" :closable="false" /&gt; &lt;InputText placeholder="Email" class="p-error" :closable="false" /&gt;
&lt;ValidationMessage /&gt; &lt;ValidationMessage /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -235,21 +235,11 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;MultiSelect&lt;/h1&gt;
&lt;p&gt;MultiSelect is used to multiple values from a list of options.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Advanced with Templating and Filtering&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"&gt;
&lt;MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt;
&lt;h3&gt;Advanced with Templating and Filtering&lt;/h3&gt;
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt; &lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt; &lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
@ -265,10 +255,7 @@ data() {
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/MultiSelect&gt; &lt;/MultiSelect&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -164,16 +164,7 @@ import OrderList from 'primevue/orderlist';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;OrderList&lt;/h1&gt;
&lt;p&gt;OrderList is used to managed the order of a collection.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
&lt;template #header&gt; &lt;template #header&gt;
List of Cars List of Cars
&lt;/template&gt; &lt;/template&gt;
@ -183,9 +174,7 @@ import OrderList from 'primevue/orderlist';
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;&#123;&#123;slotProps.item.brand&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrderList&gt; &lt;/OrderList&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -485,17 +485,8 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;h3&gt;Advanced&lt;/h3&gt;
&lt;div class="content-section introduction"&gt; &lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
&lt;div class="feature-intro"&gt;
&lt;h1&gt;OrganizationChart&lt;/h1&gt;
&lt;p&gt;OrganizationChart visualizes hierarchical organization data.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3&gt;Advanced&lt;/h3&gt;
&lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt; @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt;
&lt;template #person="slotProps"&gt; &lt;template #person="slotProps"&gt;
&lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt; &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
@ -507,16 +498,14 @@ export default {
&lt;template #default="slotProps"&gt; &lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrganizationChart&gt; &lt;/OrganizationChart&gt;
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;OrganizationChart :value="data2"&gt; &lt;OrganizationChart :value="data2"&gt;
&lt;template #default="slotProps"&gt; &lt;template #default="slotProps"&gt;
&lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrganizationChart&gt; &lt;/OrganizationChart&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -146,24 +146,11 @@ toggle(event) {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;OverlayPanel&lt;/h1&gt;
&lt;p&gt;OverlayPanel is a container component that can overlay other components on page.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true"&gt;
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -235,21 +235,11 @@ onPage(event) {
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <CodeHighlight>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Paginator&lt;/h1&gt;
&lt;p&gt;Paginator is a generic component to display content in paged format.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Custom&lt;/h3&gt;
&lt;h3&gt;Basic&lt;/h3&gt; &lt;Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
&lt;Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"&gt;&lt;/Paginator&gt;
&lt;h3&gt;Custom&lt;/h3&gt;
&lt;Paginator :first.sync="first" :rows="1" :totalRecords="totalRecords2"
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt; template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"&gt;
&lt;template #left&gt; &lt;template #left&gt;
&lt;Button type="button" icon="pi pi-refresh" @click="reset()"/&gt; &lt;Button type="button" icon="pi pi-refresh" @click="reset()"/&gt;
@ -257,16 +247,11 @@ onPage(event) {
&lt;template #right&gt; &lt;template #right&gt;
&lt;Button type="button" icon="pi pi-search" /&gt; &lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Paginator&gt; &lt;/Paginator&gt;
&lt;div class="image-gallery"&gt; &lt;div class="image-gallery"&gt;
&lt;img :src="'demo/images/nature/' + image + '.jpg'" /&gt; &lt;img :src="'demo/images/nature/' + image + '.jpg'" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;PaginatorDoc /&gt;
&lt;/div&gt;
&lt;/template&gt;
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">

View File

@ -158,34 +158,21 @@ import Panel from 'primevue/panel';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Regular&lt;/h3&gt;
&lt;div&gt; &lt;Panel header="Godfather I"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Panel&lt;/h1&gt;
&lt;p&gt;Panel is a grouping component with the optional content toggle feature.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Regular&lt;/h3&gt;
&lt;Panel header="Godfather I"&gt;
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.
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;h3&gt;Toggleable&lt;/h3&gt; &lt;h3&gt;Toggleable&lt;/h3&gt;
&lt;Panel header="Godfather I" :toggleable="true"&gt; &lt;Panel header="Godfather I" :toggleable="true"&gt;
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.
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

View File

@ -96,20 +96,7 @@ import Password from 'primevue/password';
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <CodeHighlight>
&lt;template&gt; &lt;Password v-model="value" /&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Password&lt;/h1&gt;
&lt;p&gt;Password displays strength indicator for password fields.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Password v-model="value" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">

View File

@ -220,16 +220,7 @@ import PickList from 'primevue/picklist';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;PickList v-model="cars" listStyle="height:342px" dataKey="vin"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;PickList&lt;/h1&gt;
&lt;p&gt;PickList is used to reorder items between different lists.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;PickList v-model="cars" listStyle="height:342px" dataKey="vin"&gt;
&lt;template #sourceHeader&gt; &lt;template #sourceHeader&gt;
Available Available
&lt;/template&gt; &lt;/template&gt;
@ -242,11 +233,7 @@ import PickList from 'primevue/picklist';
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
&lt;/div&gt;
&lt;PickListDoc /&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -104,27 +104,14 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Dynamic&lt;/h3&gt;
&lt;div&gt; &lt;ProgressBar :value="value1" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;ProgressBar&lt;/h1&gt;
&lt;p&gt;ProgressBar is a process status indicator.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Static&lt;/h3&gt;
&lt;h3 class="first"&gt;Dynamic&lt;/h3&gt; &lt;ProgressBar :value="value2" :showValue="false" /&gt;
&lt;ProgressBar :value="value1" /&gt;
&lt;h3&gt;Static&lt;/h3&gt; &lt;h3&gt;Indeterminate&lt;/h3&gt;
&lt;ProgressBar :value="value2" :showValue="false" /&gt; &lt;ProgressBar mode="indeterminate" style="height: .5em" /&gt;
&lt;h3&gt;Indeterminate&lt;/h3&gt;
&lt;ProgressBar mode="indeterminate" style="height: .5em" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -108,24 +108,11 @@ import ProgressSpinner from 'primevue/progressspinner';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;div&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div class="content-section introduction"&gt; &lt;ProgressSpinner /&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;ProgressSpinner&lt;/h1&gt;
&lt;p&gt;ProgressSpinner is a process status indicator.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Custom&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/&gt;
&lt;ProgressSpinner /&gt;
&lt;h3&gt;Custom&lt;/h3&gt;
&lt;ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/&gt;
&lt;/div&gt;
&lt;ProgressSpinnerDoc/&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>

View File

@ -137,18 +137,8 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;div class="p-grid"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;RadioButton&lt;/h1&gt;
&lt;p&gt;RadioButton is an extension to standard radio button element with theming.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt; &lt;div class="p-col-12"&gt;
&lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt; &lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt;
&lt;label for="city1" class="p-radiobutton-label"&gt;Chicago&lt;/label&gt; &lt;label for="city1" class="p-radiobutton-label"&gt;Chicago&lt;/label&gt;
@ -165,20 +155,17 @@ export default {
&lt;RadioButton id="city4" name="city" value="San Francisco" v-model="city" /&gt; &lt;RadioButton id="city4" name="city" value="San Francisco" v-model="city" /&gt;
&lt;label for="city4" class="p-radiobutton-label"&gt;San Francisco&lt;/label&gt; &lt;label for="city4" class="p-radiobutton-label"&gt;San Francisco&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{this.city}}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{this.city}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt; &lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt; &lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt;
&lt;RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /&gt; &lt;RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /&gt;
&lt;label :for="theme.key" class="p-radiobutton-label"&gt;{{theme.name}}&lt;/label&gt; &lt;label :for="theme.key" class="p-radiobutton-label"&gt;{{theme.name}}&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;p&gt;Selected Theme: &lt;span style="font-weight: bold"&gt;{{this.selectedTheme}}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Selected Theme: &lt;span style="font-weight: bold"&gt;{{this.selectedTheme}}&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -139,30 +139,17 @@ import Rating from 'primevue/rating';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic {{val1}}&lt;/h3&gt;
&lt;div&gt; &lt;Rating v-model="val1" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Rating&lt;/h1&gt;
&lt;p&gt;Rating component is a star based selection input.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;No Cancel {{val2}}&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic {{val1}}&lt;/h3&gt; &lt;Rating v-model="val2" :cancel="false" /&gt;
&lt;Rating v-model="val1" /&gt;
&lt;h3&gt;No Cancel {{val2}}&lt;/h3&gt; &lt;h3&gt;ReadOnly&lt;/h3&gt;
&lt;Rating v-model="val2" :cancel="false" /&gt; &lt;Rating :value="5" :readonly="true" :stars="10" :cancel="false" /&gt;
&lt;h3&gt;ReadOnly&lt;/h3&gt; &lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Rating :value="5" :readonly="true" :stars="10" :cancel="false" /&gt; &lt;Rating :value="8" :disabled="true" :stars="10" /&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Rating :value="8" :disabled="true" :stars="10" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -154,37 +154,24 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Single&lt;/h3&gt;
&lt;div&gt; &lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
&lt;div class="content-section introduction"&gt; &lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{selectedCity}}&lt;/span&gt;&lt;/p&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;SelectButton&lt;/h1&gt;
&lt;p&gt;SelectButton is a form component to choose a value from a list of options using button elements.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Multiple&lt;/h3&gt;
&lt;h3 class="first"&gt;Single&lt;/h3&gt; &lt;SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" /&gt;
&lt;SelectButton v-model="selectedCity" :options="cities" optionLabel="name" /&gt; &lt;p&gt;Selected Cars: &lt;span style="font-weight: bold"&gt;{{selectedCars}}&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{selectedCity}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Multiple&lt;/h3&gt; &lt;h3&gt;Custom Content&lt;/h3&gt;
&lt;SelectButton v-model="selectedCars" :options="cars" optionLabel="brand" :multiple="true" /&gt; &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;p&gt;Selected Cars: &lt;span style="font-weight: bold"&gt;{{selectedCars}}&lt;/span&gt;&lt;/p&gt;
&lt;h3&gt;Custom Content&lt;/h3&gt;
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div style="text-align: center; padding: 1em; width: 125px"&gt; &lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt; &lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/SelectButton&gt; &lt;/SelectButton&gt;
&lt;p&gt;Selected Car: &lt;span style="font-weight: bold"&gt;{{selectedCar}}&lt;/span&gt;&lt;/p&gt; &lt;p&gt;Selected Car: &lt;span style="font-weight: bold"&gt;{{selectedCar}}&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -198,54 +198,41 @@ import Sidebar from 'primevue/sidebar';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Sidebar :visible.sync="visibleLeft" :baseZIndex="1000"&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Sidebar&lt;/h1&gt;
&lt;p&gt;Sidebar is a panel component displayed as an overlay at the edges of the screen.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Sidebar :visible.sync="visibleLeft" :baseZIndex="1000"&gt;
&lt;h1 style="fontWeight:normal"&gt;Left Sidebar&lt;/h1&gt; &lt;h1 style="fontWeight:normal"&gt;Left Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt; &lt;Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/&gt; &lt;Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;/Sidebar&gt; &lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right"&gt; &lt;Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right"&gt;
&lt;h1 style="fontWeight:normal"&gt;Right Sidebar&lt;/h1&gt; &lt;h1 style="fontWeight:normal"&gt;Right Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt; &lt;Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/&gt; &lt;Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;/Sidebar&gt; &lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top"&gt; &lt;Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top"&gt;
&lt;h1 style="fontWeight:normal"&gt;Top Sidebar&lt;/h1&gt; &lt;h1 style="fontWeight:normal"&gt;Top Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt; &lt;Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/&gt; &lt;Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;/Sidebar&gt; &lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom"&gt; &lt;Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom"&gt;
&lt;h1 style="fontWeight:normal"&gt;Bottom Sidebar&lt;/h1&gt; &lt;h1 style="fontWeight:normal"&gt;Bottom Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt; &lt;Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/&gt; &lt;Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;/Sidebar&gt; &lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full"&gt; &lt;Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full"&gt;
&lt;h1 style="fontWeight:normal"&gt;Full Screen&lt;/h1&gt; &lt;h1 style="fontWeight:normal"&gt;Full Screen&lt;/h1&gt;
&lt;Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt; &lt;Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/&gt; &lt;Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;/Sidebar&gt; &lt;/Sidebar&gt;
&lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" /&gt; &lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" /&gt; &lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" /&gt; &lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" /&gt; &lt;Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-th-large" @click="visibleFull = true" /&gt; &lt;Button icon="pi pi-th-large" @click="visibleFull = true" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -173,34 +173,21 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic: {{value1}}&lt;/h3&gt;
&lt;div&gt; &lt;Slider v-model="value1" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Slider&lt;/h1&gt;
&lt;p&gt;Slider is an input component to provide a numerical input.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Input: {{value2}}&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic: {{value1}}&lt;/h3&gt; &lt;InputText v-model.number="value2" /&gt;
&lt;Slider v-model="value1" /&gt; &lt;Slider v-model="value2" /&gt;
&lt;h3&gt;Input: {{value2}}&lt;/h3&gt; &lt;h3&gt;Step: {{value3}}&lt;/h3&gt;
&lt;InputText v-model.number="value2" /&gt; &lt;Slider v-model="value3" :step="20" /&gt;
&lt;Slider v-model="value2" /&gt;
&lt;h3&gt;Step: {{value3}}&lt;/h3&gt; &lt;h3&gt;Range: {{value4}}&lt;/h3&gt;
&lt;Slider v-model="value3" :step="20" /&gt; &lt;Slider v-model="value4" :range="true" /&gt;
&lt;h3&gt;Range: {{value4}}&lt;/h3&gt; &lt;h3&gt;Vertical: {{value5}}&lt;/h3&gt;
&lt;Slider v-model="value4" :range="true" /&gt; &lt;Slider v-model="value5" orientation="vertical" /&gt;
&lt;h3&gt;Vertical: {{value5}}&lt;/h3&gt;
&lt;Slider v-model="value5" orientation="vertical" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -110,30 +110,17 @@ import Spinner from 'primevue/spinner';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Spinner v-model="value1" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Spinner&lt;/h1&gt;
&lt;p&gt;Spinner is an input component to provide a numerical input.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Min/Max&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;Spinner v-model="value2" :min="0" :max="100" /&gt;
&lt;Spinner v-model="value1" /&gt;
&lt;h3&gt;Min/Max&lt;/h3&gt; &lt;h3&gt;Step&lt;/h3&gt;
&lt;Spinner v-model="value2" :min="0" :max="100" /&gt; &lt;Spinner v-model="value3" :step="0.25" /&gt;
&lt;h3&gt;Step&lt;/h3&gt; &lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Spinner v-model="value3" :step="0.25" /&gt; &lt;Spinner v-model="value4" :disabled="true" /&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Spinner v-model="value4" :disabled="true" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -190,21 +190,16 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"&gt;&lt;/SplitButton&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;SplitButton&lt;/h1&gt;
&lt;p&gt;SplitButton groups a set of commands in an overlay with a default command.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Severities&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;SplitButton label="Save" icon="pi pi-plus" :model="items"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"&gt;&lt;/SplitButton&gt; &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"&gt;&lt;/SplitButton&gt;
&lt;/div&gt; &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"&gt;&lt;/SplitButton&gt;
&lt;/div&gt; &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"&gt;&lt;/SplitButton&gt;
&lt;/template&gt; &lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
&lt;SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"&gt;&lt;/SplitButton&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -236,18 +236,8 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Default&lt;/h3&gt;
&lt;div&gt; &lt;TabView&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;TabView&lt;/h1&gt;
&lt;p&gt;TabView is a container component to group content with tabs.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;TabView&gt;
&lt;TabPanel header="Godfather I"&gt; &lt;TabPanel header="Godfather I"&gt;
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.
&lt;/TabPanel&gt; &lt;/TabPanel&gt;
&lt;/TabView&gt; &lt;/TabView&gt;
&lt;h3&gt;Programmatic&lt;/h3&gt; &lt;h3&gt;Programmatic&lt;/h3&gt;
&lt;div style="padding: .5em 0"&gt; &lt;div style="padding: .5em 0"&gt;
&lt;Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" /&gt; &lt;Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" /&gt;
&lt;Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" /&gt; &lt;Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" /&gt;
&lt;Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" /&gt; &lt;Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;TabView&gt; &lt;TabView&gt;
&lt;TabPanel header="Godfather I" :active.sync="active[0]"&gt; &lt;TabPanel header="Godfather I" :active.sync="active[0]"&gt;
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.
&lt;/TabPanel&gt; &lt;/TabPanel&gt;
&lt;/TabView&gt; &lt;/TabView&gt;
&lt;h3&gt;Disabled&lt;/h3&gt; &lt;h3&gt;Disabled&lt;/h3&gt;
&lt;TabView&gt; &lt;TabView&gt;
&lt;TabPanel header="Godfather I"&gt; &lt;TabPanel header="Godfather I"&gt;
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.
&lt;/TabPanel&gt; &lt;/TabPanel&gt;
&lt;TabPanel header="Godfather IV" :disabled="true"&gt;&lt;/TabPanel&gt; &lt;TabPanel header="Godfather IV" :disabled="true"&gt;&lt;/TabPanel&gt;
&lt;/TabView&gt; &lt;/TabView&gt;
&lt;h3&gt;Custom Headers&lt;/h3&gt; &lt;h3&gt;Custom Headers&lt;/h3&gt;
&lt;TabView class="tabview-custom"&gt; &lt;TabView class="tabview-custom"&gt;
&lt;TabPanel&gt; &lt;TabPanel&gt;
&lt;template slot="header"&gt; &lt;template slot="header"&gt;
&lt;i class="pi pi-calendar"&gt;&lt;/i&gt; &lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
@ -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.
&lt;/TabPanel&gt; &lt;/TabPanel&gt;
&lt;/TabView&gt; &lt;/TabView&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -97,27 +97,14 @@ import Textarea from 'primevue/textarea';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;Textarea v-model="value1" rows="5" cols="30" /&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Textarea&lt;/h1&gt;
&lt;p&gt;Textarea is a multi-line text input element.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Auto Resize&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;Textarea v-model="value2" :autoResize="true" rows="5" cols="30" /&gt;
&lt;Textarea v-model="value1" rows="5" cols="30" /&gt;
&lt;h3&gt;Auto Resize&lt;/h3&gt; &lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Textarea v-model="value2" :autoResize="true" rows="5" cols="30" /&gt; &lt;Textarea v-model="value3" disabled rows="5" cols="30" /&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;Textarea v-model="value3" disabled rows="5" cols="30" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -248,18 +248,8 @@ this.$toast.removeAllGroups();
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Severities&lt;/h3&gt;
&lt;div&gt; &lt;div class="p-grid"&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Toast&lt;/h1&gt;
&lt;p&gt;Toast is used to display messages in an overlay.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation p-fluid"&gt;
&lt;h3&gt;Severities&lt;/h3&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-3"&gt;
&lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt; &lt;Button label="Success" class="p-button-success" @click="showSuccess" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -272,10 +262,10 @@ this.$toast.removeAllGroups();
&lt;div class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-3"&gt;
&lt;Button label="Error" class="p-button-danger" @click="showError" /&gt; &lt;Button label="Error" class="p-button-danger" @click="showError" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Positions&lt;/h3&gt; &lt;h3&gt;Positions&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4"&gt;
&lt;Button label="Top Left" @click="showTopLeft" /&gt; &lt;Button label="Top Left" @click="showTopLeft" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -285,23 +275,20 @@ this.$toast.removeAllGroups();
&lt;div class="p-col-12 p-md-4"&gt; &lt;div class="p-col-12 p-md-4"&gt;
&lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt; &lt;Button label="Bottom Right" class="p-button-success" @click="showBottomRight" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Options&lt;/h3&gt; &lt;h3&gt;Options&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-6"&gt; &lt;div class="p-col-12 p-md-6"&gt;
&lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt; &lt;Button @click="showMultiple" label="Multiple" class="p-button-warning" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-6"&gt; &lt;div class="p-col-12 p-md-6"&gt;
&lt;Button @click="showSticky" label="Sticky" /&gt; &lt;Button @click="showSticky" label="Sticky" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Remove All&lt;/h3&gt; &lt;h3&gt;Remove All&lt;/h3&gt;
&lt;Button @click="clear" label="Clear" /&gt; &lt;Button @click="clear" label="Clear" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -178,26 +178,13 @@ export default {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;h3&gt;Basic&lt;/h3&gt;
&lt;div&gt; &lt;ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
&lt;div class="content-section introduction"&gt; &lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;ToggleButton&lt;/h1&gt;
&lt;p&gt;ToggleButton is used to select a boolean value using a button.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt; &lt;h3&gt;Customized&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" /&gt;
&lt;ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /&gt; &lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
&lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
&lt;h3&gt;Customized&lt;/h3&gt;
&lt;ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" /&gt;
&lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -63,17 +63,7 @@ import Toolbar from 'primevue/toolbar';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;Toolbar&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;Toolbar&lt;/h1&gt;
&lt;p&gt;Toolbar is a grouping component for buttons and other content.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;Toolbar&gt;
&lt;template slot="left"&gt; &lt;template slot="left"&gt;
&lt;Button label="New" icon="pi pi-plus" style="margin-right: .25em" /&gt; &lt;Button label="New" icon="pi pi-plus" style="margin-right: .25em" /&gt;
&lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt; &lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
@ -86,10 +76,7 @@ import Toolbar from 'primevue/toolbar';
&lt;Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" /&gt; &lt;Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" /&gt;
&lt;Button icon="pi pi-times" class="p-button-danger" /&gt; &lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Toolbar&gt; &lt;/Toolbar&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>

View File

@ -117,21 +117,8 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;TriStateCheckbox v-model="value" /&gt;
&lt;div&gt; &lt;p&gt;Value: &lt;span style="font-weight: bold"&gt;{{value == null ? 'null' : value}}&lt;/span&gt;&lt;/p&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;TriStateCheckbox&lt;/h1&gt;
&lt;p&gt;TriStateCheckbox is used to select either "true", "false" or "null" as the value.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;TriStateCheckbox v-model="value" /&gt;
&lt;p&gt;Value: &lt;span style="font-weight: bold"&gt;{{value == null ? 'null' : value}}&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>