面板由名称，值，可选的辅助文本和展开的面板内容组成。 具有属性 "value" 的内容元素将在其处于折叠状态时用作面板内容的“值” 与面板的交互是通过父扩展集完成的。...该集合考虑了集合中其他面板的状态，并在每个单独的面板上发出适当的操作。 Attributes: wide - 指定展开时面板的宽度，比折叠时的宽度略宽。...alwaysShowExpandIcon bool 如果为true，则无论是否使用自定义图标，都应始终显示展开图标。...disableHeaderExpansion bool 如果为true，则单击标题不会展开或折叠面板。...MaterialExpansionPanelSet Selector: 一个指令，它将一组MaterialExpansionPanel转换为一个折叠小部件
在实际业务开发过程中，或多或少会遇到树形控件的需求。 最简单的需求比如 QQ 联系人的分组： ? 类似于这种，Flutter 给我们提供了相当便捷的 UI 组件 ExpansionPanel。...它有一个 header 和一个 body ，可以展开或折叠。面板的 body 仅在展开时可见。 扩展面板仅用作于 ExpansionPanelList。...看说明也就能明白了，它不单独使用，只能和 ExpansionPanelList 配合使用。...在上面的gif图我们也能看出来，只有点击箭头才能展开，如果想要点击 header 也要展开的话， 使用 ExpansionPanel 的 canTapOnHeader 参数： ExpansionPanel...总结 使用 ExpansionPanel 可以很轻松的实现展开效果， 而且 ExpansionPanelList 返回的是一个 MergeableMaterial， 所以想自定义UI的，也可以自己实现。
注：使用 HTML5+开发的移动App 并非mobileweb页面。这是新手最容易混淆的地方。...所以mobile web，在HBuilder 里新建项目时，属于web 项目。不要放置到移动App 项目。mobile web 项目也不能真机联调和打包....选择模版 这里选择mui项目，会自动引入mui的js和css，如下： 文件结构 默认有以下几个文件夹：css，fonts，js，如下： 简单开发 header 打开index.html后在body内输入...，如下： 等待 返回上一步的发行打包，点击打包后会提示你已经到云端打包，你只需要等待了， 一小会之后就打包好了，这时你就可以把apk拷贝到自己手机使用了， 拓展阅读：mui中几种open页面的区别...3.子页面使用频繁切换的情况 如果频繁左滑右滑，在配置较低的手机上会出现list.html遮住index.html的情况，采用子页面模式就不会，采用新页面模式几率很大。
(当然,实际应用中还是需要加入一部分原生控件来提高用户体验) 确定一下本篇的学习目标: 1.学会使用WebView基础功能 2.通过WebView调用页面中的JS代码 3.通过WebView让页面中的JS...return true; } } 这样,当页面中有A标签连接跳转的时候就不会调用安卓的原生游览器加载了....首先我们要创建一个Web项目..我这里的例子创建的ASP.NET Core的.....3.通过WebView让页面中的JS代码调用后台的C#代码 下面我们就来讲如何使用JS来调用C#代码....需要项目引用Mono.Android.Export 注意这里的项目引用..的意思..就是 右键项目-->选择添加引用..而不是只Using 回到我们的MainActivity.cs文件中的OnCreate
前言 上一篇章写了 Mint-UI 的基本使用，本篇章再来介绍MUI。...注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI 是真正的组件库，是使用 Vue...类似； 理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目； MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来...，然后手动拷贝到项目中使用； MUI的介绍 MUI是最接近原生APP体验的高性能前端框架。...导入MUI 首先将MUI的文件拷贝到项目中，如下： ? image-20200315222330414 在main.js导入MUI，如下： ?
开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady...做web开发的话（在浏览器运行html），plusReady是没有意义的，不会执行，为什么？...理论上只是在html5+加载完之后执行其中的代码罢了，是不会影响性能，只会晚一点执行（延迟并不会感受到） 关于mui plusReady的注意点： mui.plusReady()中的代码不执行 可能1：...你在浏览器下运行了html 可能2： plusReady事件仅在webview首次创建时触发，使用mui.openWindow方法多次打开已存在的同样id的webview时，是不会重复触发plusReady...的一些参数配置 如果要使用h5+的一些对象、方法，就要使用mui.plusReady，比如mui.plus对象。
如果选择的项目非空，则使用fixedColor呈现所选项目，否则将使用主题的ThemeData.primaryColor。...所有项目均以白色呈现，并且导航栏的背景色与所选项目的BottomNavigationBarItem.backgroundColor相同。...在这种情况下，假定每个项目将具有不同的背景色，并且背景色将与白色形成鲜明对比。...TabBarView 显示与当前选定选项卡相对应的部件的页面视图。 通常与TabBar结合使用。 ?...ExpansionPanel 扩展面板包含创建流并允许轻量级地编辑元素。 ExpansionPanel小部件实现了这个组件。 ? SnackBar 带有可选操作的轻量级消息，简要显示在屏幕底部。
对于前端的理解 所谓“万变不离其宗”，就是这样一个道理，写惯了服务端，当接触前端以前总觉得很难，但是当我真正开始写的时候，发觉一如既往的简单，就是简单的jquery和html交互。...使用到的技术 html5、css3、mui 首页效果如下 ?...遇到的难点 虽然整个过程觉得比较简单，但是还是遇到了一些问题，分享出来给大家借鉴： 1、视频播放、因为要兼容Android和ios所以做的时候费了很大的劲。...最后还是决定使用H5的标签来做 2、音乐播放、同样要兼容2种类型的设备，所以无奈自己写了一个Audio,效果如下...结束语 踏上程序员之路，不管什么技术，或多或少都得接触一点，“万变不离其宗”，所有的东西原理都是一样的，生活中很多事情，不要担心、不要害怕你不会做，只要你愿意尝试。一切都会变的很简单！
在使用 webpack 构建的 Vue 项目中使用模板对象？...使用 MUI 组件 官网首页 文档地址 导入 MUI 的样式表： import '.....git config --global user.email ***@**.com 来全局配置提交时用户的名称和邮箱 使用 git init 在本地初始化项目 使用 touch README.md 和...将所有文件托管到 git 中 使用 git commit -m "init project" 将项目进行本地提交 使用 git remote add origin 仓储地址将本地项目和远程仓储连接，并使用...App.vue 组件的基本设置 头部的固定导航栏使用 Mint-UI 的 Header 组件； 底部的页签使用 mui 的 tabbar; 购物车的图标，使用 icons-extra 中的 mui-icon-extra
1、快速构建页面 1.1 新建含mui的HTML文件 在Hbuilder中，新建HTML文件，选择”含mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。...图1.2 MUI顶部 1.4设置底部导航栏 第一种，MUI有自带的图标库 ?...使用时，只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可（name为图标名称，例如：weixin、weibo等），如下代码即可显示一个微信图标： 第二种，可以增加自定义icon图标 登录阿里巴巴矢量图标库，选择图标加入购物车，然后存储为项目，下载到本地，将iconfont.css...CBD 烤炉模式的城，到黄昏，如同打翻的调色盘一般.
特别对于页面复杂度、稍具有规模的项目效果很难让人满意。...未来： 我们使用MUI、H5+开发APP主要为了简单方便快速，我们的APP复杂度也没那么高，同时因为我们的客户不确定有时要iOS的、有时要Android的，我们的队伍原生人少，前端多。...所以现有的项目如果没有特殊情况一般都会用MUI。 跨平台一直是我们的希望，我们也在不断的摸索、学习、尝试。...我个人使用MUI主要开发Android，因为我自己做了个小项目(dctt前面文章有介绍)，单独在Android上我认为效果还是可以的。...下一步: 公司的项目计划转uniapp uni-app里vue文件是基于webview渲染的。
大家好，又见面了，我是你们的朋友全栈君。...一、 MUI不同于Mint-UI，MUI只是开发出来的一套很好用的代码片段，里面提供了配置的样式，配置的HTML代码段，类似于Bootstrap； 而Mint-UI，是真正的组件库，是使用了Vue技术封装出来的成套的组件...，可以无缝的和VUE项目进行集成开发； 因此，从体验上来说，Mint-UI体验更好，因为这是别人帮我们开发的现成的组件库；MUI和bootstrap类似 理论上，任何项目都可以使用MUI或Bootstrap...，但是，Mint-UI只适用于Vue项目 二、安装mint-ui cnpm install mint-ui -S 三、引入 // 引入 整个mint-ui import MintUI from 'mint-ui...plugin-transform-runtime",["component",{ "libraryName":"mint-ui", "style":true }]] } 3、使用
近期开发中，在布局中使用了IFrame做主页切换，大概布局就是底部一个选择卡，往上就是多个IFrame，点击选择卡切换页面。...问题： 我其中一个页面是消息列表，点击后跳转详情页，但是跳转后由于是IFrame内部处理跳转，底部选择卡不会消息。...解决方法： 需要在Iframe的内部点击事件监听处理的时候，不让IFrame的内部跳转，而是整个主页面跳转。 而主页面是Ifarme的父页面，可以通过window.parent直接达到效果。...布局代码: 工作
媒体格式兼容问题 所以小妹在想是不是有一款开源项目把这些问题都考虑并解决了呢。...快速入门 MuiPlayer提供了多种安装方式 通过npm安装 npm i mui-player --save 通过yarn安装 yarn add mui-player 直接引入js文件也是可以的...下面小妹使用直接引入js的方式，体验一下MuiPlayer的功能吧！...创建demo项目，目录结构如下： 创建Html文件 <!.../video/Elk安装准备01.mov', }) 运行效果如下： 是不是使用起来很简单，很方便呢。
MUI框架中使用百度地图（全网独一份最详细的图文教程） 注意事项 如果还没有注册的童鞋可以先去百度地图开放平台注册一下账号，如果不明白可以参考：https://blog.csdn.net/qq_17623363...点我进入百度地图开放平台：http://lbsyun.baidu.com/ 效果 MUI框架中使用百度地图（全网独一份最详细的图文教程） ?...使用HB打包时的安卓包名 Android平台云端打包 - DCloud公用证书（DCloud老版证书）：https://ask.dcloud.net.cn/article/68 MUI使用HB打包时的安卓包名...4、创建成功后的截图 ? 二、配置应用 1、把Android SDK AK或者IOS SDK AK与MUI项目中的manifest.json配置文件中配置百度地图的SDK。...项目结构： ?
这里给大家推荐一款专门争对移动app开发的框架----mui 什么是mui 他官网上是这样说的”最接近原生APP体验的高性能前端框架“。...开发移动app的框架有很多，既然他敢这么说肯定有一定的实力 这里我总结了三个使用mui的理由 简，快，易。...简 mui文件大小只有108kb mui 提供20多个控件 和50多个js api 及100多个样式 快 js加载快一般17ms左右 体量小页面绘出快，预加载，专场快 易 使用HbuilderX编辑器...如何使用mui 如果你使用mui框架，那你一定要用HbuilderX，他俩组合才体现了mui”易“的特点。...我们点击文件---新键项目，进行如下操作 这是创建成后的目录结构 接下来我们可以参照mui官方文档进行愉快的编码了。
webpack构建的Vue项目中使用模板对象 在webpack.config.js中添加resolve属性： resolve: { alias: { 'vue$': 'vue/dist...组件 注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用...Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发； 因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件； 从体验上来说， MUI和Bootstrap...类似； 理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目； 注意：不能使用npm下载，需要从 github 上下载现成的包并解压，然后拷贝到项目中使用.../lib/mui/css/mui.min.css' 根据官方提供的文档和example，尝试使用相关的组件 在.vue组件中使用vue-resource 运行npm i vue-resource -S
> 置于图片加载之前，图片不会显示， 解决措施：将其置于图片显示之后才会显示。...（使用遮罩蒙版技术解决） 注：在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭...alert(this.id);// (根据id判断是哪一个button) }) 总结：mui中的方法都是封装的jquery,所以自己还得从jquery着手，因为好多方法不会用，不知道参数的含义。...我想提升代码的复用性（即多个content页面均使用同一个header页面），如何解决？Mui能够做到吗？ 解决措施：使用webview模式选项卡。何谓webview模式？...其实就是每个选项卡内容都是一个独立的webview，彼此之间互相独立、互不影响； 对于较为复杂的业务系统，推荐使用该模式。另外，基于webview模式的选项卡，支持原生加速的下拉刷新。
有些事情经历过之后才会发现，原来再次之前我是如此的啥，因为是第一次做，毫无头绪，有时会想假如有个一demo就好了，那么就不会花费这么多的无用功了。...今天使用mui 的webview实现了一个H5页面的上拉加载下拉刷新的效果，拿出来和大家一起分享一下，希望各位博友有用，当然啦有的时候坑会很多，但是只要我们学会用思考的方式去找问题，不管是什么问题我们都是可以解决的...小弟的文采不好，有错误请指出来，一定虚心接受 //首先在此之前我们先要引用jquery的插件，以及mui.js插件 <ul class="<em>mui</em>-table-view <em>mui</em>-table-view-chevron
mui_logo.png 集成了各种插件工具，基于MUI ， H5+强大操作，同时可以在线打包，一键生成iOS、Android应用。...在开发过程中，使用了强大的Vue.js作为列表的数据渲染和事件绑定。值得一提的是或许由于初次接触这个框架，它给我一种震撼的感觉，数据绑定、事件处理及关联实在太方便了。...一些图片引入了阿里巴巴字体库 , 关于如何引入自定义的字体库，这一点官方文档写的很清楚。 大多操作使用H5+ 这一强大的基础库，官方号称有50多万个API，几乎涵盖了原生操作的方方面面。...已发布开源详细看这里： xx头条开源了(纯H5项目) https://www.jianshu.com/p/89fae6aa143f 离线打包操作(新增) Android ： MUI、HBuilderX...跨平台的操作我喜欢，以后学习好原生的同时还会继续跨平台技术栈的学习。 对于不会原生开发的前端小伙伴，这种方式来开发个APP也是个很好的选择。 Hi 大家好！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
