精华内容
下载资源
问答
  • ColorUI在语雀有个群友共同在维护的知识库,里面有一些群友改的模板和UI素材供开发使用哦! 语雀-ColorUI群资源 使用UniApp开发 开始 下载源码解压获得/Colorui-UniApp文件夹,复制目录下的 /colorui 文件夹到你的...
  • #从uni-app插件市场搜索colorUi,下载地址????https://ext.dcloud.net.cn/plugin?id=239 导入插件到项目中或者下载插件压缩包 下载插件压缩包的,将压缩包解压后的colorui文件夹复制到项目根目录下;导入...

    1.导入插件及配置

    #从uni-app插件市场搜索colorUi,下载地址👉https://ext.dcloud.net.cn/plugin?id=239

    导入插件到项目中或者下载插件压缩包

    下载插件压缩包的,将压缩包解压后的colorui文件夹复制到项目根目录下;导入插件不用进行此步操作。

    App.vue 引入关键Css main.css icon.css

    <style>
        @import "colorui/main.css";
        @import "colorui/icon.css";
    </style>

    2.使用colorUi里的组件

    使用教程 https://ext.dcloud.net.cn/plugin?id=239

    导航栏

    使用colorUi里的导航栏,需要在 App.vue 进行如下配置:

    <script>
        import Vue from 'vue'
        export default {
            onLaunch: function() {
                console.log('App Launch')
                uni.getSystemInfo({
                    success: function(e) {
                        // #ifndef MP
                        Vue.prototype.StatusBar = e.statusBarHeight;
                        if (e.platform == 'android') {
                            Vue.prototype.CustomBar = e.statusBarHeight + 50;
                        } else {
                            Vue.prototype.CustomBar = e.statusBarHeight + 45;
                        };
                        // #endif
                        // #ifdef MP-WEIXIN
                        Vue.prototype.StatusBar = e.statusBarHeight;
                        let custom = wx.getMenuButtonBoundingClientRect();
                        Vue.prototype.Custom = custom;
                        Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
                        // #endif       
                        // #ifdef MP-ALIPAY
                        Vue.prototype.StatusBar = e.statusBarHeight;
                        Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
                        // #endif
                    }
                })
            },
            onShow: function() {
                console.log('App Show')
            },
            onHide: function() {
                console.log('App Hide')
            }
        }
    </script>
    
    <style>
        /*每个页面公共css */
        @import "colorui/main.css";
        @import "colorui/icon.css";
    </style>

    pages.json 配置取消系统导航栏

    "globalStyle": {
        "navigationStyle": "custom"
    },

    在main.js 引入 cu-custom 组件

    import cuCustom from './colorui/components/cu-custom.vue'
    Vue.component('cu-custom',cuCustom)

    在html页面直接复制组件代码过去即可,如 index.vue

    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
        <block slot="backText">返回</block>
        <block slot="content">导航栏</block>
    </cu-custom>

    底部导航栏使用

    项目目录:

    index.vue

    <template>
        <view class="">
            <basics v-if=" PageCur=='basics' "></basics>
            <me v-if=" PageCur=='me' "></me>
            <view class="cu-bar tabbar bg-black foot">
                <view class="action"  @click="NavChange" data-cur="basics">
                    <view class="cuIcon-homefill" :class="PageCur=='basics'?'text-orange':'text-gray'"></view> 
                    <view :class="PageCur=='basics'?'text-orange':'text-gray'">首页</view>
                </view>
                <view class="action" @click="NavChange" data-cur="me">
                    <view class="cuIcon-my" :class="PageCur=='me'?'text-orange':'text-gray'"></view>
                    <view :class="PageCur=='me'?'text-orange':'text-gray'">我的</view>                
                </view>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    PageCur: 'basics'
                }
            },
            onLoad() {
    
            },
            methods: {
                NavChange: function(e) {
                    this.PageCur = e.currentTarget.dataset.cur
                }
            }
        }
    </script>
    
    <style scoped lang="scss">  
    
    </style>

    /basics/home.vue

    <template name="basics">
        <view class="">
            <cu-custom bgColor="bg-orange" :isBack="false">
                <block slot="content">首页</block>
            </cu-custom>
        </view>
    </template>
    
    <script>
        export default {
            name:'basics'
        }
    </script>
    
    <style>
    </style>

    /me/home.vue

    <template name="me">
        <view class="">
            <cu-custom bgColor="bg-orange" :isBack="false">
                <block slot="content">个人中心</block>
            </cu-custom>
        </view>
    </template>
    
    <script>
        export default {
            name:'me'
        }
    </script>
    
    <style>
    </style>

    main.js 注册组件

    import basics from './pages/basics/home.vue'
    Vue.component('basics',basics)
    import me from './pages/me/home.vue'
    Vue.component('me',me)

    效果图如下:

    其他的组件也是复制代码,直接使用。

    展开全文
  • colorUI框架使用教程

    万次阅读 多人点赞 2019-03-10 16:43:30
    最近在帮别人做一个小程序,问起熟悉小程序的同伴们用什么UI框架比较好,在网上也又搜了一遍,感觉这个突然出现的ColorUI很有意思,也很精美,于是乎就试了一下,这里说一下自己初次使用所遇到的坑与感想: ...

    最近在帮别人做一个小程序,问起熟悉小程序的同伴们用什么UI框架比较好,在网上也又搜了一遍,感觉这个突然出现的ColorUI很有意思,也很精美,于是乎就试了一下,这里说一下自己初次使用所遇到的坑与感想:

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

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

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

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

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

    下边开始介绍它的使用方法,我们从先从github上下载的它的文件:

    GitHub地址:https://github.com/weilanwl/ColorUI/

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

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

    下边我们来看看这个demo,把它按照平常的步骤导入开发者工具:

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

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

    简言之,如果想自定义app.json中的"window"和"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文件夹:

    其中四个文件夹分别对应四个tabBar选项卡,剩下的一个auth是小程序的微信授权界面。点开基础组件:

    这里边的文件夹也是和:

    界面里的选项卡一一对应的,点击图标选项卡,打开basics文件夹下icon文件夹的wxxml代码:

    注意到:

    它是通过for循环来将所有图标展示的,展示图标的代码,就是红线所画的,因此当我们想引用图标的时候,直接粘代码、该参数即可!其他组件同理。

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

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

    之后我们就能引用ColorUI提供给我们的CSS修饰了,只不过目前来说还有些小麻烦,在正式文档出来之前,我们只能去参照作者给的demo演示小程序中的源码,想使用哪个组件,就把哪个组件的代码copy下来再稍加修饰。当然,这也是一种笨且有效的方法。当我们熟练地掌握Colorui中每个标签的class的组成及其含义之后(如上述所分析的那个引用icon的例子),我们就可以灵活地去运用它了,这也会极大地方便我们的开发过程。

    好啦,今天和大家分享的就是这些,ColorUI的精彩之处,还请慢慢体验吧!

    展开全文
  • 小程序ColorUI使用简易教程

    万次阅读 多人点赞 2019-11-08 13:50:58
    教程配合官方示例食用更佳!!! 目录 前言 快速上手 使用UniApp开发 开始 使用自定义导航栏 使用原生小程序开发 从现有项目开始 从新项目开始 使用自定义导航栏 组件 基础元素 layout布局 ...

    本教程配合官方示例食用更佳!!!

    目录

    前言

    快速上手

    使用UniApp开发

    开始

    使用自定义导航栏

    使用原生小程序开发

    从现有项目开始

    从新项目开始

    使用自定义导航栏

    组件

    基础元素

    layout布局

    Background背景 

    Text文字

    Icon图标

    Button按钮

    Tag标签

    Avatar头像

    Progress进度条 

    Border&Shadow边框阴影 

    Loading加载

    交互组件


     

    前言

     

    colorUI组件

    ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件 


    快速上手

    使用UniApp开发

    开始

    下载源码解压获得/Colorui-UniApp文件夹,复制目录下的 /colorui 文件夹到你的项目根目录

    App.vue 引入关键Css main.css icon.css

    <style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
    </style>
    

    使用自定义导航栏

    导航栏作为常用组件有做简单封装,当然你也可以直接复制代码结构自己修改,达到个性化目的。

    App.vue 获得系统信息

    onLaunch: function() {
    	uni.getSystemInfo({
    		success: function(e) {
    			// #ifndef MP
    			Vue.prototype.StatusBar = e.statusBarHeight;
    			if (e.platform == 'android') {
    				Vue.prototype.CustomBar = e.statusBarHeight + 50;
    			} else {
    				Vue.prototype.CustomBar = e.statusBarHeight + 45;
    			};
    			// #endif
    			// #ifdef MP-WEIXIN
    			Vue.prototype.StatusBar = e.statusBarHeight;
    			let custom = wx.getMenuButtonBoundingClientRect();
    			Vue.prototype.Custom = custom;
    			Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    			// #endif		
    			// #ifdef MP-ALIPAY
    			Vue.prototype.StatusBar = e.statusBarHeight;
    			Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
    			// #endif
    		}
    	})
    },
    

    pages.json 配置取消系统导航栏

    "globalStyle": {
    	"navigationStyle": "custom"
    },
    

    复制代码结构可以直接使用,注意全局变量的获取。

    使用封装,在main.js 引入 cu-custom 组件。

    import cuCustom from './colorui/components/cu-custom.vue'
    Vue.component('cu-custom',cuCustom)
    

    page.vue 页面可以直接调用了

    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
    	<block slot="backText">返回</block>
    	<block slot="content">导航栏</block>
    </cu-custom>
    
    参数 作用 类型 默认值
    bgColor 背景颜色类名 String ''
    isBack 是否开启返回 Boolean false
    bgImage 背景图片路径 String ''
    slot块 作用
    backText 返回时的文字
    content 中间区域
    right 右侧区域(小程序端可使用范围很窄!)

    使用原生小程序开发

    从现有项目开始

    下载源码解压获得/demo,复制目录下的 /colorui 文件夹到你的项目根目录

    App.wxss 引入关键Css main.wxss icon.wxss

    @import "colorui/main.wxss";
    @import "colorui/icon.wxss";
    @import "app.css"; /* 你的项目css */
    ....
    

    从新项目开始

    下载源码解压获得/template,复制/template并重命名为你的项目,导入到小程序开发工具既可以开始你的新项目了

    使用自定义导航栏

    导航栏作为常用组件有做简单封装,当然你也可以直接复制代码结构自己修改,达到个性化目的。

    App.js 获得系统信息

     onLaunch: function() {
        wx.getSystemInfo({
          success: e => {
            this.globalData.StatusBar = e.statusBarHeight;
            let custom = wx.getMenuButtonBoundingClientRect();
            this.globalData.Custom = custom;  
            this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
          }
        })
    },
    

    App.json 配置取消系统导航栏,并全局引入组件

    "window": {
    	"navigationStyle": "custom"
    },
    "usingComponents": {
        "cu-custom":"/colorui/components/cu-custom"
    }
    

    page.wxml 页面可以直接调用了

    <cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
    	<view slot="backText">返回</view>
    	<view slot="content">导航栏</view>
    </cu-custom>
    
    
    参数 作用 类型 默认值
    bgColor 背景颜色类名 String ''
    isBack 是否开启返回 Boolean false
    isCustom 是否开启左侧胶囊 Boolean false
    bgImage 背景图片路径 String ''
    slot块 作用
    backText 返回时的文字
    content 中间区域
    right 右侧区域(小程序端可使用范围很窄!)

    组件

    基础元素

    layout布局

    Flex布局

    父级添加class名flex

    • 固定尺寸

    通过添加class名basic-{{options}}来设置分栏大小,options可以取五个值,分别为xssmdflgxl

     

    固定尺寸

    <view class="padding bg-white">
    	<view class="flex flex-wrap">
    		<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
    		<view class="basis-df"></view>
    		<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
    		<view class="basis-df"></view>
    		<view class="basis-df bg-grey margin-xs padding-sm radius">df(50%)</view>
    		<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
    		<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
    	</view>
    </view>
    
    • 比例布局

    通过添加class名flex-{{options}}来设置分栏大小,options可以取值subtwicetreble,分别代表占比1,2,3

    比例布局

    <view class="padding bg-white">
    	<view class="flex">
    		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    	</view>
    	<view class="flex">
    		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    		<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
    	</view>
    	<view class="flex">
    		<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
    		<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
    		<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
    	</view>
    </view>
    
    • 水平对齐(justify)

    通过添加class名justify-{{options}}来设置盒子水平对齐方式,options可以取值startendcenterbetweenaround,效果可以参考flex布局布局中的容器属性justify-content(Flex布局教程

    水平对齐

    <view class="bg-white">
    	<view class="flex solid-bottom padding justify-start">
    		<view class="bg-grey padding-sm margin-xs radius">start</view>
    		<view class="bg-grey padding-sm margin-xs radius">start</view>
    	</view>
    	<view class="flex solid-bottom padding justify-end">
    		<view class="bg-grey padding-sm margin-xs radius">end</view>
    		<view class="bg-grey padding-sm margin-xs radius">end</view>
    	</view>
    	<view class="flex solid-bottom padding justify-center">
    		<view class="bg-grey padding-sm margin-xs radius">center</view>
    		<view class="bg-grey padding-sm margin-xs radius">center</view>
    	</view>
    	<view class="flex solid-bottom padding justify-between">
    		<view class="bg-grey padding-sm margin-xs radius">between</view>
    		<view class="bg-grey padding-sm margin-xs radius">between</view>
    	</view>
    	<view class="flex solid-bottom padding justify-around">
    		<view class="bg-grey padding-sm margin-xs radius">around</view>
    		<view class="bg-grey padding-sm margin-xs radius">around</view>
    	</view>
    </view>
    
    • 垂直对齐(align)

    通过添加class名align-{{options}}来设置盒子垂直对齐方式,options可以取值startendcenter,效果可以参考flex布局布局中的容器属性align-item(Flex布局教程

    垂直对齐

    <view class="bg-white">
    	<view class="flex solid-bottom padding align-start">
    		<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    		<view class="bg-grey padding-sm margin-xs radius">start</view>
    	</view>
    	<view class="flex solid-bottom padding align-end">
    		<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    		<view class="bg-grey padding-sm margin-xs radius">end</view>
    	</view>
    	<view class="flex solid-bottom padding align-center">
    		<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
    		<view class="bg-grey padding-sm margin-xs radius">center</view>
    	</view>
    </view>
    

    Grid布局

    父级添加class名grid

    • 等分列

    通过添加class名col-{{options}}来实现栅格布局,options可以取值12345

    等分列

    <view class="bg-white padding">
    	<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
    		<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)" :key="indexs">{{index+1}}</view>
    	</view>
    </view>
    • 等高

    通过添加class名grid-square设置盒子内容等高,添加col-{{options}}来设置分栏个数,options可以取值12345,将盒子等分

    等高

    <view class="bg-white padding">
    	<view class="grid col-4 grid-square">
    		<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
    	</view>
    </view>
    
    ----------------------------------------------------------------------------------------
    
    data() {
    	return {
    		avatar: ['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
    			'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
    			'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
    			'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
    		],
    	}
    },
    

    布局相关class

    class 说明 可选值
    flex flex布局必选值 ——
    basic-{{options}} 设置分栏大小 xs/sm/df/lg/xl
    flex-{{options}} 以比例设置分栏大小 sub/twice/treble
    justify-{{options}} 水平对齐方式 start/end/center/between/around
    align-{{options}} 垂直对齐方式 start/end/center
    grid grid布局必选值 ——
    col-{{options}} 栅格布局 1/2/3/4/5
    grid-square 等高 ——
    fl 左浮 ——
    fr 右浮 ——
    margin-{{options}} 外边距 xs/sm/df/lg/xl
    padding-{{options}} 内边距 xs/sm/df/lg/xl
    margin-lr-{{options}} 水平方向外边距 xs/sm/df/lg/xl
    padding-lr-{{options}} 水平方向内边距 xs/sm/df/lg/xl
    margin-tb-{{options}} 垂直方向外边距 xs/sm/df/lg/xl
    padding-tb-{{options}} 垂直方向内边距 xs/sm/df/lg/xl
    margin-top-{{options}} 上外边距 xs/sm/df/lg/xl
    padding-top-{{options}} 上内边距 xs/sm/df/lg/xl
    margin-right-{{options}} 右外边距 xs/sm/df/lg/xl
    padding-right-{{options}} 右内边距 xs/sm/df/lg/xl
    margin-bottom-{{options}} 下外边距 xs/sm/df/lg/xl
    padding-bottom-{{options}} 下内边距 xs/sm/df/lg/xl
    margin-left-{{options}} 左外边距 xs/sm/df/lg/xl
    padding-left-{{options}} 左内边距

    xs/sm/df/lg/xl

     注:lr,left-right;tb,top-bottom; 

    Background背景 

    颜色背景 

    • 深色 

     通过添加class名bg-{{options}}设置背景

     深色背景

    <view class="grid col-3 padding-sm">
    	<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
    		<view class="padding radius text-center shadow-blur" :class="'bg-' + item.name">
    			<view class="text-lg">{{item.title}}</view>
    			<view class="margin-top-sm text-Abc">{{item.name}}</view>
    		</view>
    	</view>
    </view>
    
    • 浅色

     通过添加class名bg-{{options}}设置背景颜色,添加class名light表示相应的浅色

    浅色背景

    <view class="grid col-3 bg-white padding-sm">
    	<view class="padding-sm" v-for="(item,index) in ColorList" :key="index" v-if="index<12">
    		<view class="padding radius text-center light" :class="'bg-' + item.name">
    			<view class="text-lg">{{item.title}}</view>
    			<view class="margin-top-sm text-Abc">{{item.name}}</view>
    		</view>
    	</view>
    </view>
    
    •  渐变

    通过添加class名bg-gradual-{{options}}设置渐变背景颜色

    渐变背景

    <view class="grid col-2 padding-sm">
    	<view class="padding-sm">
    		<view class="bg-gradual-red padding radius text-center shadow-blur">
    			<view class="text-lg">魅红</view>
    			<view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view>
    		</view>
    	</view>
    	<view class="padding-sm">
    		<view class="bg-gradual-orange padding radius text-center shadow-blur">
    			<view class="text-lg">鎏金</view>
    			<view class="margin-top-sm text-Abc">#ff9700 - #ed1c24</view>
    		</view>
    	</view>
    	<view class="padding-sm">
    		<view class="bg-gradual-green padding radius text-center shadow-blur">
    			<view class="text-lg">翠柳</view>
    			<view class="margin-top-sm text-Abc">#39b54a - #8dc63f</view>
    		</view>
    	</view>
    	<view class="padding-sm">
    		<view class="bg-gradual-blue padding radius text-center shadow-blur">
    			<view class="text-lg">靛青</view>
    			<view class="margin-top-sm text-Abc">#0081ff - #1cbbb4</view>
    		</view>
    	</view>
    	<view class="padding-sm">
    		<view class="bg-gradual-purple padding radius text-center shadow-blur">
    			<view class="text-lg">惑紫</view>
    			<view class="margin-top-sm text-Abc">#9000ff - #5e00ff</view>
    		</view>
    	</view>
    	<view class="padding-sm">
    		<view class="bg-gradual-pink padding radius text-center shadow-blur">
    			<view class="text-lg">霞彩</view>
    			<view class="margin-top-sm text-Abc">#ec008c - #6739b6</view>
    		</view>
    	</view>
    </view>
    

     图片背景

    • 透明背景(文字层)

    通过bg-img设置图片背景,bg-mask设置透明遮罩层

    透明背景

    <view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
    	<view class="padding-xl text-white">
    		<view class="padding-xs text-xxl text-bold">
    			钢铁之翼
    		</view>
    		<view class="padding-xs text-lg">
    			Only the guilty need fear me.
    		</view>
    	</view>
    </view>
    

     通过bg-shadeTop设置遮罩层上阴影,bg-shadeBottom设置遮罩层下阴影

    <view class="grid col-2">
    	<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
    		<view class="bg-shadeTop padding padding-bottom-xl">
    			上面开始
    		</view>
    	</view>
    	<view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
    		<view class="bg-shadeBottom padding padding-top-xl flex-sub">
    			下面开始
    		</view>
    	</view>
    </view>
    

     背景相关class

    class 说明 可选值
    bg-{{options}} 设置背景色

    red/orange/yellow/olive/green/cyan/blue/purple/mauve/pink/

    brown/grey/gray/black/white

    light 浅色背景,配合bg-{{options}}使用,取值前12个 ——
    bg-gradual-{{options}} 渐变色背景 red/orange/green/blue/purple/pink
    bg-img 图片背景 ——
    bg-mask 遮罩层 ——
    bg-shadeTop 遮罩层上阴影 ——
    bg-shadeBottom 遮罩层下阴影 ——
    shadow-blur 外阴影 ——

    Text文字

    文字大小

    通过添加class名text-{{size}}设置文字大小,size取值xs、sm、df、lg、xl、xxl、sl、xsl

    12

    456 

    7

    文字颜色

    通过添加class名text-{{color}}设置文字颜色,color取值red、orange、yellow、olive、green、cyan、blue、purple、mauve、brown、grey、gray、black、white

    文字颜色

    <view class="grid col-5 padding-sm">
    	<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
    		<view class="text-center" :class="'text-' + item.name">
    			{{item.title}}
    		</view>
    	</view>
    </view>
    

    文字阴影

    通过添加class名text-shadow设置文字阴影

    文字阴影

    <view class="grid col-5 padding-sm">
    	<view class="padding-sm" v-for="(item,index) in ColorList" :key="index">
    		<view class="text-center text-shadow" :class="'text-' + item.name">
    			<view class="cuIcon-ellipse text-xxl"></view>
    		</view>
    	</view>
    </view>
    

    文字截断

    通过添加class名text-cut设置文字长度溢出显示省略号

    文字截断

    <view class="padding bg-white">
    	<view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    </view>
    

    文字对齐 

    通过添加class名text-{{position}}设置文字长度溢出显示省略号,position取值left、center、right

    文字对齐

    <view class="padding bg-white">
    	<view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    	<view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    	<view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
    </view>
    

     特殊文字

    通过添加class名text-price表示价格,会显示¥符号,text-Abc设置英文首字母大写,text-ABC设置英文大写,text-abc设置英文小写

    价格首字母大写大写小写

    <view class="padding text-center">
    	<view class="padding-lr bg-white">
    		<view class="solid-bottom padding">
    			<text class="text-price">80.00</text>
    		</view>
    		<view class="padding">价格文本,利用伪元素添加"¥"符号</view>
    	</view>
    	<view class="padding-lr bg-white margin-top">
    		<view class="solid-bottom padding">
    			<text class="text-Abc">color Ui</text>
    		</view>
    		<view class="padding">英文单词首字母大写</view>
    	</view>
    	<view class="padding-lr bg-white margin-top">
    		<view class="solid-bottom padding">
    			<text class="text-ABC">color Ui</text>
    		</view>
    		<view class="padding">全部字母大写</view>
    	</view>
    	<view class="padding-lr bg-white margin-top">
    		<view class="solid-bottom padding">
    			<text class="text-abc">color Ui</text>
    		</view>
    		<view class="padding">全部字母小写</view>
    	</view>
    </view>
    

    文字相关class

    class 说明

    可选值

    text-{{size}} 文字大小 xs(20upx)/sm(24upx)/df(28upx)/lg(32upx)/xl(36upx)/xxl(44upx)/sl(80upx)/xsl(120upx)
    text-{{color}} 文字颜色 red/orange/yellow/olive/green/cyan/blue/purple/mauve/brown/grey/gray/black/white
    text-shadow 文字阴影 ——
    text-cut 文字截断 ——
    text-bold 文字加粗 ——
    text-{{position}} 文字对齐 left/center/right
    text-price 带¥符号 ——
    text-Abc 首字母大写 ——
    text-ABC 全部大写 ——
    text-abc 全部小写 ——

    Icon图标

    通过添加class名cuIcon-{{iconName}},直接设置图标

    123456789101112131415

    Button按钮

    按钮必选class cu-btn

    按钮形状

    通过添加class名设置按钮不同形状,默认只需要添加cu-btnround为圆角,cuIcon为圆形用来包裹图标

    按钮大小

    <view class="padding flex flex-wrap justify-between align-center bg-white">
    	<button class="cu-btn">默认</button>
    	<button class="cu-btn round">圆角</button>
    	<button class="cu-btn cuIcon">
    		<text class="cuIcon-goodsfill"></text>
    	</button>
    </view>
    

    按钮尺寸

    sm小尺寸,lg大尺寸

    按钮尺寸

    <view class="padding flex flex-wrap justify-between align-center bg-white">
    	<button class="cu-btn round sm">小尺寸</button>
    	<button class="cu-btn round">默认</button>
    	<button class="cu-btn round lg">大尺寸</button>
    </view>
    

    按钮颜色 

    添加背景class名就可以,用法参考背景组件的介绍

     按钮颜色

    <view class="grid col-5 padding-sm">
    	<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index">
    		<button class="cu-btn round" :class="'bg-' + item.name ">{{item.title}}</button>
    	</view>
    </view>

    幽灵按钮

    通过line-{{color}}或者lines-{{color}}设置镂空的幽灵按钮

    youling

    <view class="grid col-5 padding-sm">
    	<view class="margin-tb-sm text-center" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
    		<button class="cu-btn round" :class="'line-' + item.name">{{item.title}}</button>
    	</view>
    </view>
    

    禁用按钮

    添加disabled禁用按钮

    禁用按钮

    <view class="padding">
    	<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
    	<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
    </view>

     自定义图标按钮

    可以直接在button标签class内添加图标名,或者在text等其他标签内添加class,其他标签要包裹在button标签内

    图标按钮

    <view class="padding-xl">
    	<button class="cu-btn block line-orange lg cuIcon-upload"><text class="cuIcon-upload"></text> 图标</button>
    	<button class="cu-btn block bg-blue margin-tb-sm lg"><text class="cuIcon-loading2 cuIconfont-spin"></text> 加载</button>
    	<button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加载</button>
    </view>
    

    按钮相关class

    class 说明 可选值
    cu-btn 按钮必选值 ——
    round 圆角按钮 ——
    cuIcon 圆形 ——
    sm 小尺寸按钮 ——
    lg 大尺寸按钮 ——
    line-{{color}} 幽灵按钮,细边框 参考背景色
    lines-{{color}} 幽灵按钮,粗边框 参考背景色
    disabled 禁用 ——

    Tag标签

    标签必选class cu-tag 

    标签形状

    通过添加class名设置标签不同形状,默认只需要添加cu-taground为椭圆,radius为圆角

    标签形状

    <view class="padding bg-white solid-bottom">
    	<view class='cu-tag'>默认</view>
    	<view class='cu-tag round'>椭圆</view>
    	<view class='cu-tag radius'>圆角</view>
    </view>
    

     标签尺寸

    sm小尺寸

    标签尺寸

    <view class="padding bg-white">
    	<view class='cu-tag radius sm'>小尺寸</view>
    	<view class='cu-tag radius'>普通尺寸</view>
    </view>
    

     标签颜色

    添加背景class名就可以,用法参考背景组件的介绍

    标签颜色

    <view class='padding-sm flex flex-wrap'>
    	<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray'">
    		<view class='cu-tag' :class="'bg-' + item.name">{{item.title}}</view>
    	</view>
    	<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='gray' && item.name!='black' && item.name!='white'">
    		<view class='cu-tag light' :class="'bg-' + item.name">{{item.title}}</view>
    	</view>
    </view>
    

    幽灵标签

    通过line-{{color}}设置镂空的幽灵按钮

    幽灵标签

    <view class='padding-sm flex flex-wrap'>
    	<view class="padding-xs" v-for="(item,index) in ColorList" :key="index" v-if="item.name!='white'">
    		<view class='cu-tag' :class="'line-' + item.name">{{item.title}}</view>
    	</view>
    </view>
    

    胶囊样式

    通过cu-capsule设置为胶囊样式,内部设置自己想要的样式

    胶囊样式

    <view class="padding">
    	<view class="cu-capsule">
    		<view class='cu-tag bg-red'><text class='cuIcon-likefill'></text></view>
    		<view class="cu-tag line-red">12</view>
    	</view>
    	<view class="cu-capsule round">
    		<view class='cu-tag bg-blue '><text class='cuIcon-likefill'></text></view>
    		<view class="cu-tag line-blue">23</view>
    	</view>
    	<view class="cu-capsule round">
    		<view class='cu-tag bg-blue '>说明</view>
    		<view class="cu-tag line-blue">123</view>
    	</view>
    	<view class="cu-capsule radius">
    		<view class='cu-tag bg-grey '><text class='cuIcon-likefill'></text></view>
    		<view class="cu-tag line-grey">23</view>
    	</view>
    	<view class="cu-capsule radius">
    		<view class='cu-tag bg-brown sm'><text class='cuIcon-likefill'></text></view>
    		<view class="cu-tag line-brown sm">23</view>
    	</view>
    </view>
    

    数字标签

     通过badge设置角标

     数字标签

    <view class="padding flex justify-between align-center">
    	<view class='cu-avatar xl radius'>港<view class="cu-tag badge">99+</view></view>
    	<view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
    		<view class='cu-tag badge'>9</view>
    	</view>
    	<view class='cu-avatar xl radius'>
    		<view class='cu-tag badge'>99</view>
    		<text class='cuIcon-people'></text>
    	</view>
    	<view class='cu-avatar xl radius'>
    		<view class='cu-tag badge'>99+</view>
    	</view>
    </view>

    标签相关class

    class 说明 可选值
    cu-tag 标签必选值 ——
    round 椭圆 ——
    radius 圆角 ——
    sm 小尺寸标签 ——
    line-{{color}} 幽灵标签 参考背景色
    cu-capsule 胶囊标签 ——
    badge 数字角标 ——

    Avatar头像

    头像必选class cu-avatar

    头像形状

    通过roundradius设置头像形状

    头像形状

    <view class="padding">
    	<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
    	<view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
    </view>
    

    头像尺寸

    通过smlgxl设置不同大小的头像

    头像尺寸

    <view class="padding">
    	<view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"></view>
    	<view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
    	<view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
    	<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
    </view>
    <view class="padding">
    	<view class="cu-avatar sm round margin-left bg-red"> 蔚</view>
    	<view class="cu-avatar round margin-left bg-red">蓝</view>
    	<view class="cu-avatar lg round margin-left bg-red"><text>wl</text></view>
    	<view class="cu-avatar xl round margin-left bg-red">
    		<text class="avatar-text">网络</text>
    	</view>
    </view>
    

    内嵌文字

    头像内部不仅仅是图片,也可以是自定义文字和图标等

    内嵌文字

    <view class="padding">
    	<view class="cu-avatar radius">
    		<text class="cuIcon-people"></text>
    	</view>
    	<view class="cu-avatar radius margin-left">
    		<text>港</text>
    	</view>
    </view>
    

     头像颜色

    设置背景色即可

    头像颜色

    <view class="padding-sm">
    	<view class="cu-avatar round lg margin-xs" :class="'bg-' + item.name" v-for="(item,index) in ColorList" :key="index">
    		<text class="avatar-text">{{item.name}}</text>
    	</view>
    </view>
    

     头像组

    设置了cu-avatar外部的盒子添加cu-avatar-group的class

    头像组

    <view class="padding">
    	<view class="cu-avatar-group">
    		<view class="cu-avatar round lg" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
    	</view>
    </view>
    

    头像标签

    在头像标签内部添加数字标签的角标即可

    头像标签

    <view class="padding">
    	<view class="cu-avatar round lg margin-left"  v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]">
    		<view class="cu-tag badge" :class="index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
    	</view>
    </view>
    

    头像相关class

    class 说明 可选值
    cu-avatar 头像必选值 ——
    cu-avatar-group 头像组,包裹cu-avatar ——
    round 圆形 ——
    radius 圆角 ——
    sm 小尺寸头像 ——
    lg 大尺寸头像 ——
    xl 超大尺寸头像 ——

    Progress进度条 

    进度条必须值为cu-progress

    进度条形状

    进度条默认为方形,radius为圆角,round为圆形;代码中loading只是一个变量,初始值为false,页面初始化时赋值为true,即给进度条赋值,使进度条有一个动画效果。

    进度条形状

    <view class="padding bg-white">
    	<view class="cu-progress">
    		<view class="bg-red" style="width:61.8%">61.8%</view>
    	</view>
    	<view class="cu-progress radius margin-top">
    		<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
    	</view>
    	<view class="cu-progress round margin-top">
    		<view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
    	</view>
    </view>
    

    进度条尺寸

    sm为小尺寸,xs为超小尺寸 

    进度条尺寸

    <view class="padding bg-white">
    	<view class="cu-progress round">
    		<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
    	</view>
    	<view class="cu-progress round margin-top sm">
    		<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
    	</view>
    	<view class="cu-progress round margin-top xs">
    		<view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
    	</view>
    </view>
    

     进度条颜色

    添加背景色即可

    进度条颜色

    <view class="padding" :class="color=='white'?'bg-grey':'bg-white'">
    	<view class="cu-progress round">
    		<view :class="'bg-' + color" :style="[{ width:loading?'61.8%':''}]"></view>
    	</view>
    </view>
    

    进度条条纹

    添加striped设置条纹样式,active设置条纹动态效果

    进度条条纹

    <view class="padding bg-white">
    	<view class="cu-progress round sm striped active" >
    		<view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
    	</view>
    	<view class="cu-progress round sm margin-top-sm striped" >
    		<view class="bg-black" :style="[{ width:loading?'40%':''}]"></view>
    	</view>
    </view>
    

    进度条比例

    在给定class为cu-progress的标签内按需放置元素并进行分段设计即可

    进度条比例

    <view class="padding bg-white">
    	<view class="cu-progress radius striped active">
    		<view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view>
    		<view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view>
    		<view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</view>
    	</view>
    </view>
    

    进度条布局

    结合布局、图标等内容,可根据个人所需可以设置不同进度显示的样式

    进度条布局

    <view class="padding bg-white ">
    	<view class="flex">
    		<view class="cu-progress round">
    			<view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
    		</view>
    		<text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
    	</view>
    	<view class="flex margin-top">
    		<view class="cu-progress round">
    			<view class="bg-green" :style="[{ width:loading?'80%':''}]"></view>
    		</view>
    		<text class="margin-left">80%</text>
    	</view>
    </view>
    

     进度条相关class

    class 说明 可选值
    cu-progress 进度条必选值 ——
    radius 圆角 ——
    round  圆形 ——
    sm 小尺寸 ——
    xs 超小尺寸 ——
    striped 条纹 ——
    active  结合striped使用,设置动态条纹效果 ——

    Border&Shadow边框阴影 

    默认shadow是根据背景色设置的阴影,shadow-lg为长阴影,但是我肉眼没看出来二者的区别,真是在下愚钝,shadow-warp为翘边阴影(在下愚钝,它翘一点???),shadow-blur根据背景图片设置的阴影,有点意思,挺好。关于边框border没什么好展开的,直接看下面表格class说明就好。

    阴影1阴影2

    <view class="padding text-center">
    	<view class="padding-xl radius shadow bg-white">默认阴影</view>
    	<view class="padding-xl radius shadow bg-gradual-red margin-top">根据背景颜色而改变的阴影</view>
    	<view class="padding-xl radius shadow shadow-lg bg-white margin-top">长阴影</view>
    	<view class="padding-xl radius shadow shadow-lg bg-blue margin-top">长阴影</view>
    	<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
    	<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
    		<view>根据背景图而改变的阴影</view>
    	</view>
    </view>
    

     边框阴影相关class

    class 说明 可选值
    solid/solids 实线四周边框,solid为细边框 ,solids为粗边框 ——
    solid/solids-{{options}} 不同方向的边框(上下左右) top/right/bottom/left
    shadow 默认阴影(根据背景色变化) ——
    shadow-lg 长阴影 ——
    shadow-wrap 翘边阴影 ——
    shadow-blur 根据背景图片变化的阴影  

    Loading加载

    加载必选值cu-load

    加载状态

    loading正在加载中,over加载完成,erro加载失败

    加载中

    加载完成

    加载失败

    <view class="cu-load bg-blue loading"></view>
    <view class="cu-load bg-blue over"></view>
    <view class="cu-load bg-red erro"></view>

    弹框加载

    设置按钮,弹出弹框,显示加载状态,弹框模板设置load-modal

    弹框加载

    <view class="cu-bar bg-white margin-top">
    	<view class="action">
    		<text class="cuIcon-title text-blue"></text>弹框加载
    	</view>
    	<view class="action">
    		<button class="cu-btn bg-green shadow" @tap="LoadModal">
    			点我
    		</button>
    	</view>
    </view>
    <view class="cu-load load-modal" v-if="loadModal">
    	<image src="/static/logo.png" mode="aspectFit"></image>
    	<view class="gray-text">加载中...</view>
    </view>
    
    
    <script>
    	export default {
    		data() {
    			return {
    				loadModal: false
    			};
    		},
    		methods: {
    			LoadModal(e) {
    				this.loadModal = true;
    				setTimeout(() => {
    					this.loadModal = false;
    				}, 2000)
    			}
    		}
    	}
    </script>

     进度条加载

    设置进度条加载时需要添加load-progress,变量loadProgress为加载进度条的进度,load-progress-bar代表加载中进度条样式,load-progress-spinner代表加载中旋转的圆圈样式

    进度条加载

    <view class="action">
    	<button class="cu-btn bg-green shadow" @tap="LoadProgress">
    		点我
    	</button>
    </view>
    <view class="load-progress" :class="loadProgress!=0?'show':'hide'" style="top:100px">
    	<view class="load-progress-bar bg-green" :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"></view>
    	<view class="load-progress-spinner text-green"></view>
    </view>
    
    <script>
        export default{
            data(){
                return{
                    loadProgress:0
                }
            },
            methods:{
                LoadProgress(e) {
    				this.loadProgress = this.loadProgress + 3;
    				if (this.loadProgress < 100) {
    					setTimeout(() => {
    						this.LoadProgress();
    					}, 100)
    				} else {
    					this.loadProgress = 0;
    				}
    			}
            }
        }
    </script>

    加载相关class

    class 说明 可选值
    cu-load 加载必选值(除了进度条加载) ——
    loading 加载中 ——
    over 加载完成 ——
    erro 加载失败 ——
    load-modal 弹框加载 ——
    load-progress 设置进度条加载 ——
    load-progress-bar 进度条加载样式 ——
    load-progress-spinner 旋转加载样式 ——
    hide 隐藏 ——
    show 显示 ——

    交互组件

    这篇博客太长了,交互组件的介绍就另写一篇吧,ColorUI组件库简易教程之交互组件

    这只是个人的理解写的,有什么不足,望大佬指教,及时更正!

    展开全文
  • 小程序ColorUI框架初步使用教程及个人项目实战 最近在写自己的一个微信小程序项目《阿涛技术博客》,目前还在写前端小程序部分,之前我有用过小Weiui,Linui等微信小程序UI框架,在一次网上搜索的时候,看到了ColorUI框架...
    4e075469e11b366c51f99f69c4788578.png

    小程序ColorUI框架初步使用教程及个人项目实战

    最近在写自己的一个微信小程序项目《阿涛技术博客》,目前还在写前端小程序部分,之前我有用过小Weiui,Linui等微信小程序UI框架,在一次网上搜索的时候,看到了ColorUI框架后,当时就觉得眼前一亮,于是就顺便扫了一下ColorUI框架的示例小程序,第一感觉不是颜色炫丽,制作精美,常用微信小程序元素及常用组件,在这里面都能找到.

    下边开始介绍它的使用方法,我们先从github上下载的它的文件:

    GitHub地址:https://github.com/weilanwl/ColorUI/

    一、将ColorUI框架导入微信小程序开发者工具

    下载完成后,解开压缩包,我们会得到Colorui-UniApp,demo,template这三个文件夹,然后用于微信小程序开发的,就选template这个文件夹

    caae7f9745f9435254a084c27435cbea.png

    ColorUI框架

    template是一个空白的小程序模板,ColorUI框架作者已经将ColorUI的使用环境搭建好了,我们可以直接在上边开始我们自己的项目。

    二、下面再来介绍下ColorUI框架的初步使用.

    调用icon组件:

    736524cd3d8053637452ed103eafad72.png
     20

    调用文章卡片,未使用框架前,用flex布局,大家看下代码

     [Excel]Excel2017实用技巧之Vlookup的应用Excel31995个月前
    7982e4be9a52efc12b40c2c77e0da27f.png

    使用flex布局制作的文章卡片

    然后使用ColorUI框架后的就是这样.

    f13cb8e165058654b9de8e32f2de9072.png

    调用Colorui框架代码

    根据我自己小程序项目的需求,我把文章卡片上的两段文字加粗,当做文章标题使用,改造很方便,兼容性很强.

    9e6510eaa0eda19df67d84c1b27c9ca8.png

    根据个人项目需求,我改造之后的样子

    三、实战个人微信小程序项目

    b829326d59234fb32b33542648f55820.png

    阿涛技术博客小程序

    该小程序使用了微信小程序自定义导航

    "navigationStyle": "custom"

    微信小程序自定义导航常用的“胶囊按钮”不用自己去网上到处找代码,用ColorUI框架三行代码就解决.

    9d55dd15b669ece2dd4333eb9b0238ef.png

    小程序自定导航

    然后顶部和底部导航,还有轮播图片都是直接到colorUI框架的demo中直接复制粘贴,就能完成微信小程序UI页面.

    展开全文
  • 使用教程 项目里好多地方都用的到这个UI组件 今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。 1:从github上下载 https://github.com/weilanwl/ColorUI 2:将ColorUI-UniApp里面的文件夹colorui导入自己的...
  • ColorUI组件库简易教程之交互组件

    万次阅读 多人点赞 2019-11-15 11:18:27
    这主要是基于uni-app开发的,所以,请多看uni-app文档,了解一些标签、属性,可以更好的使用该组件 目录 交互组件 Bar操作条 Nav导航栏 List列表 Card卡片 Form表单 TimeLine时间轴 Chat聊天 Swiper轮播图...
  • 接着更新此系统教程,以期更深的理解前端开发及提升自已。本章我们来看看如何实现瀑布流布局,展示效果如下: 这里就不废话连篇进行分析了,以下为页面源码,其实资源图在本节下方,同学们自行下载使用。 <...
  • SwiftUI 色彩教程之什么是色差Color difference 什么是色差Color difference 两种颜色之间的差异或距离是颜色科学中关注的指标。它允许对以前只能用形容词描述的概念进行量化检查。这些性质的定量对于那些对色彩要求...
  • 翻译自Color Picker 本章介绍ColorPicker控件,提供其设计概述,并说明如何在JavaFX应用程序中使用它。 JavaFX SDK中的颜色选择器控件是一个典型的用户界面组件,使用户可以从可用范围中选择特定颜色,或通过指定...
  • AColor是后绑定令牌:SwiftUI仅在给定环境中使用它之前才将其解析为具体值。 话题 创建颜色 init(String, bundle: Bundle?) 创建一种命名的颜色。 init(Color.RGBColorSpace, red: Double, green: Double, blue: ...
  • macOS SwiftUI开发教程之不用使用NavigationLink实现页面切换 本文价值与收获 看完本文后,您将能够作出下面的界面 看完本文您将掌握的技能 VStack 设置窗体大小 .frame(maxWidth: .infinity, maxHeight: ....
  • 实战需求 SwiftUI Color技巧之如何混合两种颜色并设置过渡效果 ...AColor是后绑定令牌:SwiftUI仅在给定环境中使用它之前才将其解析为具体值。 UIColor 存储颜色数据和有时不透明度的对象。 宣言 class UIColor
  • 掌握accentColor基础使用 掌握UITabBar基础使用 基础知识 accentColor(_???? 设置此视图及其包含的视图的重点颜色 func accentColor(_ accentColor: Color?) -> some View 参量 accentColor 用作强调色的颜色...
  • SwiftUI 为我们提供了各种梯度选项,所有这些选项都可以通过多种方式使用。 Gradient 渐变器 A color gradient represented as an array of color stops, each having a parametric location value. gradient是一...
  • SwiftUI Tab切换触发Sheet 组件联动 本文价值与收获 看完本文后,您将能够作出下面的界面 看完本文您将掌握的技能 tab .onChange .sheet .accentColor(Color.orange) 基础知识 TabView 基础 使用交互式用户界面...
  • SwiftUI 实战之AnimationPair对形状进行动画处理 本文价值与收获 看完本文后,您将能够作出下面的界面 ... @State private var color = Color.blue var body: some View { GeometryReader { geo in
  • macOS SwiftUI 图表组件之 Spark line Chart火花线图 (教程含源码) 本文价值与收获 看完本文后,您将能够作出下面的界面 看完本文您将掌握的技能 绘制矩形设置圆角和背景颜色 透明度 Rectangle() .fill(Color...
  • SwiftUI Image 如何将照片设置为背景 本文价值与收获 看完本文后,您将能够作出下面的界面 看完本文您将掌握的技能 掌握ViewModifier 基础使用 掌握ZStack 掌握 Color 掌握 dgesIgnoringSafeArea(.all) 掌握 ...
  • SwiftUI 动画图形之绘制正弦波实现个性化波浪纹效果 (教程含源码) 本文价值与收获 看完本文后,您将能够作出下面的界面 一个可动画显示的SwiftUI形状,用于沿着底部绘制带有弯曲正弦波的矩形。 使用方法 ...
  • SwiftUI 阴影基础之 03 动画阴影 看完本文后,您将能够作出下面的界面 解决方案 阴影值也可以设置动画。看到这一点,假设我们想用动画更新上面最后一个示例的阴影颜色,半径和偏移量。为了实现这一点,我们需要...
  • SwiftUI 绘图之 绘制一组线段并动态添加Path 本文价值与收获 看完本文后,您将能够作出下面的界面 看完本文您将掌握的技能 掌握 Path 绘制线段 掌握 for 循环基础使用 掌握 stroke stroke(Color.blue, style: ...
  • 基础用法由type属性来选择tag的类型,也可以通过color属性来自定义背景色。标签一标签二标签三标签四标签五可移除标签设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画,如果不想使用,...
  • git config —global user.name “Nshen” //必须 git config —global user.email... git config —global color.ui “always” //或者"auto", always不仅Base环境是彩色,Dos里也是彩色的。 git config —global co
  • Choose accent color: Blue, Green (default), Teal, Indigo, Purple, Orange, Pink, Red, and Yellow Toggle auto-scroll to response Customized themes are synced with local session storage PWA: ...
  • Allegro教程

    2013-04-01 14:29:46
    2.6 Place Manual UI Auto-Hide ......................................................2-8 2.7 Direct Select of Alternate Symbol............................................2-8 2.8 Quickplace Options........
  • C++MFC教程

    热门讨论 2013-05-21 13:37:15
    Visual C++MFC入门教程 目录 +-- 第一章 VC入门 |------ 1.1 如何学好VC |------ 1.2 理解Windows消息机制 |------ 1.3 利用Visual C++/MFC开发Windows程序的优势 |------ 1.4 利用MFC进行开发的通用方法介绍 |----...

空空如也

空空如也

1 2 3 4 5
收藏数 83
精华内容 33
关键字:

colorui使用教程