React - Laravel 11

📄Page Structure

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title inertia>{{ config('app.name', 'Laravel') }}</title>
    
    @routes
    @viteReactRefresh
    @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"])
    @inertiaHead
    
</head>

<body class="font-sans antialiased" data-pc-preset="preset-1" data-pc-sidebar-theme="light" data-pc-sidebar-caption="true"
    data-pc-direction="ltr" data-pc-theme="light" data-pc-layout="vertical">
    @inertia
</body>

  <!-- [Body] end -->
</html>

Layout settings

// =======================================================
// -----------   Light Able Theme Configuration  -----------
// =======================================================
// data-pc-theme
export enum THEME_MODE {
    LIGHT = "light",
    DARK = "dark",
    DEFAULT = "default",
}

//data-pc-layout
export enum LAYOUT_THEME {
    VERTICAL = "vertical",
    HORIZONTAL = "horizontal",
    VERTICAL_TAB = "vertical-tab",
    MODULER = "moduler",
}

// data-pc-sidebar-theme
export enum SIDEBAR_THEME {
    LIGHT = "light",
    DARK = "dark"
}

// data-pc-sidebar-caption
export enum SIDEBAR_THEME_CAPTION {
    CAPTION_SHOW = "true",
    CAPTION_HIDE = "false"
}

// data-pc-preset
export enum THEME_PRESET {
    PRESET_1 = "preset-1",
    PRESET_2 = "preset-2",
    PRESET_3 = "preset-3",
    PRESET_4 = "preset-4",
    PRESET_5 = "preset-5",
    PRESET_6 = "preset-6",
    PRESET_7 = "preset-7",
    PRESET_8 = "preset-8",
    PRESET_9 = "preset-9",
    PRESET_10 = "preset-10",
}

export enum THEME_LAYOUT {
    LTR = "ltr",
    RTL = "rtl",
} 
```
AttributeDescription

data-pc-preset= "preset-1"

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

data-pc-sidebar-theme = "light"

To set the Light color left Sidebar.

data-pc-sidebar-theme = "dark"

To set the Light color dark Sidebar.

data-pc-sidebar-caption = "true"

To set the caption on.

data-pc-sidebar-caption = "false"

To set the caption off.

data-pc-direction = "ltr"

To set the layout direction left to right.

data-pc-direction = "rtl"

To set the layout direction right to left.

data-pc-theme = "light"

To set the layout theme light.

data-pc-theme = "dark"

To set the layout theme dark.

PreviousFolder StructureNextChangelog

Last updated