Demo update on source codes
cagataycivici
parent
84fb736e1f
commit
dad730398f
|
|
@ -273,17 +273,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>AccordionPanel</h1>
|
||||
<p>AccordionPanel groups a collection of contents in tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<h3>Default</h3>
|
||||
<Accordion>
|
||||
<AccordionTab header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
|
|
@ -379,10 +369,6 @@ export default {
|
|||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||
</AccordionTab>
|
||||
</Accordion>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -257,17 +257,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>AutoComplete</h1>
|
||||
<p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
|
||||
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
|
||||
|
||||
|
|
@ -289,9 +279,6 @@ export default {
|
|||
<ul>
|
||||
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -129,17 +129,7 @@ import Button from 'primevue/button';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Button</h1>
|
||||
<p>Button is an extension to standard button element with icons and theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<Button label="Click" />
|
||||
<Button label="Click" icon="pi pi-check" />
|
||||
<Button label="Click" icon="pi pi-check" iconPos="right" />
|
||||
|
|
@ -169,9 +159,6 @@ import Button from 'primevue/button';
|
|||
<Button label="Info" class="p-button-rounded p-button-info" />
|
||||
<Button label="Warning" class="p-button-rounded p-button-warning" />
|
||||
<Button label="Danger" class="p-button-rounded p-button-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -534,15 +534,6 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Calendar</h1>
|
||||
<p>Calendar is an input component to select a date.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation" style="padding-top:0">
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Basic</h3>
|
||||
|
|
@ -613,8 +604,6 @@ export default {
|
|||
|
||||
<h3>Inline</h3>
|
||||
<Calendar v-model="date14" :inline="true" :showWeek="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -81,16 +81,6 @@ import Card from 'primevue/card';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Card</h1>
|
||||
<p>Card is a flexible container component.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Card style="width: 25em; margin-bottom: 2em">
|
||||
<template slot="title">
|
||||
Simple Card
|
||||
|
|
@ -117,9 +107,6 @@ import Card from 'primevue/card';
|
|||
<Button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,6 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>BarChart</h1>
|
||||
<p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="vertical">Vertical</h3>
|
||||
<Chart type="bar" :data="basicData" />
|
||||
|
||||
|
|
@ -25,9 +15,6 @@
|
|||
|
||||
<h3>Stacked</h3>
|
||||
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Combo Chart</h1>
|
||||
<p>Different chart types can be combined in the same graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DoughnutChart</h1>
|
||||
<p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,17 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Line Chart</h1>
|
||||
<p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<Chart type="line" :data="basicData" />
|
||||
|
||||
<h3>Multi Axis</h3>
|
||||
|
|
@ -22,9 +12,6 @@
|
|||
|
||||
<h3>Line Styles</h3>
|
||||
<Chart type="line" :data="lineStylesData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Pie Chart</h1>
|
||||
<p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="pie" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Polar Area Chart</h1>
|
||||
<p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,7 @@
|
|||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Radar Chart</h1>
|
||||
<p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Chart type="radar" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -145,17 +145,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Checkbox</h1>
|
||||
<p>Checkbox is an extension to standard checkbox element with theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<Checkbox id="binary" v-model="checked" :binary="true"/>
|
||||
<label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
|
||||
|
||||
|
|
@ -188,9 +178,6 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -144,17 +144,7 @@ import Chips from 'primevue/chips';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction p-fluid">
|
||||
<div class="feature-intro">
|
||||
<h1>Chips</h1>
|
||||
<p>Chips is used to enter multiple values on an input field.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<Chips v-model="value1" />
|
||||
|
||||
<h3>Template</h3>
|
||||
|
|
@ -166,9 +156,6 @@ import Chips from 'primevue/chips';
|
|||
</div>
|
||||
</template>
|
||||
</Chips>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation dataview-demo">
|
||||
<h3 class="first">Default</h3>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
|
|
|
|||
|
|
@ -415,16 +415,6 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DataView</h1>
|
||||
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation dataview-demo">
|
||||
<h3 class="first">Default</h3>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
|
|
@ -470,8 +460,6 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -73,15 +73,6 @@ import DeferredContent from 'primevue/deferredcontent';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DeferredContent</h1>
|
||||
<p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll..</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div style="height: 800px">
|
||||
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
|
||||
</div>
|
||||
|
|
@ -101,8 +92,6 @@ import DeferredContent from 'primevue/deferredcontent';
|
|||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
</DeferredContent>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -203,16 +203,6 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Dialog</h1>
|
||||
<p>Dialog is a container to display content in an overlay window.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="open" />
|
||||
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
|
|
@ -224,9 +214,6 @@ export default {
|
|||
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -245,17 +245,7 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Dropdown</h1>
|
||||
<p>Dropdown is used to select an item from a list of options.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
|
||||
|
||||
<h3>Editable</h3>
|
||||
|
|
@ -270,9 +260,6 @@ data() {
|
|||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -144,17 +144,7 @@ npm install quill --save
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Editor</h1>
|
||||
<p>Editor is rich text editor component based on Quill.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<h3>Default</h3>
|
||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||
|
||||
<h3>Customized</h3>
|
||||
|
|
@ -167,9 +157,6 @@ npm install quill --save
|
|||
</span>
|
||||
</template>
|
||||
</Editor>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -154,17 +154,7 @@ import Fieldset from 'primevue/fieldset';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Fieldset</h1>
|
||||
<p>Fieldset is a grouping component with the optional content toggle feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<h3>Regular</h3>
|
||||
<Fieldset legend="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
|
|
@ -179,9 +169,6 @@ import Fieldset from 'primevue/fieldset';
|
|||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -251,16 +251,6 @@ import FileUpload from 'primevue/fileupload';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>FileUpload</h1>
|
||||
<p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Advanced</h3>
|
||||
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
|
||||
|
||||
|
|
@ -269,9 +259,6 @@ import FileUpload from 'primevue/fileupload';
|
|||
|
||||
<h3>Basic with Auto</h3>
|
||||
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -574,18 +574,7 @@ import 'primeflex/primeflex.css';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>FlexGrid</h1>
|
||||
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
||||
Flex Grid CSS is not included in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation flexgrid-demo">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="box">1</div>
|
||||
|
|
@ -994,9 +983,6 @@ import 'primeflex/primeflex.css';
|
|||
Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -199,20 +199,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>FullCalendar</h1>
|
||||
<p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<FullCalendar :events="events" :options="options" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -171,16 +171,6 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Inplace</h1>
|
||||
<p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Input</h3>
|
||||
<Inplace :closable="true">
|
||||
<template #display>
|
||||
|
|
@ -216,9 +206,6 @@ export default {
|
|||
</DataTable>
|
||||
</template>
|
||||
</Inplace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,17 +7,7 @@
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputGroup</h1>
|
||||
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Addons</h3>
|
||||
<h3>Addons</h3>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="p-inputgroup">
|
||||
|
|
@ -118,9 +108,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -153,26 +153,13 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputSwitch</h1>
|
||||
<p>InputSwitch is used to select a boolean value.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<InputSwitch v-model="checked1" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<h3>Preselection</h3>
|
||||
<InputSwitch v-model="checked2" />
|
||||
<p style="font-weight: bold">{{checked2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -54,17 +54,7 @@ import InputText from 'primevue/inputtext';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputText</h1>
|
||||
<p>InputText renders and input field where the user can enter data.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<InputText type="text" v-model="value1" />
|
||||
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
||||
|
||||
|
|
@ -76,9 +66,6 @@ import InputText from 'primevue/inputtext';
|
|||
|
||||
<h3>Disabled</h3>
|
||||
<InputText type="text" v-model="value3" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -212,17 +212,7 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Listbox</h1>
|
||||
<p>Listbox is used to select one or more values from a list of items.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<h3>Single</h3>
|
||||
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
|
||||
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
|
||||
|
|
@ -234,9 +224,6 @@ data() {
|
|||
</div>
|
||||
</template>
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -203,23 +203,12 @@ let items: [
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Menu</h1>
|
||||
<p>Menu is a navigation / command component that supports dynamic and static positioning..</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Inline</h3>
|
||||
<h3>Inline</h3>
|
||||
<Menu :model="items" />
|
||||
|
||||
<h3>Overlay</h3>
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
<Menu ref="menu" :model="items" :popup="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -231,17 +231,7 @@ import Message from 'primevue/message';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Message</h1>
|
||||
<p>Messages is used to display inline messages with various severities.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Severities</h3>
|
||||
<h3>Severities</h3>
|
||||
<Message severity="success">Order Submitted</Message>
|
||||
<Message severity="info">PrimeVue Rocks</Message>
|
||||
<Message severity="warn">There are unsaved changes</Message>
|
||||
|
|
@ -269,9 +259,6 @@ import Message from 'primevue/message';
|
|||
<ValidationMessage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -235,17 +235,7 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>MultiSelect</h1>
|
||||
<p>MultiSelect is used to multiple values from a list of options.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
|
||||
|
||||
<h3>Advanced with Templating and Filtering</h3>
|
||||
|
|
@ -266,9 +256,6 @@ data() {
|
|||
</div>
|
||||
</template>
|
||||
</MultiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -164,15 +164,6 @@ import OrderList from 'primevue/orderlist';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>OrderList</h1>
|
||||
<p>OrderList is used to managed the order of a collection.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
|
||||
<template #header>
|
||||
List of Cars
|
||||
|
|
@ -184,8 +175,6 @@ import OrderList from 'primevue/orderlist';
|
|||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -485,15 +485,6 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>OrganizationChart</h1>
|
||||
<p>OrganizationChart visualizes hierarchical organization data.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Advanced</h3>
|
||||
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
|
||||
|
|
@ -515,8 +506,6 @@ export default {
|
|||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -146,24 +146,11 @@ toggle(event) {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>OverlayPanel</h1>
|
||||
<p>OverlayPanel is a container component that can overlay other components on page.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -235,16 +235,6 @@ onPage(event) {
|
|||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Paginator</h1>
|
||||
<p>Paginator is a generic component to display content in paged format.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3>Basic</h3>
|
||||
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
|
|
@ -262,11 +252,6 @@ onPage(event) {
|
|||
<div class="image-gallery">
|
||||
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaginatorDoc />
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
|
|
|
|||
|
|
@ -158,17 +158,7 @@ import Panel from 'primevue/panel';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Panel</h1>
|
||||
<p>Panel is a grouping component with the optional content toggle feature.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Regular</h3>
|
||||
<h3>Regular</h3>
|
||||
<Panel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
||||
|
|
@ -183,9 +173,6 @@ import Panel from 'primevue/panel';
|
|||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -96,20 +96,7 @@ import Password from 'primevue/password';
|
|||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Password</h1>
|
||||
<p>Password displays strength indicator for password fields.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Password v-model="value" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
|
|
|
|||
|
|
@ -220,15 +220,6 @@ import PickList from 'primevue/picklist';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>PickList</h1>
|
||||
<p>PickList is used to reorder items between different lists.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
|
||||
<template #sourceHeader>
|
||||
Available
|
||||
|
|
@ -243,10 +234,6 @@ import PickList from 'primevue/picklist';
|
|||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
</div>
|
||||
|
||||
<PickListDoc />
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -104,17 +104,7 @@ data() {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ProgressBar</h1>
|
||||
<p>ProgressBar is a process status indicator.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Dynamic</h3>
|
||||
<h3>Dynamic</h3>
|
||||
<ProgressBar :value="value1" />
|
||||
|
||||
<h3>Static</h3>
|
||||
|
|
@ -122,9 +112,6 @@ data() {
|
|||
|
||||
<h3>Indeterminate</h3>
|
||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -108,24 +108,11 @@ import ProgressSpinner from 'primevue/progressspinner';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ProgressSpinner</h1>
|
||||
<p>ProgressSpinner is a process status indicator.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<ProgressSpinner />
|
||||
|
||||
<h3>Custom</h3>
|
||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||
</div>
|
||||
|
||||
<ProgressSpinnerDoc/>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -137,17 +137,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>RadioButton</h1>
|
||||
<p>RadioButton is an extension to standard radio button element with theming.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
|
||||
|
|
@ -176,9 +166,6 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -139,17 +139,7 @@ import Rating from 'primevue/rating';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Rating</h1>
|
||||
<p>Rating component is a star based selection input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic {{val1}}</h3>
|
||||
<h3>Basic {{val1}}</h3>
|
||||
<Rating v-model="val1" />
|
||||
|
||||
<h3>No Cancel {{val2}}</h3>
|
||||
|
|
@ -160,9 +150,6 @@ import Rating from 'primevue/rating';
|
|||
|
||||
<h3>Disabled</h3>
|
||||
<Rating :value="8" :disabled="true" :stars="10" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -154,17 +154,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>SelectButton</h1>
|
||||
<p>SelectButton is a form component to choose a value from a list of options using button elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Single</h3>
|
||||
<h3>Single</h3>
|
||||
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
|
||||
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
|
||||
|
||||
|
|
@ -182,9 +172,6 @@ export default {
|
|||
</template>
|
||||
</SelectButton>
|
||||
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -198,16 +198,6 @@ import Sidebar from 'primevue/sidebar';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Sidebar</h1>
|
||||
<p>Sidebar is a panel component displayed as an overlay at the edges of the screen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
|
||||
<h1 style="fontWeight:normal">Left Sidebar</h1>
|
||||
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
|
||||
|
|
@ -243,9 +233,6 @@ import Sidebar from 'primevue/sidebar';
|
|||
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
|
||||
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
|
||||
<Button icon="pi pi-th-large" @click="visibleFull = true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -173,17 +173,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Slider</h1>
|
||||
<p>Slider is an input component to provide a numerical input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic: {{value1}}</h3>
|
||||
<h3>Basic: {{value1}}</h3>
|
||||
<Slider v-model="value1" />
|
||||
|
||||
<h3>Input: {{value2}}</h3>
|
||||
|
|
@ -198,9 +188,6 @@ export default {
|
|||
|
||||
<h3>Vertical: {{value5}}</h3>
|
||||
<Slider v-model="value5" orientation="vertical" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -110,17 +110,7 @@ import Spinner from 'primevue/spinner';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Spinner</h1>
|
||||
<p>Spinner is an input component to provide a numerical input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<Spinner v-model="value1" />
|
||||
|
||||
<h3>Min/Max</h3>
|
||||
|
|
@ -131,9 +121,6 @@ import Spinner from 'primevue/spinner';
|
|||
|
||||
<h3>Disabled</h3>
|
||||
<Spinner v-model="value4" :disabled="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -190,21 +190,16 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>SplitButton</h1>
|
||||
<p>SplitButton groups a set of commands in an overlay with a default command.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<h3>Severities</h3>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
|
||||
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -236,17 +236,7 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>TabView</h1>
|
||||
<p>TabView is a container component to group content with tabs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<h3>Default</h3>
|
||||
<TabView>
|
||||
<TabPanel header="Godfather I">
|
||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
|
||||
|
|
@ -341,9 +331,6 @@ export default {
|
|||
A decade earlier, he gave custody of his two children to Kay, who has since remarried.
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -97,17 +97,7 @@ import Textarea from 'primevue/textarea';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Textarea</h1>
|
||||
<p>Textarea is a multi-line text input element.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<Textarea v-model="value1" rows="5" cols="30" />
|
||||
|
||||
<h3>Auto Resize</h3>
|
||||
|
|
@ -115,9 +105,6 @@ import Textarea from 'primevue/textarea';
|
|||
|
||||
<h3>Disabled</h3>
|
||||
<Textarea v-model="value3" disabled rows="5" cols="30" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -248,16 +248,6 @@ this.$toast.removeAllGroups();
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Toast</h1>
|
||||
<p>Toast is used to display messages in an overlay.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation p-fluid">
|
||||
<h3>Severities</h3>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
|
|
@ -299,9 +289,6 @@ this.$toast.removeAllGroups();
|
|||
|
||||
<h3>Remove All</h3>
|
||||
<Button @click="clear" label="Clear" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -178,26 +178,13 @@ export default {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>ToggleButton</h1>
|
||||
<p>ToggleButton is used to select a boolean value using a button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<h3>Basic</h3>
|
||||
<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
|
||||
<p style="font-weight: bold">{{checked1}}</p>
|
||||
|
||||
<h3>Customized</h3>
|
||||
<ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
|
||||
<p style="font-weight: bold">{{checked2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -63,16 +63,6 @@ import Toolbar from 'primevue/toolbar';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Toolbar</h1>
|
||||
<p>Toolbar is a grouping component for buttons and other content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Toolbar>
|
||||
<template slot="left">
|
||||
<Button label="New" icon="pi pi-plus" style="margin-right: .25em" />
|
||||
|
|
@ -87,9 +77,6 @@ import Toolbar from 'primevue/toolbar';
|
|||
<Button icon="pi pi-times" class="p-button-danger" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
|
|
@ -117,21 +117,8 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>TriStateCheckbox</h1>
|
||||
<p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue