github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

docs\layout.astro

pull/5123/head
Daniel 2023-05-12 13:09:19 +05:30
parent b3e4e9e7a3
commit bd9983bcc8
2 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/html/components/dashboard/_sidenav.astro
View File

@ -196,6 +196,12 @@ const htmlPath = convertPathToHtml(path)
<p>Installation</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + '/docs/layout.html'} class:list={['nav-link', page === 'layout' && 'active']}>
<i class="nav-icon fa-solid fa-grip"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', page === 'color-mode' && 'active']}>
<i class="nav-icon fa-solid fa-star-half-stroke"></i>

77
src/html/pages/docs/layout.astro Normal file
View File

@ -0,0 +1,77 @@
---
import Head from "@components/_head.astro";
import Footer from "@components/dashboard/_footer.astro";
import Topbar from "@components/dashboard/_topbar.astro";
import Sidenav from "@components/dashboard/_sidenav.astro";
import Scripts from "@components/_scripts.astro";
const title = "Layout | AdminLTE 4";
const path = '../../../dist'
const mainPage = "docs";
const page = "layout";
---
<!DOCTYPE html>
<html lang="en">
<head>
<Head title={title} path={path} />
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper">
<Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h3 class="mb-0">Layout</h3>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">
Layout
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="app-content">
<div class="container-fluid">
<div class="callout callout-info mb-4">
<h5 class="fw-bold">Tips</h5>
<p>The <a href="/starter.html" class="link-primary">starter page</a> is a good place to start building your app if you’d like to start from scratch.</p>
</div>
<p>The layout consists of five major parts:</p>
<ul>
<li>Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.</li>
<li>Main Header <code>.app-header</code> . Contains the logo and navbar.</li>
<li>Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user panel and menu.</li>
<li>Content <code>.app-main</code> . Contains the page header and content.</li>
<li>Main Footer <code>.app-footer</code> . Contains the footer.</li>
</ul>
<h4>Layout Options</h4>
<p>AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the <code>body</code> tag to get the desired goal.</p>
<ul>
<li>Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.</li>
<li>Collapsed Sidebar: use the class <code>.sidebar-expand-lg .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</main>
<!-- /.app-content -->
<Footer />
</div>
<!-- ./app-wrapper -->
<Scripts path={path} />
</body>
</html>