Added new docs
Cagatay Civici
parent
5e771cf979
commit
16b84cbe7f
File diff suppressed because it is too large
Load Diff
|
|
@ -1,13 +1,38 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when <i>unstyled</i> setting is enabled components do not include any CSS selectors while core functionality is still
|
||||
available. For example, in the default styled mode, the select component adds <i>.p-select</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root element
|
||||
and the CSS is not included in the page.
|
||||
The term <i>unstyled</i> is used to define an alternative styling approach instead of the default theming with design tokens. PrimeVue offers two options for styling the components with your own css; the <i>hybrid</i> mode and the
|
||||
<i>pure</i> mode.
|
||||
</p>
|
||||
<p>
|
||||
The second part is custom styling as components are displayed as transparent without their styles. <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> feature is the key of since it also supports a global configuration to create
|
||||
themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom <i>pt</i> configuration.
|
||||
In both options, the css variables of the design tokens and the css rule sets that utilize them are not included. The main difference is, the <i>hybrid</i> mode keeps the selectors in the DOM such as <i>p-select</i> whereas the
|
||||
<i>pure</i> mode do not include them. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<table class="doc-table table-fixed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Hybrid</th>
|
||||
<th>Pure</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-* selectors in DOM</td>
|
||||
<td><i class="pi pi-check ms-4" /></td>
|
||||
<td><i class="pi pi-times ms-4" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CSS rule sets</td>
|
||||
<td><i class="pi pi-times ms-4" /></td>
|
||||
<td><i class="pi pi-times ms-4" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CSS variables</td>
|
||||
<td><i class="pi pi-times ms-4" /></td>
|
||||
<td><i class="pi pi-times ms-4" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>It may be confusing which styling approach to choose from due to the amount of options such as Styled, Pure and Hybrid. We've created a short video that discusses the pros and cons of each approach.</p>
|
||||
<p>
|
||||
In summary, the styled mode is a powerful API to learn with first class support for Figma, as a result when working with a UI Designer that utilizes the PrimeVue Figma UI Kit, the development flow would be productive. The unstyled mode is
|
||||
beneficial when you do not prefer to learn the default theming API, want full control over the styles or require Tailwind CSS as the only library for styling in your application. The downside of unstyled mode is that it requires the
|
||||
styles need to be maintained in the application.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/5M6xM4tTMQU?si=FzeuOeJOaGBoM-yK" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>In hybrid mode, the default css rules and variables are not included however the css selectors reside in the DOM so that you may use them to build your own rules.</p>
|
||||
<div class="card flex justify-center">
|
||||
<Button label="Search" icon="pi pi-search" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
.p-button {
|
||||
background: #a855f7;
|
||||
border: 0 none !important;
|
||||
color: white;
|
||||
padding: 0.5rem 0.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.p-button:enabled:hover {
|
||||
background: #a855f7;
|
||||
}
|
||||
|
||||
.p-button:enabled:active {
|
||||
background: #9333ea;
|
||||
}
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.p-button {
|
||||
background: #a855f7;
|
||||
border: 0 none !important;
|
||||
color: white;
|
||||
padding: 0.5rem 0.75rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.p-button:enabled:hover {
|
||||
background: #a855f7;
|
||||
}
|
||||
|
||||
.p-button:enabled:active {
|
||||
background: #9333ea;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Hybrid mode is enabled for the whole suite by setting the <i>theme</i> option as <i>none</i>.</p>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, { theme: 'none' });
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
PrimeTek offers the Tailwind CSS version of the entire PrimeVue UI suite based on the <i>@apply</i> directive with IntelliSense support. Visit the
|
||||
<a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind version of PrimeVue</a> for the documentation, demos and additional resources.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Tailwind CSS is perfect fit for the unstyled mode, visit the dedicated <NuxtLink to="/tailwind">Tailwind CSS</NuxtLink> documentation for the first-class integration.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
To get started, UnoCSS should already be available in your application, if not visit the UnoCSS <a href="https://unocss.dev/integrations/">documentation</a> for the installation in various environments. Theming of PrimeVue components with
|
||||
UnoCSS is mainly achieved with unstyled mode either using global setting or for a particular component only.
|
||||
</p>
|
||||
<p>For a sample, visit the <a href="https://github.com/primefaces/primevue-examples/tree/main/unstyled-unocss" target="_blank" rel="noopener noreferrer">example repository</a>.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Here is a sample that provides a style using Tailwind CSS. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be using the
|
||||
<i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
|
||||
Here is a sample that styles a button component with Tailwind CSS using <NuxtLink to="/passthrough">pass through</NuxtLink> attributes. Before beginning, head over to the the pass through section at
|
||||
<NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals section. We'll be using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
|
||||
</p>
|
||||
<div class="card flex justify-center">
|
||||
<Button
|
||||
|
|
@ -30,7 +30,8 @@ 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="text-white text-xl"
|
||||
pt:icon="
|
||||
"
|
||||
/>
|
||||
`
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
An unstyled theme is basically a global <i>pt</i> configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the <i>pt</i> props of a component and the
|
||||
global setting is merged with component having higher precedencee.
|
||||
A global configuration can be created at application level to avoid repetition via the global <i>pt</i> option so that the styles can be shared from a single location. A particular component can still override a global configuration with
|
||||
its own <i>pt</i> property.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
||||
|
|
@ -20,11 +20,12 @@ import PrimeVue from "primevue/config";
|
|||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
unstyled: true,
|
||||
pt: {
|
||||
button: {
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
|
||||
label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
|
||||
icon: 'text-white text-2xl'
|
||||
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',
|
||||
label: 'text-white font-bold text-lg',
|
||||
icon: 'text-white text-xl'
|
||||
},
|
||||
panel: {
|
||||
header: 'bg-primary text-primary-contrast border-primary',
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeVue installation.</p>
|
||||
<p>Pure mode is enabled for the whole suite by enabling <i>unstyled</i> option during PrimeVue installation.</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p>
|
||||
<div class="card flex justify-center">
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Tailwind CSS is perfect fit for the pure mode, our team has initiated the reference implementation of the global <i>pt</i> configuration to style the entire UI suite called the
|
||||
<a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind CSS presets</a>. This add-on project is currently looking for community contributors to take over the ownership as
|
||||
it requires significant bandwidth for PrimeTek to maintain both the styled mode and the unstyled mode presets via pass-through.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimizization. Import path is available
|
||||
Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available
|
||||
in the documentation of the corresponding component.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle mr-4 text-green-500"></i>
|
||||
<span class="leading-normal">Up to 5 accounts</span>
|
||||
<span class="leading-normal">Shared account per organization</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle mr-4 text-green-500"></i>
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<div class="font-semibold mb-1">2. Setup</div>
|
||||
<span class="leading-normal">A private repository with an exclusive issue tracker is created for you at GitHub.</span>
|
||||
<span class="leading-normal">An account is created for you in our exclusive JIRA issue tracker.</span>
|
||||
</li>
|
||||
<li>
|
||||
<div class="font-semibold mb-1">3. Request Support</div>
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
<div class="flex-1 flex flex-col gap-8">
|
||||
<div>
|
||||
<div class="leading-normal mb-2 font-semibold">How many issue tracker accounts do we get?</div>
|
||||
<p class="!m-0 leading-normal">We provide at most 5 accounts per organization.</p>
|
||||
<p class="!m-0 leading-normal">We provide 1 shared account per organization.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="leading-normal mb-2 font-semibold">What is the duration of the service?</div>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
<div>
|
||||
<Head>
|
||||
<Title>Unstyled - PrimeVue</Title>
|
||||
<Meta name="description" content="Styling PrimeVue with your favorite CSS library." />
|
||||
<Meta name="description" content="Theming PrimeVue with your own styles." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Unstyled Mode</h1>
|
||||
<p>Styling PrimeVue with your favorite CSS library.</p>
|
||||
<p>Theming PrimeVue with your own styles.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
|
|
@ -20,11 +20,14 @@
|
|||
|
||||
<script>
|
||||
import ArchitectureDoc from '@/doc/theming/unstyled/ArchitectureDoc.vue';
|
||||
import ExampleDoc from '@/doc/theming/unstyled/ExampleDoc.vue';
|
||||
import SetupDoc from '@/doc/theming/unstyled/SetupDoc.vue';
|
||||
import ThemeDoc from '@/doc/theming/unstyled/ThemeDoc.vue';
|
||||
import TailwindDoc from '@/doc/theming/unstyled/libraries/TailwindDoc.vue';
|
||||
import UnoCSSDoc from '@/doc/theming/unstyled/libraries/UnoCSSDoc.vue';
|
||||
import ComparisonDoc from '@/doc/theming/unstyled/ComparisonDoc.vue';
|
||||
import HybridExampleDoc from '@/doc/theming/unstyled/hybrid/HybridExampleDoc.vue';
|
||||
import HybridSetupDoc from '@/doc/theming/unstyled/hybrid/HybridSetupDoc.vue';
|
||||
import HybridTailwindDoc from '@/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue';
|
||||
import PureExampleDoc from '@/doc/theming/unstyled/pure/PureExampleDoc.vue';
|
||||
import PureGlobalDoc from '@/doc/theming/unstyled/pure/PureGlobalDoc.vue';
|
||||
import PureSetupDoc from '@/doc/theming/unstyled/pure/PureSetupDoc.vue';
|
||||
import PureTailwindDoc from '@/doc/theming/unstyled/pure/PureTailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -36,33 +39,54 @@ export default {
|
|||
component: ArchitectureDoc
|
||||
},
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
id: 'comparison',
|
||||
label: 'Comparison',
|
||||
component: ComparisonDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
},
|
||||
{
|
||||
id: 'theme',
|
||||
label: 'Theme',
|
||||
component: ThemeDoc
|
||||
},
|
||||
{
|
||||
id: 'libraries',
|
||||
label: 'Libraries',
|
||||
id: 'pure',
|
||||
label: 'Pure',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
id: 'pure-setup',
|
||||
label: 'Setup',
|
||||
component: PureSetupDoc
|
||||
},
|
||||
{
|
||||
id: 'unocss',
|
||||
label: 'UnoCSS',
|
||||
component: UnoCSSDoc
|
||||
id: 'pure-example',
|
||||
label: 'Example',
|
||||
component: PureExampleDoc
|
||||
},
|
||||
{
|
||||
id: 'pure-global',
|
||||
label: 'Global',
|
||||
component: PureGlobalDoc
|
||||
},
|
||||
{
|
||||
id: 'pure-tailwind',
|
||||
label: 'Tailwind Presets',
|
||||
component: PureTailwindDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'hybrid',
|
||||
label: 'Hybrid',
|
||||
children: [
|
||||
{
|
||||
id: 'hybrid-setup',
|
||||
label: 'Setup',
|
||||
component: HybridSetupDoc
|
||||
},
|
||||
{
|
||||
id: 'hybrid-example',
|
||||
label: 'Example',
|
||||
component: HybridExampleDoc
|
||||
},
|
||||
{
|
||||
id: 'hybrid-tailwind',
|
||||
label: 'Tailwind Version',
|
||||
component: HybridTailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue