layuiフレーム（タイムライン、およびプログレスバーカードパネル）

タイムラインの
クラス属性：タイムラインlayui-
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>

効果図を達成するために、コードのタイムライン：

第二に、プログレスバー
クラス属性： layui進行中;
レイshowPercent- =「はい」：設定したテキストよりも、進行状況を表示するかどうか（注：デフォルトでは、なしのパーセンテージテキストで、開きたい場合は、のためにレイshowPercentなど:.はい、ではなく、ディスプレイ、または全くセット虚偽のないように任意の値に属性セットを、プロパティを直接削除することができます。
）
例：

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

クラス=「layui進行-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、パネル通常のカードの
クラス属性： layuiカード;
タイトルクラス属性： layuiカード-ヘッダ、
コンテンツクラス属性： layui-カード本体と、
図のパネルの効果を達成するためのカードコード：

：用のコード
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、折りたたみパネルは
レイアコーディオンを=「」：オープンアコーディオン効果を、その後の折り畳み動作時に、それは常に現在のパネルが表示されます。
layuiショー：コンテンツ要素のクラスを選択するように配置することによって、特定の初期展開パネル、素子モジュールを自動的に提示するステータスアイコンをlayui-示します。

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

図は、コードの効果を達成します：

関連の動的操作は、対応するコンテンツのクリックが表示されます。