📄Page Structure

StarterPage.cshtml

@{
   ViewBag.Title = "Starter";
   ViewBag.pTitle = "Dashboard";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
                            

<!-- Start All Card -->
<div class="flex flex-col gap-4 min-h-[calc(100vh-212px)]">
    <div class="grid grid-cols-1 gap-4">
        <div class="gap-6 p-5 bg-white border rounded dark:bg-darklight dark:border-darkborder md:col-span-2 xl:col-span-2 border-black/10">
            <h2 class="mb-4 text-base font-semibold text-black dark:text-white/80">Card Title</h2>
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <img src="~/assets/images/logo-dark.svg" class="mx-auto h-11 dark:hidden " alt="">
                    <img src="~/assets/images/logo-light.svg" class="hidden mx-auto h-11 dark:block" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End All Card -->                           
                            
@section scripts{       
    
    <!-- App js -->
    <script src="~/assets/js/app.js"></script>

}

<!DOCTYPE html>
<html lang="en">
<!-- [Head] start -->

<head>
  @@include('../layouts/head-page-meta.html', {'title': 'Sample Page'})
  @@include('../layouts/head-css.html')
</head>
<!-- [Head] end -->
<!-- [Body] Start -->

<body @@bodySetup>
  @@include('../layouts/layout-vertical.html')

  <!-- [ Main Content ] start -->
  <div class="pc-container">
    <div class="pc-content">
      @@include('../layouts/breadcrumb.html', {'breadcrumb-item': 'Dashboard', 'breadcrumb-item-active': 'Sample Page'})

      <!-- [ Main Content ] start -->
      <div class="row">
      </div>
      <!-- [ Main Content ] end -->
    </div>
  </div>
  <!-- [ Main Content ] end -->

  @@include('../layouts/footer-block.html')
  @@include('../layouts/footer-js.html')
  @@include('../layouts/customizer.html')
</body>
<!-- [Body] end -->

</html>

Layout settings

You can change the default layout from Views\Shared\_Layout.cshtml file in the body tag.

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

Attribute	Description
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.

Attribute

Description

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 Structure NextLayout Customizer

Last updated 7 months ago