轻量可靠的小程序 UI 组件库 Vant Weapp

轻量可靠的小程序 UI 组件库 Vant Weapp

MIT
JavaScript HTML/CSS
跨平台
2018-08-13
王练
Vant Weapp 正在参加 2019 年度最受欢迎开源中国软件评选,请投票支持!
Vant Weapp 在 2019 年度最受欢迎开源中国软件评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票赢奖品
已投票

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

预览

扫描下方小程序二维码,体验组件库示例:

内置样式

Vant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。

使用指南

在 app.wxss 中引入内置样式

@import "path/to/vant-weapp/dist/common/index.wxss";

 

文字省略

当文本内容长度超过容器最大宽度时,自动省略多余的文本。

<view class="van-ellipsis">这是一段宽度限制 250px 的文字,后面的内容会省略</view>

 

1px 边框

为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。

<!-- 上边框 -->
<view class="van-hairline--top"></view>

<!-- 下边框 -->
<view class="van-hairline--bottom"></view>

<!-- 左边框 -->
<view class="van-hairline--left"></view>

<!-- 右边框 -->
<view class="van-hairline--right"></view>

<!-- 上下边框 -->
<view class="van-hairline--top-bottom"></view>

<!-- 全边框 -->
<view class="van-hairline--surround"></view>
的码云指数为
超过 的项目
加载中

评论(3)

魔法刀客
魔法刀客
谢谢作者
吾爱
吾爱
小程序限制:父层无法覆盖第三方组件内部的样式,组件配置参数是否丰富,是否灵活就非常重要了

Vant Weapp 0.5.11 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.11 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Bug 修复...

04/25 07:09

Vant Weapp 0.5.9 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.9 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Improvem...

04/04 06:40

Vant Weapp 0.5.8 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.8 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Improvem...

03/24 06:52

Vant Weapp 0.5.5 发布,有赞小程序 UI 组件库

Vant Weapp 0.5.5 发布了,Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 新版更新内容如下: Improvem...

02/27 07:21

Vant Weapp 0.4.10 发布,有赞小程序 UI 组件库

Vant Weapp 0.4.10 更新内容: Improvements Card: 更新样式 #1085 Card: 更新 thumb-mode 默认值为 aspectFit #1039 Field: 新增 show-confirm-bar 属性 #1040 TreeSelect: 更新样式 #1084 ...

2018/12/23 07:17

Vant Weapp 0.4.8 发布,有赞小程序 UI 组件库

Vant Weapp 0.4.8 更新内容: Improvements Icon: 增加更多基础图标 #980 Icon: 支持传入图片链接作为图标展示 #973 Tab: 新增 animated 属性 #957 Field: 新增 left-icon 插槽 #962 Field: ...

2018/12/04 07:46

Vant Weapp 0.3.8 发布,有赞小程序 UI 组件库

Vant Weapp 0.3.8 更新内容: Improvements Tab: 样式升级 #719 Badge: 样式升级 #718 Dialog: 样式升级 #717 TreeSelect: 适配 ipad #715 Card: 新增 lazyLoad 属性 #707 Bug Fixes 修复 Ce...

2018/10/10 07:37

Vant Weapp 0.3.7 发布,有赞小程序 UI 组件库

Vant Weapp 0.3.7 更新内容: Improvements Button: 优化禁用状态样式 #702 Button: 新增 round 属性 #704 Card: 新增 tag 属性 #705 Card: 新增 link-type 属性 #706 Card: 新增 thumb-link...

2018/10/09 07:46

Vant Weapp 0.3.2 发布,有赞小程序 UI 组件库

Vant Weapp 0.3.2 更新内容: Improvements Dialog: 新增弹出动画 #548 Dialog: 更新按钮色值 #543 Dialog: 新增 z-index 属性 #573 Popup: 新增 z-index 属性 #572 Toast: 新增 z-index 属性...

2018/09/14 07:27

Vant Weapp 0.3.1 发布,有赞小程序 UI 组件库

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 Vant Weapp 0.3.1 是一个小的 bug 修复版本,主要修复内...

2018/09/09 07:30

没有更多内容

加载失败,请刷新页面

暂无问答

在mpvue中引用vant weapp

使用mpvue作为框架,引入第三方的ui框架 vant-weapp vant-weapp: https://github.com/youzan/vant-weapp 下载vant-weapp的资源:https://github.com/youzan/vant-weapp.git 1、 2、 3、 4、全...

03/20 14:39
1K
0
移动端、PC端(前后台)、小程序常用的UI框架

移动端、PC端(前后台)、小程序常用的UI框架 1.移动端UI库 ①.Vant UI 官方地址:https://youzan.github.io/vant/#/zh-CN/intro github地址:https://github.com/youzan/vant 优点:用来做移...

10/17 10:31
76
0
如何在小程序里面 使用支持npm导入第三方库

https://segmentfault.com/a/1190000016376876 以 有赞新出的vant小程序ui库来讲解如何导入npm资源 为例 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步:...

2018/09/30 15:35
584
0
目前流行前端几大UI框架

在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架。 一.Mint UI 屏幕快照 2019-01-18 下午3.03....

09/19 21:54
89
0
史上最全的微信小程序代码大全源码下载

小程序QQ交流群:131894955 小程序CMS官网源码下载 源码链接: https://gitee.com/jeecg/jeewx-app-cms JAVA版微信管家平台(各种微信活动、公众号管理) 源码地址: https://gitee.com/jeecg/...

07/10 16:37
98
0
微信小程序实例源码大全下载

微信小应用示例代码(phodal/weapp-quick) 源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo) 源码链接:https://github.com/giscaf...

2018/08/23 14:11
328
0
mpvue中使用vant weapp【一】

直接进入重点谈谈遇到的坑。 根据项目需求,一个页面,同时出现以下几种组件 1、input输入框 2、picker选择器 3、时间选择器 4、textarea 5、图片上传和预览 首先看vant-ui发现以上几个组件都...

03/20 14:50
2K
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部