Doc update
Cagatay Civici
parent
ca2201742f
commit
04b3b2e2ff
|
|
@ -1,8 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
A sample <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" rel="noopener noreferrer">starter example</a> is available at PrimeVue examples repository. In addition an
|
||||
<a href="https://stackblitz.com/edit/nuxt-starter-5nuyko">online playground</a> sample can be accessed at StackBlitz.
|
||||
</p>
|
||||
<p><a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" target="_blank" rel="noopener noreferrer">Nuxt based samples</a> with different options are available at PrimeVue examples repository.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<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 dropdown component adds <i>.p-dropdown</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.
|
||||
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.
|
||||
</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
|
||||
|
|
|
|||
|
|
@ -1,22 +1,13 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Here is a sample that provides a style using PrimeFlex CSS library. 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 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.
|
||||
</p>
|
||||
<div class="card flex justify-center">
|
||||
<Button
|
||||
label="Check"
|
||||
icon="pi pi-check"
|
||||
unstyled
|
||||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: 'text-white text-2xl'
|
||||
}"
|
||||
/>
|
||||
<Button label="Search" icon="pi pi-search" unstyled pt:root="bg-teal-500 hover:bg-teal-700 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" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
@ -26,43 +17,10 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Check" icon="pi pi-check" unstyled
|
||||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Button label="Check" icon="pi pi-check" unstyled
|
||||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<Button label="Check" icon="pi pi-check" unstyled
|
||||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>
|
||||
<Button label="Search" icon="pi pi-search" unstyled
|
||||
pt:root="bg-teal-500 hover:bg-teal-700 cursor-pointer py-3 px-4 rounded-full border-0 flex gap-2"
|
||||
pt:label="text-white font-bold text-xl"
|
||||
pt:icon="text-white text-2xl" />
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Tailwind CSS is perfect fit for the unstyled mode, PrimeVue even offers the standalone <a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project that styles the complete UI suite with
|
||||
Tailwind CSS to use a base.
|
||||
</p>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@
|
|||
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>
|
||||
UnoCSS adds the utilities on demand so it needs to be aware of PrimeVue components path otherwise the classes used will not be included in the page, sample below configures UnoCSS with Vite. For other environments like Nuxt, visit the
|
||||
<a href="https://unocss.dev/integrations/">integrations documentation</a>.
|
||||
</p>
|
||||
<p>For a live sample, visit the <a href="https://stackblitz.com/edit/vitejs-vite-cowgnp?file=src%2FApp.vue" target="_blank" rel="noopener noreferrer">example repository</a>.</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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue