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

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

收藏内容 (0) (0)

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

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

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

代码效果展示：

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

而且选项卡还有其它两种样式（简洁风格，卡片风格），示例代码如下：

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

简洁风格代码效果展示：

卡片风格代码如下：

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

卡片风格代码效果展示：

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

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

评论信息

默认排序 

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

测试账号

热门博客

最新博客

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