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

Add colors, css modules and css doc

pull/5507/head
Cagatay Civici 2024-03-31 15:10:06 +03:00
parent 1fcff2c769
commit 630f3a98e6
3 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/theming/styled/CSSModulesDoc.vue
View File

@ -1,18 +1,14 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
<a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your component and using the <i>$style</i> keyword to apply classes to a PrimeVue
component.
<a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your SFC. Use the <i>$style</i> keyword to apply classes to a PrimeVue component. It is
recommend to enable <i>cssLayer</i> when using CSS modules so that the PrimeVue styles have low CSS specificity.
</p>
<div class="card flex justify-content-center">
<InputText :class="$style.myinput" placeholder="Search" />
</div>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
<p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
</div>
</DocSectionText>
</template>

32
doc/theming/styled/ColorsDoc.vue
View File

@ -1,22 +1,36 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Lorem Ipsum.</p>
<p>
Color palette of a preset is defined by the <i>primitive</i> design token group. The default colors are derived from the Tailwind colors with some extensions to make it consistent with the Tailwind Presets projects of the unstyled mode.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
<div class="card">
<ul class="p-0 m-0 list-none flex sm:flex-column gap-3 flex-wrap sm:flex-nowrap">
<li v-for="(color, i) of colors" :key="i" class="flex-auto">
<span class="font-medium capitalize w-6rem block mb-2 text-center sm:text-left">{{ color }}</span>
<div class="flex gap-3 flex-auto flex-column sm:flex-row">
<div v-for="(shade, j) of shades" :key="shade" class="flex flex-column align-items-center gap-1 flex-1">
<div v-tooltip.click.top="'Copied'" class="border-round h-2rem w-full" :style="`background-color: var(--p-${color}-${shades[j]})`" @click="copyColor(`var(--p-${color}-${shades[j]})`)"></div>
<span class="text-sm text-secondary font-medium">{{ shades[j] }}</span>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
html {
font-size: 14px;
}
`
}
shades: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
colors: ['emerald', 'green', 'lime', 'red', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'slate', 'gray', 'zinc', 'neutral', 'stone']
};
},
methods: {
copyColor(value) {
navigator.clipboard.writeText(value);
}
}
};
</script>

3
doc/theming/styled/ScaleDoc.vue
View File

@ -1,7 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Lorem Ipsum.
PrimeVue UI component use <i>rem</i> units, 1rem equals to the font size of the <i>html</i> element which is <i>16px</i> by default. Use the root font-size to adjust the size of the components globally. This website uses <i>14px</i> as
the base so it may differ from your application if your base font size is different.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />