当前博客:24-快码FOF中文编程layui教学-组件:基础菜单

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

博客作者:【qiang】

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

基础菜单代码示例:

<区块 类名="lay-常规面板" 行内样式="宽度: 200px">
	<无序列表 类名="lay-菜单">
		<列表项>
			<区块 类名="lay-菜单项-标题">菜单项目1</区块>
		</列表项>
		<列表项>
			<区块 类名="lay-菜单项-标题">
				<超链接 链接地址="#">菜单项目2
					<行内元素 类名="lay-徽章-圆点"></行内元素>
				</超链接>
			</区块>
		</列表项>
		<列表项 类名="lay-菜单项-分割线"></列表项>
		<列表项 类名="lay-菜单项-分组 lay-菜单项-收缩">
			<区块 类名="lay-菜单项-标题">
				菜单项目3 分组
				<斜体文本 类名="lay-图标 lay-图标上箭头"></斜体文本>
			</区块>
			<无序列表>
				<列表项>菜单项目3-1</列表项>
				<列表项>
					<区块 类名="lay-菜单项-标题">菜单项目3-2</区块>
				</列表项>
			</无序列表>
		</列表项>
		<列表项 类名="lay-菜单项-分割线"></列表项>
		<列表项>
			<区块 类名="lay-菜单项-标题">菜单项目4</区块>
		</列表项>
		<列表项 类名="lay-菜单项-父级">
			<区块 类名="lay-菜单项-标题">
				菜单项目5
				<斜体文本 类名="lay-图标 lay-图标右箭头"></斜体文本>
			</区块>
			<区块 类名="lay-常规面板 lay-菜单项-面板">
				<无序列表>
					<列表项>
						<区块 类名="lay-菜单项-标题">菜单项目5-1</区块>
					</列表项>
					<列表项>
						<区块 类名="lay-菜单项-标题">菜单项目5-2</区块>
					</列表项>
				</无序列表>
			</区块>
		</列表项>
		<列表项>
			<区块 类名="lay-菜单项-标题">菜单项目6</区块>
		</列表项>
	</无序列表>
</区块>

代码效果展示:

 

24-快码FOF中文编程layui教学-组件:基础菜单