Update PrimeFlex related information
Cagatay Civici
parent
0c286f3795
commit
a4e3274a17
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.</p>
|
||||
<p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties. This example utilizes <i>tailwindcss-primeui</i> plugin animations however any valid CSS animation is supported.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-col items-center overflow-hidden">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -3002,7 +3002,7 @@
|
|||
}
|
||||
},
|
||||
"animateonscrollstyle": {
|
||||
"description": "AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.\n\n[Live Demo](https://primevue.org/animateonscroll)",
|
||||
"description": "AnimateOnScroll manages CSS classes declaratively to during enter/leave animations on scroll or on page load.\n\n[Live Demo](https://primevue.org/animateonscroll)",
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
|
|
@ -100470,4 +100470,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind, Bootstrap or PrimeFlex. Visit
|
||||
Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit
|
||||
<NuxtLink to="/theming/unstyled">Unstyled mode</NuxtLink> documentation for more information.
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Dialog width can be adjusted per screen size with the <i>breakpoints</i> option where the max-width for the breakpoint and the width are defined as key-value pairs. When no breakpoint matches width defined in <i>style</i> or
|
||||
<i>class</i> is used. Alternatively responsive utility classes of libraries like Tailwind or PrimeFlex can also be used such as <i>md:w-screen</i>.
|
||||
<i>class</i> is used. Alternatively responsive utility classes of libraries like Tailwind can also be used such as <i>md:w-screen</i>.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
||||
|
|
|
|||
|
|
@ -59,5 +59,8 @@
|
|||
The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer" class="doc-link">nuxt-primevue</a> module has been replaced with the new
|
||||
<a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer" class="doc-link">@primevue/nuxt-module</a>. The old module is still maintained for v3 users.
|
||||
</p>
|
||||
|
||||
<h4>PrimeFlex CSS</h4>
|
||||
<p>In case you are using PrimeFlex CSS library, upgrade to PrimeFlex v4 since PrimeFlex v3 is not compatible with PrimeVue v4+.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The compatible versions to choose the correct combination.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PrimeVue v4 and newer</td>
|
||||
<td>PrimeFlex v4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PrimeVue v3 and older</td>
|
||||
<td>PrimeFlex v3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -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 an unstyled Panel component with Tailwind CSS library.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
||||
|
|
@ -15,21 +15,17 @@
|
|||
<Panel
|
||||
header="Header"
|
||||
toggleable
|
||||
unstyled
|
||||
:pt="{
|
||||
root: 'border border-primary rounded-xl p-4',
|
||||
header: (options) => ({
|
||||
id: 'myPanelHeader',
|
||||
style: {
|
||||
'user-select': 'none'
|
||||
},
|
||||
class: [
|
||||
'border-primary',
|
||||
{
|
||||
'bg-primary text-primary-contrast': options.state.d_collapsed,
|
||||
'text-primary bg-primary-contrast': !options.state.d_collapsed
|
||||
}
|
||||
]
|
||||
class: ['flex items-center justify-between text-primary font-bold']
|
||||
}),
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
content: { class: 'text-primary-700 dark:text-primary-200 mt-4' },
|
||||
title: 'text-xl',
|
||||
toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
|
||||
}"
|
||||
|
|
@ -51,22 +47,17 @@ export default {
|
|||
basic: `
|
||||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
root: 'border border-primary rounded-xl p-4',
|
||||
header: (options) => ({
|
||||
id: 'myPanelHeader',
|
||||
style: {
|
||||
'user-select': 'none'
|
||||
},
|
||||
class: [
|
||||
'border-primary',
|
||||
{
|
||||
'bg-primary text-primary-contrast': options.state.d_collapsed,
|
||||
'text-primary bg-primary-contrast': !options.state.d_collapsed
|
||||
}
|
||||
]
|
||||
class: ['flex items-center justify-between text-primary font-bold']
|
||||
}),
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: 'text-xl', // OR { class: 'text-xl' }
|
||||
toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
|
||||
content: { class: 'text-primary-700 dark:text-primary-200 mt-4' },
|
||||
title: 'text-xl',
|
||||
toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
|
||||
}">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
|
||||
<p>Sample Card implementation using different Skeleton components and Tailwind CSS utilities.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
|
||||
<p>Sample DataTable implementation using different Skeleton components and Tailwind CSS utilities.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<DataTable :value="products">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
|
||||
<p>Sample List implementation using different Skeleton components and Tailwind CSS utilities.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>PrimeFlex - Dynamic Imports</Title>
|
||||
<Title>PrimeVue - Dynamic Imports</Title>
|
||||
<Meta name="description" content="Dynamic imports enable the loading of multiple items as needed, streamlining the import process." />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>PrimeFlex - PrimeVue</Title>
|
||||
<Meta name="description" content="Moving from PrimeFlex to Tailwind CSS." />
|
||||
<Meta name="description" content="The PrimeFlex CSS library is being sunset and will no longer receive active development or maintenance." />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Introduction</h1>
|
||||
<p>Moving from PrimeFlex to Tailwind CSS.</p>
|
||||
<p>The PrimeFlex CSS library is being sunset and will no longer receive active development or maintenance.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CompatibilityDoc from '@/doc/guides/primeflex/CompatibilityDoc.vue';
|
||||
import MigrationDoc from '@/doc/guides/primeflex/MigrationDoc.vue';
|
||||
import OverviewDoc from '@/doc/guides/primeflex/OverviewDoc.vue';
|
||||
import PluginDoc from '@/doc/guides/primeflex/PluginDoc.vue';
|
||||
|
|
@ -30,6 +31,11 @@ export default {
|
|||
label: 'Overview',
|
||||
component: OverviewDoc
|
||||
},
|
||||
{
|
||||
id: 'compatibility',
|
||||
label: 'Compatibility',
|
||||
component: CompatibilityDoc
|
||||
},
|
||||
{
|
||||
id: 'tailwindcss',
|
||||
label: 'Tailwind CSS',
|
||||
|
|
|
|||
|
|
@ -170,8 +170,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -141,8 +141,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -171,8 +171,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -141,8 +141,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -142,8 +142,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -132,8 +132,8 @@ export default {
|
|||
featuresData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'PrimeFlex CSS Utilities',
|
||||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||||
title: 'Tailwind CSS',
|
||||
description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export interface AnimateOnScrollDirectiveBinding extends Omit<DirectiveBinding,
|
|||
/**
|
||||
* **PrimeVue - AnimateOnScroll**
|
||||
*
|
||||
* _AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load._
|
||||
* _AnimateOnScroll manages CSS classes declaratively to during enter/leave animations on scroll or on page load._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/animateonscroll/)
|
||||
* --- ---
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
*
|
||||
* AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
|
||||
* AnimateOnScroll manages CSS classes declaratively to during enter/leave animations on scroll or on page load.
|
||||
*
|
||||
* [Live Demo](https://primevue.org/animateonscroll)
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue