Skip to content

T
Tabler

Dashboards / Tabler
10 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

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

提交 e3bae4c9 编写于 作者: C chomik
浏览文件
操作

sidenav navigation

上级 6f930dee
隐藏空白更改
内联 并排
Showing with 167 addition and 51 deletion
pages/_data/menu.yml
浏览文件 @ e3bae4c9
......@@ -3,6 +3,7 @@ apps:
title: Apps
icon: package
label: 8
label-color: green
level-1:
title: Level 1
icon: menu
......
pages/_docs/colors.md 0 → 100644
浏览文件 @ e3bae4c9
---
title: Colors
menu: docs.colors
---
pages/_docs/ribbons.md
浏览文件 @ e3bae4c9
---
title: Ribbons
menu: docs.ribbons
new: true
---
## Default markup
......
pages/_includes/layout/debug.html
浏览文件 @ e3bae4c9
......@@ -103,7 +103,7 @@
return false;
})
.on('click', '[data-debug="folded"]', function (e) {
$body.toggleClass('sidebar-folded');
$('.sidenav').toggleClass('sidenav-folded');
e.preventDefault();
return false;
......
pages/_includes/layout/menu.html
浏览文件 @ e3bae4c9
<ul class="navbar-nav mb-md-4">
{% assign current-page = include.menu | split: '.' %}
{{ current-page.size }}
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item">
<a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
{% include ui/icon.html icon=icon %}
<span class="nav-link-text">{{ level-1[1].title }}</span>
{% if level-1[1].label %}
<span class="badge bg-primary text-white ml-auto">{{ level-1[1].label }}</span>
{% endif %}
<span class="nav-link-title">
{{ level-1[1].title }}
{% if level-1[1].label %}
<span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
{% endif %}
</span>
</a>
{% if level-1[1].children or level-1[1].docs %}
<div class="collapse navbar-collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-{{ level-1[0] }}">
......@@ -22,7 +24,13 @@
{% assign doc = site.docs | where: "slug", doc-slug | first %}
<li class="nav-item">
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
{{ doc.title }}
<span class="nav-link-title">
{{ doc.title }}
{% if doc.new %}
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
{% endif %}
</span>
</a>
</li>
{% endfor %}
......@@ -31,7 +39,12 @@
{% for level-2 in level-1[1].children %}
<li class="nav-item">
<a class="nav-link{% if level-2[0] == current-page[1] %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
{{ level-2[1].title }}
<span class="nav-link-title">
{{ level-2[1].title }}
{% if level-2[1].label %}
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
{% endif %}
</span>
</a>
{% if level-2[1].children %}
<div class="collapse navbar-collapse{% if level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-{{ level-2[0] }}">
......@@ -39,7 +52,12 @@
{% for level-3 in level-2[1].children %}
<li class="nav-item">
<a class="nav-link{% if level-3[0] == current-page[2] %} active{% endif %}" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
{{ level-3[1].title }}
<span class="nav-link-title">
{{ level-3[1].title }}
{% if level-3[1].label %}
<span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
{% endif %}
</span>
</a>
{% if level-3[1].children %}
......@@ -48,7 +66,12 @@
{% for level-4 in level-3[1].children %}
<li class="nav-item">
<a class="nav-link{% if level-4[0] == current-page[3] %} active{% endif %}" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
{{ level-4[1].title }}
<span class="nav-link-title">
{{ level-4[1].title }}
{% if level-4[1].label %}
<span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
{% endif %}
</span>
</a>
</li>
{% endfor %}
......
pages/_includes/layout/sidenav-content.html
浏览文件 @ e3bae4c9
{% assign id = 0 | random_id %}
<div class="p-3">
<a href="{{ site.base }}" class="navbar-brand text-inherit">
<img src="{{ site.base }}/img/logo{% if include.logo %}-{{ include.logo }}{% endif %}.svg" alt="" class="navbar-brand-logo">
<a href="{{ site.base }}" class=" navbar-brand text-inherit">
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-expanded navbar-brand-logo">
</a>
</div>
<div class="container">
<h6 class="navbar-heading">
Docs
</h6>
<h6 class="navbar-heading">
Docs
</h6>
{% include layout/menu.html menu=include.menu %}
</div>
{% include layout/menu.html menu=include.menu %}
pages/_includes/layout/sidenav.html
浏览文件 @ e3bae4c9
{% assign menu = page.menu | default: layout.menu %}
<div class="sidenav sidenav-dark sidenav-expand-md">
{% assign menu = page.menu | default: layout.menu %}
{% include_cached layout/sidenav-content.html logo="white" menu=menu %}
{% include layout/sidenav-content.html white=true menu=menu %}
</div>
pages/index.html
浏览文件 @ e3bae4c9
......@@ -5,22 +5,22 @@ menu: level-1.level-2.level-3.level-4
---
<div class="row row-cards">
<div class="col-6 col-sm-4 col-lg-2">
<div class="col-6 col-sm-4 col-xl-2">
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="col-6 col-sm-4 col-xl-2">
{% include cards/small-stats-3.html number=17 title="Closed Today" percentage=-3 %}
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="col-6 col-sm-4 col-xl-2">
{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="col-6 col-sm-4 col-xl-2">
{% include cards/small-stats-3.html number="27.3K" title="Followers" percentage=3 %}
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="col-6 col-sm-4 col-xl-2">
{% include cards/small-stats-3.html number="$95" title="Daily Earnings" percentage=-2 %}
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="col-6 col-sm-4 col-xl-2">
{% include cards/small-stats-3.html number=621 title="Products" percentage=-1 %}
</div>
......@@ -49,16 +49,16 @@ menu: level-1.level-2.level-3.level-4
</div>
{% endcomment %}
<div class="col-sm-6 col-lg-3">
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
</div>
<div class="col-sm-6 col-lg-3">
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
</div>
<div class="col-sm-6 col-lg-3">
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
</div>
<div class="col-sm-6 col-lg-3">
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
</div>
</div>
......
pages/sidebar.html 0 → 100644
浏览文件 @ e3bae4c9
---
title: Sidebar
body-class: sidebar-folded
---
scss/_variables.scss
浏览文件 @ e3bae4c9
......@@ -177,6 +177,7 @@ $pagination-disabled-bg: transparent !default;
$pagination-disabled-color: rgba($text-muted-light, .5) !default;
//sidenav
$sidenav-width: 16rem;
$sidenav-bg: $white !default;
$sidenav-border-color: $border-color !default;
$sidenav-dark-bg: $dark !default;
......
scss/layout/_sidenav.scss
浏览文件 @ e3bae4c9
......@@ -2,8 +2,8 @@
Sidebar
*/
.sidenav {
width: 16rem;
min-width: 16rem;
width: $sidenav-width;
min-width: $sidenav-width;
background: $sidenav-bg;
border-right: 1px solid $sidenav-border-color;
user-select: none;
......@@ -12,12 +12,14 @@ Sidebar
display: flex;
align-items: center;
color: $text-muted;
border-radius: $border-radius;
transition: .3s background, .3s box-shadow;
&.active,
&:hover {
color: $link-color;
color: $body-color;
background: rgba($link-color, .04);
border-color: $primary;
box-shadow: inset 2px 0 0 0 $primary;
}
> .icon {
......@@ -27,6 +29,7 @@ Sidebar
&[data-toggle="collapse"] {
&.active {
background: none;
box-shadow: none;
}
&:after {
......@@ -43,38 +46,103 @@ Sidebar
}
}
.nav-item .nav-item {
padding-left: 2rem;
&:not(.sidenav-folded) {
.nav-item .nav-item .nav-link {
padding-left: 2.5rem;
}
.nav-item {
padding-left: 1rem;
.nav-item .nav-item .nav-item .nav-link {
padding-left: 3.5rem;
}
.nav-item .nav-item .nav-item .nav-item .nav-link {
padding-left: 4.5rem;
}
}
.nav-link-title {
display: flex;
width: 100%;
align-items: center;
}
.navbar-brand {
text-align: center;
}
.navbar-heading {
padding: .5rem 0;
margin: 0;
@extend .text-subheader;
padding: .5rem $sidenav-link-padding-x;
margin: 0;
}
}
/**
Narrow sidebar
*/
.sidenav-narrow {
/*.sidenav-folded {
width: 4rem;
min-width: 4rem;
padding: .5rem;
.navbar-brand {
min-height: 2.5rem;
padding: 0;
.nav-item {
position: relative;
.nav-item {
.nav-link {
height: auto;
}
.nav-link-title {
display: block;
}
}
.nav-link {
padding: 0 $sidenav-link-padding-x;
}
}
.nav-link-title {
display: none;
}
.navbar-heading {
display: none;
}
.nav-link {
height: 4rem;
> .icon {
font-size: 1.25rem;
width: 100%;
text-align: center;
}
.badge {
position: absolute;
right: 0;
top: 0;
text-indent: -9999px;
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
&:after {
display: none !important;
}
}
.navbar-collapse {
position: absolute;
left: 100%;
top: 0;
background: #fff;
z-index: $zindex-dropdown;
width: 10rem;
box-shadow: $box-shadow-sm;
border: 1px solid $border-color;
}
}
*/
/*
Right sidebar
......@@ -151,3 +219,15 @@ Dark sidebar
}
}
}
.hide-sidenav-folded {
@at-root .sidenav.sidenav-folded & {
display: none;
}
}
.hide-sidenav-expanded {
@at-root .sidenav:not(.sidenav-folded) & {
display: none;
}
}
scss/ui/_badges.scss
浏览文件 @ e3bae4c9
.badge {
//font-weight: 600;
@at-root a#{&} {
color: $white;
}
......@@ -12,6 +10,7 @@
height: 8px;
min-height: auto;
padding: 0;
border-radius: 50%;
}
}
......
static/img/logo-small-white.svg 0 → 100644
浏览文件 @ e3bae4c9
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68">
<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#ffffff"/>
</svg>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或