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

Add color palette sample

pull/5806/head
Cagatay Civici 2024-05-28 09:18:34 +03:00
parent e80bd4ae3e
commit 8b075c1de1
7 changed files with 80 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/menu/menu.json
View File

@ -54,6 +54,20 @@
}
]
},
{
"name": "Theming",
"icon": "pi pi-palette",
"children": [
{
"name": "Styled Mode",
"to": "/theming/styled"
},
{
"name": "Unstyled Mode",
"to": "/theming/unstyled"
}
]
},
{
"name": "Components",
"icon": "pi pi-compass",
@ -479,20 +493,6 @@
}
]
},
{
"name": "Theming",
"icon": "pi pi-palette",
"children": [
{
"name": "Styled Mode",
"to": "/theming/styled"
},
{
"name": "Unstyled Mode",
"to": "/theming/unstyled"
}
]
},
{
"name": "Pass Through",
"icon": "pi pi-directions",

38
doc/tailwind/ExtensionsDoc.vue
View File

@ -70,43 +70,7 @@
</tbody>
</table>
</div>
<div class="card">
<ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
<li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
<span class="font-medium capitalize block mb-2 text-center sm:text-left">{{ color }}</span>
<div class="flex gap-4 flex-auto flex-col sm:flex-row">
<div v-for="(shade, j) of shades" :key="shade" :class="['flex flex-col items-center gap-1 flex-1', { invisible: color === 'primary' && shade === 0 }]">
<div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
<span class="text-sm text-surface-500 dark:text-surface-400 font-medium">{{ shades[j] }}</span>
</div>
</div>
</li>
</ul>
</div>
</DocSectionText>
</template>
<script>
export default {
data() {
return {
shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
colors: ['primary', 'surface'],
code1: {
basic: `
npm i tailwindcss-primeui
`
},
code2: {
basic: `
// tailwind.config.js
module.exports = {
// ...
plugins: [require('tailwindcss-primeui')]
};
`
}
};
}
};
</script>
<script></script>

8
doc/tailwind/OverviewDoc.vue
View File

@ -1,13 +1,13 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Tailwind CSS is a popular CSS framework with a utility-first approach. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated <i>btn</i> class as in
Tailwind CSS is a popular CSS framework based on a utility-first design. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated <i>btn</i> class as in
Bootstrap, Tailwind offers primitive classes like <i>bg-blue-500</i>, <i>rounded</i> and <i>p-4</i> to apply a button. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries that
take this approach to build components for Tailwind.
take this approach to build components specifically for Tailwind.
</p>
<p>
Tailwind is an outstanding library, however it lacks a true comprehensive UI suite specifically when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component
library. The core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the presets for the unstyled mode.
Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component library. The
core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the presets for the unstyled mode.
</p>
</DocSectionText>
</template>

2
doc/tailwind/PluginDoc.vue
View File

@ -16,6 +16,8 @@
export default {
data() {
return {
shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
colors: ['primary', 'surface'],
code1: {
basic: `
npm i tailwindcss-primeui

36
doc/tailwind/SamplesDoc.vue
View File

@ -1,36 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>,
<i>text-surface-500</i>, <i>text-muted-color</i>.
</p>
<p>Plugin is available on npm.</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<p>After installation, configure the plugin at your tailwind configuration file.</p>
<DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
npm i tailwindcss-primeui
`
},
code2: {
basic: `
// tailwind.config.js
module.exports = {
// ...
plugins: [require('tailwindcss-primeui')]
};
`
}
};
}
};
</script>

51
doc/tailwind/samples/ColorPaletteDoc.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<DocSectionText v-bind="$attrs">
<p>PrimeVue color palette as Tailwind CSS classes.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-col gap-12">
<ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
<li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
<span class="font-medium capitalize block mb-2 text-center sm:text-left">{{ color }}</span>
<div class="flex gap-4 flex-auto flex-col sm:flex-row">
<div v-for="(shade, j) of shades" :key="shade" :class="['flex flex-col items-center gap-1 flex-1', { invisible: color === 'primary' && shade === 0 }]">
<div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
<span class="text-sm text-surface-500 dark:text-surface-400 font-medium">{{ shades[j] }}</span>
</div>
</div>
</li>
</ul>
<div class="flex gap-6 flex-wrap">
<div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-primary hover:bg-primary-emphasis text-primary-contrast font-medium flex-auto transition-colors">primary</div>
<div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-highlight hover:bg-highlight-emphasis font-medium flex-auto transition-colors">highlight</div>
<div class="rounded-border p-4 border border-surface flex items-center justify-center text-muted-color hover:text-color hover:bg-emphasis font-medium flex-auto transition-colors">box</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
colors: ['primary', 'surface'],
code1: {
basic: `
npm i tailwindcss-primeui
`
},
code2: {
basic: `
// tailwind.config.js
module.exports = {
// ...
plugins: [require('tailwindcss-primeui')]
};
`
}
};
}
};
</script>

10
pages/tailwind/index.vue
View File

@ -20,7 +20,7 @@ import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
import SamplesDoc from '@/doc/tailwind/SamplesDoc.vue';
import ColorPaletteDoc from '@/doc/tailwind/samples/ColorPaletteDoc.vue';
export default {
data() {
@ -49,7 +49,13 @@ export default {
{
id: 'samples',
label: 'Samples',
component: SamplesDoc
description: 'Example uses cases with PrimeVue and Tailwind CSS.',
children: [
{
label: 'Color Palette',
component: ColorPaletteDoc
}
]
}
]
};