vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Updated documentation to remove deprecated slot syntax

pull/682/head
Cagatay Civici 2020-11-25 12:10:33 +03:00
parent f7190ad875
commit 65e0c19047
5 changed files with 40 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/card/CardDemo.vue
View File

@ -9,30 +9,30 @@
<div class="content-section implementation">
<Card style="width: 25rem; margin-bottom: 2em">
<template v-slot:title>
<template #title>
Simple Card
</template>
<template v-slot:content>
<template #content>
<p>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!</p>
</template>
</Card>
<Card style="width: 25em">
<template v-slot:header>
<template #header>
<img alt="user header" src="demo/images/usercard.png">
</template>
<template v-slot:title>
<template #title>
Advanced Card
</template>
<template v-slot:subtitle>
<template #subtitle>
Card subtitle
</template>
<template v-slot:content>
<template #content>
<p>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!</p>
</template>
<template v-slot:footer>
<template #footerfooter>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
</template>

32
src/views/card/CardDoc.vue
View File

@ -10,31 +10,21 @@ import Card from 'primevue/card';
</code></pre>
<h5>Getting Started</h5>
<p>Card is used as a container.</p>
<pre v-code>
<code>
&lt;Card&gt;
Content
&lt;/Card&gt;
</code></pre>
<h5>Templates</h5>
<p>Card provides <i>header</i>, <i>title</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
<pre v-code>
<code>
&lt;Card&gt;
&lt;template slot="header"&gt;
&lt;template #header&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt;
&lt;/template&gt;
&lt;template slot="title"&gt;
&lt;template #title&gt;
Advanced Card
&lt;/template&gt;
&lt;template slot="content"&gt;
&lt;template #content&gt;
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!
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;template #footer&gt;
&lt;Button icon="pi pi-check" label="Save" /&gt;
&lt;Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/template&gt;
@ -88,30 +78,30 @@ import Card from 'primevue/card';
<pre v-code>
<code><template v-pre>
&lt;Card style="width: 25rem; margin-bottom: 2em"&gt;
&lt;template slot="title"&gt;
&lt;template #title&gt;
Simple Card
&lt;/template&gt;
&lt;template slot="content"&gt;
&lt;template #content&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;/template&gt;
&lt;/Card&gt;
&lt;Card style="width: 25em"&gt;
&lt;template slot="header"&gt;
&lt;template #header&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt;
&lt;/template&gt;
&lt;template slot="title"&gt;
&lt;template #title&gt;
Advanced Card
&lt;/template&gt;
&lt;template slot="subtitle"&gt;
&lt;template subtitle&gt;
Card subtitle
&lt;/template&gt;
&lt;template slot="content"&gt;
&lt;template #content&gt;
&lt;p&gt;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!&lt;/p&gt;
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;template #footer&gt;
&lt;Button icon="pi pi-check" label="Save" /&gt;
&lt;Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" /&gt;
&lt;/template&gt;

8
src/views/datatable/DataTableCrudDemo.vue
View File

@ -10,12 +10,12 @@
<div class="content-section implementation">
<div class="card">
<Toolbar class="p-mb-4">
<template v-slot:left>
<template #left>
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template>
<template v-slot:right>
<template #right>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
</template>
@ -147,12 +147,12 @@
<pre v-code>
<code><template v-pre>
&lt;Toolbar class="p-mb-4"&gt;
&lt;template slot="left"&gt;
&lt;template #left&gt;
&lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt;
&lt;Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /&gt;
&lt;/template&gt;
&lt;template slot="right"&gt;
&lt;template #right&gt;
&lt;FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" /&gt;
&lt;Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /&gt;
&lt;/template&gt;

4
src/views/editor/EditorDoc.vue
View File

@ -22,7 +22,7 @@ import Editor from 'primevue/editor';
<pre v-code>
<code>
&lt;Editor v-model="value" editorStyle="height: 320px"&gt;
&lt;template slot="toolbar"&gt;
&lt;template #toolbar&gt;
&lt;span class="ql-formats"&gt;
&lt;button class="ql-bold"&gt;&lt;/button&gt;
&lt;button class="ql-italic"&gt;&lt;/button&gt;
@ -157,7 +157,7 @@ npm install quill --save
&lt;h3&gt;Customized&lt;/h3&gt;
&lt;Editor v-model="value2" editorStyle="height: 320px"&gt;
&lt;template slot="toolbar"&gt;
&lt;template #toolbar&gt;
&lt;span class="ql-formats"&gt;
&lt;button class="ql-bold" v-tooltip.bottom="'Bold'"&gt;&lt;/button&gt;
&lt;button class="ql-italic" v-tooltip.bottom="'Italic'"&gt;&lt;/button&gt;

22
src/views/steps/StepsDoc.vue
View File

@ -275,13 +275,13 @@ export default {
<code><template v-pre>
&lt;div class="stepsdemo-content"&gt;
&lt;Card&gt;
&lt;template slot="title"&gt;
&lt;template #title&gt;
Seat Information
&lt;/template&gt;
&lt;template slot="subtitle"&gt;
&lt;template #subtitle&gt;
Choose your seat
&lt;/template&gt;
&lt;template slot="content"&gt;
&lt;template #content&gt;
&lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;label for="class"&gt;Class&lt;/label&gt;
@ -297,7 +297,7 @@ export default {
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;template #footer&gt;
&lt;div class="p-grid p-nogutter p-justify-between"&gt;
&lt;Button label="Back" @click="prevPage()" icon="pi pi-angle-left" /&gt;
&lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /&gt;
@ -359,13 +359,13 @@ export default {
<code><template v-pre>
&lt;div class="stepsdemo-content"&gt;
&lt;Card&gt;
&lt;template slot="title"&gt;
&lt;template #title&gt;
Payment Information
&lt;/template&gt;
&lt;template slot="subtitle"&gt;
&lt;template #subtitle&gt;
Enter your card details
&lt;/template&gt;
&lt;template slot="content"&gt;
&lt;template #content&gt;
&lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12"&gt;
&lt;label for="class"&gt;Class&lt;/label&gt;
@ -389,7 +389,7 @@ export default {
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;template #footer&gt;
&lt;div class="p-grid p-nogutter p-justify-between"&gt;
&lt;Button label="Back" @click="prevPage()" icon="pi pi-angle-left" /&gt;
&lt;Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /&gt;
@ -430,10 +430,10 @@ export default {
<code><template v-pre>
&lt;div class="stepsdemo-content"&gt;
&lt;Card&gt;
&lt;template slot="title"&gt;
&lt;template #title&gt;
Confirmation
&lt;/template&gt;
&lt;template slot="content"&gt;
&lt;template #content&gt;
&lt;div class="p-field p-col-12"&gt;
&lt;label for="class"&gt;Name&lt;/label&gt;
&lt;b&gt;{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}&lt;/b&gt;
@ -471,7 +471,7 @@ export default {
&lt;b&gt;{{formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-'}}&lt;/b&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template slot="footer"&gt;
&lt;template #footer&gt;
&lt;div class="p-grid p-nogutter p-justify-between"&gt;
&lt;Button label="Back" @click="prevPage()" icon="pi pi-angle-left" /&gt;
&lt;Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/&gt;