2024-03-30 12:19:34 +00:00
< template >
< div >
< Head >
< Title > Styled Mode - PrimeVue < / Title >
< Meta name = "description" content = "Choose from a variety of pre-styled themes or develop your own." / >
< / Head >
< div class = "doc" >
< div class = "doc-main" >
< div class = "doc-intro" >
< h1 > Styled Mode < / h1 >
< p > Choose from a variety of pre - styled themes or develop your own . . < / p >
< / div >
< DocSections :docs ="docs" / >
< / div >
< DocSectionNav :docs ="docs" / >
< / div >
< / div >
< / template >
< script >
import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue' ;
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue' ;
2024-03-30 23:15:56 +00:00
import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue' ;
import DarkModeToggleDoc from '@/doc/theming/styled/DarkModeToggleDoc.vue' ;
import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue' ;
2024-03-30 12:19:34 +00:00
import ScaleDoc from '@/doc/theming/styled/ScaleDoc.vue' ;
import ScopedCSSDoc from '@/doc/theming/styled/ScopedCSSDoc.vue' ;
import OptionsDoc from '@/doc/theming/styled/configuration/OptionsDoc.vue' ;
import ThemeDoc from '@/doc/theming/styled/configuration/ThemeDoc.vue' ;
2024-03-31 13:42:46 +00:00
import LibrariesDoc from '@/doc/theming/styled/csslayer/LibrariesDoc.vue' ;
import ResetDoc from '@/doc/theming/styled/csslayer/ResetDoc.vue' ;
import SpecificityDoc from '@/doc/theming/styled/csslayer/SpecificityDoc.vue' ;
2024-03-30 23:15:56 +00:00
import ComponentDoc from '@/doc/theming/styled/customization/ComponentDoc.vue' ;
import DefinePresetDoc from '@/doc/theming/styled/customization/DefinePresetDoc.vue' ;
import FocusRingDoc from '@/doc/theming/styled/customization/FocusRingDoc.vue' ;
import FontDoc from '@/doc/theming/styled/customization/FontDoc.vue' ;
import FormsDoc from '@/doc/theming/styled/customization/FormsDoc.vue' ;
import NoirDoc from '@/doc/theming/styled/customization/NoirDoc.vue' ;
import PrimaryDoc from '@/doc/theming/styled/customization/PrimaryDoc.vue' ;
import SurfaceDoc from '@/doc/theming/styled/customization/SurfaceDoc.vue' ;
import DTDoc from '@/doc/theming/styled/utils/DTDoc.vue' ;
import PaletteDoc from '@/doc/theming/styled/utils/PaletteDoc.vue' ;
import UpdatePresetDoc from '@/doc/theming/styled/utils/UpdatePresetDoc.vue' ;
import UsePresetDoc from '@/doc/theming/styled/utils/UsePresetDoc.vue' ;
import UseThemeDoc from '@/doc/theming/styled/utils/UseThemeDoc.vue' ;
2024-03-30 12:19:34 +00:00
export default {
data ( ) {
return {
docs : [
{
id : 'architecture' ,
label : 'Architecture' ,
component : ArchitectureDoc
} ,
{
id : 'configuration' ,
2024-03-30 23:15:56 +00:00
label : 'Configuration API' ,
2024-03-30 12:19:34 +00:00
children : [
{
id : 'theme' ,
label : 'Theme' ,
component : ThemeDoc
} ,
{
id : 'options' ,
label : 'Options' ,
component : OptionsDoc
}
]
} ,
2024-03-30 23:15:56 +00:00
{
id : 'presets' ,
label : 'Presets' ,
component : PresetsDoc
} ,
{
id : 'customization' ,
label : 'Customization' ,
children : [
{
id : 'definepreset' ,
label : 'definePreset' ,
component : DefinePresetDoc
} ,
{
id : 'primary' ,
label : 'Primary' ,
component : PrimaryDoc
} ,
{
id : 'noir' ,
label : 'Noir' ,
component : NoirDoc
} ,
{
id : 'surface' ,
label : 'Surface' ,
component : SurfaceDoc
} ,
{
id : 'font' ,
label : 'Font' ,
component : FontDoc
} ,
{
id : 'forms' ,
label : 'Forms' ,
component : FormsDoc
} ,
{
id : 'focusring' ,
label : 'Focus Ring' ,
component : FocusRingDoc
} ,
{
id : 'component' ,
label : 'Component' ,
component : ComponentDoc
}
]
} ,
{
id : 'utils' ,
label : 'Utils' ,
children : [
{
id : 'usepreset' ,
label : 'usePreset' ,
component : UsePresetDoc
} ,
{
id : 'updatepreset' ,
label : 'updatePreset' ,
component : UpdatePresetDoc
} ,
{
id : 'usetheme' ,
label : 'useTheme' ,
component : UseThemeDoc
} ,
{
id : 'dt' ,
label : '$dt' ,
component : DTDoc
} ,
{
id : 'Palette' ,
label : 'palette' ,
component : PaletteDoc
}
]
} ,
{
id : 'colors' ,
label : 'Colors' ,
component : ColorsDoc
} ,
2024-03-30 12:19:34 +00:00
{
id : 'darkmodetoggle' ,
label : 'Dark Mode Toggle' ,
component : DarkModeToggleDoc
} ,
{
id : 'csslayer' ,
label : 'CSS Layer' ,
2024-03-31 13:42:46 +00:00
description : 'The PrimeVue CSS layer only applies to styled mode when layering is enabled explicitly at theme configuration, in unstyled mode the built-in CSS classes are not included and as a result no layer is necessary.' ,
children : [
{
id : 'specificity' ,
label : 'Specificity' ,
component : SpecificityDoc
} ,
{
id : 'reset' ,
label : 'Reset' ,
component : ResetDoc
} ,
{
id : 'libraries' ,
label : 'Libraries' ,
component : LibrariesDoc
}
]
2024-03-30 12:19:34 +00:00
} ,
{
id : 'scopedcss' ,
label : 'Scoped CSS' ,
component : ScopedCSSDoc
} ,
{
id : 'cssmodules' ,
label : 'CSS Modules' ,
component : CSSModulesDoc
} ,
{
id : 'scale' ,
label : 'Scale' ,
component : ScaleDoc
}
]
} ;
}
} ;
< / script >
