mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 17:32:36 +00:00
Add dynamic import doc
This commit is contained in:
parent
3875099e4a
commit
7f5264a2a7
3 changed files with 66 additions and 0 deletions
28
apps/showcase/doc/guides/dynamicimports/OverviewDoc.vue
Normal file
28
apps/showcase/doc/guides/dynamicimports/OverviewDoc.vue
Normal 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>
|
||||
<script setup>
|
||||
import * as PrimeVue from 'primevue';
|
||||
|
||||
const items = [
|
||||
{ as: 'Button', class: 'my-button-class' },
|
||||
{ as: 'InputText', class: 'my-inputtext-class' }
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component v-for="item of items" :is="PrimeVue[item.as]" :class="item.class" />
|
||||
</template>
|
||||
|
||||
</code></pre>
|
||||
</template>
|
Loading…
Add table
Add a link
Reference in a new issue