Skip to content

A
AdminLTE

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
A
AdminLTE

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

未验证 提交 e5db7c30 编写于 作者: R REJack
浏览文件
操作

added support for vertical nav tabs 

- updated _navs.scss with tabs override css
- added pages/UI/navbar demo with navbar color examples & vertical tabs example
- added navbar & tabs sidebar entry in demo files with sidebar
上级 e60faca7
展开全部 隐藏空白更改
内联 并排
Showing with 1043 addition and 3 deletion
build/scss/_navs.scss
浏览文件 @ e5db7c30
......@@ -19,6 +19,45 @@
}
}
//
// Vertical Tabs
//
.nav-tabs.flex-column {
border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
border-bottom: 0;
.nav-link {
margin-right: -$nav-tabs-border-width;
@include hover-focus {
border-color: $gray-200 $nav-tabs-border-color $gray-200 $gray-200;
}
}
.nav-link.active,
.nav-item.show .nav-link {
border-color: $gray-300 $nav-tabs-link-active-bg $gray-300 $gray-300;
}
&.nav-tabs-right {
border-right: 0;
border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
.nav-link {
margin-left: -$nav-tabs-border-width;
@include hover-focus {
border-color: $gray-200 $gray-200 $gray-200 $nav-tabs-border-color;
}
}
.nav-link.active,
.nav-item.show .nav-link {
border-color: $gray-300 $gray-300 $gray-300 $nav-tabs-link-active-bg;
}
}
}
//
// Color variants
......
dist/css/adminlte.css
浏览文件 @ e5db7c30
......@@ -14401,6 +14401,42 @@ html.maximized-card {
color: #ffffff;
}
.nav-tabs.flex-column {
border-right: 1px solid #dee2e6;
border-bottom: 0;
}
.nav-tabs.flex-column .nav-link {
margin-right: -1px;
}
.nav-tabs.flex-column .nav-link:hover, .nav-tabs.flex-column .nav-link:focus {
border-color: #e9ecef #dee2e6 #e9ecef #e9ecef;
}
.nav-tabs.flex-column .nav-link.active,
.nav-tabs.flex-column .nav-item.show .nav-link {
border-color: #dee2e6 #ffffff #dee2e6 #dee2e6;
}
.nav-tabs.flex-column.nav-tabs-right {
border-right: 0;
border-left: 1px solid #dee2e6;
}
.nav-tabs.flex-column.nav-tabs-right .nav-link {
margin-left: -1px;
}
.nav-tabs.flex-column.nav-tabs-right .nav-link:hover, .nav-tabs.flex-column.nav-tabs-right .nav-link:focus {
border-color: #e9ecef #e9ecef #e9ecef #dee2e6;
}
.nav-tabs.flex-column.nav-tabs-right .nav-link.active,
.nav-tabs.flex-column.nav-tabs-right .nav-item.show .nav-link {
border-color: #dee2e6 #dee2e6 #dee2e6 #ffffff;
}
.navbar-light {
background-color: #f8f9fa;
}
......
dist/css/adminlte.css.map
浏览文件 @ e5db7c30
此差异已折叠。
dist/css/adminlte.min.css
浏览文件 @ e5db7c30
此差异已折叠。
dist/css/adminlte.min.css.map
浏览文件 @ e5db7c30
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
index.html
浏览文件 @ e5db7c30
......@@ -333,6 +333,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
index2.html
浏览文件 @ e5db7c30
......@@ -320,6 +320,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
index3.html
浏览文件 @ e5db7c30
......@@ -330,6 +330,12 @@ to get the desired effect
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/UI/buttons.html
浏览文件 @ e5db7c30
......@@ -322,6 +322,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/UI/general.html
浏览文件 @ e5db7c30
......@@ -356,6 +356,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/UI/icons.html
浏览文件 @ e5db7c30
......@@ -322,6 +322,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/UI/modals.html
浏览文件 @ e5db7c30
......@@ -326,6 +326,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/UI/navbar.html 0 → 100644
浏览文件 @ e5db7c30
此差异已折叠。
pages/UI/sliders.html
浏览文件 @ e5db7c30
......@@ -327,6 +327,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/calendar.html
浏览文件 @ e5db7c30
......@@ -328,6 +328,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/charts/chartjs.html
浏览文件 @ e5db7c30
......@@ -322,6 +322,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/charts/flot.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/charts/inline.html
浏览文件 @ e5db7c30
......@@ -324,6 +324,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/examples/404.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/examples/500.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/examples/blank.html
浏览文件 @ e5db7c30
......@@ -324,6 +324,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/examples/invoice.html
浏览文件 @ e5db7c30
......@@ -322,6 +322,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/examples/legacy-user-menu.html
浏览文件 @ e5db7c30
......@@ -351,6 +351,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/examples/profile.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/forms/advanced.html
浏览文件 @ e5db7c30
......@@ -333,6 +333,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview menu-open">
......
pages/forms/editors.html
浏览文件 @ e5db7c30
......@@ -325,6 +325,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview menu-open">
......
pages/forms/general.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview menu-open">
......
pages/layout/boxed.html
浏览文件 @ e5db7c30
......@@ -324,6 +324,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/layout/collapsed-sidebar.html
浏览文件 @ e5db7c30
......@@ -324,6 +324,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/layout/fixed-footer.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/layout/fixed-topnav.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/layout/fixed.html
浏览文件 @ e5db7c30
......@@ -325,6 +325,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/mailbox/compose.html
浏览文件 @ e5db7c30
......@@ -325,6 +325,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/mailbox/mailbox.html
浏览文件 @ e5db7c30
......@@ -324,6 +324,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/mailbox/read-mail.html
浏览文件 @ e5db7c30
......@@ -323,6 +323,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/tables/data.html
浏览文件 @ e5db7c30
......@@ -325,6 +325,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/tables/simple.html
浏览文件 @ e5db7c30
......@@ -322,6 +322,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="../UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
pages/widgets.html
浏览文件 @ e5db7c30
......@@ -322,6 +322,12 @@
<p>Modals & Alerts</p>
</a>
</li>
<li class="nav-item">
<a href="UI/navbar.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Navbar & Tabs</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或