当前博客:31-快码FOF中文编程layui教学-组件:时间线

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

博客作者:【qiang】

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

时间线一般做企业站比较常用,一般用作公司历程,产品历史,领导历程等。

layui内置的时间线比较简单实用,直接看代码示例:

<无序列表 类名="lay-时间线">
	<列表项 类名="lay-时间线-项目">
		<斜体文本 类名="lay-图标 lay-时间线-线点">&#xe63f;</斜体文本>
		<区块 类名="lay-时间线-内容 lay-文本">
			<标题3 类名="lay-时间线-标题">8月18日</标题3>
			<段落>
				layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
				<换行 />不枉近百个日日夜夜与之为伴。因小而大,因弱而强。 <换行 />无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <斜体文本 类名="lay-图标"></斜体文本>
			</段落>
		</区块>
	</列表项>
	<列表项 类名="lay-时间线-项目">
		<斜体文本 类名="lay-图标 lay-时间线-线点">&#xe63f;</斜体文本>
		<区块 类名="lay-时间线-内容 lay-文本">
			<标题3 类名="lay-时间线-标题">8月16日</标题3>
			<段落>杜甫的思想核心是儒家的仁政思想,他有“<强调文本>致君尧舜上,再使风俗淳</强调文本>”的宏伟抱负。个人最爱的名篇有:</段落>
			<无序列表>
				<列表项>《登高》</列表项>
				<列表项>《茅屋为秋风所破歌》</列表项>
			</无序列表>
		</区块>
	</列表项>
	<列表项 类名="lay-时间线-项目">
		<斜体文本 类名="lay-图标 lay-时间线-线点">&#xe63f;</斜体文本>
		<区块 类名="lay-时间线-内容 lay-文本">
			<标题3 类名="lay-时间线-标题">8月15日</标题3>
			<段落>
				中国人民抗日战争胜利72周年
				<换行 />常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代 <换行 />铭记、感恩 <换行 />所有为中华民族浴血奋战的英雄将士 <换行 />永垂不朽
			</段落>
		</区块>
	</列表项>
	<列表项 类名="lay-时间线-项目">
		<斜体文本 类名="lay-图标 lay-时间线-线点">&#xe63f;</斜体文本>
		<区块 类名="lay-时间线-内容 lay-文本">
			<区块 类名="lay-时间线-标题">过去</区块>
		</区块> 
	</列表项>
</无序列表>
Markup

代码效果展示:

后期优化可以更改图标,标题、内容样式,做出更优雅的时间线。

 

点击此处跳转案例下载:点击下载lay-时间线实例

默认排序
Generic placeholder image
Generic placeholder image
孟庆伟 Time: 2023-03-21 08:05:23

时间线也可以做路由展示使用,差数据库查询和变量使用了


31-快码FOF中文编程layui教学-组件:时间线