weilanwl / coloruicss Goto Github PK

组件写的很好，正在学习。刚开始学习小程序开发，关于页面能开源出来吗？

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

组件贡献指南

求加微信 wxliyatang

导航/nav可滚动滑动感觉慢，应该是没有弹性效果导致的

图标名称与图标错位；
是否共享图标库(www.iconfont.cn)

如截图所示，colorUI 的全局样式，已经影响到自定义组件样式，尤其还有后缀有 !important 的属性。详见微信小程序自定义组件 - 使组件接受全局样式。

建议处理方式：

1. 借鉴 Vant 的做法，例将 button 前缀字符为 van-button。
2. 弃用标签名选择器，改用 class 表示，缺点是 Html 标签变长了一些。

什么时候发布文档呢？

如图：

建议
1、出一个文档
2、弹框的比较马虎，需要细节化一下。
3、希望能类似于PC一样 有一个公共核心 css（wxss）库，
我看过很多开源的UI框架，都喜欢写成一个一个组件，可能很多时候 别人用不着这些组件，他们需要一个核心的样式库而已。

总体来说，非常棒。 出个文档就很好了、

在控件中使用
@import '/path/to/colorui/colorui.wxss';

会报错
Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors

我自己想修改一些东西，改了半天发现没用，后面发现有!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.”
你们作为第三方组件库，应该要避免这种情况吧？

直接导入 Demo 样式如上图所示，代码版本地址：https://github.com/weilanwl/ColorUI/tree/70cf39ea1c04057043aa7dd09d0c52e51bce2012

Look forward to coming!

体验中无意发现的，反复操作了很多次，只有一两次是正常的

页面样式做得很棒，但是，给一个小小的建议。

由于 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。

导航滑动，如何切换，增加滑动事件

界面错乱

项目引入colorui后 <icon> 标签就都失效了。
目前是我把[class*="icon-"] 改成 [class*="iconfont-"] 其它 icon- 也都相应改成 iconfont- 就好了。

开发中小程序顶部通知还是挺常用的

？

很多时候，一个列表里面的item需要进行排序，如果能提供组件的拖拽功能，item就能自由进行排序，谢谢

编辑器里一切正常；

但手机预览就缺少样式及图标，这是怎么回事？

模态窗口的侧边抽屉高度不对，忘记减掉顶部导航栏的高度（并且好多底部的功能栏没有兼容iPhoneX，iPhoneX底部有34px的安全区）

正常情况下，input组件的placeholder提示文字是左对齐的。在Modal模拟窗中使用input组件，显示的placeholder是居中，请问如何解决呢？谢谢

就是在右边内容上下滑动的时候，左边的tab没有切换到对应的位置

列表筛选组件什么时候出一个

很nice啊，小程序搜索找到的，漂亮

首先感谢作者的奉献，这里想请教本项目是什么开源协议？

这个ui是我目前见过最漂亮的，作者很厉害，不过希望作者写个说明文档

组件需求 级联选择器 cascader

非常棒的组件，来自一个后端工程师的问候，希望可以持续更新下去

一个项目中用了这个UI框架,发现有一些组件没有.
比如: 开关组件,input加减输入框

https://developers.weixin.qq.com/community/develop/doc/0004c8feb580306092470ca2754c00

微信官方不支持“>”父子选择器，至少scroll-view组件是不支持的
希望可以优化wxss代码，不使用父子选择器

首先做的很不错
其次，这套wxss样式只能用在page层级
在自定义组件的wxml中基本无法使用
自定义组件的wxss中诸多的选择器限制是个麻烦

很漂亮，但是希望有下图类似按钮组件。

这样的话, 可以更快(不用手工下载复制到组件目录)引入这个 UI库

代码如下
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
}

组件-form表单选择组件右边的图标点击无效。
picker组件因为padding的关系，导致了右边图标附近的区域都是无法响应点击事件的，有强迫症的无法忍受，希望能完善这个问题，谢谢！

请问modal框下面的原生组件，比如textarea会穿透modal，有没有办法

search bar放在modal组件中， 当键盘弹起的时候searchbar消失了。

界面也太漂亮了趴！膜拜大佬，可以请教大佬后端该怎么搞吗