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

Update TW doc

pull/5880/head
Cagatay Civici 2024-06-13 08:48:27 +03:00
parent ff3fb8104e
commit abc8676c46
4 changed files with 72 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/showcase/assets/styles/layout/_doc.scss
View File

@ -162,6 +162,7 @@
border-radius: 10px; border-radius: 10px;
background: var(--mark-background); background: var(--mark-background);
color: var(--mark-text); color: var(--mark-text);
margin-bottom: 1rem;
} }
.doc-section-nav { .doc-section-nav {

61
apps/showcase/doc/tailwind/OverrideDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<DocSectionText v-bind="$attrs">
<p>In styled mode, Tailwind utilities may not be able to override the default styling due to css specificity, there are two possible solutions.</p>
<h3>Important</h3>
<p>Use the <i>!</i> as a prefix to enforce the styling.</p>
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
<h3>CSS Layer</h3>
<p>
Enable PrimeVue CSS layer and configure the tailwind styles to have higher specificity with layering. This way, <i>!</i> prefix is not required. If you are using Nuxt, there is a
<NuxtLink to="/nuxt/#layerorder">cssLayerOrder</NuxtLink> property to define the order.
</p>
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
<InputText placeholder="Overriden" class="!p-8" />
`
},
code2: {
basic: `
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
cssLayer: true
}
}
});
`
},
code3: {
basic: `
@layer tailwind-base, primevue, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}
`
}
};
}
};
</script>

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

@ -1,5 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<div class="doc-notification">Currently, the Tailwind CSS Presets are not compatible with v4 and will be with a future update after v4 final.</div>
<p> <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 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. 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.

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

@ -1,13 +1,13 @@
<template> <template>
<Head> <Head>
<Title>Tailwind CSS - PrimeVue</Title> <Title>Tailwind CSS - PrimeVue</Title>
<Meta name="description" content="Integration between PrimeVue and Tailwind CSS" /> <Meta name="description" content="Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes" />
</Head> </Head>
<div class="doc"> <div class="doc">
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Tailwind CSS</h1> <h1>Tailwind CSS</h1>
<p>Integration between PrimeVue and Tailwind CSS.</p> <p>Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes.</p>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>
@ -18,6 +18,7 @@
<script> <script>
import AnimationsDoc from '@/doc/tailwind/AnimationsDoc.vue'; import AnimationsDoc from '@/doc/tailwind/AnimationsDoc.vue';
import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue'; import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
import OverrideDoc from '@/doc/tailwind/OverrideDoc.vue';
import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue'; import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
import PluginDoc from '@/doc/tailwind/PluginDoc.vue'; import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue'; import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
@ -41,7 +42,7 @@ export default {
}, },
{ {
id: 'plugin', id: 'plugin',
label: 'PluginDoc', label: 'Plugin',
component: PluginDoc component: PluginDoc
}, },
{ {
@ -49,6 +50,11 @@ export default {
label: 'Extensions', label: 'Extensions',
component: ExtensionsDoc component: ExtensionsDoc
}, },
{
id: 'override',
label: 'Override',
component: OverrideDoc
},
{ {
id: 'samples', id: 'samples',
label: 'Samples', label: 'Samples',