weilanwl / coloruicss Goto Github PK
View Code? Open in Web Editor NEW鲜亮的高饱和色彩,专注视觉的小程序组件库
Home Page: https://www.color-ui.com/
License: MIT License
鲜亮的高饱和色彩,专注视觉的小程序组件库
Home Page: https://www.color-ui.com/
License: MIT License
直接导入 Demo 样式如上图所示,代码版本地址:https://github.com/weilanwl/ColorUI/tree/70cf39ea1c04057043aa7dd09d0c52e51bce2012
这样的话, 可以更快(不用手工下载复制到组件目录)引入这个 UI库
组件-form表单选择组件右边的图标点击无效。
picker组件因为padding的关系,导致了右边图标附近的区域都是无法响应点击事件的,有强迫症的无法忍受,希望能完善这个问题,谢谢!
一个项目中用了这个UI框架,发现有一些组件没有.
比如: 开关组件,input加减输入框
这个ui是我目前见过最漂亮的,作者很厉害,不过希望作者写个说明文档
首先做的很不错
其次,这套wxss样式只能用在page层级
在自定义组件的wxml中基本无法使用
自定义组件的wxss中诸多的选择器限制是个麻烦
search bar放在modal组件中, 当键盘弹起的时候searchbar消失了。
组件需求 级联选择器 cascader
我自己想修改一些东西,改了半天发现没用,后面发现有!important,以致于我要再写个!important覆盖才行,不能按照CSS正常的层叠的优先级,然后我在colorui.wxss里搜索!important关键字,发现匹配166个,就是说基本全篇都是,能不能把这些去掉呢?
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
里面也说了:“Never use !important when you're writing a plugin/mashup.”
你们作为第三方组件库,应该要避免这种情况吧?
在控件中使用
@import '/path/to/colorui/colorui.wxss';
会报错
Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors
导航/nav可滚动滑动感觉慢,应该是没有弹性效果导致的
求加微信 wxliyatang
如截图所示,colorUI 的全局样式,已经影响到自定义组件样式,尤其还有后缀有 !important 的属性。详见微信小程序自定义组件 - 使组件接受全局样式。
很nice啊,小程序搜索找到的,漂亮
列表筛选组件什么时候出一个
开发中小程序顶部通知还是挺常用的
非常棒的组件,来自一个后端工程师的问候,希望可以持续更新下去
界面错乱
https://developers.weixin.qq.com/community/develop/doc/0004c8feb580306092470ca2754c00
微信官方不支持“>”父子选择器,至少scroll-view组件是不支持的
希望可以优化wxss代码,不使用父子选择器
就是在右边内容上下滑动的时候,左边的tab没有切换到对应的位置
组件贡献指南
页面样式做得很棒,但是,给一个小小的建议。
由于 ColorUI 是一个几乎纯 CSS 的库,那么有时为了达到我们自己产品的需求,需要引用其它的库。
大的方向倒是没有什么,只是在字体图标上面:
很多库都用了 iconfont
,那么,他们的 font-family
全部是都是 iconfont
。
所以,我建议:将 font-family
设置成自己的名称,比如:
// icon.wxss
[class*="icon-"] {
font-family: "cufont" !important; // 修改此行
font-size: ...
...
}
@font-face {
font-family: "cufont"; // 修改此行
src: ...
...
}
// colorui.wxss 中所有用到 iconfont 的地方,比如:
image.loading::after {
content: "\e7f1";
font-family: "cufont"; // 修改此行
position: ...
...
}
设置成上述名称后,比较能够保证图标的独立性,避免因为 content
和别人冲突后,被覆盖的问题。尤其是那些含有 js 组件的类库,几乎都是后加载的,一般都会覆盖 wxss。
界面也太漂亮了趴!膜拜大佬,可以请教大佬后端该怎么搞吗
正常情况下,input组件的placeholder提示文字是左对齐的。在Modal模拟窗中使用input组件,显示的placeholder是居中,请问如何解决呢?谢谢
建议
1、出一个文档
2、弹框的比较马虎,需要细节化一下。
3、希望能类似于PC一样 有一个公共核心 css(wxss)库,
我看过很多开源的UI框架,都喜欢写成一个一个组件,可能很多时候 别人用不着这些组件,他们需要一个核心的样式库而已。
总体来说,非常棒。 出个文档就很好了、
项目引入colorui后 <icon> 标签就都失效了。
目前是我把[class*="icon-"] 改成 [class*="iconfont-"] 其它 icon- 也都相应改成 iconfont- 就好了。
导航滑动,如何切换,增加滑动事件
Look forward to coming!
代码如下
test.wxml
<view class="solid box">
<button bindtap="clickConsole" class="btn primary">测试 solid </button>
</view>
test.js
Page({
clickConsole: function() {
console.log('click!');
}
})
css也能导致按钮的bindtap事件失效,发现把.solid::after
的宽度高度设为100%就可以了,或者加上pointer-events: none
.solid::after {
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
content: " ";
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none
}
什么时候发布文档呢?
https://github.com/weilanwl/ColorUI/blob/master/demo/pages/component/list/list.wxml
以这个为例,list标签,直接包含了item标签。
hover-class只有view标签才能支持,而且css中使用的限定子节点的方式 list.menu-avatar>item
所以,目前list中的item看起来无法设置hover class
很多时候,一个列表里面的item需要进行排序,如果能提供组件的拖拽功能,item就能自由进行排序,谢谢
体验中无意发现的,反复操作了很多次,只有一两次是正常的
?
请问modal框下面的原生组件,比如textarea会穿透modal,有没有办法
组件写的很好,正在学习。刚开始学习小程序开发,关于页面能开源出来吗?
首先感谢作者的奉献,这里想请教本项目是什么开源协议?
图标名称与图标错位;
是否共享图标库(www.iconfont.cn)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.