Merge branch 'prod'
Cagatay Civici
commit
e0c1c4e340
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"id": 42,
|
||||
"content": "Introducing Tailwind CSS Support",
|
||||
"id": 43,
|
||||
"content": "Building Design Systems with Tailwind",
|
||||
"linkText": "Learn More",
|
||||
"linkHref": "https://primevue.org/tailwind",
|
||||
"backgroundStyle": "background-color:#4f8ff7",
|
||||
|
|
|
|||
|
|
@ -455,10 +455,6 @@
|
|||
"name": "Overview",
|
||||
"to": "/unstyled"
|
||||
},
|
||||
{
|
||||
"name": "Tailwind",
|
||||
"to": "/tailwind"
|
||||
},
|
||||
{
|
||||
"name": "Bootstrap",
|
||||
"to": "/bootstrap"
|
||||
|
|
@ -476,6 +472,12 @@
|
|||
"icon": "pi pi-directions",
|
||||
"to": "/passthrough"
|
||||
},
|
||||
{
|
||||
"name": "Tailwind",
|
||||
"icon": "pi pi-heart",
|
||||
"to": "/tailwind",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "Figma UI Kit",
|
||||
"icon": "pi pi-pencil",
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@
|
|||
margin-bottom: 2rem;
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
color: var(--surface-800);
|
||||
font-size: 1.125rem;
|
||||
color: var(--surface-900);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
.doc-section-description {
|
||||
> p {
|
||||
font-size: 1.125rem;
|
||||
color: var(--surface-800);
|
||||
color: var(--surface-900);
|
||||
|
||||
i {
|
||||
border-radius: 6px;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</p>
|
||||
<p>
|
||||
Most common usage of <i>pt</i> is styling and customization. The <i>class</i> and <i>style</i> properties support the exact syntax of the corresponding
|
||||
<a href="https://vuejs.org/guide/essentials/class-and-style.html">Vue bindings</a> like arrays, objects and conditionals. example below styles a Panel component with PrimeFlex CSS library.
|
||||
<a href="https://vuejs.org/guide/essentials/class-and-style.html">Vue bindings</a> like arrays, objects and conditionals. Example below styles a Panel component with PrimeFlex CSS library.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The built-in theme implements the PrimeOne Design to provide a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. The unstyled section of the theming
|
||||
documentation for each component demonstrates the theme with an editable example. For instance, the panel component has the following default configuration.
|
||||
The built-in preset is based on the PrimeOne Design and meant to serve as a template to implement your own design. For customization, the pass through values need to be overriden or defined from the ground up. The unstyled section of the
|
||||
theming documentation for each component demonstrates the theme with an editable example. For the complete list visit the
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/components/lib/passthrough/tailwind">Tailwind Preset</a>.
|
||||
</p>
|
||||
<p>First approach is building everything from the ground up and consult the default preset to get hints about the implementation details. This technique is suggested when implementing your own design system.</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>Let's assume the <i>title</i> section should be lighter and bigger. For the merge configuration behavior, visit <NuxtLink to="/passthrough/#usepassthrough">usePassThrough</NuxtLink> documentation.</p>
|
||||
<p>
|
||||
Alternative way is overriding the opinionated PrimeOne theme with <i>usePassThrough</i>. This approach is suggested when you prefer to customize the default preset for your own requirements. For the merge configuration behavior, visit
|
||||
<NuxtLink to="/passthrough/#usepassthrough">usePassThrough</NuxtLink> documentation.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -15,36 +20,47 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `panel: {
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-between', // flex and alignments
|
||||
'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
|
||||
{ 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
|
||||
]
|
||||
}),
|
||||
title: {
|
||||
class: ['leading-none font-bold']
|
||||
},
|
||||
toggler: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
|
||||
'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
|
||||
'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
|
||||
]
|
||||
},
|
||||
togglerIcon: {
|
||||
class: ['inline-block']
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
|
||||
] // padding, borders, and colors
|
||||
basic: `import {createApp} from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
import Tailwind from "primevue/passthrough/tailwind";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
//My Design System with Tailwind
|
||||
const MyDesignSystem = {
|
||||
panel: {
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center justify-between', // flex and alignments
|
||||
'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
|
||||
{ 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
|
||||
]
|
||||
}),
|
||||
title: {
|
||||
class: ['leading-none font-bold']
|
||||
},
|
||||
toggler: {
|
||||
class: [
|
||||
'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
|
||||
'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
|
||||
'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
|
||||
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
|
||||
]
|
||||
},
|
||||
togglerIcon: {
|
||||
class: ['inline-block']
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
|
||||
'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
|
||||
] // padding, borders, and colors
|
||||
}
|
||||
}
|
||||
},`
|
||||
}
|
||||
|
||||
app.use(PrimeVue, { unstyled: true, pt: MyDesignSystem });`
|
||||
},
|
||||
code2: {
|
||||
basic: `import {createApp} from "vue";
|
||||
|
|
|
|||
|
|
@ -1,21 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The built-in theme is optional as Tailwind can easily be integrated with PrimeVue components in unstyled mode either using global setting or for a particular component only. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode
|
||||
documentation for getting started. As an example, Tailwind is used to style the <i>Button</i> and <i>Dialog</i> components of PrimeVue without the default theme.
|
||||
</p>
|
||||
<p>This example covers how to enable the default Tailwind based PrimeOne Design implementation and the customization options.</p>
|
||||
</DocSectionText>
|
||||
<div class="flex justify-content-center">
|
||||
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" src="https://codesandbox.io/p/sandbox/unstyled-primevue-dialog-with-tailwind-css-2jp96n?embed=1" allowfullscreen></iframe>
|
||||
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-3gg5r4?file=src%2FApp.vue&embed=1"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS <a href="https://tailwindcss.com/docs/installation/framework-guides">framework guides</a> like Vite or Nuxt for the installation.
|
||||
The built-in default theme is basically a <PrimeVueNuxtLink to="/passthrough">global pass through</PrimeVueNuxtLink> configuration that needs to be imported from <i>primevue/passthrough/tailwind</i> path and then defined during setup.
|
||||
Since the theme is exclusive to unstyled mode, the <i>unstyled</i> setting is required in addition.
|
||||
The built-in default theme is basically a <PrimeVueNuxtLink to="/passthrough">global pass through</PrimeVueNuxtLink> preset that needs to be imported from <i>primevue/passthrough/tailwind</i> path and then defined during setup. Since the
|
||||
theme is exclusive to unstyled mode, the <i>unstyled</i> setting is required in addition.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>
|
||||
Tailwind uses PurgeCSS internally to remove unused classes, since PrimeVue components are loaded from node_modules the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeVue, otherwise the classes utilized in
|
||||
the theme will be removed as well.
|
||||
Tailwind uses PurgeCSS internally to remove unused classes, as PrimeVue components are loaded from <i>node_modules</i> the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeVue, otherwise the classes utilized
|
||||
in the theme will be removed as well.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.</p>
|
||||
<p>Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application. Time to customize it to bring in your own style with Tailwind.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,26 @@
|
|||
<template>
|
||||
<li v-for="(menuitem, index) in menu" :key="`_root${index}`">
|
||||
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="px-link">
|
||||
<div class="menu-icon">
|
||||
<span class="menu-icon">
|
||||
<i :class="menuitem.icon"></i>
|
||||
</div>
|
||||
</span>
|
||||
<span>{{ menuitem.name }}</span>
|
||||
<i class="menu-toggle-icon pi pi-angle-down"></i>
|
||||
</button>
|
||||
|
||||
<a v-if="menuitem.href" :href="menuitem.href" target="_blank" rel="noopener noreferrer">
|
||||
<div v-if="menuitem.icon && root" class="menu-icon">
|
||||
<span v-if="menuitem.icon && root" class="menu-icon">
|
||||
<i :class="menuitem.icon"></i>
|
||||
</div>
|
||||
{{ menuitem.name }}
|
||||
</span>
|
||||
<span>{{ menuitem.name }}</span>
|
||||
<Badge v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Badge>
|
||||
</a>
|
||||
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
|
||||
<div v-if="menuitem.icon && root" class="menu-icon">
|
||||
<span v-if="menuitem.icon && root" class="menu-icon">
|
||||
<i :class="menuitem.icon"></i>
|
||||
</div>
|
||||
{{ menuitem.name }}
|
||||
</span>
|
||||
<span>{{ menuitem.name }}</span>
|
||||
<Badge v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Badge>
|
||||
</PrimeVueNuxtLink>
|
||||
|
||||
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,11 @@
|
|||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Tailwind CSS</h1>
|
||||
<p>Tailwind is a popular utility-first CSS library that fits perfectly to the unstyled mode of PrimeVue. A <b>built-in Tailwind theme</b> is even available to get started in no time.</p>
|
||||
<p>
|
||||
The exclusive Tailwind integration of PrimeVue is a great choice for developers who want the flexibility of Tailwind with the convenience of a UI Component library. Tailwind simply fits perfectly to the unstyled mode of
|
||||
PrimeVue to implement design systems. A <b>built-in Tailwind theme</b> based on <PrimeVueNuxtLink to="/uikit" class="text-primary hover:underline font-semibold">PrimeOne Design</PrimeVueNuxtLink> is even available to get
|
||||
started in no time. In the upcoming iterations, PrimeVue will provide more presets to implement various design systems.
|
||||
</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue