Update docs
Cagatay Civici
parent
cbc6186936
commit
ad7eb10b57
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<div class="doc-notification">Currently, the Tailwind CSS Presets are not compatible with v4 and will be with a future update after v4 final.</div>
|
||||
<p>
|
||||
In unstyled mode of PrimeVue, default styling elements like design tokens and css classes are turned off so that you have full control over the component styling with pass-through properties. This feature is quite useful when you'd like
|
||||
to build your own UI library based on a custom design by wrapping PrimeVue components or simply utilitze Tailwind CSS to style the PrimeVue components.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<h3>Semantic Tokens</h3>
|
||||
<p>
|
||||
Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the <i>primary.color</i>. Semantic tokens map to primitive tokens or other semantic tokens. The
|
||||
<i>colorScheme</i> token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like implementing dark mode.
|
||||
<i>colorScheme</i> token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like dark mode.
|
||||
</p>
|
||||
|
||||
<h3>Component Tokens</h3>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<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>
|
||||
<p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
|
||||
</DocSectionText>
|
||||
<p>Colors can be accessed at CSS as a variable and programmatically using the <i>$dt</i> utility.</p>
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
|
||||
<div class="card">
|
||||
<ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@
|
|||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
|
||||
<p>
|
||||
An example implementation of a dark mode switch, you may extend it further by involving <i>prefers-color-scheme</i> to keep it from the system initially and <i>localStorage</i> to make it stateful. See this
|
||||
Following is a very basic example implementation of a dark mode switch, you may extend it further by involving <i>prefers-color-scheme</i> to retrieve it from the system initially and use <i>localStorage</i> to make it stateful. See this
|
||||
<a href="https://dev.to/abbeyperini/dark-mode-toggle-and-prefers-color-scheme-4f3m" target="_blank" rel="noopener noreferrer">article</a> for more information.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
|
||||
<p>In case you prefer to use dark mode all the time, apply the <i>darkModeSelector</i> initially and never change it.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Currently Aura is the only available preset and more will follow in the upcoming updates.</p>
|
||||
<p>Currently Aura, Lara and Nora are the available presets, a new preset based on Material Design is planned by the end of 2024.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Tabs value="aura">
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
<DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
|
||||
<h4>cssLayer</h4>
|
||||
<p>
|
||||
Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> or not. A CSS layer would be handy to
|
||||
declare a custom cascade layer for easier customization. The default is <i>false</i>.
|
||||
Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> by default or not. A CSS layer would be
|
||||
handy to declare a custom cascade layer for easier customization. The default is <i>false</i>.
|
||||
</p>
|
||||
<DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
|
||||
</DocSectionText>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>theme</i> property is used to customize the initial theme, prefer the <i>PrimeVue</i> plugin for custom configuration instead of the preconfigured <i>PrimeVueStyled</i>.</p>
|
||||
<p>The <i>theme</i> property is used to customize the initial theme.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
|
|||
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
|
||||
import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
|
||||
import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
|
||||
import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue';
|
||||
import DarkModeDoc from '@/doc/theming/styled/DarkModeDoc.vue';
|
||||
import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
|
||||
import ReservedKeysDoc from '@/doc/theming/styled/ReservedKeysDoc.vue';
|
||||
import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue';
|
||||
|
|
@ -181,9 +181,9 @@ export default {
|
|||
component: ColorsDoc
|
||||
},
|
||||
{
|
||||
id: 'darkmodetoggle',
|
||||
label: 'Dark Mode Toggle',
|
||||
component: DarkModeToggleDoc
|
||||
id: 'darkmode',
|
||||
label: 'Dark Mode',
|
||||
component: DarkModeDoc
|
||||
},
|
||||
{
|
||||
id: 'csslayer',
|
||||
|
|
|
|||
Loading…
Reference in New Issue