Color-UI 简介及使用教程

这篇具有很好参考价值的文章主要介绍了Color-UI 简介及使用教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这是一个鲜亮的高饱和色彩,专注视觉的小程序组件库 。

ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件,一些含有交互的操作我也有简单写,可以为你开发提供一些思路。需要你引入样式后可以根据class来调用使用。只需要在HTML或wxml标签中加入想要样式的class类名,就可以调用组件库中提前编辑好的样式,大大提高了开发效率。

ColorUI下载地址

使用:

                1.原生微信小程序开发;

                2.UniApp开发;

 原生微信小程序开发

  • 已有项目

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

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

//App.wxss

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

使用自定义导航栏

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

App.js 获得系统信息

//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 配置取消系统导航栏,并全局引入组件

//App.json

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

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

//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 右侧区域(小程序端可使用范围很窄!)

UniApp开发

  • 已有项目

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

 引入关键Css文件 main.css icon.css

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

使用自定义导航栏

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

App.vue 获得系统信息

//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 配置取消系统导航栏

//pages.json

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

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

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

//main.js

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

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

//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 右侧区域(小程序端可使用范围很窄!)

知识分享还会持续更新,求关注~文章来源地址https://www.toymoban.com/news/detail-404793.html

到了这里,关于Color-UI 简介及使用教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 本地Git的初始设置(账户名+邮箱+color.ui)

    我们下载安装好Git,还需做一些基础的配置,从而方便我们以后利用Git时的工作! 使用环境:Windows 10专业版+Git2.36.1 首先,在开始窗口或搜索窗口打开\\\"Git Bash\\\",即可进入Git指令输入程序。 注意:以下命令仅是代表示例(即字符串里面的内容,为了保护隐私),把相应内容改成

    2023年04月09日
    浏览(25)
  • 【单元测试】测还是不测,这是一个问题

    这篇文章也可以在我的博客中查看 相信大家从小就被千叮万嘱要做单元测试。然后秉承这一信念,成为了一个测试狂魔。凡有代码,测!覆盖!最终,一波操作猛如虎:467测试,0错误, 0自信 。 第二天。 你为了优化,颤抖着手更改了一行代码。果不其然发现牵连了 1e9 个测

    2024年02月03日
    浏览(49)
  • Android中保持屏幕常亮的三种使用方法

    目录 一、设置Flag 二、使用View类中的属性方法 1、Xml布局中设置: 2、功能代码中设置: 三、Wakelock 锁定机制 1、简介 2、作用 3、分类标志 4、使用方法 (1)在AndroidManifest.xml中设置权限 (2)通过PowerManager类获取WakeLock类的实例对象 (3)注意事项 (4)优化措施 (5)总结

    2024年02月07日
    浏览(44)
  • 原生微信小程序自定义tabbar引入Color UI样式

    Color UI 是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值,高度自定义的 Css 组件库。本文介绍了原生微信小程序如何自定义 tabbar 并使用 Color UI 样式 Color UI 的安装请自行参考官方文档,以下步骤以已安装Color UI为前提 重点:配置 tabbar.custom = true 在代码根目录下添加

    2024年02月03日
    浏览(57)
  • 程序员不喜惯关闭电脑,这是一个伪命题

    目录 1.程序员不习惯关机,是一个伪命题 2.长期不关闭电脑,影响系统运行速度和性能 3.长期不关闭电脑,影响电脑硬件寿命 4.保持良好心态,不要人云亦云 5.长期不关闭电脑会给信息安全带来更多的隐患 6.是否关机应当因工作内容而已         网文中流行一种说法,说

    2024年02月20日
    浏览(36)
  • 传道授业20年,这是一个老网工的初心

    下午好,我是老杨。 昨天又是教师节 ,虽然是网工,但因为经常写写文章、聊聊技术,很多小友都会很客气地称我一声杨老师。 老杨收到了很多“教师节快乐”的私信,在此多谢各位小友的祝福 如果说当网工,是我蓄谋已久为之奋斗的事业,那输出技术干货、行业解读、和

    2024年02月09日
    浏览(38)
  • 预测“叫停GPT-4后续AI大模型”后续:这是一个囚徒困境

    生命未来研究所 (Future of Life Institute) 发表了一封公开信,信件:https://futureoflife.org/open-letter/pause-giant-ai-experiments/,呼吁暂停对比 GPT-4 更强大的模型进行 AI 训练,并有大量人签署了这份公开信,签署人包括马斯克及图灵奖获得者Bengio。 这封公开信指出,最近几个月,人工智

    2023年04月21日
    浏览(34)
  • 这是一个tg群组索引机器人,群组收录,群组索引

    tg的索引机器人,今天终于做出来了,索引群组收录 主要功能: 索引机器人+后台管理 积分管理、自动回复、广告管理、消费管理。 机器人管理:搜索管理、机器人群组管理、群组收录、营销软件卡密管理; 担保交易:商家入驻、商品发布、商品管理、订单管理、消费

    2024年02月05日
    浏览(46)
  • Unity3D通过代码修改RGB值来控制UI与物体的Color颜色

    在实际应用过程中,经常有需要将某一物体颜色修改成特定颜色的情况,此时Color中自带的颜色就不够用了,此时我们就需要通过用代码修改RGB值来控制颜色。 下面以修改TextMeshProUGUI的字体颜色为例 这样直接运行,无论Color后的括号里是什么样的参数,字体颜色大概率为白色

    2024年02月11日
    浏览(64)
  • SourceTree安装、跳过登陆、 这是一个无效的源/url路径多种原因解决方案

    https://www.sourcetreeapp.com/ 安装 SourceTree 时,需要使用atlassian授权,即使翻墙这个过程也会出现反应慢,收不到邮件或短信的问题,现提供跳过 atlassian账号 授权方法。 安装之后,转到用户本地文件夹下的 SourceTree 目录,没有则新建: %LocalAppData%AtlassianSourceTree 请把以上路径直

    2024年02月05日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包