Skip to content

T
Tabler

Dashboards / Tabler
10 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

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

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

sidebar active

上级 21c38e45
隐藏空白更改
内联 并排
Showing with 90 addition and 119 deletion
pages/_data/menu.yml
浏览文件 @ be15188e
......@@ -2,7 +2,7 @@ apps:
url: apps.html
title: Apps
icon: package
counter: 8
label: 8
level-1:
title: Level 1
icon: menu
......@@ -18,6 +18,7 @@ level-1:
level-4:
title: Level 4
icon: menu
url: menu-4.html
docs:
title: Documentation
icon: file-text
......@@ -28,3 +29,8 @@ changelog:
title: Changelog
icon: file-plus
label: v1.0.0
getting-started:
url: getting-started.html
title: Getting started
icon: start
pages/_docs/badges.md
浏览文件 @ be15188e
---
title: Badges
menu: docs.badges
---
A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
......
pages/_docs/buttons.md
浏览文件 @ be15188e
---
title: Buttons
menu: docs.buttons
---
## Default markup
......
pages/_docs/cards.md
浏览文件 @ be15188e
---
title: Cards
menu: docs.cards
description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
---
......
pages/_docs/carousel.md
浏览文件 @ be15188e
---
title: Carousel
menu: docs.carousel
---
The Carousel is a slideshow for cycling through elements.
......
pages/_docs/index.md
浏览文件 @ be15188e
---
title: Introduction
menu: docs.index
icon: flag
order: -1
---
......
pages/_docs/ribbons.md
浏览文件 @ be15188e
---
title: Ribbons
menu: docs.ribbons
---
## Default markup
......
pages/_docs/spinners.md
浏览文件 @ be15188e
---
title: Spinners
menu: docs.spinners
---
## Default markup
......
pages/_docs/steps.md
浏览文件 @ be15188e
---
title: Steps
menu: docs.steps
---
Steps are progress indicators of a sequence of task steps.
......
pages/_docs/tabs.md
浏览文件 @ be15188e
---
title: Tabs
menu: docs.tabs
---
## Default markup
......
pages/_docs/toasts.md
浏览文件 @ be15188e
---
title: Toasts
menu: docs.toasts
---
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
......
pages/_docs/tooltips.md
浏览文件 @ be15188e
---
title: Tooltips
menu: docs.tooltips
---
The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
......
pages/_docs/typography.md
浏览文件 @ be15188e
---
title: Typography
menu: docs.typography
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
---
......
pages/_includes/layout/menu.html
浏览文件 @ be15188e
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
{{ current-page }}
<ul class="sidenav-menu">
{% for level-1 in site.data.menu %}
{% assign level-1-key = level-1[0] %}
{% assign level-1-item = level-1[1] %}
<li class="sidenav-menu-item">
<a href="{{ site.base }}/{{ level-1-item.url }}" class="sidenav-link{% if level-1-key == current-page[0] %} active{% endif %}">
{% include ui/icon.html icon=level-1-item.icon class="sidenav-icon" %}
<span class="sidenav-link-description">{{ level-1-item.title }} ({{ level-1-key }})</span>
<ul class="navbar-nav mb-md-4">
{% assign current-page = include.menu | split: '.' %}
{{ current-page.size }}
{% if level-1-item.counter %}
<span class="badge badge-green ml-auto">{{ level-1-item.counter }}</span>
{% endif %}
</a>
{% if level-1-item.children %}
<ul class="sidenav-submenu">
{% for level-2 in level-1-item.children %}
{% assign level-2-key = level-2[0] %}
{% assign level-2-item = level-2[1] %}
<li>
<a href="{{ level-2-item.url }}" class="sidenav-link">{{ level-2-item.title }} ({{ level-2-key }})</a>
{% if level-2-item.children %}
<ul class="sidenav-submenu">
{% for level-3 in level-2-item.children %}
{% assign level-3-key = level-3[0] %}
{% assign level-3-item = level-3[1] %}
<li><a href="{{ level-3-item.url }}" class="sidenav-link">{{ level-3-item.title }} ({{ level-3-key }})</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% 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] and current-page.size == 1 %} 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 %}
</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] }}">
<ul class="nav nav-sm flex-column">
{% if level-1[1].docs %}
{% assign docs-key = level-1[1].docs %}
{% for doc-slug in site.docs-menu[docs-key].pages %}
{% 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 }}
</a>
</li>
{% endfor %}
{% endif %}
{% for level-2 in level-1[1].children %}
<li class="nav-item">
<a class="nav-link{% if level-2[0] == current-page[1] and current-page.size == 2 %} 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 }}
</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] }}">
<ul class="nav nav-sm flex-column">
{% for level-3 in level-2[1].children %}
<li class="nav-item">
<a class="nav-link{% if level-3[0] == current-page[2] and current-page.size == 3 %} 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 }}
</a>
{% if level-3[1].children %}
<div class="collapse navbar-collapse{% if level-3[0] == current-page[2] %} show{% endif %}" id="sidebar-{{ level-3[0] }}">
<ul class="nav nav-sm flex-column">
{% for level-4 in level-3[1].children %}
<li class="nav-item">
<a class="nav-link{% if level-4[0] == current-page[3] and current-page.size == 4 %} active{% endif %}" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
{{ level-4[1].title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
pages/_includes/layout/sidenav-content.html
浏览文件 @ be15188e
......@@ -10,85 +10,5 @@
Docs
</h6>
{{ page.menu }}
<ul class="navbar-nav mb-md-4">
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item">
<a class="nav-link{% if level-1[1].active %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% 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 %}
</a>
{% if level-1[1].children or level-1[1].docs %}
<div class="collapse navbar-collapse" id="sidebar-{{ level-1[0] }}">
<ul class="nav nav-sm flex-column">
{% if level-1[1].docs %}
{% assign docs-key = level-1[1].docs %}
{% for p in site.docs-menu[docs-key].pages %}
{% assign doc = site.docs | where: "slug", p | first %}
<li class="nav-item">
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
{{ doc.title }}
</a>
</li>
{% endfor %}
{% endif %}
{% for level-2 in level-1[1].children %}
<li class="nav-item">
<a {% 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 %} class="nav-link">
{{ level-2[1].title }}
</a>
{% if level-2[1].children %}
<div class="collapse navbar-collapse" id="sidebar-{{ level-2[0] }}">
<ul class="nav nav-sm flex-column">
{% for level-3 in level-2[1].children %}
<li class="nav-item">
<a {% 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 %} class="nav-link">
{{ level-3[1].title }}
</a>
{% if level-3[1].children %}
<div class="collapse navbar-collapse" id="sidebar-{{ level-3[0] }}">
<ul class="nav nav-sm flex-column">
{% for level-4 in level-3[1].children %}
<li class="nav-item">
<a href="{% if level-4[1].url %}{{ level-4[1].url }}{% else %}#{% endif %}" class="nav-link">
{{ level-4[1].title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
<li class="nav-item dropdown">
<a class="nav-link" href="#" >
{% include ui/icon.html icon="book-open" %}
<span class="nav-link-text">Components</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{% include ui/icon.html icon="git-branch" %}
<span class="nav-link-text">Changelog</span>
</a>
</li>
</ul>
{% include layout/menu.html menu=include.menu %}
</div>
scss/_variables.scss
浏览文件 @ be15188e
......@@ -180,7 +180,7 @@ $pagination-disabled-color: rgba($text-muted-light, .5) !default;
$sidenav-bg: $white !default;
$sidenav-border-color: $border-color !default;
$sidenav-dark-bg: $dark !default;
$sidenav-link-padding-x: .5rem !default;
$sidenav-link-padding-x: .75rem !default;
//steps
$steps-border-width: 2px !default;
......
scss/layout/_sidenav.scss
浏览文件 @ be15188e
......@@ -18,6 +18,7 @@ Sidebar
&:hover {
color: $link-color;
background: rgba($link-color, .04);
outline: 1px solid red;
}
> .icon {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或