vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updated DynamicDialog documentation

Browse source
This commit is contained in:
Cagatay Civici 2023-11-02 09:28:24 +03:00
parent 03732ab3f8
commit dbac600078
11 changed files with 160 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

30
doc/dynamicdialog/DialogServiceDoc.vue
View file

@ -1,12 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Dynamic dialogs are controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
<p>A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template.</p>
<DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
<p>A dynamic dialog is controlled via the <i>DialogService</i> that needs to be installed as an application plugin.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>The service is available with the <i>useDialog</i> function for Composition API or using the <i>$dialog</i> property of the application for Options API.</p>
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<div class="doc-section-description">
<p><i>$dialog</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useDialog</i> function for Composition API.</p>
</div>
<DocSectionCode :code="code2" importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
@ -15,6 +15,11 @@ export default {
return {
code1: {
basic: `
<DynamicDialog />
`
},
code2: {
basic: `
import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice';
@ -22,19 +27,16 @@ const app = createApp(App);
app.use(DialogService);
`
},
code2: {
code3: {
basic: `
/* Composition API */
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
`,
options: `const dialogRef = this.$dialog;
`,
composition: `
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();`
/* Options API */
const dialog = this.$dialog;
`
}
};
}