Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-23 19:50:59 +04:00
Code Issues Projects Releases Wiki Activity

page headers demo

Browse Source
This commit is contained in:
codecalm
2020-12-19 17:46:22 +01:00
parent fa7f870ab6
commit 1ae93a9e50
10 changed files with 142 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_data/docs.yml
+3
View File
@@ -61,6 +61,9 @@ components:
modals:
title: Modals
url: docs/modals.html
page-headers:
title: Page headers
url: docs/page-headers.html
progress:
title: Progress
url: docs/progress.html
src/pages/_docs/page-headers.md
+24
View File
@@ -0,0 +1,24 @@
---
menu: docs.components.page-headers
---
{% capture code %}
{% include layout/page-header-1.html %}
{% endcapture %}
{% include example.html code=code %}
{% capture code %}
{% include layout/page-header-3.html %}
{% endcapture %}
{% include example.html code=code %}
{% capture code %}
{% include layout/page-header-4.html %}
{% endcapture %}
{% include example.html code=code %}
{% capture code %}
{% include layout/page-header-5.html %}
{% endcapture %}
{% include example.html code=code %}
src/pages/_includes/example.html
+1 -1
View File
@@ -4,7 +4,7 @@
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns %} example-bg{% endif %}">
<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns or include.light %} example-bg{% endif %}">
<div class="example-content">
{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
src/pages/_includes/layout/page-header-1.html
+29
View File
@@ -0,0 +1,29 @@
{% assign person = site.data.people[0] %}
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person size="md" %}
</div>
<div class="col">
<h2 class="page-title">{{ person.full_name }}</h2>
<div class="page-subtitle">
<div class="row">
<div class="col-auto">
{% include ui/icon.html icon="building-skyscraper" %}
<a href="#" class="text-reset">{{ person.job_title }} at {{ person.company }}</a>
</div>
<div class="col-auto">
{% include ui/icon.html icon="users" %}
<a href="#" class="text-reset">194 friends</a>
</div>
<div class="col-auto text-success">
{% include ui/icon.html icon="check" color="green" %} Verified
</div>
</div>
</div>
</div>
<div class="col-auto d-none d-md-flex">
{% include ui/button.html icon="plus" color="primary" icon="message" text="Send message" %}
</div>
</div>
</div>
src/pages/_includes/layout/page-header-2.html
+24
View File
@@ -0,0 +1,24 @@
<div class="page-header">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">Gallery</h2>
<div class="text-muted 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="plus" %}
</span>
</div>
</div>
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
Add photo
</a>
</div>
</div>
</div>
</div>
src/pages/_includes/layout/page-header-3.html
+19
View File
@@ -0,0 +1,19 @@
{% assign person = site.data.people[1] %}
<div class="page-header page-header-border">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">Improve cards with no border</h2>
<div class="text-muted mt-1">
<a href="#" class="text-reset">#693</a>
opened by <a href="#" class="text-body">{{ person.full_name }}</a>
in <a href="#" class="text-body">Calendar Page</a>
</div>
</div>
<div class="col-auto">
<div class="btn-list">
{% include ui/button.html icon="plus" icon="edit" text="Edit" %}
{% include ui/button.html icon="plus" icon="bell" text="Subscribe" class="d-none d-md-inline-flex" %}
</div>
</div>
</div>
</div>
src/pages/_includes/layout/page-header-4.html
+18
View File
@@ -0,0 +1,18 @@
<div class="page-header">
<div class="row align-items-center mw-100">
<div class="col">
<div class="mb-1">
{% include ui/breadcrumb.html pages="Home,Library,Articles" class="breadcrumb-alternate" %}
</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">
{% include ui/button.html icon="plus" icon="edit" text="Edit" class="d-none d-md-inline-flex" %}
{% include ui/button.html color="primary" text="Publish" %}
</div>
</div>
</div>
</div>
src/pages/_includes/layout/page-header-5.html
+15
View File
@@ -0,0 +1,15 @@
<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">
{% include layout/header-actions/buttons.html %}
</div>
</div>
</div>
src/pages/page-headers.html
+5 -111
View File
@@ -4,129 +4,23 @@ page-header: Page headers
menu: base.headers
---
{% assign person = site.data.people[0] %}
<div class="my-5">
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
{% include ui/avatar.html person=person size="md" %}
</div>
<div class="col">
<h2 class="page-title">{{ person.full_name }}</h2>
<div class="page-subtitle">
<div class="row">
<div class="col-auto">
{% include ui/icon.html icon="building-skyscraper" %}
<a href="#" class="text-reset">{{ person.job_title }} at {{ person.company }}</a>
</div>
<div class="col-auto">
{% include ui/icon.html icon="users" %}
<a href="#" class="text-reset">194 friends</a>
</div>
<div class="col-auto text-success">
{% include ui/icon.html icon="check" color="green" %} Verified
</div>
</div>
</div>
</div>
<div class="col-auto d-none d-md-flex">
<div class="btn-list">
{% include ui/button.html icon="plus" icon="plus" text="Add to friends" %}
{% include ui/button.html icon="plus" color="primary" icon="message" text="Send message" %}
</div>
</div>
</div>
</div>
{% include layout/page-header-1.html %}
</div>
<div class="my-5">
<div class="page-header">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">Gallery</h2>
<div class="text-muted 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="plus" %}
</span>
</div>
</div>
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
Add photo
</a>
</div>
</div>
</div>
</div>
{% include layout/page-header-2.html %}
</div>
<div class="my-5">
<div class="page-header page-header-border">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">Improve cards with no border</h2>
<div class="text-muted mt-1">
<a href="#" class="text-reset">#693</a>
opened by <a href="#" class="text-body">{{ person.full_name }}</a>
in <a href="#" class="text-body">Calendar Page</a>
</div>
</div>
<div class="col-auto">
<div class="btn-list">
{% include ui/button.html icon="plus" icon="edit" text="Edit" %}
{% include ui/button.html icon="plus" icon="bell" text="Subscribe" class="d-none d-md-inline-flex" %}
</div>
</div>
</div>
</div>
{% include layout/page-header-3.html %}
</div>
<div class="my-5">
<div class="page-header">
<div class="row align-items-center mw-100">
<div class="col">
<div class="mb-1">
{% include ui/breadcrumb.html pages="Home,Library,Articles" class="breadcrumb-alternate" %}
</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">
{% include ui/button.html icon="plus" icon="edit" text="Edit" class="d-none d-md-inline-flex" %}
{% include ui/button.html color="primary" text="Publish" %}
</div>
</div>
</div>
</div>
{% include layout/page-header-4.html %}
</div>
<div class="my-5">
<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">
{% include layout/header-actions/buttons.html %}
</div>
</div>
</div>
{% include layout/page-header-5.html %}
</div>
src/scss/demo/_examples.scss
+4
View File
@@ -25,6 +25,10 @@
color: $body-color;
flex: 1;
max-width: 100%;
.page-header {
margin-bottom: 0;
}
}
.example-bg {