Add PrimeFlex doc
Cagatay Civici
parent
0e2f3a290d
commit
00c0434fe6
|
|
@ -538,12 +538,14 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Migration to V4",
|
"name": "Migration to V4",
|
||||||
"icon": "pi pi-sync",
|
|
||||||
"to": "/guides/migration/v4"
|
"to": "/guides/migration/v4"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "PrimeFlex",
|
||||||
|
"to": "/guides/primeflex"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "PrimeTV",
|
"name": "PrimeTV",
|
||||||
"icon": "pi pi-youtube",
|
|
||||||
"href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
|
"href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
The <a href="https://www.npmjs.com/package/primeclt" target="_blank" rel="noopener noreferrer">primeclt</a> is a command line utility by PrimeTek to assist project setup and migration. The <i>pf2tw</i> command is created for smooth
|
||||||
|
migration between PrimeFlex to Tailwind CSS. As a prequisite, the <i>tailwindcss-primeui</i> is required to provide the matching classes that do not exist in core Tailwind CSS such as semantic colors and animations.
|
||||||
|
</p>
|
||||||
|
<p>Install PrimeCLT.</p>
|
||||||
|
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||||
|
<p>Run the <i>pf2wt</i> in a directory that contains files to be migrated.</p>
|
||||||
|
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
|
||||||
|
<p>There are a couple of minor limitations that are not migrated. PrimeVue v3 is not supported as the plugin is compatible with PrimeVue v4 only. In addition, following classes are not migrated as they have no counterparts.</p>
|
||||||
|
<ul class="leading-loose">
|
||||||
|
<li>formgrid</li>
|
||||||
|
<li>formgroup</li>
|
||||||
|
<li>formgroup-inline</li>
|
||||||
|
<li>col</li>
|
||||||
|
<li>col-fixed</li>
|
||||||
|
<li>field</li>
|
||||||
|
<li>field-checkbox</li>
|
||||||
|
<li>field-radiobutton</li>
|
||||||
|
<li>reset</li>
|
||||||
|
</ul>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code1: {
|
||||||
|
basic: `
|
||||||
|
npm install -g primeclt
|
||||||
|
`
|
||||||
|
},
|
||||||
|
code2: {
|
||||||
|
basic: `
|
||||||
|
prime pf2tw
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
<a href="https://primeflex.org">PrimeFlex</a> is designed to be a lightweight CSS utility to accompany Prime UI libraries. As part of our product roadmap planning at PrimeTek, the team has decided to avoid the maintenance of a CSS library
|
||||||
|
and utilize the resources on improving the UI libraries instead. Community feedback has been essential in this decision as well since majority of the applications have their own CSS utilities whether it is Tailwind, Bootstrap or an
|
||||||
|
in-house one, as a result adding PrimeFlex to a project was causing overlapping functionality.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
|
||||||
|
PrimeVue and Tailwind CSS. In styled mode, the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>, <i>text-surface-500</i>, <i>text-muted-color</i>.
|
||||||
|
</p>
|
||||||
|
<p>View the <NuxtLink to="/tailwind/">Tailwind</NuxtLink> section for more details about the installation and the features.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
Tailwind CSS in particular is a popular choice, we have even build <a href="https://tailwind.primevue.org">Tailwind CSS presets</a> for the unstyled mode to be able to use the utility classes to style the PrimeVue components. During this
|
||||||
|
work, we've realized that the value added by PrimeFlex such as providing the PrimeVue theming as utility classes can be implemented as a Tailwind plugin. As part of PrimeVue v4, a tailwind-primeui plugin has been created for the seamless
|
||||||
|
integration, the website templating demos have been migrated from PrimeFlex to Tailwind and a converter tool called <i>pf2tw</i> has been created. In summary, PrimeTek officially suggests Tailwind CSS as the replacement for PrimeFlex.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<template>
|
||||||
|
<Head>
|
||||||
|
<Title>PrimeFlex - PrimeVue</Title>
|
||||||
|
<Meta name="description" content="Moving from PrimeFlex to Tailwind CSS." />
|
||||||
|
</Head>
|
||||||
|
<div class="doc">
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Introduction</h1>
|
||||||
|
<p>Moving from PrimeFlex to Tailwind CSS.</p>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import MigrationDoc from '@/doc/guides/primeflex/MigrationDoc.vue';
|
||||||
|
import OverviewDoc from '@/doc/guides/primeflex/OverviewDoc.vue';
|
||||||
|
import PluginDoc from '@/doc/guides/primeflex/PluginDoc.vue';
|
||||||
|
import TailwindCSSDoc from '@/doc/guides/primeflex/TailwindCSSDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'overview',
|
||||||
|
label: 'Overview',
|
||||||
|
component: OverviewDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'tailwindcss',
|
||||||
|
label: 'Tailwind CSS',
|
||||||
|
component: TailwindCSSDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'plugin',
|
||||||
|
label: 'Plugin',
|
||||||
|
component: PluginDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'migration',
|
||||||
|
label: 'Migration',
|
||||||
|
component: MigrationDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue