mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
Add documentation App (#2219)
This commit is contained in:
Paweł Kuna
GitHub
6
docs/content/ui/layout/index.md
Normal file
6
docs/content/ui/layout/index.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Layout
|
||||
order: 3
|
||||
description: Structure your UI effectively.
|
||||
summary: The layout section covers essential tools and techniques for structuring content and organizing UI elements, helping you build visually appealing and functional designs.
|
||||
---
|
||||
94
docs/content/ui/layout/navbars.md
Normal file
94
docs/content/ui/layout/navbars.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
title: Navbars
|
||||
summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
|
||||
description: Create and customize responsive navigation bars with ease.
|
||||
---
|
||||
|
||||
The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements, and even interactive components like dropdown menus or search bars.
|
||||
|
||||
With Tabler's utility classes, creating and customizing a responsive navbar is straightforward. Whether you’re building a simple site or a complex dashboard, Tabler’s navbar utilities offer the flexibility to design navigation that aligns perfectly with your project’s requirements.
|
||||
|
||||
|
||||
|
||||
## Sample navbar
|
||||
|
||||
To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that contains links to different sections of a website. It is typically placed at the top of the page and is used to provide navigation to the rest of the site.
|
||||
|
||||
```html
|
||||
<header class="navbar navbar-expand-md d-print-none">...</header>
|
||||
```
|
||||
|
||||
The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
|
||||
|
||||
{% capture html -%}
|
||||
<header class="navbar navbar-expand-md d-print-none">
|
||||
<div class="container-xl">
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-menu"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
{% include "layout/navbar-logo.html" class="me-3" %}
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-icon">
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
</span>
|
||||
<span class="nav-link-title"> Home </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-icon"
|
||||
>{% include "ui/icon.html" icon="checkbox" %}
|
||||
</span>
|
||||
<span class="nav-link-title"> Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-icon"
|
||||
>{% include "ui/icon.html" icon="checkbox" %}
|
||||
</span>
|
||||
<span class="nav-link-title"> Settings </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-nav flex-row order-md-last ms-auto">
|
||||
<div class="nav-item dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link d-flex lh-1 text-reset"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Open user menu"
|
||||
>
|
||||
<span
|
||||
class="avatar avatar-sm"
|
||||
style="background-image: url(/static/avatars/044m.jpg)"
|
||||
></span>
|
||||
<div class="d-none d-xl-block ps-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-secondary">UI Designer</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
||||
<a href="#" class="dropdown-item">Status</a>
|
||||
<a href="./profile.html" class="dropdown-item">Profile</a>
|
||||
<a href="#" class="dropdown-item">Feedback</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="./settings.html" class="dropdown-item">Settings</a>
|
||||
<a href="./sign-in.html" class="dropdown-item">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw class="pb-10" bg="surface-secondary" overflow="visible" %}
|
||||
207
docs/content/ui/layout/navs-tabls.md
Normal file
207
docs/content/ui/layout/navs-tabls.md
Normal file
@@ -0,0 +1,207 @@
|
||||
---
|
||||
title: Navs and tabs
|
||||
summary: This guide covers the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs.
|
||||
description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
|
||||
---
|
||||
|
||||
Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
|
||||
|
||||
## Horizontal nav
|
||||
|
||||
If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
|
||||
|
||||
```html
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Look at the example below to see how the horizontal navigation bar is displayed.
|
||||
|
||||
{% capture html -%}
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Vertical nav
|
||||
|
||||
To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
|
||||
|
||||
```html
|
||||
<ul class="nav flex-column">
|
||||
...
|
||||
</ul>
|
||||
```
|
||||
|
||||
There is an example below to see how the vertical navigation bar is displayed.
|
||||
|
||||
{% capture html -%}
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Tabs
|
||||
|
||||
To create a tabbed navigation interface, use the `.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
|
||||
|
||||
```html
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
```
|
||||
|
||||
Example below shows how the tabbed navigation interface is displayed.
|
||||
|
||||
{% capture html -%}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Pills
|
||||
|
||||
For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in interactive UI components.
|
||||
|
||||
{% capture html -%}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Underline
|
||||
|
||||
To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. This provides a clean and minimalistic style.
|
||||
|
||||
{% capture html -%}
|
||||
<ul class="nav nav-underline">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Tabs with Dropdown
|
||||
|
||||
You can enhance tabs by adding dropdown menus using the `.dropdown` class inside a `.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
|
||||
|
||||
```html
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
href="#"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
```
|
||||
|
||||
Example below shows how tabs with dropdown menus are displayed.
|
||||
|
||||
{% capture html -%}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
href="#"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html overflow="visible" %}
|
||||
326
docs/content/ui/layout/page-headers.md
Normal file
326
docs/content/ui/layout/page-headers.md
Normal file
@@ -0,0 +1,326 @@
|
||||
---
|
||||
title: Page headers
|
||||
summary: Page heading examples for Tabler
|
||||
description: Examples of Tabler page headers.
|
||||
---
|
||||
|
||||
## Simple header
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="page-pretitle">Overview</div>
|
||||
<h2 class="page-title">Dashboard</h2>
|
||||
</div>
|
||||
<div class="col-auto ms-auto">
|
||||
<div class="btn-list">
|
||||
<span class="d-none d-sm-inline">
|
||||
<a href="#" class="btn"> New view </a>
|
||||
</span>
|
||||
<a
|
||||
href="#"
|
||||
class="btn btn-primary d-none d-sm-inline-block"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-report"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
Create new report
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="btn btn-primary d-sm-none btn-icon"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-report"
|
||||
aria-label="Create new report"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## With meta, avatar and actions
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<span
|
||||
class="avatar avatar-md"
|
||||
style="background-image: url(/static/avatars/023m.jpg)"
|
||||
></span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2 class="page-title">Paweł Kuna</h2>
|
||||
<div class="page-subtitle">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<line x1="3" y1="21" x2="21" y2="21" />
|
||||
<path d="M5 21v-14l8 -4v18" />
|
||||
<path d="M19 21v-10l-6 -4" />
|
||||
<line x1="9" y1="9" x2="9" y2="9.01" />
|
||||
<line x1="9" y1="12" x2="9" y2="12.01" />
|
||||
<line x1="9" y1="15" x2="9" y2="15.01" />
|
||||
<line x1="9" y1="18" x2="9" y2="18.01" />
|
||||
</svg>
|
||||
<a href="#" class="text-reset">UI Designer at Tabler</a>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
|
||||
</svg>
|
||||
<a href="#" class="text-reset">194 friends</a>
|
||||
</div>
|
||||
<div class="col-auto text-success">
|
||||
{% include "ui/icon.html" icon="check" %}
|
||||
Verified
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto d-none d-md-flex">
|
||||
<a href="#" class="btn btn-primary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
|
||||
<line x1="8" y1="9" x2="16" y2="9" />
|
||||
<line x1="8" y1="13" x2="14" y2="13" />
|
||||
</svg>
|
||||
Send message
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## With meta, search and actions
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">Gallery</h2>
|
||||
<div class="text-secondary mt-1">1-12 of 241 photos</div>
|
||||
</div>
|
||||
<div class="col-auto ms-auto d-print-none">
|
||||
<div class="d-flex">
|
||||
<div class="me-3 d-none d-md-block">
|
||||
<div class="input-icon">
|
||||
<input type="text" class="form-control" placeholder="Search…" />
|
||||
<span class="input-icon-addon">
|
||||
{% include "ui/icon.html" icon="search" %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">
|
||||
{% include "ui/icon.html" icon="plus" %}
|
||||
Add photo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Bordered header
|
||||
|
||||
A page header with a border to separate content is an effective way to organize and present information in a clear and visually appealing way.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page-header page-header-border">
|
||||
<div class="container-fluid">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">Improve cards with no border</h2>
|
||||
<div class="text-secondary mt-1">
|
||||
<a href="#" class="text-reset">#693</a>
|
||||
opened by <a href="#" class="text-body">Jeffie Lewzey</a> in
|
||||
<a href="#" class="text-body">Calendar Page</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
|
||||
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
|
||||
<path d="M16 5l3 3" />
|
||||
</svg>
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" class="btn d-none d-md-inline-flex">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
|
||||
/>
|
||||
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
|
||||
</svg>
|
||||
Subscribe
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Header with breadcrumb and actions
|
||||
|
||||
A page header with breadcrumb and actions is a common design element found in many websites and applications. The header typically appears at the top of the page and includes a breadcrumb trail, which shows the user the path they have taken to reach the current page. The breadcrumb can be clickable, allowing the user to navigate back to previous pages.
|
||||
|
||||
In addition to the breadcrumb, the header often includes actions or buttons that allow the user to perform common tasks related to the current page. These actions may include things like adding a new item, editing existing content, or deleting items.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page-header">
|
||||
<div class="row align-items-center mw-100">
|
||||
<div class="col">
|
||||
<div class="mb-1">
|
||||
<ol class="breadcrumb" aria-label="breadcrumbs">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Library</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
<a href="#">Articles</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<h2 class="page-title">
|
||||
<span class="text-truncate"
|
||||
>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
|
||||
woods.</span
|
||||
>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn-list">
|
||||
<a href="#" class="btn d-none d-md-inline-flex">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
|
||||
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
|
||||
<path d="M16 5l3 3" />
|
||||
</svg>
|
||||
Edit
|
||||
</a>
|
||||
<a href="#" class="btn btn-primary"> Publish </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
215
docs/content/ui/layout/page-layouts.md
Normal file
215
docs/content/ui/layout/page-layouts.md
Normal file
@@ -0,0 +1,215 @@
|
||||
---
|
||||
title: Page layouts
|
||||
summary: Learn how to build a sample version of the dashboard
|
||||
description: Learn to design dashboard layouts.
|
||||
---
|
||||
|
||||
<Callout>
|
||||
Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/installation).
|
||||
</Callout>
|
||||
|
||||
## Sample layout
|
||||
|
||||
To create a sample version of the dashboard, you can use the following code snippet. This code snippet will help you to create a dashboard layout with a header.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page">
|
||||
<header class="navbar navbar-expand-sm navbar-light d-print-none">
|
||||
<div class="container-xl">
|
||||
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<a href="#">
|
||||
<img
|
||||
src="/static/logo.svg"
|
||||
width="110"
|
||||
height="32"
|
||||
alt="Tabler"
|
||||
class="navbar-brand-image"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0">
|
||||
<span
|
||||
class="avatar avatar-sm"
|
||||
style="background-image: url(/static/avatars/002m.jpg)"
|
||||
></span>
|
||||
<div class="d-none d-xl-block ps-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-secondary">UI Designer</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="page-wrapper">
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="row row-deck row-cards">
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## Sidebar layout
|
||||
|
||||
To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="page">
|
||||
<!-- Sidebar -->
|
||||
<aside class="navbar navbar-vertical navbar-expand-sm position-absolute" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<h1 class="navbar-brand navbar-brand-autodark">
|
||||
<a href="#">
|
||||
<img
|
||||
src="/static/logo-white.svg"
|
||||
width="110"
|
||||
height="32"
|
||||
alt="Tabler"
|
||||
class="navbar-brand-image"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="collapse navbar-collapse" id="sidebar-menu">
|
||||
<ul class="navbar-nav pt-lg-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./">
|
||||
<span class="nav-link-title"> Home </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-title"> Link 1 </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-title"> Link 2 </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-title"> Link 3 </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="page-wrapper">
|
||||
<div class="page-header d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">Vertical layout</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="row row-deck row-cards">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
Reference in New Issue
Block a user