ColorUI-UniApp组件库使用笔记

最新推荐文章于 2024-05-20 09:38:49 发布
最新推荐文章于 2024-05-20 09:38:49 发布
阅读量3.5k 收藏 6
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44763569/article/details/106409120
版权

uniapp里面的一个UI组件库
https://ext.dcloud.net.cn/plugin?id=239

这是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库

使用教程

项目里好多地方都用的到这个UI组件 今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。

1:从github上下载
https://github.com/weilanwl/ColorUI

image

2：将ColorUI-UniApp里面的文件夹colorui导入自己的项目

image

3：打开App.vue文件，引

最低0.47元/天 解锁文章
前端王小婷
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
element-ui-reading-source:阅读element-ui框架组件源码笔记
03-23
Element-UI源码阅读笔记
遗传算法学习笔记 -DEAP库学习笔记
最新发布
06-12
DEAP库学习笔记
uniapp——使用colorUI、自定义顶部导航栏、漂亮的卡片时间列表（包括微信小程序时间列表）
wy313622821的博客
12-17 6858
简介：使用colorUI实现如下的效果： 1、导入colorUI 一、下载colorUI源码解压，复制根目录的 /colorui 文件夹到你的根目录 二、App.vue 引入关键Css main.css icon.css <style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的项目css */ .... </style> 三、p
uni-app 微信小程序之整合colorui
@必意玲
12-04 353
uni-app版本支持多端，兼容性经过近上万使用者测试、反馈、改进，目前已非常稳定！说白了，就是uni-app版本的，只是uni-app版本更适合使用colorui。
Uniapp组件详解
chen__zi_的博客
05-20 1779
组件是Uniapp中最基本的构建模块，它封装了视图和逻辑，可以复用和组合。组件可以是一个简单的按钮，也可以是一个复杂的页面。通过组件化开发，可以提高代码的复用性、可维护性和可读性。除了内置组件，开发者还可以根据需要创建自定义组件，实现更复杂的功能和界面。下面将介绍自定义组件的基本方法和高级技巧。首先，在项目的components目录下创建一个新的组件文件夹，如和。
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(一)
Why_does_it_work的博客
06-29 4373
Vant：Vant 是一个基于 Vue.js 和 WeUI 的移动端组件库，提供了丰富的 UI 组件，包括按钮、表单、弹窗、导航、轮播等等。Vant 具有易用性和良好的性能，在 UniApp 中广泛应用。uView UI：uView UI 是一款专为 Vue.js 开发的跨平台 UI 组件库，在 UniApp 中同样适用。它提供了一系列精美的组件和丰富的功能，如视图容器、表单、图标、工具类等，同时还支持自定义主题和多语言切换。
uniapp使用colorUI
weixin_47175934的博客
12-22 1674
1：把colorui里三个文件复制到自己项目中去。2：想要的c复制到自己的项目中。
uniapp 使用 colorUI
08-24 1507
1、新建uniapp项目 test 2、导入colorUI示例项目用hbuildx导入（点击跳转到示例项目） 3、将示例项目中的 colorui 文件夹复制到 test 项目的根目录 4、 test/App.vue 中引入 css <style> @import "./colorui/main.css"; @import "./colorui/icon.css"; @import './common/app.css' </style> 完成以上步骤后，可以使用col
uniapp如何引入colorUI
Muchen灬
03-12 6027
color UI 使用文档 https://www.kancloud.cn/m22543/colorui/1289227 Uni-app中引入第三方ColorUI 1.去colorui官网下载colorui压缩包 官方网址：https://www.color-ui.com 2.解压压缩包，将colorui文件夹放到自己的项目中 3.在main.js中引入cu-custom组件 import c...
iOS-UI-Note:UI笔记
05-05
iOS-UI-NoteUI笔记UI阶段学习的经验和心血,分享给大家希望能够为这个行业做出一份贡献
android图片处理大师
02-06
对手机中的png图片进行裁剪，修改宽高，抠图等处理,支持批处理图片！优化了UI，综合运用了seletor,handler,thread,adapter,progressbar,sharedpreference,文件读写，坐标换算，onTouch事件监听处理，重写view实现灰色蒙板等效果(没有做多点触屏因为太麻烦了）等,对新人系统运用安卓知识完成项目有帮助！
vue mint-ui学习笔记之picker的使用
08-29
Vue Mint-UI Picker 组件使用详解 本篇文章主要介绍了 Vue Mint-UI 中的 Picker 组件的使用方法，通过三个示例，展示了 Picker 的基本使用、分组使用和 change 事件的使用。 Picker 组件的基本使用 在 Vue 项目中...
机器学习scikit-learn使用笔记
02-24
本文来自于csdn，本文是一篇机器学习Scikit-learn的笔记，主要介绍Scikit-learn的安装和使用，希望会对您的学习有所帮助。sklearn库依赖于numpy、scipy、matplotlib库，首先安装numpy，然后安装scipy、matplotlib库...
vue,uni-app 移动端UI框架（组件库）
热门推荐
PrimaryColor
01-25 1万+
一、Vant UI 轻量、可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro 二、uView: 多平台快速开发的UI框架。 https://www.uviewui.com/components/intro.html 三、Muse UI 基于 Vue 2.0 优雅的 Material Design UI 组件库。 https://muse-ui.org/#/zh-CN 四、Cube UI didi.github.io/cub
uniapp组件库推荐
qq_63026743的博客
04-03 1632
三、uCharts组件库 -- 可以兼三端。一、ThorUI组件--简单好用。四、Echarts组件库。
扩展应用功能的无限可能——UniApp生态系统中的组件库探索(二)
Why_does_it_work的博客
06-29 661
开发定制化组件库是一个复杂而细致的过程，需要深入了解项目需求和目标。以下是一个可用于详细需求分析的示例，可能会超过10000字的长度要求，请根据实际情况进行适当调整和缩减。对每个组件定义输入属性，描述其类型、默认值和验证规则。定义组件触发的事件，以便其他组件或外部代码监听并做出响应。根据需要，定义组件中的插槽，以便使用方可以自定义组件的内容。在项目的根目录下创建一个名为components的文件夹，用于存放自定义组件。在components文件夹下创建一个名为Button。
uni-app--》uView组件库：提升您的uni-app开发体验
ztK63LrD的博客
05-21 2669
uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。
uniapp(二) 之 uniapp 搭建与组件库的引用
沉淀，积累、进步
06-05 1215
uniapp组件引用ThorUI
element-ui中table组件高度，笔记本电脑和台式电脑显示不同
05-24
element-ui中的table组件默认高度是自适应的，根据表格内容的多少来自动调整高度，因此在不同设备上显示的高度可能会有所不同。如果你想固定表格的高度，可以通过设置`height`属性来实现。例如： ```html <el-table :data="tableData" height="500"></el-table> ``` 这样就可以将表格的高度设置为500像素，无论在笔记本电脑还是台式电脑上都会显示相同的高度。当然，如果数据太多，也可能会出现滚动条。此时可以通过设置`max-height`属性来限制最大高度，并让表格出现滚动条。例如： ```html <el-table :data="tableData" height="500" max-height="800"></el-table> ``` 这样就可以将表格高度设置为500像素，同时限制最大高度为800像素，超过800像素时会出现垂直滚动条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值