前言:
现时你们对“php框架ui”可能比较珍视,大家都需要了解一些“php框架ui”的相关内容。那么小编也在网摘上收集了一些对于“php框架ui””的相关内容,希望咱们能喜欢,你们快快来学习一下吧!导航一般指页面引导性频道集合,经常以菜单的形式展示,多用于页面头部和侧边栏。layui提供了水平导航、垂直导航、侧边导航、面包屑导航。面包屑导航结构简单,并且支持自定义分隔符,默认为">"。使用layui的导航UI,需要加载 element模块。加载方式如下:
首先引入layui.css和layui.js文件,然后加载element模块,我这里习惯在head里加载css文件,在body结束前加载js文件,结构如下:
1、水平导航
水平导航是layui导航的基础导航,后两个垂直导航与侧边导航是在水平导航的基础上实现的。水平效果如下:
案例代码如下:
layui导航中通过设定layui-this来指向当前页面分类,与active类似。导航中除了文字之外,还可以加一些徽章或者图片,比如:
实例代码如下:
<li class="layui-nav-item"><a href=""><img src="/avatar/58704a5e5843d.png" class="layui-nav-img">会员中心<span class="layui-badge">9</span></a></li>
关于徽章的用法比较简单,有小圆点、椭圆体、边框体三种风格,对应的样式分别为:
小圆点:通过 layui-badge-dot 类来定义,里面不能加文字,比如<span class="layui-badge-dot"></span>;
椭圆体:通过 layui-badge 类来定义,里面是可以加文字的,比如<span class="layui-badge">99</span>;
边框体:通过 layui-badge-rim 类来定义,也是可以加文字的,比如<span class="layui-badge-rim">Hot</span>
关于颜色风格,就没什么可介绍的了,自己根据UI设计的效果定义即可。
2、垂直导航
垂直导航与水平导航的HTML结构是一样的,直接追加class:layui-nav-tree 即可。
示例代码如下:
<ul class="layui-nav layui-nav-tree layui-main" lay-filter=""> ……</ul>
3、侧边导航
侧边导航也一样,不过需要追加的是:layui-nav-tree layui-nav-side两个类,后台管理中心经常用到类似效果。
示例代码如下:
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="">……</ul>
4、面包屑导航
面包屑导航,叫做路径导航也可以,经常在页面路径那使用,比如:首页> 前端开发 > UI框架 > layui
示例代码如下:
<span class="layui-breadcrumb"><a href="">首页</a><a href="">前端开发</a><a href="">UI框架</a><a><cite>layui</cite></a></span>
另外,我们可以通过设置属性 lay-separator="|" 来自定义分隔符,比如可以用面包屑制作小导航:
代码如下:
<span class="layui-breadcrumb" lay-separator="|"> <a href="">前端</a> <a href="">PHP</a> <a href="">Java</a> <a href="">Python</a> <a href="">.NET</a></span>
当然,分隔符是自定义的。
导航主题
另外,layui推荐了几个导航主题:
水平导航支持的其它背景主题有:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
垂直导航支持的其它背景主题有:layui-bg-cyan(藏青)
自己可以试试效果,个人感觉用到的时候会比较少,因为实际项目中往往会重写这些导航背景,甚至高度等样式。
标签: #php框架ui