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

Update docs

pull/6687/head
Cagatay Civici 2024-10-29 13:42:31 +03:00
parent 16b84cbe7f
commit de31066532
7 changed files with 37 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -504,23 +504,9 @@
},
{
"name": "Tailwind CSS",
"icon": "pi pi-heart",
"children": [
{
"name": "Integration",
"icon": "pi pi-star",
"to": "/tailwind"
},
{
"name": "Presets",
"href": "https://tailwind.primevue.org"
}
]
},
{
"name": "Figma UI Kit",
"icon": "pi pi-pencil",
"to": "/uikit"
},
{
"name": "Icons",
"icon": "pi pi-eye",
@ -535,9 +521,14 @@
}
]
},
{
"name": "Figma UI Kit",
"icon": "pi pi-pencil",
"to": "/uikit"
},
{
"name": "Templates",
"icon": "pi pi-star",
"icon": "pi pi-heart",
"to": "/templates"
},
{

6
apps/showcase/doc/tailwind/OverviewDoc.vue
View File

@ -7,9 +7,13 @@
</p>
<p>
Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component library. The
core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the presets for the unstyled mode.
core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the Tailwind version for the unstyled mode.
</p>
</DocSectionText>
<div class="doc-notification">
Tailwind CSS and PrimeVue can be used together via two main approaches. Simple approach is using Tailwind CSS <b>around</b> PrimeVue components for layout purposes as demonstrated in the samples section below, the advanced approach takes the
integration a step further by allowing Tailwind CSS <b>within</b> the component internals to style the entire UI suite in <NuxtLink to="/theming/unstyled" class="doc-link">unstyled mode</NuxtLink>.
</div>
</template>
<script></script>

15
apps/showcase/doc/tailwind/PresetsDoc.vue
View File

@ -1,15 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
In unstyled mode of PrimeVue, default styling elements like design tokens and css classes are turned off so that you have full control over the component styling with pass-through properties. This feature is quite useful when you'd like
to build your own UI library based on a custom design by wrapping PrimeVue components or simply utilitze Tailwind CSS to style the PrimeVue components.
</p>
<p>
The unstyled mode also use the <i>preset</i> concept just like the styled mode to define a theme. In styled mode a preset is a set of design tokens implemented with CSS variables whereas in unstyled mode a preset is a Pass-Through
configuration object to inject Tailwind CSS classes into components. If you prefer to ignore the default styled mode theming api and use Tailwind CSS to style the PrimeVue UI components instead, learn more at the standalone
<a href="https://tailwind.primevue.org/" target="_blank" rel="noopener noreferrer">Tailwind CSS Presets</a> project website.
</p>
</DocSectionText>
</template>
<script></script>

10
apps/showcase/doc/tailwind/TailwindThemeDoc.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
PrimeTek offers the Tailwind CSS version of the entire PrimeVue UI suite in <NuxtLink to="/theming/unstyled" class="doc-link">unstyled mode</NuxtLink> based on the <i>@apply</i> directive with IntelliSense support. Visit the
<a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind version of PrimeVue</a> for the documentation, demos and additional resources.
</p>
</DocSectionText>
</template>
<script></script>

20
apps/showcase/doc/tailwind/samples/ColorPaletteDoc.vue
View File

@ -23,6 +23,7 @@
</div>
</div>
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script>
@ -31,18 +32,15 @@ export default {
return {
shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
colors: ['primary', 'surface'],
code1: {
code: {
basic: `
npm i tailwindcss-primeui
`
},
code2: {
basic: `
// tailwind.config.js
module.exports = {
// ...
plugins: [require('tailwindcss-primeui')]
};
<div class="flex flex-col gap-12">
<div class="flex gap-6 flex-wrap">
<div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-primary hover:bg-primary-emphasis text-primary-contrast font-medium flex-auto transition-colors">primary</div>
<div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-highlight hover:bg-highlight-emphasis font-medium flex-auto transition-colors">highlight</div>
<div class="rounded-border p-4 border border-surface flex items-center justify-center text-muted-color hover:text-color hover:bg-emphasis font-medium flex-auto transition-colors">box</div>
</div>
</div>
`
}
};

3
apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
View File

@ -30,8 +30,7 @@ export default {
unstyled
pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
pt:label="text-white font-bold text-lg"
pt:icon="
"
pt:icon="text-white text-xl"
/>
`
}

8
apps/showcase/pages/tailwind/index.vue
View File

@ -21,7 +21,7 @@ import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
import OverrideDoc from '@/doc/tailwind/OverrideDoc.vue';
import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
import TailwindThemeDoc from '@/doc/tailwind/TailwindThemeDoc.vue';
import ColorPaletteDoc from '@/doc/tailwind/samples/ColorPaletteDoc.vue';
import FormDoc from '@/doc/tailwind/samples/FormDoc.vue';
import HeadlessDoc from '@/doc/tailwind/samples/HeadlessDoc.vue';
@ -36,9 +36,9 @@ export default {
component: OverviewDoc
},
{
id: 'presets',
label: 'Presets',
component: PresetsDoc
id: 'tailwind-theme',
label: 'Tailwind Theme',
component: TailwindThemeDoc
},
{
id: 'plugin',