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

48
doc/dynamicdialog/OpenDialogDoc.vue
View file

@ -1,46 +1,40 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
<p>The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
</DocSectionText>
<DocSectionCode :code="code" importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
code1: {
basic: `
import ProductListDemo from './ProductListDemo';
export default {
methods:{
showProducts() {
this.$dialog.open(ProductListDemo, {});
}
}
}
`,
options: `
import ProductListDemo from './ProductListDemo';
export default {
methods:{
showProducts() {
this.$dialog.open(ProductListDemo, {});
}
}
}
`,
composition: `
import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
const showProducts = () => {
const dialog = useDialog();
dialog.open(ProductListDemo, {});
}`
}
`
},
code2: {
basic: `
import { useDialog } from 'primevue/usedialog';
const dialog = useDialog();
const dynamicComponent = defineAsyncComponent(() => import('./ProductListDemo.vue'));
const showProducts = () => {
dialog.open(dynamicComponent, {});
}
`
}
};
}