mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-04 11:33:29 +08:00
增加大块导航组件
This commit is contained in:
@@ -1647,6 +1647,31 @@
|
||||
font-size: clac(20px);
|
||||
}
|
||||
|
||||
.ul-nav-block {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
.ul-nav-block .item {
|
||||
padding: 16px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ul-nav-block .item .item-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.ul-nav-block .item.current {
|
||||
background-color: rgb(255, 91, 114);
|
||||
color: #fff;
|
||||
}
|
||||
.ul-nav-block .item:hover {
|
||||
background-color: rgba(255, 91, 113, 0.772);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ul-nav-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
2
public/cdn/layui-ul.min.css
vendored
2
public/cdn/layui-ul.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -18,5 +18,6 @@
|
||||
@import './list/ul-photo-list-b/index';
|
||||
@import './list/ul-site-group/index';
|
||||
@import './logo/ul-logo/index';
|
||||
@import './nav/ul-nav-block/index';
|
||||
@import './nav/ul-nav-grid/index';
|
||||
@import './nav/ul-nav-info/index';
|
||||
|
||||
6
source/components/nav/ul-nav-block/_index.env
Normal file
6
source/components/nav/ul-nav-block/_index.env
Normal file
@@ -0,0 +1,6 @@
|
||||
title=大块导航
|
||||
padding=1
|
||||
margin=0
|
||||
gray=1
|
||||
mobile=0
|
||||
inner_margin=0
|
||||
26
source/components/nav/ul-nav-block/_index.html
Normal file
26
source/components/nav/ul-nav-block/_index.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<div class="ul-nav-block" style="width: 160px;">
|
||||
<div class="item current">
|
||||
<div class="item-icon">
|
||||
<i class="layui-icon layui-icon-chart"></i>
|
||||
</div>
|
||||
<div class="item-title">首页</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-icon">
|
||||
<i class="layui-icon layui-icon-light"></i>
|
||||
</div>
|
||||
<div class="item-title">订单管理</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-icon">
|
||||
<i class="layui-icon layui-icon-app"></i>
|
||||
</div>
|
||||
<div class="item-title">产品管理</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-icon">
|
||||
<i class="layui-icon layui-icon-about"></i>
|
||||
</div>
|
||||
<div class="item-title">其他</div>
|
||||
</div>
|
||||
</div>
|
||||
0
source/components/nav/ul-nav-block/_index.md
Normal file
0
source/components/nav/ul-nav-block/_index.md
Normal file
5
source/components/nav/ul-nav-block/_index.php
Normal file
5
source/components/nav/ul-nav-block/_index.php
Normal file
@@ -0,0 +1,5 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
|
||||
];
|
||||
29
source/components/nav/ul-nav-block/_index.scss
Normal file
29
source/components/nav/ul-nav-block/_index.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
.ul-nav-block {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
|
||||
.item {
|
||||
padding: 16px 32px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
|
||||
.item-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: rgb(255, 91, 114);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 91, 113, 0.772);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user