ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 10:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增宫格导航组件；增加innermargin设置（手机滚动条间隙）；增加tp模板渲染；

Browse Source
This commit is contained in:
augushong
2023-04-13 18:05:21 +08:00
parent d537a0fb23
commit 2ed7ee5d5a
13 changed files with 306 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
source/components/_index.scss
View File

@@ -14,4 +14,5 @@
@import './list/ul-photo-list-b/index';
@import './list/ul-site-group/index';
@import './logo/ul-logo/index';
@import './nav/ul-nav-grid/index';
@import './nav/ul-nav-info/index';

6
source/components/nav/ul-nav-grid/_index.env Normal file
View File

@@ -0,0 +1,6 @@
title=宫格导航
padding=1
margin=0
gray=0
mobile=1
inner_margin=1

75
source/components/nav/ul-nav-grid/_index.html Normal file
View File

@@ -0,0 +1,75 @@
<div class="ul-group-title">
基本
</div>
<div class="ul-nav-grid colord">
<div class="item red">
<div class="icon">
<div class="main">
<i class="layui-icon layui-icon-home"></i>
</div>
</div>
<div class="title">首页</div>
</div>
</div>
<div class="ul-group-title">
图标颜色
</div>
<div class="ul-nav-grid colord">
{for start='0' end='12'}
<div class="item {$colors[$i%7]}">
<div class="icon">
<div class="main">
<i class="layui-icon layui-icon-home"></i>
</div>
</div>
<div class="title">首页</div>
</div>
{/for}
</div>
<div class="ul-group-title">
图标背景
</div>
<div class="ul-nav-grid colord-bg">
{for start='0' end='12'}
<div class="item {$colors[$i%7]}">
<div class="icon">
<div class="main">
<i class="layui-icon layui-icon-home"></i>
</div>
</div>
<div class="title">首页</div>
</div>
{/for}
</div>
<div class="ul-group-title">
宫格边框+背景色
</div>
<div class="ul-nav-grid colord-bg box">
{for start='0' end='12'}
<div class="item {$colors[$i%7]}">
<div class="icon">
<div class="main">
<i class="layui-icon layui-icon-home"></i>
</div>
</div>
<div class="title">首页</div>
</div>
{/for}
</div>
<div class="ul-group-title">
宫格边框+图片
</div>
<div class="ul-nav-grid">
{for start='0' end='4'}
<div class="item {$colors[$i%7]}">
<div class="icon">
<div class="main">
<img style="width: 26px;height: 26px;" src="/static/images/view.jpg">
</div>
</div>
<div class="title">首页</div>
</div>
{/for}
</div>

0
source/components/nav/ul-nav-grid/_index.md Normal file
View File

13
source/components/nav/ul-nav-grid/_index.php Normal file
View File

@@ -0,0 +1,13 @@
<?php
return [
'colors'=>[
'red',
'orange',
'yellow',
'green',
'bluegreen',
'blue',
'purple',
]
];

77
source/components/nav/ul-nav-grid/_index.scss Normal file
View File

@@ -0,0 +1,77 @@
.ul-nav-grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
.item {
flex: 0 0 calc(100% / 3);
text-align: center;
margin-bottom: 12px;
.icon {
text-align: center;
}
.main {
display: inline-block;
padding: 6px;
}
}
// 将背景颜色值定义成变量
$colors:('red': #FF6961,
'orange': #FFA07A,
'yellow': #FF69B4,
'green': #2ECC71,
'bluegreen': #1ABC9C,
'blue': #3498DB,
'purple': #AF7AC5,
);
&.colord {
@each $colorKey,
$color in $colors {
.item.#{$colorKey} {
.icon {
color: $color;
}
}
}
}
&.colord-bg {
@each $colorKey,
$color in $colors {
.item.#{$colorKey} {
.icon {
color: #fff;
.main {
background-color: $color;
border-radius: 50%;
}
}
}
}
}
&.box {
background-color: #eee;
padding: 0.5px;
.item {
flex: 0 0 calc(100% / 3 - 1px - 24px);
margin: 0.5px;
background-color: #fff;
padding: 12px;
}
}
}