ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

特别好看的小程序UI-【colorUI框架】是怎么使用的?建议收藏

2020-05-22 13:55:51  阅读:394  来源: 互联网

标签:程序 ColorUI 文件夹 UI css colorUI wxss 好看 icon


导读:

首先,单从小程序UI的方面来讲,能与ColorUI比肩的框架着实是没几个了,它好在哪?

其一:组件精美,可以说每一个都制作精良,作者很用心,UI功底很扎实。

其二:封装性特别特别的好,每一个单独的class选择器,都是一个封装极好的css小组件,我们可以灵活的组装与变幻,下边我会详细讲一下它的css封装。

其三:感受到了作者的过人之处,迄今为止用过了好多UI框架。webUI框架,webAppUI框架以及小程序UI框架都有所尝试,这些框架所提供的组件的代码,相对而言都不是那么称心如意,因为有时候想在它们提供的组件上做一些微调,样式经常会被我搞得乱七八糟,但是colorUI就不一样,它的组件代码具有良好的兼容性,扩展性,我们可以在它的基础上进行灵活的修改,而不至于使其gg。

使用:

那么我们要如何去使用这个框架呢?尤其是在作者的文档还没出来之前?

下边开始介绍它的使用方法,我们从先从github上下载的它的文件:GitHub地址:https://github.com/weilanwl/ColorUI/

压缩有发现有三个文件夹:

Colorui-UniApp     

demo     template(这两个文件夹是可以直接部署在小程序上的,

第一个就是ColorUI的作者制作的ColorUI小程序的项目源码,我们可以将其导入到小程序开发工具中,查看每个组建的源码并且使用,第二个template是一个空白的小程序模板,作者已经将ColorUI的使用环境搭建好了,我们可以直接在上边开始我们自己的项目。)

下边就是这个demo,把它按照平常的步骤导入开发者工具:

说明:

这个小程序的功能不做太多讲解,看代码:

右侧有四个大文件夹,分别是custom-tab-bar、images、pages、和utils以及几个文件,custom-tab-bar就是小程序自己定义的导航栏,对自定义导航栏不理解的可以参考下:自定义tabBar

简而言之:自定义样式就是、那么就必须在custom-tab-bar里边配置自己想要的window和tabBar样式,方法就是“windows”的“navigationStyle”属性改为“custom”,tabBar中的“custom”属性改为true,demo小程序的windows和tabBar都是使用的是自定义样式。

images和pages就不说了。

utils文件夹没用,.gitattributes也没用。

app.js 中主要写了作者为了自定义导航栏和tabBar所需要的全局变量,app.wxss中是对导航栏的css装饰。

colorui.wxss就是colorUI的css源码库,所有组件的css样式都是通过几个css的class  selector组合而成的。

icon.wxss是colorUI所提供的icon库,就是所有的小图标,注意icon都不是图片的形式,而是文本的形式。

使用:

我们如果想要引入不同的icon,直接凭借下边这行代码就可以:

<text class='icon-{{icon-name}} lg text-{{color}}'></text>

这里解释一下ColorUI样式的灵活封装:

注意到class是由三个小selector组成:icon-iconName 、 lg、  text-color,第一个属性是“icon-”后边加上我们想要的icon名称,可以在小程序的图标界面查看所有icon及其名称,第二个属性加上之后,icon会变大,第三个是“icon-”后边加上我们想要的颜色,可以写red、yellow、orange、green等来单独确定icon的颜色(参数不能传入十六进制和rgb),当然,我们也可以给这个text标签加上一个id选择器,在css文件中覆盖它的大小和颜色。

Pages文件夹:index(小程序整体框架)about(对应关于选项卡)basics(对应元素选择卡)component(对于组件选择卡)plugin(对应扩展选择卡)。

 

这里边的文件夹也是和界面里的选项卡一一对应的。

图标选项卡:

点击图标选项卡,打开basics文件夹下icon文件夹的wxxml代码:

 

 这段代码是循环显示所有icon,如果想显示一种,要在if语句里加一个!item.isShow。

意思就是icon.js里isShow为false的icon显示。(只提供演示作用)

 

 如果要想在一个小程序项目中使用ColorUI也非常的简单,把colorui.wxss和icon.wxss粘贴到项目根路径下,然后在项目的app.wxss中加入两行代码即可:

@import "icon.wxss";
@import "colorui.wxss";

之后我们就能引用ColorUI提供给我们的CSS修饰了,只不过目前来说还有些小麻烦

 

 想使用哪个组件,就把哪个组件的代码copy下来再稍加修饰

 

标签:程序,ColorUI,文件夹,UI,css,colorUI,wxss,好看,icon
来源: https://www.cnblogs.com/lifly/p/12936729.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有