Giter Club home page Giter Club logo

weui-wxss's Introduction

WeUI for 小程序 为微信小程序量身设计

npm version Gitter

概述

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含buttoncelldialogprogresstoastarticleactionsheeticon等各式元素。

以下内容是纯UI库,如果想使用逻辑封装版本,请看小程序组件库 - WeUI

使用

  • 样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss
  • 组件的wxml结构请看dist/example/下的组件

rpx版本

默认版本使用的是px。这里也提供rpx版本,文件在dist-rpx-mode目录下。

WeUI 黑暗模式

在根结点增加属性 data-weui-theme="dark" 如:

<view data-weui-theme="dark">
    ...
</view>

预览

微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目

preview

WeUI for 小程序

文档

WeUI 视觉标准参考 weui-design

License

The MIT License(http://opensource.org/licenses/MIT)

请自由地享受和参与开源

贡献

如果你有好的意见或建议,欢迎给我们提issue或pull request。

weui-wxss's People

Contributors

bearj avatar codeif avatar fuchao2012 avatar progrape avatar uxsi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

weui-wxss's Issues

border为什么没有用0.5px

border是用伪元素实现的,可最后没有用transform压缩。为什么要这么设计呢,如果不需要0.5px直接用border不是更方便

为啥好多相互冲突的定义

.weui-footer__link:before {
content: " ";
position: absolute;
left: 0;

top: 0;

width: 1px;

bottom: 0;

border-left: 1rpx solid #c7c7c7;
color: #c7c7c7;
left: -.65em;

top: 0.36em;

bottom: 0.36em;

}

有好多类似这样的前后定义冲突的,我是从./dist/weui文件夹下直接拖进项目的,不是很理解为啥会这样

开发者工具预览时,提示CssSyntaxError

weui-wxss version: 1.1.1

项目引入 dist/style/weui.wxss 文件,

在开发者工具 调试 界面,可以正常运行;

在开发者工具 项目 界面,点击预览按钮,会提示 CssSyntaxError。

wx20170325-134119

SearchBar 样式问题

  • 开发工具中取消按钮的 hidden 更新为 false 无效,无法显示。(应该是开发工具的 bug)
  • SearchBar input 超长时,整个 SearchBar 溢出屏幕,加上 max-width: 100% 测试 ok。

navbar的activeIndex BUG

navbar组件,当activeIndex为0没问题,若调整activeIndex的默认值为1(既默认选中第二个tab时),slider仍然标记在第一个位置上。

qq 20161227164848

FSEventStreamFlushSync

2016-12-14 23:41 gulp[24959] (FSEvents.framework) FSEventStreamFlushSync(): failed assertion '(SInt64)last_id > 0LL'

input 焦点问题

dist里的input示例里,点击qq输入框,取得焦点,然后点击手机号输入框,过一会才能取得焦点,这个延迟怎么能避免?因为这样会导致键盘反复的显示、隐藏

另外,当获取焦点时,placeholder会略微上移,在不同的input之间切换焦点时,焦点总是从输入框的最后移动到第一位,这样就导致placeholder会有闪烁

input中的文字对齐问题

系统默认的css中,input里的文字和普通text在y坐标有很大的偏差;
weui-wxss已经较好的解决了这个问题,在示例demo中非常完美,只是还有一个小瑕疵:
如果一个input表单没有放入weui-cell weui-cell_input这个view中
weui-input中的文字会比weui-label中的低约1rpx
image

ps:能否问个题外话,作者是微信官方团队的人员吗?

问个和 weui-wxss 无关的问题

我想问个问题,微信小程序的官方英文名称是什么?
目前看到的有 weapp(目测应该是 wechat app 的简称)、wxapp(微信 app 的简称)、mina。
具体是哪个,或是其他的名称?

tabbar表单太大上下滚动会遮挡标题

表单就是weui里面那种一行一行view的格式
当这个表单超出屏幕高度后,并且page样式设置到height:100%的时候
当上下滚动这个表单的时候,tabbar的标题部分会被表单遮挡,即使把标题的z-index设置很大也无效。

weui document

除了 example,weui for weapp 有文档嘛?现在没有的话有考虑加上文档嘛?

preview组件中 label在iOS和Android平台显示的不一样

.weui-form-preview__label

在Android平台中(微信开发工具模拟器与真机) label有最小四个中文字符的宽度,如果少于四个中文字符,会被拉长(红米note2).
iOS真机上显示不会被拉长[ip6s,ios10.3.3] (微信开发工具模拟器上会被拉长)

picker不能同时出现日期和时间

在example的input示例中:
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="weui-input">{{time}}</view> </picker>
https://weui.io/#input 这里显示的是同时有日期和时间的格式。
但是放在小程序时只有时间,没有日期

关于toast自动关闭

代码中显示的success和loading的toast都是在3s后关闭,不知道是否能够实现函数回调的的方式关闭,比如执行某个任务弹出toast,执行完成后关闭。谢谢!

picker-view

picker-view这个组件的滑动体验不怎么好,触发change事件的时间太长了

如何改变 primary color?

我在src下的color.wxss中更改了primary color的宏,在根目录删了dist目录后运行gulp,但是样式并没有改变。

目前的颜色应该不是weui-wxss定的,是默认的......

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.