Java开发经验的有效总结，Layui学习笔记

内容3

内容4

内容5

3.6进度条

---

相关样式

layui-progress 代表一个进度条

|-- layui-progress-bar 代表进度条里面的进度

layui-progress-big 变粗了

lay-percent 代表进度值

lay-showpercent=“true” 是否显示进度值

3.7面板

---

1. 卡片面板

相关样式

layui-row 代表一行

layui-col-space15 space0-space30 代表卡片之间的间距

|-- layui-col-md6 代表一列 md1-md12 代表当前卡片占整行的X/12

|-- layui-card 代表一个卡片

|-- layui-card-header 代表卡片头信息

|-- layui-card-body 代表卡片内容样式

2. 普通折叠面板

相关样式

layui-collapse 代表一个折叠面板

|-- layui-colla-item 代表一个折叠项

|-- layui-colla-title 代表折叠项的显示标题

|-- layui-colla-content 代表折叠项展开的内容

|-- layui-show 是否展开

3. 手风琴面板

在普通面板上加lay-accordion=“”

3.8布局

---

相关样式

layui-row

|-- layui-col-xs6 移动设备占比

|-- layui-col-sm6 平板设备占比

|-- layui-col-md6 桌面设置占比

3.9徽章

---

相关样式

layui-badge-dot 小圆点

layui-badge 弧形徽章

layui-badge-rim 边框徽章

组合使用

3.10时间线

---

相关样式

layui-timeline 代表一个时间线

|-- layui-timeline-item 代表一个时间节点

|-- layui-timeline-axis 代表左边的竖线

|-- layui-timeline-content 时间线的内容

|-- layui-text 代表文本

|-- layui-timeline-title 代表标题

|–可以分为标题和内容

|–

标题

|–

内容

简约时间线

3.11动画

---

相关样式

class=“layui-anim”

相关属性

data-anim=“layui-anim-up” 动画的类型

<%@ page language=“java” contentType=“text/html; charset=UTF-8”

pageEncoding=“UTF-8”%>

style=“margin-top: 30px;”>

动画过程演示

• 从最底部往上滑入
  layui-anim-up
• 微微往上滑入
  layui-anim-upbit
• 平滑放大
  layui-anim-scale
• 弹簧式放大
  layui-anim-scaleSpring
• 渐现
  layui-anim-fadein
• 渐隐
  layui-anim-fadeout
• 360度旋转
  layui-anim-rotate
• 循环动画
  追加：layui-anim-loop

  3.12颜色选择器

  ---

  

  <%@ page language=“java” contentType=“text/html; charset=UTF-8”

  pageEncoding=“UTF-8”%>

  style=“margin-top: 30px;”>

  常规使用

  style=“margin-top: 30px;”>

  表单赋值

  <input type=“text” value=“” placeholder=“请选择颜色” class=“layui-input”

  id=“test-form-input”>

  3.13滑块

  ---

  相关属性

  elem ：绑定页面元素

  value 设置初始值

  min 最小值

  max 最大值

  step 设置步长

  setTips 滑动时是否显示tips文本

  change 监听改变事件

  

  3.14评分

  ---