layui框架（時間線、進度條和卡片面板）

一、時間線
class屬性：layui-timeline
a、圖標可以任意定義（但並不推薦更改）

<i class="layui-icon layui-timeline-axis"></i>

b、標題區域並不意味着一定要加粗

<h3 class="layui-timeline-title">2019年12月1日</h3>

c、內容區域可自由填充。

<p>
	我們一起度過了大學生活<i class="layui-icon layui-icon-face-smile-b"></i>
</p>

		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>常規時間線</legend>
		</fieldset>
		<ul class="layui-timeline">
			<li class="layui-timeline-item">
				<i class="layui-icon layui-timeline-axis"></i>
				<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">2019年12月1日</h3>
					<p>
						我們一起度過了大學生活<i class="layui-icon layui-icon-face-smile-b"></i>
					</p>
				</div>
			</li>
			<li class="layui-timeline-item">
				<i class="layui-icon layui-timeline-axis"></i>
				<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">2018年10月8日</h3>
					<p>我們相識</p>
				</div>
			</li>
			<li class="layui-timeline-item">
				<i class="layui-icon layui-timeline-axis"></i>
				<div class="layui-timeline-content layui-text">
					<h3 class="layui-timeline-title">2019年9月10日</h3>
					<p>
						我們的大學生活已經過去了一年
					</p>
				</div>
			</li>
			<li class="layui-timeline-item">
				<i class="layui-icon layui-timeline-axis"></i>
				<div class="layui-timeline-content layui-text">
					<div class="layui-timeline-title">過去</div>
				</div>
			</li>
		</ul>

時間線代碼實現效果圖：

二、進度條
class屬性： layui-progress；
lay-showPercent=“yes” ： 設置進度比文本是否顯示(注意： 默認情況下不會顯示百分比文本，如果你想開啓，對屬性lay-showPercent設置任意值即可，如：yes。但如果不想顯示，千萬別設置no或者false，直接剔除該屬性即可。
)
例子：

<div class="layui-progress" lay-showPercent="yes"></div>

class=“layui-progress-bar” 追加類名實現各種風格的進度條：
例子：

<div class="layui-progress-bar layui-bg-orange" lay-percent="40%"></div>

進度條代碼實現效果圖：

js代碼：

		<script>
			//注意進度條依賴 element 模塊，否則無法進行正常渲染和功能性操作
			layui.use("element", function() {
				var element = layui.element,
					$ = layui.jquery;
		<script>

<!--
	作者：[email protected]
	時間：2019-12-12
	描述：小進度條
-->
		<div class="layui-progress" lay-showPercent="yes" style="width:400px;margin-top: 40px;">
			<div class="layui-progress-bar" lay-percent="20%"></div>
		</div>

<!--
	作者：[email protected]
	時間：2019-12-12
	描述：大進度條
-->
		<div class="layui-progress layui-progress-big" lay-showPercent="yes" style="width:400px;margin-top: 40px;">
			<div class="layui-progress-bar layui-bg-orange" lay-percent="40%"></div>
		</div>

三、卡片面板
1、普通卡片面板
class屬性： layui-card；
標題class屬性： layui-card-header；
內容class屬性： layui-card-body；
卡片面板代碼實現效果圖：

代碼實現：
js代碼：

		<script>
			//摺疊面板 依賴 element 模塊，否則無法進行功能性操作
			layui.use(["element", "layer"], function() {
				var element = layui.element,
					layer = layui.layer;

				//監聽摺疊
				element.on('collapse(test)', function(data) {
					layer.msg('展開狀態：' + data.show);
				});
			});
		</script>

html代碼：

		<div style="padding: 20px;background-color: #F2F2F2;width: 400px;margin: 0 auto;">
			<div class="layui-card">
				<div class="layui-card-header">標題</div>
				<div class="layui-card-body">我是內容</div>
			</div>
		</div>

2、摺疊面板
lay-accordion="" ： 開啓手風琴效果，那麼在進行摺疊操作時，始終只會展現當前的面板。
layui-show： 通過對內容元素設置class爲 layui-show 來選擇性初始展開某一個面板，element 模塊會自動呈現狀態圖標。

		<div class="layui-collapse" lay-accordion="" lay-filter="test" style="margin: 40px auto;width: 400px;">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">標題一</h2>
				<div class="layui-colla-content layui-show">
					<p>我是內容</p>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">標題二</h2>
				<div class="layui-colla-content">
					<p>我是內容</p>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">標題三</h2>
				<div class="layui-colla-content">
					<p>我是內容</p>
				</div>
			</div>
		</div>

代碼實現效果圖：

相關動態操作，點擊顯示相應內容：