Skip to content

T
tabler

知鸟1号 / tabler
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
T
tabler

体验新版 GitCode，发现更多精彩内容 >>

提交 1ae93a9e 编写于 作者: C codecalm
浏览文件
操作

page headers demo

上级 fa7f870a
隐藏空白更改
内联 并排
Showing with 142 addition and 112 deletion
src/pages/_data/docs.yml
浏览文件 @ 1ae93a9e
...@@ -61,6 +61,9 @@ components: ...@@ -61,6 +61,9 @@ components:
modals: modals:
title: Modals title: Modals
url: docs/modals.html url: docs/modals.html
page-headers:
title: Page headers
url: docs/page-headers.html
progress: progress:
title: Progress title: Progress
url: docs/progress.html url: docs/progress.html
......
src/pages/_docs/page-headers.md 0 → 100644
浏览文件 @ 1ae93a9e
---
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 %}
\ No newline at end of file
src/pages/_includes/example.html
浏览文件 @ 1ae93a9e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %} {% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %} {% 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"> <div class="example-content">
{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %} {% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %} {% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
......
src/pages/_includes/layout/page-header-1.html 0 → 100644
浏览文件 @ 1ae93a9e
{% 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>
\ No newline at end of file
src/pages/_includes/layout/page-header-2.html 0 → 100644
浏览文件 @ 1ae93a9e
<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>
\ No newline at end of file
src/pages/_includes/layout/page-header-3.html 0 → 100644
浏览文件 @ 1ae93a9e
{% 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>
\ No newline at end of file
src/pages/_includes/layout/page-header-4.html 0 → 100644
浏览文件 @ 1ae93a9e
<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>
\ No newline at end of file
src/pages/_includes/layout/page-header-5.html 0 → 100644
浏览文件 @ 1ae93a9e
<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>
\ No newline at end of file
src/pages/page-headers.html
浏览文件 @ 1ae93a9e
...@@ -4,129 +4,23 @@ page-header: Page headers ...@@ -4,129 +4,23 @@ page-header: Page headers
menu: base.headers menu: base.headers
--- ---
{% assign person = site.data.people[0] %}
<div class="my-5"> <div class="my-5">
<div class="page-header"> {% include layout/page-header-1.html %}
<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>
</div> </div>
<div class="my-5"> <div class="my-5">
<div class="page-header"> {% include layout/page-header-2.html %}
<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>
</div> </div>
<div class="my-5"> <div class="my-5">
<div class="page-header page-header-border"> {% include layout/page-header-3.html %}
<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>
</div> </div>
<div class="my-5"> <div class="my-5">
<div class="page-header"> {% include layout/page-header-4.html %}
<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>
</div> </div>
<div class="my-5"> <div class="my-5">
<div class="page-header"> {% include layout/page-header-5.html %}
<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>
</div> </div>
\ No newline at end of file
src/scss/demo/_examples.scss
浏览文件 @ 1ae93a9e
...@@ -25,6 +25,10 @@ ...@@ -25,6 +25,10 @@
color: $body-color; color: $body-color;
flex: 1; flex: 1;
max-width: 100%; max-width: 100%;
.page-header {
margin-bottom: 0;
}
} }
.example-bg { .example-bg {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或