Docs for unstyled mode
Cagatay Civici
parent
f3d1033c37
commit
de119bb8b0
|
|
@ -11,10 +11,6 @@
|
|||
{
|
||||
"name": "Configuration",
|
||||
"to": "/configuration"
|
||||
},
|
||||
{
|
||||
"name": "Accessibility",
|
||||
"to": "/accessibility"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -430,6 +426,9 @@
|
|||
{
|
||||
"name": "Theming",
|
||||
"icon": "pi pi-palette",
|
||||
"children": [
|
||||
{
|
||||
"name": "Styled Mode",
|
||||
"children": [
|
||||
{
|
||||
"name": "Overview",
|
||||
|
|
@ -449,6 +448,30 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Unstyled Mode",
|
||||
"children": [
|
||||
{
|
||||
"name": "Overview",
|
||||
"to": "/unstyled"
|
||||
},
|
||||
{
|
||||
"name": "Tailwind",
|
||||
"to": "/tailwind"
|
||||
},
|
||||
{
|
||||
"name": "Bootstrap",
|
||||
"to": "/bootstrap"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Pass Through",
|
||||
"icon": "pi pi-directions",
|
||||
"to": "/passthrough"
|
||||
},
|
||||
{
|
||||
"name": "Figma UI Kit",
|
||||
"icon": "pi pi-pencil",
|
||||
|
|
@ -483,6 +506,11 @@
|
|||
"icon": "pi pi-table",
|
||||
"href": "https://primeflex.org"
|
||||
},
|
||||
{
|
||||
"name": "Accessibility",
|
||||
"icon": "pi pi-users",
|
||||
"to": "/accessibility"
|
||||
},
|
||||
{
|
||||
"name": "Support",
|
||||
"icon": "pi pi-question",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>As an example, <a href="https://getbootstrap.com/docs/4.0/components/modal/">Modal</a> and <a href="https://getbootstrap.com/docs/4.0/components/button/">Button</a> styles of Bootstrap are used to style PrimeVue Button and Dialog.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" unstyled />
|
||||
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }" unstyled>
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visible = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>This section assumes that Boostrap is already available in your application, if not visit the Bootstrap <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">documentation</a> for the installation.</p>
|
||||
<p>
|
||||
Bootstrap integration with PrimeVue components is achieved with unstyled mode either using global setting or for a particular component only. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode documentation for getting started.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Defines the shared pass through properties per component type. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
pt: {
|
||||
slider: {
|
||||
handle: { className: 'bg-primary' }
|
||||
}
|
||||
}
|
||||
});`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<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
|
||||
<NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information.
|
||||
</p>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox 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, { unstyled: true });`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -10,8 +10,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Dropdown>
|
||||
basic: `<Dropdown>
|
||||
<template #dropdownicon>
|
||||
<i class="fa-light fa-chevron-down"></i>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Dropdown>
|
||||
basic: `<Dropdown>
|
||||
<template #dropdownicon>
|
||||
<img alt="dropdown icon" src="/assets/icons/arrow_down.png">
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Dropdown>
|
||||
basic: `<Dropdown>
|
||||
<template #dropdownicon>
|
||||
<span class="material-icons">arrow_drop_down</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Dropdown>
|
||||
basic: `<Dropdown>
|
||||
<template #dropdownicon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g id="chevron-down">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<p>PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
|
||||
|
||||
<h3>nuxt.config.js</h3>
|
||||
<p>Open the nuxt configuration file and add the css dependencies.</p>
|
||||
<p>Open the nuxt configuration file and add the css dependencies. This step is only required when using styled mode and can be ignored in unstyled mode.</p>
|
||||
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
|
||||
<p>
|
||||
Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme and core styles are the required css files to be imported, visit the
|
||||
<NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.</p>
|
||||
<p>Each PrimeVue theme has its own font family so it is suggested to apply it to your application as well for a unified look.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
|
||||
information and examples.
|
||||
</p>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox 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, { unstyled: true });`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be an object or a function that returns an object to define the arbitrary properties to apply
|
||||
to the element such as styling, aria, data-* or custom attributes. Every component documentation has a dedicated section to document the available section names exposed via PT.
|
||||
</p>
|
||||
<p>Most common usage of <i>pt</i> is styling and customization, example below styles a Panel component with PrimeFlex CSS library.</p>
|
||||
</DocSectionText>
|
||||
|
||||
<div class="card">
|
||||
<Panel
|
||||
header="Header"
|
||||
toggleable
|
||||
:pt="{
|
||||
header: (opts) => {
|
||||
return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
|
||||
},
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}"
|
||||
>
|
||||
<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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: (opts: PanelPassThroughMethodOptions) => {
|
||||
return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
|
||||
},
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}">
|
||||
<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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: (opts: PanelPassThroughMethodOptions) => {
|
||||
return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
|
||||
},
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}">
|
||||
<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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Panel header="Header" toggleable
|
||||
:pt="{
|
||||
header: (opts: PanelPassThroughMethodOptions) => {
|
||||
return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
|
||||
},
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}">
|
||||
<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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Defines the shared pass through properties per component type. For example, with the configuration below all panel headers have the <i>bg-primary</i> style class and the all autocomplete components have a fixed width. These settings can
|
||||
be overriden by a particular component as components <i>pt</i> property has higher precedence over global <i>pt</i>.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
pt: {
|
||||
panel: {
|
||||
header: { className: 'bg-primary' }
|
||||
},
|
||||
autocomplete: {
|
||||
input: { root: { className: 'w-16rem' } }
|
||||
}
|
||||
}
|
||||
});`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Lifecycle hooks of components are exposed as pass through using the <i>hooks</i> property so that callback functions can be registered. Available callbacks are <i>beforeCreate</i>, <i>created</i>, <i>beforeUpdate</i>,
|
||||
<i>updated</i>,<i>beforeMount</i>, <i>mounted</i>,<i>beforeUnmount</i> and <i>unmounted</i>. Refer to the Vue.js documentation for detailed information about lifecyce hooks.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
||||
<DocSectionCode :code="code" hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<Panel header="Header" :pt="panelPT"
|
||||
Content
|
||||
</Panel>`,
|
||||
options: `
|
||||
<template>
|
||||
<Panel header="Header" :pt="panelPT"
|
||||
Content
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
panelPT: {
|
||||
hooks: {
|
||||
mounted: () => {
|
||||
//panel mounted
|
||||
},
|
||||
unmounted: () => {
|
||||
//panel unmounted
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<Panel header="Header" :pt="panelPT"
|
||||
Content
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const panelPt = ref({
|
||||
hooks: {
|
||||
mounted: () => {
|
||||
//panel mounted
|
||||
},
|
||||
unmounted: () => {
|
||||
//panel unmounted
|
||||
}
|
||||
}
|
||||
);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>As an example, Tailwind is used to style the <i>Button</i> and <i>Dialog</i> components of PrimeVue.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" unstyled />
|
||||
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }" unstyled>
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
code: {
|
||||
basic: `
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
|
||||
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
|
||||
<p>
|
||||
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.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visible = ref(false);
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<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> for the installation. There is no
|
||||
specific configuration required at Tailwind for the PrimeVue integration.
|
||||
</p>
|
||||
<p>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.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<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 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.
|
||||
</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.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<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.
|
||||
</p>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button
|
||||
label="Check"
|
||||
icon="pi pi-check"
|
||||
unstyled
|
||||
:pt="{
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
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-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { 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-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { 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-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<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>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox 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-content-center">
|
||||
<Button label="Check" icon="pi pi-check" unstyled />
|
||||
</div>
|
||||
<DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, { unstyled: true });`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
<Button label="Check" icon="pi pi-check" unstyled></Button>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<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.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {
|
||||
pt: {
|
||||
button: {
|
||||
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
|
||||
label: { class: 'text-white font-bold text-xl' },
|
||||
icon: { class: 'text-white text-2xl' }
|
||||
},
|
||||
panel: {
|
||||
header: { class: 'bg-primary border-primary' },
|
||||
content: { class: 'border-primary text-lg text-primary-700' },
|
||||
title: { class: 'bg-primary text-xl' },
|
||||
toggler: { class: 'bg-primary hover:bg-primary-reverse' }
|
||||
}
|
||||
}
|
||||
});`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Bootstrap - PrimeVue</Title>
|
||||
<Meta name="description" content="Styling PrimeVue with Boostrap." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Boostrap is a well-known CSS library to build responsive and mobile first web projects.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExampleDoc from '@/doc/bootstrap/ExampleDoc';
|
||||
import SetupDoc from '@/doc/bootstrap/SetupDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -18,11 +18,13 @@
|
|||
<script>
|
||||
import ImportDoc from '@/doc/configuration/ImportDoc';
|
||||
import InputStyleDoc from '@/doc/configuration/InputStyleDoc';
|
||||
import PTDoc from '@/doc/configuration/PTDoc.vue';
|
||||
import RippleDoc from '@/doc/configuration/RippleDoc';
|
||||
import UnstyledDoc from '@/doc/configuration/UnstyledDoc';
|
||||
import ZIndexDoc from '@/doc/configuration/ZIndexDoc';
|
||||
import LocaleApiDoc from '@/doc/configuration/locale/LocaleApiDoc';
|
||||
import RepositoryDoc from '@/doc/configuration/locale/RepositoryDoc';
|
||||
import SetLocaleDoc from '@/doc/configuration/locale/SetLocaleDoc';
|
||||
import RippleDoc from '@/doc/configuration/RippleDoc';
|
||||
import ZIndexDoc from '@/doc/configuration/ZIndexDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -33,6 +35,16 @@ export default {
|
|||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled',
|
||||
component: UnstyledDoc
|
||||
},
|
||||
{
|
||||
id: 'pt',
|
||||
label: 'Pass Through',
|
||||
component: PTDoc
|
||||
},
|
||||
{
|
||||
id: 'ripple',
|
||||
label: 'Ripple',
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ import ExamplesDoc from '@/doc/installation/ExamplesDoc';
|
|||
import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc';
|
||||
import PluginDoc from '@/doc/installation/PluginDoc';
|
||||
import PropCasesDoc from '@/doc/installation/PropCasesDoc';
|
||||
import StylesDoc from '@/doc/installation/StylesDoc';
|
||||
import StyledModeDoc from '@/doc/installation/StyledModeDoc';
|
||||
import UnstyledModeDoc from '@/doc/installation/UnstyledModeDoc';
|
||||
import UsageDoc from '@/doc/installation/UsageDoc';
|
||||
import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc';
|
||||
import NuxtDoc from '@/doc/installation/videos/NuxtDoc';
|
||||
|
|
@ -40,16 +41,28 @@ export default {
|
|||
label: 'Plugin',
|
||||
component: PluginDoc
|
||||
},
|
||||
{
|
||||
id: 'styles',
|
||||
label: 'Styles',
|
||||
component: StylesDoc
|
||||
},
|
||||
{
|
||||
id: 'usage',
|
||||
label: 'Usage',
|
||||
component: UsageDoc
|
||||
},
|
||||
{
|
||||
id: 'theming',
|
||||
label: 'Theming',
|
||||
description: 'PrimeVue has two theming has modes; styled or unstyled.',
|
||||
children: [
|
||||
{
|
||||
id: 'styled',
|
||||
label: 'Styled Mode',
|
||||
component: StyledModeDoc
|
||||
},
|
||||
{
|
||||
id: 'unstyled',
|
||||
label: 'Unstyled Mode',
|
||||
component: UnstyledModeDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'propcases',
|
||||
label: 'Prop Cases',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>PrimeVue - Pass Through</Title>
|
||||
<Meta name="description" content="The Pass Through props is an API to access the internal DOM Structure of the components." />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Pass Through</h1>
|
||||
<p>The Pass Through props is an API to access the internal DOM Structure of the components.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicDoc from '@/doc/passthrough/BasicDoc';
|
||||
import GlobalDoc from '@/doc/passthrough/GlobalDoc';
|
||||
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'lifecycle',
|
||||
label: 'Lifecycle',
|
||||
component: LifecycleDoc
|
||||
},
|
||||
{
|
||||
id: 'global',
|
||||
label: 'Global',
|
||||
component: GlobalDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Tailwind - PrimeVue</Title>
|
||||
<Meta name="description" content="Styling PrimeVue with Tailwind CSS." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<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.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExampleDoc from '@/doc/tailwind/ExampleDoc';
|
||||
import SetupDoc from '@/doc/tailwind/SetupDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -78,11 +78,6 @@
|
|||
<span class="mb-2 text-xl font-bold">Ali Rıza Gücal</span>
|
||||
<span>Front-End Developer</span>
|
||||
</div>
|
||||
<div class="flex flex-column align-items-center flex-auto">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/team/olgu.jpg" class="border-circle mb-4" alt="Olgu Başak" />
|
||||
<span class="mb-2 text-xl font-bold">Olgu Başak</span>
|
||||
<span>Java Web Developer</span>
|
||||
</div>
|
||||
<div class="flex flex-column align-items-center flex-auto">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/team/furkan.jpg" class="border-circle mb-4" alt="Furkan Seziş" />
|
||||
<span class="mb-2 text-xl font-bold">Furkan Seziş</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Unstyled - PrimeVue</Title>
|
||||
<Meta name="description" content="Styling PrimeVue with your favorite CSS library." />
|
||||
</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>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArchitectureDoc from '@/doc/unstyled/ArchitectureDoc';
|
||||
import ExampleDoc from '@/doc/unstyled/ExampleDoc';
|
||||
import SetupDoc from '@/doc/unstyled/SetupDoc';
|
||||
import ThemeDoc from '@/doc/unstyled/ThemeDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'architecture',
|
||||
label: 'Architecture',
|
||||
component: ArchitectureDoc
|
||||
},
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
},
|
||||
{
|
||||
id: 'theme',
|
||||
label: 'Theme',
|
||||
component: ThemeDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue