Skip to content

T
Tabler

Dashboards / Tabler
10 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 8b585ee1 编写于 作者: C codecalm
浏览文件
操作

responsive navbars

上级 71fbfdc8
隐藏空白更改
内联 并排
Showing with 182 addition and 64 deletion
pages/_includes/layout/navbar-logo.html
浏览文件 @ 8b585ee1
{% assign prefix = include.prefix | default: 'navbar' %}
{% assign breakpoint = include.breakpoint | default: 'lg' %}
<a href="{{ site.base }}" class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}">
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-large">
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-small">
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image d-none d-{{ breakpoint }}-block">
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image d-{{ breakpoint }}-none">
</a>
pages/_includes/layout/navbar-menu.html
浏览文件 @ 8b585ee1
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
<ul class="navbar-nav">
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
<span class="nav-link-icon">{% include ui/icon.html icon=icon %}</span>
......@@ -11,7 +11,7 @@
</a>
{% if level-1[1].children %}
<ul class="dropdown-menu dropdown-menu-arrow{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
<ul class="dropdown-menu{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
{% for level-2 in level-1[1].children %}
<li {% if level-2[1].children %}class="dropright"{% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and 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="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
......@@ -32,10 +32,12 @@
</li>
{% endfor %}
{% comment %}
<li class="nav-item d-none-navbar-vertical">
<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
<span class="nav-link-icon">{% include ui/icon.html icon="adjustments" %}</span>
<span class="nav-link-title">Customize</span>
</a>
</li>
{% endcomment %}
</ul>
\ No newline at end of file
pages/_includes/layout/navbar-secondary.html
浏览文件 @ 8b585ee1
......@@ -6,47 +6,7 @@
{% include ui/form/input-icon.html prepend=true input-class="form-control-flush w-100" class="w-100" %}
</form>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link px-0" data-toggle="dropdown">
{% include ui/icon.html icon="settings" %}
</a>
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">
{% include ui/flag.html flag="us" class="mr-1" %}
<span class="d-none d-lg-inline">English</span>
</a>
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
<a href="#" class="dropdown-item">{% include ui/flag.html flag="de" class="mr-1" %} German</a>
<a href="#" class="dropdown-item">{% include ui/flag.html flag="pl" class="mr-1" %} Polish</a>
<a href="#" class="dropdown-item">{% include ui/flag.html flag="jp" class="mr-1" %} Japan</a>
<a href="#" class="dropdown-item">{% include ui/flag.html flag="ru" class="mr-1" %} Russian</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link px-0" data-toggle="dropdown">
{% include ui/icon.html icon="bell" %}
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
{% include cards/navbar-notifications.html %}
</div>
</li>
<li class="nav-item dropdown pl-3">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
{% include ui/avatar.html person-id=1 %}
<div class="d-none d-lg-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">Founder</div>
</div>
</a>
{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
</li>
</ul>
</div>
</nav>
pages/_includes/layout/navbar-side.html 0 → 100644
浏览文件 @ 8b585ee1
<ul class="navbar-nav flex-row">
<li class="nav-item dropdown">
<a href="#" class="nav-link px-0" data-toggle="dropdown">
{% include ui/icon.html icon="bell" %}
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
{% include cards/navbar-notifications.html %}
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset py-0" data-toggle="dropdown">
{% include ui/avatar.html person-id=1 %}
<div class="d-none d-lg-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">Founder</div>
</div>
</a>
{% include ui/dropdown-menu.html right=true icons=true separated=true %}
</li>
</ul>
\ No newline at end of file
pages/_includes/layout/navbar-toggler.html 0 → 100644
浏览文件 @ 8b585ee1
<button class="navbar-toggler" type="button" data-toggle="collapse"{% if include.target %} data-target="#{{ include.target }}"{% endif %}>
<span class="navbar-toggler-icon"></span>
</button>
\ No newline at end of file
pages/_includes/layout/navbar.html 0 → 100644
浏览文件 @ 8b585ee1
{% assign breakpoint = include.breakpoint | default: 'md' %}
<nav class="navbar navbar-expand-{{ breakpoint }} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}">
<div class="container-xl">
{% include layout/navbar-toggler.html target="navbar-menu" %}
{% include layout/navbar-logo.html dark=include.dark class="d-none-navbar-horizontal" breakpoint=breakpoint %}
<div class="collapse navbar-collapse" id="navbar-menu">
{% include layout/navbar-menu.html class="ml-lg-5" %}
</div>
{% include layout/navbar-side.html %}
</div>
</nav>
\ No newline at end of file
pages/_includes/layout/topnav.html 0 → 100644
浏览文件 @ 8b585ee1
<div class="navbar navbar-expand-lg navbar-dark bg-dark text-white">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, consectetur cupiditate dicta dolore eum, nesciunt nobis optio quibusdam quidem sed similique suscipit, veniam. Aperiam fugit odit recusandae repudiandae rerum vitae.
</div>
</div>
\ No newline at end of file
pages/_layouts/base.html
浏览文件 @ 8b585ee1
......@@ -51,8 +51,9 @@
{% include layout/modals-capture.html %}
{% comment %}
{% include layout/js.html %}
{% comment %}
{% include layout/js-capture.html %}
{% if site.debug and jekyll.environment == 'development' %}
......
pages/_layouts/default.html
浏览文件 @ 8b585ee1
......@@ -5,6 +5,12 @@ layout: base
{% assign page-header = page.page-header | default: layout.page-header %}
<div class="page">
{% include layout/navbar.html dark=true %}
{% include layout/navbar.html dark=true background="blue" %}
{% include layout/navbar.html %}
{% comment %}{% include layout/topnav.html %}{% endcomment %}
{% comment %}
{% include layout/navbar-primary.html %}
{% include layout/navbar-secondary.html %}
......
scss/_variables.scss
浏览文件 @ 8b585ee1
......@@ -364,29 +364,51 @@ $modal-md: 540px !default;
$modal-sm: 380px !default;
//navbar
$navbar-padding-y: .5rem !default;
$navbar-height: 3.5rem !default;
$navbar-border-color: $border-color !default;
$navbar-padding-y: .25rem !default;
$navbar-light-brand-color: inherit !default;
$navbar-light-active-color: inherit !default;
$navbar-dark-brand-color: inherit !default;
$navbar-dark-active-color: inherit !default;
$navbar-brand-padding-y: 0 !default;
$navbar-brand-image-height: 2rem !default;
$navbar-brand-margin-right: 0 !default;
$navbar-toggler-padding-y: .75rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-margin: -.75rem !default;
$navbar-toggler-font-size: 1rem !default;
$navbar-toggler-size: 1.5rem !default;
$navbar-toggler-item-height: 2px !default;
$navbar-toggler-item-spacing: 7px !default;
$navbar-toggler-transform-time: .2s !default;
//sidenav
$navbar-vertical-width: 15.625rem !default;
$navbar-vertical-narrow-width: 4rem !default;
$navbar-vertical-dark-bg: $dark !default;
$navbar-vertical-dark-color: $white !default;
$navbar-vertical-padding: 1rem !default;
$navbar-vertical-active-accent-color: $primary !default;
$navbar-toggler-padding-x: 0 !default;
$navbar-toggler-padding-y: 0 !default;
$navbar-light-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-justified" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="' + $body-color + '" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"/><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /></svg>') !default;
$navbar-dark-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-justified" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="' + $white + '" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"/><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /></svg>') !default;
//nav
$navbar-nav-link-padding-y: .25rem !default;
$navbar-nav-link-padding-x: .75rem !default;
//$navbar-padding-y: .5rem !default;
//$navbar-height: 3.5rem !default;
//$navbar-border-color: $border-color !default;
//
//$navbar-toggler-padding-y: .75rem !default;
//$navbar-toggler-padding-x: .75rem !default;
//$navbar-toggler-margin: -.75rem !default;
//$navbar-toggler-font-size: 1rem !default;
//$navbar-toggler-size: 1.5rem !default;
//$navbar-toggler-item-height: 2px !default;
//$navbar-toggler-item-spacing: 7px !default;
//$navbar-toggler-transform-time: .2s !default;
//
////sidenav
//$navbar-vertical-width: 15.625rem !default;
//$navbar-vertical-narrow-width: 4rem !default;
//$navbar-vertical-dark-bg: $dark !default;
//$navbar-vertical-dark-color: $white !default;
//$navbar-vertical-padding: 1rem !default;
//$navbar-vertical-active-accent-color: $primary !default;
//
//$navbar-nav-link-padding-x: .75rem !default;
//popover
$popover-border-color: $border-color !default;
......
scss/layout/_navbar.scss
浏览文件 @ 8b585ee1
/**
Navbar
*/
.navbar {
box-shadow: 0 0 0 1px $border-color;
background-color: $white;
height: $navbar-height;
.navbar-nav {
height: subtract($navbar-height, 2 * $navbar-padding-y);
.nav-link {
min-width: 2.5rem;
}
}
}
/**
Navbar brand
*/
.navbar-brand {
display: inline-flex;
align-items: center;
}
.navbar-brand-image {
display: block;
height: $navbar-brand-image-height;
}
/**
Navbar toggler
*/
.navbar-toggler {
border: 0;
width: $navbar-brand-image-height;
height: $navbar-brand-image-height;
}
/**
Navbar dark
*/
.navbar-dark {
color: $white;
background-color: $dark;
box-shadow: none;
.text-muted {
color: $navbar-dark-color !important;
}
}
.navbar-collapse {
width: auto;
flex: 1 1 auto;
}
.navbar-nav {
align-items: stretch;
.nav-item {
display: flex;
align-items: center;
}
}
///*
......
scss/ui/_nav.scss
浏览文件 @ 8b585ee1
......@@ -50,7 +50,24 @@
}
.nav-link {
border-radius: $border-radius;
display: flex;
align-items: center;
transition: .3s color;
align-items: center;
.icon {
display: inline-block;
font-size: 1rem;
}
}
.nav-link-icon {
width: 1rem;
height: 1rem;
font-size: 1rem;
margin-right: .25rem;
.icon {
display: block;
}
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或