Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
知鸟1号
AdminLTE
提交
b78a1c45
A
AdminLTE
项目概览
知鸟1号
/
AdminLTE
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
AdminLTE
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
b78a1c45
编写于
9月 11, 2019
作者:
R
REJack
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
added sidebar form support & updated sidebar docs
上级
d37b7e6a
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
76 addition
and
1 deletion
+76
-1
build/scss/_main-sidebar.scss
build/scss/_main-sidebar.scss
+45
-0
docs/components/main-sidebar.md
docs/components/main-sidebar.md
+31
-1
未找到文件。
build/scss/_main-sidebar.scss
浏览文件 @
b78a1c45
...
...
@@ -505,3 +505,48 @@
}
}
}
// Sidebar Form Control
[
class
*=
'sidebar-dark'
]
{
.form-control-sidebar
,
.btn-sidebar
{
background
:
lighten
(
$sidebar-dark-bg
,
5%
);
border
:
1px
solid
lighten
(
$sidebar-dark-bg
,
15%
);
color
:
lighten
(
color-yiq
(
lighten
(
$sidebar-dark-bg
,
5%
))
,
15%
);
}
.form-control-sidebar
:focus
,
.btn-sidebar
:focus
{
border
:
1px
solid
lighten
(
$sidebar-dark-bg
,
30%
);
}
.btn-sidebar
:hover
{
background
:
lighten
(
$sidebar-dark-bg
,
7
.5%
);
}
.btn-sidebar
:focus
{
background
:
lighten
(
$sidebar-dark-bg
,
10%
);
}
}
[
class
*=
'sidebar-light'
]
{
.form-control-sidebar
,
.btn-sidebar
{
background
:
darken
(
$sidebar-light-bg
,
5%
);
border
:
1px
solid
darken
(
$sidebar-light-bg
,
15%
);
color
:
color-yiq
(
darken
(
$sidebar-light-bg
,
5%
));
}
.form-control-sidebar
:focus
,
.btn-sidebar
:focus
{
border
:
1px
solid
darken
(
$sidebar-light-bg
,
30%
);
}
.btn-sidebar
:hover
{
background
:
darken
(
$sidebar-light-bg
,
7
.5%
);
}
.btn-sidebar
:focus
{
background
:
darken
(
$sidebar-light-bg
,
10%
);
}
}
docs/components/main-sidebar.md
浏览文件 @
b78a1c45
...
...
@@ -74,6 +74,35 @@ The sidebar used in this page to the left provides an example of what your sideb
{: .max-height-300}
#### Alternate Logo
You can use two logo images instead of logo with text, you only need to change the markup to this:
```
html
<a
href=
"#"
class=
"brand-link logo-switch"
>
<img
src=
"dist/img/logo-xs.png"
alt=
"AdminLTE Docs Logo Small"
class=
"brand-image-xl logo-xs"
>
<img
src=
"dist/img/logo-xl.png"
alt=
"AdminLTE Docs Logo Large"
class=
"brand-image-xs logo-xl"
style=
"left: 12px"
>
</a>
```
> Example from v3.0 docs.
Based on the example above, you can replace
`.brand-image-xl`
on
`.logo-xs`
with
`.brand-image-xs`
or vice versa on
`.logo-xl`
for changed logo sizes.
#### Search Form in Sidebar
You can add this code above user-panel or nav-sidebar:
```
html
<form
class=
"form-inline"
>
<div
class=
"input-group"
>
<input
class=
"form-control form-control-sidebar"
type=
"search"
placeholder=
"Search"
aria-label=
"Search"
>
<div
class=
"input-group-append"
>
<button
class=
"btn btn-sidebar"
type=
"submit"
>
<i
class=
"fas fa-search"
></i>
</button>
</div>
</div>
</form>
```
{: .max-height-300}
#### Additional Classes
##### Sidebar
...
...
@@ -82,10 +111,11 @@ The sidebar used in this page to the left provides an example of what your sideb
##### Navbar
-
`.nav-child-indent`
Child indent
-
`.nav-compact`
Compact nav items
-
`.nav-flat`
Flat nav style
> ##### Tip!
> You can also use `.text-sm` on `.nav-sidebar` for smaller font.
> You can also use `.text-sm` on `.nav-sidebar`
or `.brand-link`
for smaller font.
{: .quote-info}
For more infromation about the JS part of the sidebar, please visit the
[
PushMenu plugin page
](
{%
link javascript/push-menu.md %})
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录