Vant Weapp輕量可靠的小程序 UI 組件庫
Vant Weapp 是有贊移動(dòng)端組件庫 Vant 的小程序版本,兩者基于相同的視覺規(guī)范,提供一致的 API 接口,助力開發(fā)者快速搭建小程序應(yīng)用。
預(yù)覽
掃描下方小程序二維碼,體驗(yàn)組件庫示例:
內(nèi)置樣式
Vant 中默認(rèn)包含了一些常用樣式,可以直接通過 className 的方式使用。
使用指南
在 app.wxss 中引入內(nèi)置樣式
@import "path/to/vant-weapp/dist/common/index.wxss";
文字省略
當(dāng)文本內(nèi)容長度超過容器最大寬度時(shí),自動(dòng)省略多余的文本。
<view class="van-ellipsis">這是一段寬度限制 250px 的文字,后面的內(nèi)容會(huì)省略</view>
1px 邊框
為元素添加 Retina 屏幕下的 1px 邊框(即 hairline),基于偽類 transform 實(shí)現(xiàn)。
<!-- 上邊框 --> <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>
評(píng)論
圖片
表情
