Skip to content

T
Tabler

Dashboards / Tabler
10 个月 前同步成功

通知 0
Star 0
Fork 0
T
Tabler

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

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

sidenav responsive init

上级 3561ca6c
隐藏空白更改
内联 并排
Showing with 172 addition and 429 deletion
pages/_includes/layout/sidenav.html
浏览文件 @ bedd5661
{% assign menu = page.menu | default: layout.menu %}
<aside class="navbar navbar-side {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar" id="sidebar">
<aside class="sidenav {% if include.class %} {{ include.class }}{% endif %} {% if include.dark %}sidenav-dark bg-dark text-white{% else %}sidenav-light{% endif %}{% if include.fixed %} sidenav-fixed{% endif %}{% if include.right %} sidenav-right{% endif %}{% if include.folded %} sidenav-folded{% endif %} js-sidebar" id="sidebar">
{% comment %}
{% unless include.empty %}
{% include layout/sidenav-content.html menu=menu dark=include.dark %}
{% endunless %}
{% endcomment %}
</aside>
pages/_layouts/base.html
浏览文件 @ bedd5661
......@@ -2,7 +2,7 @@
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta http-equiv="Content-Language" content="en"/>
......@@ -32,8 +32,7 @@
<style>body { display: none; }</style>
</head>
<body
class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
{{ content}}
......
pages/_layouts/default.html
浏览文件 @ bedd5661
......@@ -2,16 +2,20 @@
layout: base
---
<div class="layout d-flex flex-row vh-100">
<div class="layout d-flex flex-row h-100p">
{% if page.nav-side %}
{% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
{% endif %}
{% include layout/sidenav.html class=page.side-class dark=true %}
<div class="layout-main d-flex flex-column flex-fill max-w-full">
{% comment %}
{% unless page.nav-side %}
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% include layout/topmenu.html %}
{% endunless %}
{% endcomment %}
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
{% include layout/page-title.html %}
......
pages/layout-test.html 0 → 100644
浏览文件 @ bedd5661
---
title: Layout test
side-class: sidenav-expanded-xl sidenav-folded-lg
---
<div class="card" id="card-test">
<div class="card-body">
<a href="#" class="btn btn-secondary btn-block" id="toggle-sidebar">sidebar</a>
<div id="card-body"></div>
</div>
</div>
{% capture_global scripts %}
<script>
$(document).ready(function () {
var $test_el = $('#card-test'),
$test_body_el = $('#card-body'),
test_width = function () {
$test_body_el.text($test_el.width());
};
test_width();
$(window).on('resize', function () {
test_width();
});
$('#toggle-sidebar').on('click', function () {
$('body').toggleClass('show-sidenav');
});
});
</script>
{% endcapture_global %}
scss/_variables.scss
浏览文件 @ bedd5661
......@@ -175,7 +175,6 @@ $sizes-percentage: (
) !default;
$loader-size: 2.5rem !default;
$generate-social-colors: true !default;
$generate-color-hues: true !default;
......@@ -183,8 +182,6 @@ $generate-colors: true !default;
$enable-gradients: false !default;
$grid-gutter-width: 24px !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
......@@ -257,6 +254,12 @@ $dropdown-padding-y: .5rem !default;
$dropdown-link-hover-bg: $hover-bg !default;
$dropdown-link-hover-color: inherit !default;
//grid
$grid-gutter-width: 2rem !default;
//loader
$loader-size: 2.5rem !default;
//navbar
$navbar-bg: $white !default;
$navbar-border-color: $border-color !default;
......
scss/layout/_navbar.scss
浏览文件 @ bedd5661
......@@ -11,12 +11,6 @@ Navbar logo
height: 2rem;
}
//.nav-link {
// &.active {
// color: $primary;
// }
//}
//
.navbar-nav {
flex-direction: row;
margin-right: -($navbar-padding-x);
......@@ -35,421 +29,6 @@ Navbar logo
border-bottom: 1px solid $primary;
}
}
//
// .nav-link {
// display: flex;
// color: $text-muted;
// transition: .3s color;
//
// &:hover {
// color: $body-color;
// }
// }
//
// .nav-item {
// position: relative;
// }
//
// .navbar-nav {
// padding-right: .5rem;
// padding-left: .5rem;
// }
}
//.navbar:not(.navbar-side) .navbar-subnav {
// position: absolute;
// top: 100%;
// left: 0;
// z-index: $zindex-tooltip;
// width: 12rem;
// padding: .25rem;
// font-size: $h5-font-size;
// background: #fff;
// border: 1px solid $border-color;
// border-radius: 3px;
// box-shadow: 0 .5rem 1rem rgba(18, 18, 18, .15);
//
// .nav {
// flex-direction: column;
// }
//}
//
///**
//Navbar brand
// */
//.navbar-brand {
// display: flex;
// align-items: center;
// justify-content: center;
// padding: 0;
// margin: 0;
//
// @at-root a#{&} {
// transition: .3s opacity;
//
// &:hover {
// opacity: .8;
// }
// }
//}
//
//.navbar-brand-logo {
// height: 2rem;
//}
//
///**
//Navbar toggler
// */
//.navbar-toggler {
// padding: 0;
// border: 0;
//}
//
$navbar-side-padding-x: 1rem;
$navbar-side-padding-y: 1rem;
$navbar-active-color: $primary;
/*
Sidebar
*/
.navbar-side {
flex-direction: column;
flex-wrap: nowrap;
align-items: inherit;
justify-content: start;
width: $sidenav-width;
min-width: $sidenav-width;
margin: 0;
overflow: auto;
pointer-events: inherit;
user-select: none;
background: $sidenav-bg;
padding: $navbar-side-padding-y $navbar-side-padding-x;
box-shadow: 1px 0 $sidenav-border-color;
.navbar-brand {
text-align: center;
padding: 0;
margin: 0 0 1.5rem;
display: block;
}
.navbar-nav {
flex-direction: column;
margin-left: -$navbar-side-padding-y;
margin-right: -$navbar-side-padding-y;
.nav-link {
padding: .5rem $navbar-side-padding-y;
}
.nav-item.active .nav-link {
box-shadow: inset 2px 0 $navbar-active-color;
background: rgba($navbar-active-color, .04);
&:after {
content: none;
}
}
}
.nav-icon {
width: 1.5rem;
}
/*
Right navbar
*/
&.navbar-right {
order: 9;
box-shadow: -1px 0 $sidenav-border-color;
}
/*
Folded navbar
*/
&.navbar-folded {
width: $sidenav-folded-width;
min-width: $sidenav-folded-width;
.navbar-heading {
display: none;
}
.nav-text {
display: none;
}
.nav-icon {
margin: .25rem 0;
width: 100%;
font-size: 1.125rem;
.icon {
margin: 0 auto;
stroke-width: 1.5;
}
}
}
.navbar-heading {
@include subheader;
margin: 0 0 .5rem;
}
.nav-link {
}
// .nav {
// flex-direction: column;
// }
//
// .nav-link {
// display: flex;
// align-items: center;
// height: 2.5rem;
// padding: 0 $navbar-padding-x;
// color: $text-muted;
// box-shadow: inset 2px 0 0 0 transparent;
// transition: .3s background, .3s box-shadow;
//
// &[aria-expanded="true"],
// &:hover {
// background: rgba($link-color, .04);
// border-color: $primary;
// box-shadow: inset 2px 0 0 0 $primary;
// }
//
// > .icon {
// width: 2rem;
// }
//
// &[data-toggle="collapse"] {
// &::after {
// display: block;
// margin-left: auto;
// font-family: $font-icons !important;
// content: "";
// transition: transform .3s;
// }
//
// &[aria-expanded="true"]::after {
// transform: rotate(-180deg);
// }
// }
// }
//
// &:not(.navbar-folded) {
// &[data-toggle="collapse"][aria-expanded="true"] {
// background: none;
// box-shadow: none;
// }
// }
//
// &:not(.hide-navbar-folded) {
// //.nav-item .nav-item .nav-link {
// // padding-left: 2.5rem;
// //}
// //
// //.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;
// //}
// }
//
// .navbar-brand {
// height: 2.5rem;
// text-align: center;
// }
//
//
// .navbar-nav {
// flex-direction: column;
// }
}
///*
//Fixed navbar
// */
//.navbar-fixed {
// position: fixed;
// top: 0;
// bottom: 0;
// z-index: $zindex-sticky;
//
// &.navbar-side {
// top: 0;
// bottom: 0;
// left: 0;
//
// &.navbar-right {
// right: 0;
// left: auto;
// }
// }
//}
//
//.navbar-side {
// display: none;
//
// @include media-breakpoint-up(xl) {
// display: flex;
//
// &.navbar-fixed {
// & ~ .layout-main {
// margin-left: $sidenav-width;
// }
//
// &.navbar-right ~ .layout-main {
// margin-right: $sidenav-width;
// margin-left: 0;
// }
// }
// }
//
// &.navbar-folded {
// display: flex;
//
// &.navbar-fixed {
// @include media-breakpoint-up(lg) {
//
// & ~ .layout-main {
// margin-left: $sidenav-folded-width;
// }
//
// &.navbar-right ~ .layout-main {
// margin-right: $sidenav-folded-width;
// margin-left: 0;
// }
// }
// }
// }
//}
///*
//Dark navbar
// */
//.navbar-dark {
// color: #fff;
// background-color: $sidenav-dark-bg;
//
// .navbar-brand {
// filter: brightness(0) invert(1);
// }
//
// .navbar-divider {
// border-color: rgba(#fff, .2);
// }
//
// .nav-link {
// color: inherit;
// }
//}
//
///**
//Sticky navbar
// */
//.navbar-sticky {
// position: sticky;
// top: 0;
// z-index: 100;
//
// &.navbar-side {
// left: 0;
// }
//}
/**
Folded navbar
*/
//.navbar-folded {
// width: $sidenav-folded-width;
// min-width: $sidenav-folded-width;
//
// .navbar-brand {
// width: 2.5rem;
// }
//
// .navbar-heading {
// display: none;
// }
//
// .nav-text {
// display: none;
// }
//
// .nav-link {
// justify-content: center;
// padding-top: 0;
// padding-bottom: 0;
//
// &[data-toggle="collapse"]::after {
// content: none;
// }
// }
//
// .nav-icon {
// justify-content: center;
// opacity: 1;
// }
//
// .navbar-subnav {
// position: absolute;
// top: 0;
// left: 100%;
// background: #fff;
//
// .nav-text {
// display: block;
// }
//
// .nav-link {
// color: $body-color;
// }
// }
//}
//
//.nav-icon {
// display: flex;
// flex-shrink: 0;
// align-items: center;
// width: 1.5rem;
// font-size: px2rem(15px);
// border-radius: 100%;
// opacity: .8;
//
// .icon {
// font-size: inherit;
// }
//}
//.nav-text {
// display: flex;
// align-items: center;
// width: 100%;
//}
/**
Utils
*/
.hide-navbar-folded {
@at-root .navbar-side.navbar-folded & {
display: none;
}
}
.hide-navbar-expanded {
@at-root .navbar-side:not(.navbar-folded) & {
display: none;
}
}
scss/layout/_sidenav.scss 0 → 100644
浏览文件 @ bedd5661
$sidenav-padding-x: 1rem;
$sidenav-padding-y: 1rem;
$sidenav-active-color: $primary;
$breakpoints: $grid-breakpoints;
@mixin sidenav-base {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: $zindex-fixed;
opacity: 0;
transform: translateX(-100%);
transition: .3s opacity, .3s transform;
will-change: transform;
@include sidenav-expanded;
body.show-sidenav & {
@include sidenav-visible-common;
}
}
@mixin sidenav-visible-common {
transform: translateX(0);
opacity: 1;
}
@mixin sidenav-expanded {
width: $sidenav-width;
min-width: $sidenav-width;
&:before {
content: 'sidenav'
}
}
@mixin sidenav-folded {
@include sidenav-visible-common;
width: $sidenav-folded-width;
min-width: $sidenav-folded-width;
&:before {
content: 'sidenav-folded'
}
}
/*
Sidebar
*/
.sidenav {
@include sidenav-base;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: inherit;
justify-content: start;
margin: 0;
overflow: auto;
pointer-events: inherit;
user-select: none;
background: $sidenav-bg;
padding: $sidenav-padding-y $sidenav-padding-x;
padding: 0; //todo: remove
box-shadow: 1px 0 $sidenav-border-color;
/*
Right navbar
*/
&.navbar-right {
order: 9;
box-shadow: -1px 0 $sidenav-border-color;
}
}
/*
Folded navbar
*/
.sidenav-folded {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
&#{$infix} {
@include sidenav-folded;
}
}
}
}
.sidenav-expanded {
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
&#{$infix} {
@include sidenav-expanded;
}
}
}
}
/**
Utils
*/
.hide-sidenav-folded {
.sidenav.sidenav-folded & {
display: none;
}
}
.hide-sidenav-expanded {
.sidenav:not(.sidenav-folded) & {
display: none;
}
}
scss/tabler.scss
浏览文件 @ bedd5661
......@@ -12,6 +12,7 @@
@import "layout/core";
@import "layout/navbar";
@import "layout/sidenav";
@import "layout/page";
@import "ui/alerts";
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或