Mui.js(一)输入表单 And 折叠面板

mui.js

DCloud 的 MUI（Mobile UI）是一个基于 HTML5 的跨平台 UI 框架，旨在帮助开发者快速构建移动应用程序。它提供了一系列针对移动端优化的 UI 组件、样式和动画效果，适用于开发混合移动应用、微信小程序等。

DCloud MUI 框架的一些特点包括：

  1. 跨平台: MUI 框架可以同时支持 iOS 和 Android 平台，开发者可以使用相同的代码库构建适配不同平台的应用程序。
  2. 丰富的组件: MUI 框架提供了大量常用的移动端 UI 组件，如按钮、导航栏、列表、表单控件等，使开发者可以快速构建符合移动端标准的用户界面。
  3. 轻量级: MUI 框架相对轻量级，加载速度快，适合开发需要快速响应的移动应用程序。
  4. 简洁的文档和示例: MUI 框架提供了清晰简洁的文档和示例，帮助开发者快速上手并了解如何使用框架提供的组件和功能。
  5. 活跃的社区支持: MUI 框架拥有活跃的社区支持，开发者可以在社区中获取帮助、分享经验和解决问题。

输入表单（input）

所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列。

image-20240516103214168

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form class="mui-input-group">
    <div class="mui-input-row">
        <label>用户名</label>
    <input type="text" class="mui-input-clear" placeholder="请输入用户名">
    </div>
    <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" >确认</button>
        <button type="button" class="mui-btn mui-btn-danger" >取消</button>
    </div>
</form>

输入增强

mui目前提供的输入增强包括：快速删除、语音输入、密码框显示隐藏密码

  • 快速删除：只需给input添加.mui-inpu-clear类，当input控件中有内容时，右侧会有一个删除图标，点击会清空表单内容

image-20240516104613910

  • 搜索框：给input添加.mui-input-search类，就可以使用search控件了

无焦点：image-20240516104833721

有焦点：image-20240516104847496

  • 语音输入：mui集成了H5语音输入，需给input控件上添加.mui-input-speech类就能在5+环境下使用语音输入

  • 密码框：给input添加.mui-input-password类即可使用

1
2
3
4
5
6
<form class="mui-input-group">
    <div class="mui-input-row">
        <label>密码框</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </div>
</form>

折叠面板 （accordion）

折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：

image-20240515151610852

基础框架：

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="mui-table-view"> 
       <li class="mui-table-view-cell mui-collapse">
           <a class="mui-navigate-right" href="#">面板1</a>
           <div class="mui-collapse-content">
               <p>面板1子内容</p>
           </div>
       </li><li class="mui-table-view-cell mui-collapse">
           <a class="mui-navigate-right" href="#">面板2</a>
           <div class="mui-collapse-content">
               <p>面板2子内容</p>
           </div>
       </li>
   </ul>

示例源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="mui-card">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-collapse">
			<a class="mui-navigate-right" href="#">表单</a>
				<div class="mui-collapse-content">
					<form class="mui-input-group">
					<div class="mui-input-row">
						<label>Input</label>
						<input type="text" placeholder="普通输入框">
					</div>
					<div class="mui-input-row">
						<label>Input</label>
						<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
					</div>
					<div class="mui-input-row mui-plus-visible">
						<label>Input</label>
						<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
					</div>
					<div class="mui-button-row">
						<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp;
						<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
						</div>
					</form>
				</div>
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板2</a>
				<div class="mui-collapse-content">
					<p>面板2子内容</p>
				</div>
			</li>
		</ul>
	</div>

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。

代码块激活字符: maccordion