当前博客:25-快码FOF中文编程layui教学-组件:Tab选项卡

223 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

layui内置了一个比较常用的选项卡组件,这个选项卡的用法很简单,下面是代码示例:

<区块 类名="lay-选项卡">
	<无序列表 类名="lay-选项卡-标题">
		<列表项 类名="lay-选中">网站设置</列表项>
		<列表项>用户管理</列表项>
		<列表项>权限分配</列表项>
		<列表项>商品管理</列表项>
		<列表项>订单管理</列表项>
	</无序列表>
	<区块 类名="lay-选项卡-内容">
		<区块 类名="lay-选项卡-项目 lay-显示">内容1</区块>
		<区块 类名="lay-选项卡-项目">内容2</区块>
		<区块 类名="lay-选项卡-项目">内容3</区块>
		<区块 类名="lay-选项卡-项目">内容4</区块>
		<区块 类名="lay-选项卡-项目">内容5</区块>
	</区块>
</区块>
Markup

代码效果展示:

从代码部分看的出来,layui的选项卡很简单,就是lay-选项卡,包裹着选项卡标题和选项卡内容。

而且选项卡还有其它两种样式(简洁风格,卡片风格),示例代码如下:

<区块 类名="lay-选项卡 lay-选项卡-简洁风">
	<无序列表 类名="lay-选项卡-标题">
		<列表项 类名="lay-选中">网站设置</列表项>
		<列表项>用户管理</列表项>
		<列表项>权限分配</列表项>
		<列表项>商品管理</列表项>
		<列表项>订单管理</列表项>
	</无序列表>
	<区块 类名="lay-选项卡-内容">
		<区块 类名="lay-选项卡-项目 lay-显示">内容1</区块>
		<区块 类名="lay-选项卡-项目">内容2</区块>
		<区块 类名="lay-选项卡-项目">内容3</区块>
		<区块 类名="lay-选项卡-项目">内容4</区块>
		<区块 类名="lay-选项卡-项目">内容5</区块>
	</区块>
</区块>
Markup

简洁风格代码效果展示:

卡片风格代码如下:

<区块 类名="lay-选项卡 lay-选项卡-卡片风" lay-允许关闭="真">
	<无序列表 类名="lay-选项卡-标题">
		<列表项 类名="lay-选中">网站设置</列表项>
		<列表项>用户管理</列表项>
		<列表项>权限分配</列表项>
		<列表项>商品管理</列表项>
		<列表项>订单管理</列表项>
	</无序列表>
	<区块 类名="lay-选项卡-内容" 行内样式="高度: 100px">
		<区块 类名="lay-选项卡-项目 lay-显示">1</区块>
		<区块 类名="lay-选项卡-项目">2</区块>
		<区块 类名="lay-选项卡-项目">3</区块>
		<区块 类名="lay-选项卡-项目">4</区块>
		<区块 类名="lay-选项卡-项目">5</区块>
		<区块 类名="lay-选项卡-项目">6</区块>
	</区块>
</区块>
Markup

卡片风格代码效果展示:

上面的卡片,我用了个新出现的属性 lay-允许关闭="真" ,选项卡的标题右侧会出现删除图标,可以删除选项卡选项。

 

点击此处跳转案例下载:点击下载lay-选项卡实例

 

25-快码FOF中文编程layui教学-组件:Tab选项卡