primevue-mirror/apps/showcase/pages/tailwind/index.vue

90 lines
2.9 KiB
Vue
Raw Normal View History

2024-05-27 19:18:44 +00:00
<template>
<Head>
<Title>Tailwind CSS - PrimeVue</Title>
2024-06-13 05:48:27 +00:00
<Meta name="description" content="Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes" />
2024-05-27 19:18:44 +00:00
</Head>
<div class="doc">
<div class="doc-main">
<div class="doc-intro">
<h1>Tailwind CSS</h1>
2024-06-13 05:48:27 +00:00
<p>Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes.</p>
2024-05-27 19:18:44 +00:00
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</div>
</template>
<script>
2024-05-28 07:44:55 +00:00
import AnimationsDoc from '@/doc/tailwind/AnimationsDoc.vue';
2024-05-27 19:18:44 +00:00
import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
2024-06-13 05:48:27 +00:00
import OverrideDoc from '@/doc/tailwind/OverrideDoc.vue';
2024-05-27 19:18:44 +00:00
import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
2024-05-28 06:18:34 +00:00
import ColorPaletteDoc from '@/doc/tailwind/samples/ColorPaletteDoc.vue';
2024-05-28 07:06:48 +00:00
import FormDoc from '@/doc/tailwind/samples/FormDoc.vue';
import HeadlessDoc from '@/doc/tailwind/samples/HeadlessDoc.vue';
2024-05-27 19:18:44 +00:00
export default {
data() {
return {
docs: [
{
id: 'overview',
label: 'Overview',
component: OverviewDoc
},
{
id: 'presets',
label: 'Presets',
component: PresetsDoc
},
{
id: 'plugin',
2024-06-13 05:48:27 +00:00
label: 'Plugin',
2024-05-27 19:18:44 +00:00
component: PluginDoc
},
{
id: 'extensions',
label: 'Extensions',
component: ExtensionsDoc
},
{
2024-06-13 05:48:27 +00:00
id: 'override',
label: 'Override',
component: OverrideDoc
},
{
2024-05-27 19:18:44 +00:00
id: 'samples',
label: 'Samples',
2024-05-28 06:18:34 +00:00
description: 'Example uses cases with PrimeVue and Tailwind CSS.',
children: [
{
2024-05-28 07:06:48 +00:00
id: 'colorpalette',
2024-05-28 06:18:34 +00:00
label: 'Color Palette',
component: ColorPaletteDoc
2024-05-28 07:06:48 +00:00
},
{
id: 'form',
label: 'Form',
component: FormDoc
},
{
id: 'headless',
label: 'Headless',
component: HeadlessDoc
2024-05-28 06:18:34 +00:00
}
]
2024-05-28 07:44:55 +00:00
},
{
id: 'animations',
label: 'Animations',
component: AnimationsDoc
2024-05-30 09:00:53 +00:00
}
2024-05-27 19:18:44 +00:00
]
};
}
};
</script>