Update unstyled doc
Cagatay Civici
parent
5cb016dd2d
commit
9fd2a715b7
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Demonstration of various PrimeVue components like input field, button and table styled with Bootstrap utilities.</p>
|
||||
</DocSectionText>
|
||||
<div class="flex justify-content-center">
|
||||
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-gziyk1?file=src%2FApp.vue&embed=1"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Demonstration of various PrimeVue components like input field, button, table and panel styled with Bulma utilities.</p>
|
||||
</DocSectionText>
|
||||
<div class="flex justify-content-center">
|
||||
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-9snkbq?file=src%2FApp.vue&embed=1"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Bulma can either be used with a CDN or via NPM. Visit the official documentation for installation steps. PrimeVue does require an extra configuration other than using components as <i>unstyled</i>.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<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>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<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>
|
||||
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>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>An example to demonstrate how to use the default preset of UnoCSS to style the panel component via a global pass through configuration.</p>
|
||||
</DocSectionText>
|
||||
<div class="flex justify-content-center">
|
||||
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-cowgnp?file=src%2FApp.vue&embed=1"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,44 +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. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode documentation for more information.
|
||||
</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>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import presetUno from '@unocss/preset-uno'
|
||||
import presetAttributify from '@unocss/preset-attributify'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), UnoCSS({
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetAttributify()
|
||||
],
|
||||
include: ["./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
"./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"]
|
||||
})]
|
||||
})
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<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><a href="https://getbootstrap.com">Bootstrap</a> 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.vue';
|
||||
import SetupDoc from '@/doc/bootstrap/SetupDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Bulma - PrimeVue</Title>
|
||||
<Meta name="description" content="Bulma is a free, open source framework that provides ready-to-use frontend components and utilities.." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Bulma</h1>
|
||||
<p><a href="https://bulma.io/">Bulma</a> is a free, open source framework that provides ready-to-use frontend components and utilities.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExampleDoc from '@/doc/bulma/ExampleDoc.vue';
|
||||
import SetupDoc from '@/doc/bulma/SetupDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -23,6 +23,8 @@ 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';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -47,6 +49,22 @@ export default {
|
|||
id: 'theme',
|
||||
label: 'Theme',
|
||||
component: ThemeDoc
|
||||
},
|
||||
{
|
||||
id: 'libraries',
|
||||
label: 'Libraries',
|
||||
children: [
|
||||
{
|
||||
id: 'tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
},
|
||||
{
|
||||
id: 'unocss',
|
||||
label: 'UnoCSS',
|
||||
component: UnoCSSDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>UnoCSS - PrimeVue</Title>
|
||||
<Meta name="description" content="Styling PrimeVue with Boostrap." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>UnoCSS</h1>
|
||||
<p><a href="https://unocss.dev">UnoCSS</a> is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated and all the CSS utilities are provided via presets.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExampleDoc from '@/doc/unocss/ExampleDoc.vue';
|
||||
import SetupDoc from '@/doc/unocss/SetupDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'setup',
|
||||
label: 'Setup',
|
||||
component: SetupDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue