vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add UnoCSS sample

pull/4457/head
Cagatay Civici 2023-09-15 01:29:20 +03:00
parent ff380d38f0
commit b31ce24f76
4 changed files with 100 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/menu/menu.json
View File

@ -462,6 +462,10 @@
{ {
"name": "Bulma", "name": "Bulma",
"to": "/bulma" "to": "/bulma"
},
{
"name": "UnoCSS",
"to": "/unocss"
} }
] ]
} }

8
doc/unocss/ExampleDoc.vue Normal file
View File

@ -0,0 +1,8 @@
<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>

42
doc/unocss/SetupDoc.vue Normal file
View File

@ -0,0 +1,42 @@
<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 hideCodeSandbox 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>

46
pages/unocss/index.vue Normal file
View File

@ -0,0 +1,46 @@
<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" class="font-semibold hover:underline text-primary">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';
import SetupDoc from '@/doc/unocss/SetupDoc';
export default {
data() {
return {
docs: [
{
id: 'setup',
label: 'Setup',
component: SetupDoc
},
{
id: 'example',
label: 'Example',
component: ExampleDoc
}
]
};
}
};
</script>