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

Add dynamic import doc

pull/6705/head
Mert Sincan 2024-11-01 06:53:49 +00:00
parent 3875099e4a
commit 7f5264a2a7
3 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/assets/menu/menu.json
View File

@ -551,6 +551,10 @@
"name": "Accessibility", "name": "Accessibility",
"to": "/guides/accessibility" "to": "/guides/accessibility"
}, },
{
"name": "Dynamic Imports",
"to": "/guides/dynamicimports"
},
{ {
"name": "Migration to V4", "name": "Migration to V4",
"to": "/guides/migration/v4" "to": "/guides/migration/v4"

28
apps/showcase/doc/guides/dynamicimports/OverviewDoc.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<DocSectionText v-bind="$attrs">
<p>With <i>@primevue/icons</i> for icons and <i>primevue</i> for components (except Editor and Chart), multiple items can be imported together.</p>
</DocSectionText>
<pre v-code><code>
import { Button, InputText } from 'primevue';
import { SearchIcon, BellIcon } from '@primevue/icons';
</code></pre>
<div class="doc-section-description mt-4">
<p>On the other hand, they enable the loading of multiple items from a specific structure as needed, making code management easier.</p>
</div>
<pre v-code><code>
&lt;script setup&gt;
import * as PrimeVue from 'primevue';
const items = [
{ as: 'Button', class: 'my-button-class' },
{ as: 'InputText', class: 'my-inputtext-class' }
};
&lt;/script&gt;
&lt;template&gt;
&lt;component v-for="item of items" :is="PrimeVue[item.as]" :class="item.class" /&gt;
&lt;/template&gt;
</code></pre>
</template>

34
apps/showcase/pages/guides/dynamicimports/index.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<Head>
<Title>PrimeFlex - Dynamic Imports</Title>
<Meta name="description" content="Dynamic imports enable the loading of multiple items as needed, streamlining the import process." />
</Head>
<div class="doc">
<div class="doc-main">
<div class="doc-intro">
<h1>Dynamic Imports</h1>
<p>Dynamic imports enable the loading of multiple items as needed, streamlining the import process.</p>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</div>
</template>
<script>
import OverviewDoc from '@/doc/guides/dynamicimports/OverviewDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'overview',
label: 'Overview',
component: OverviewDoc
}
]
};
}
};
</script>