mint-ui里的badge怎么用

2022-04-17 社会 64阅读

首先放上mint-ui中文文档

近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码。github上面的分享,里面都是markdown文件,内容就是网上的文档
刚好自己在用,网上能找到的资料也不是很详细,自己写写咯。持续更新...emmmmm,应该可以吧,我这么懒。希望能给别人带来帮助。

介绍一下mint-ui的特性

特性介绍

  • MintUI包含丰富的CSS和JS组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

  • 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

  • 考虑到移动端的性能门槛,MintUI采用CSS3处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

  • 依托Vue.js高效的组件化方案,MintUI做到了轻量化。即使全部引入,压缩后的文件体积也仅有~30kb(JS+CSS)gzip。

  • 这个组件库,适合于基于vue的手机页面开发。

    1.cell的使用

    先丢个图↓

    在做switch的时候,想做成文字和switch在列表的两侧。效果出不来,发现有很多人跟我一样死命的钻switch的文档,以及找switch的相关资料。然后实际上,应该用cell才对。

    ?

    123
  •   
  •  
  •   
  • 利用cell的布局,和switch相结合。产生下面的结果。

    2.Infinitescroll和Navbar结合使用

    Navbar是这样的↓

    Infinitescroll是这样的↓

    两个结合起来,就是把Infinitescroll嵌套在 里面,然后效果就出来了。

    简单的就是酱紫的。

    ?

    12345678910111213141516171819202122
  •   
  •  选项一 选项二        
  •   
  • 这样基本页面就出来了。

声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com