layui frame (timeline, and progress bar card panel)

A timeline
class attributes: Timeline layui-
A, the icon can be arbitrarily defined (but not recommended to change)

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

b, the title does not mean that the region must be bold

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

c, the content of free area can be filled.

<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>

Time line of code to achieve the effect diagram:

Second, the progress bar
class attributes: layui-Progress;
Lay showPercent-= "yes": Set whether to show progress than the text ( Note: By default, no percentages text, if you want to open, for lay-showPercent attribute set to any value, such as:. Yes, but not display, or no do not set false, the property can be removed directly.
)
examples:

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

class = "layui-progress-bar " additional class name implement various styles progress bar:
Examples:

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

FIG progress bar code to achieve the effect:

JS Code:

		<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>

Third, the card panel
1, panel ordinary card
class attribute: layui-Card;
Title class attribute: layui-Card-header;
content class attribute: layui-Card-body;
card code to achieve the effect of the panel of FIG:

code for:
JS Code:

		<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 code:

		<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, folding panel
lay-accordion = "": open accordion effect, then during the folding operation, it will always show the current panel.
layui-show: by class of content elements arranged to be selectively layui-show a certain initial deployment panel, element module automatically presenting status icon.

		<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>

FIG achieve the effect of code:

Related dynamic operation, click on the corresponding content is displayed: