📄Page Structure

The Svelte folder structure is meticulously organized to enhance project scalability and maintainability. With directories for apps, static files, templates, and configuration settings, it streamlines

sveltekit
<script>
 import Footer from '../../lib/Components/Layouts/Partials/Footer.svelte';
 import Vertical from '../../lib/Components/Layouts/Vertical.svelte';
 import Customizer from '../../lib/Components/Layouts/Partials/Customizer.svelte';
</script>

<Vertical />
<slot />
<Footer />
<Customizer />

Layout settings

You can change the default layout in the templates/index.html file in the body tag


<body data-pc-preset="preset-1" data-pc-sidebar-caption="true"data-pc-layout="vertical" data-pc-direction="ltr" data-pc-theme_contrast="" data-pc-theme="light">

Attribute	Description
data-pc-preset= "preset-1"	To set the your primary theme color you can change ['preset-1' ] for different color.
data-pc-sidebar-caption= "true"	To set the caption on.
data-pc-layout = "vertical"	To set the vertical Sidebar.
data-pc-direction = "ltr"	To set the layout direction left to right.
data-pc-theme = "light"	To set the layout theme light.
data-pc-theme = "dark"	To set the layout theme dark.

Attribute

Description

data-pc-preset= "preset-1"

To set the your primary theme color you can change ['preset-1' ] for different color.

data-pc-sidebar-caption= "true"

To set the caption on.

data-pc-layout = "vertical"

To set the vertical Sidebar.

data-pc-direction = "ltr"

To set the layout direction left to right.

data-pc-theme = "light"

To set the layout theme light.

data-pc-theme = "dark"

To set the layout theme dark.

PreviousFolder Structure NextCustomizer

Last updated 1 month ago