weui-wxss README

The project's README from github.com/Tencent/weui-wxss. As one markdown file: README.md.

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

npm version Gitter

概述

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

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

使用

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 (Tencent/weui-wxss)

Searching Database…

15.3K ·GitHub
这是什么?WeUI 小程序版是一套基础的 WXSS/CSS 样式库,视觉风格与微信原生界面保持一致,由微信官方设计团队设计,适用于微信网页和小程序。
这是带逻辑的 UI 组件库,还是只有样式?它是纯 CSS/WXSS 样式库,不包含 JS 交互逻辑。如果你需要内置逻辑的现成交互组件,README 中提供了单独的 WeUI 小程序组件库链接。
怎么把它添加到小程序项目中?可以直接引用 dist/style/weui.wxss,或从 dist/style/widget 中只导入需要的组件;每个组件对应的 wxml 标记示例位于 dist/example 中。
有哪些不同的单位版本需要了解?默认版本使用 px 单位。如果小程序需要可缩放的 rpx 单位,可以使用 dist-rpx-mode 目录中单独提供的预构建版本。
WeUI 包含哪些组件?包括按钮、单元格、对话框、进度条、提示框、文章、操作表和图标等常见的小程序界面元素。
怎样预览这些组件?用微信开发者工具打开 dist 目录(而不是整个仓库),即可看到应用样式后的组件效果。
怎样开启深色模式?在页面的根节点上添加属性 data-weui-theme='dark',即可将 WeUI 切换为深色主题。
在哪里可以查看这些样式背后的视觉设计规范?weui-design 参考文档记录了本样式库所遵循的 WeUI 视觉规范。
Creator
Tencent
Size
2.6 MB
Stars
15.3K
Age
9y
Commits · 90 Days