Material design mobile component library for Vue3

Last update: Jun 27, 2022

VARLET

Material design mobile component library for Vue3

Intro

Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by partners in the community.

Features

  1. Provide more than 40 high quality general purpose components
  2. Components are very lightweight
  3. Developed by Chinese, complete Chinese and English documentation and logistics support
  4. Support on-demand introduction
  5. Support theme customization
  6. Support internationalization
  7. Support WebStorm, VS Code component syntax highlighting
  8. Support the SSR
  9. Support the Typescript

Install

CDN

varlet.js contain all the styles and logic of the component library, and you can import them.

<div id="app">div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js">script>
<script>
  const app = Vue.createApp({
    template: 'Button'
  })
  app.use(Varlet).mount('#app')
script>

Webpack/Vite

# Install with npm or yarn
# npm
npm i @varlet/ui -S
# yarn
yarn add @varlet/ui
import App from './App.vue'
import Varlet from '@varlet/ui'
import { createApp } from 'vue'
import '@varlet/ui/es/style'

createApp(App).use(Varlet).mount('#app')

GitHub

https://github.com/haoziqaq/varlet
Comments
  • 1. var-tabs导致var-back-top的fixed失效

    Bug report 🐞

    我看到var-tabs里面的没有var-swipe-item都有style="width: 360px; transform: translateX(0px);" transform会导致position: fixed;失效,造成var-back-top的fab不能固定在可滚动的页面上

    Try

    我尝试这样设置,问题得到解决,也没有引起其他的负面作用 .var-swipe-item { overflow: auto; transform: none !important; }

    这里不是很理解配置transform: translateX(0px);的作用

    Reviewed by little-alei at 2022-03-20 14:56
  • 2. List组件load事件无法正确触发

    Bug report 🐞

    List滚动到底后load事件偶尔无法正确触发

    Version & Environment

    Chrome / Firefox ...

    Expectation

    在不设置offset属性的情况下 正确触发load事件

    Actual results (or Errors)

    位置 packages/varlet-ui/src/list/List.vue Line 54

    const isReachBottom = () => {
      const containerBottom =
        scroller === window ? window.innerHeight : (scroller as HTMLElement).getBoundingClientRect().bottom
      const { bottom: detectorBottom } = (detectorEl.value as HTMLElement).getBoundingClientRect()
      return detectorBottom - toPxNum(props.offset) <= containerBottom
    }
    

    当容器为window时, 由于获取innerHeight 和 底部元素getBoundingClientRect精度问题, 导致return false

    Reviewed by illisac at 2022-02-11 11:50
  • 3. fix(ui/menu): reslove error of getting offsetHeight when alignment is…

    … set as bottom

    Checklist


    • [x] Fix linting errors
    • [x] Tests have been added / updated (or snapshots)

    Change information


    当 menu 菜单的 alignment 属性设置为 bottom, 在计算 top 时获取 menu 元素 offsetHeight 为 0,导致属性失效; 经猜测原因大概是由于获取时元素为不可见状态,故采用了 nextTick API 来解决

    Reviewed by ly980408 at 2021-12-30 07:19
  • 4. keep-alive 导致radio组件点击时间无效

    Bug report 🐞

    使用keep-alive进行单向缓存页面时,radio的点击事件无效

    重现步骤 1.表单A页面单向缓存 2.跳转B页面,然后回退 3.点击radio组件无响应

    控制台无任何报错信息

    Version & Environment

    "@varlet/ui": "^1.22.3", "vue": "^3.2.20", "vue-router": "^4.0.11", "vuex": "^4.0.2"

    Expection

    Actual results (or Errors)

    Reviewed by yexiaodong at 2021-10-11 09:56
  • 5. Varlet UI Playground

    Bug report 🐞

    I have just tried to use the Ui Playground - I really like this library, however it is not working! Please fix!

    Version & Environment

    Expectation

    Actual results (or Errors)

    The error I get is "Uncaught (in promise): Load failed"

    Reviewed by goldbergmoshe at 2022-05-23 19:56
  • 6. Unwanted scroll rail at the bottom side of selects

    Bug report 🐞

    When changing the selected value of a select, there's a scroll rail showing up at the bottom for about a second and then disappears. Below is the video that describes the bug: Select bug

    Version & Environment

    "@varlet/ui": "^1.25.0" "vue": "^3.0.0" "@varlet/touch-emulator": "^1.25.0"

    Expectation

    The select should open and close without any unexpected overflow issues.

    Actual results (or Errors)

    A rail at the bottom of the select appears and disappears when the dropdown is opening, closing or a certain value is selected for the first time.

    Reviewed by gevorgmelkumyan at 2022-01-26 14:07
  • 7. AppBar切换主题

    About styles 🛠️

    当我切换主题时,AppBar的背景色无法一起切换,我使用了下面的代码来控制整个app的主题:

    * {
      transition: background-color 0.25s;
      color: var(--color-text);
      background-color: var(--color-body);
    }
    

    而且运用了这个代码后switch开关的按钮样式也会受影响,不美观了。 高亮模式 切换后: 深色模式

    Reviewed by jnwx at 2022-01-22 07:57
  • 8. 希望varlet-cli脚手架支持tailwindcss框架

    Feature request 🚀

    Expected:

    • 业务系统使用了tailwincss框架,现在想使用valet-cli脚手架快速开发业务组件库,自己按照tailwincss安装了相关依赖并配置如下内容不生效,希望官方能提供帮组 ~

    Examples:

    // tailwind.config.js
    module.exports = {
      content: [],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    
    // postcss.config.js
    module.exports = {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        }
    }
    

    Programme:

    Others:

    Reviewed by Sunrise1970 at 2022-05-16 10:11
  • 9. space组件里面使用v-for渲染就失效了

    Bug report 🐞

    space组件里面使用v-for渲染没有产生间距

    Version & Environment

    v1.26.1

    Expectation

    预期v-for的每个元素出现间距

    Actual results (or Errors)

    没有出现间距

    varlet ui playground demo

    Reviewed by ChenErik at 2022-02-21 09:24
A configurable Mobile UI based on Antd Mobile and Vue
A configurable Mobile UI based on Antd Mobile and Vue

A configurable Mobile UI specification and Vue-based implementation.

Mar 30, 2022
Mobile UI Components based on Vue & WeUI
Mobile UI Components based on Vue & WeUI

Be Cool with [email protected]^2.3.0 and WeUI. Live Demo >> Sponsors 我们的产品 Requirements 暂未适配 [email protected],请注意。 [email protected]^2.3.0(for .sync modifier) [email protected]^2.0 [email protected]^7.6

Jul 1, 2022
Native mobile applications using Vue and NativeScript.
Native mobile applications using Vue and NativeScript.

Supporting NativeScript-Vue NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: and these awesome backers: Tiago Al

Jul 1, 2022
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

Jun 26, 2022
Mobile UI elements for Vue.js

Mint UI Mobile UI elements for Vue 2.0 Homepage Documentation Installation npm i mint-ui -S # for Vue 1.x npm i [email protected] -S Usage Import all compone

Jun 28, 2022
Lightweight Mobile UI Components built on Vue
Lightweight Mobile UI Components built on Vue

Vant Mobile UI Components built on Vue ?? 文档网站(国内) ?? 文档网站(GitHub) ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9

Jun 28, 2022
NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

Jun 28, 2022
A fantastic mobile ui lib implement by Vue.

A fantastic mobile ui lib implement by Vue.

Jun 28, 2022
💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

?? A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

Jun 28, 2022
🐡 A mobile UI toolkit designed for financial scenarios, and compatible with multiple platforms based on Vue DSL(Vue 2.0).
🐡  A mobile UI toolkit designed for financial scenarios, and compatible with multiple platforms based on Vue DSL(Vue 2.0).

Mand [email protected] ?? A mobile UI toolkit designed for financial scenarios, and compatible with multiple platforms based on Vue DSL(Vue 2.0). Webapp Unia

Jun 24, 2022
Hybrid mobile template built with Ionic Vue using capacitor for native builds
Hybrid mobile template built with Ionic Vue using capacitor for native builds

Ionic Vue Mobile Template 03 Hybrid mobile template built with Ionic Vue using c

Feb 13, 2022
Sahay-mobileapp - Sahay mobile app built using VueJS and Ionic
Sahay-mobileapp - Sahay mobile app built using VueJS and Ionic

A product to help humanity, and India as a country, especially during the novel

Jan 24, 2022
Material design mobile component library for Vue3
Material design mobile component library for Vue3

Material design mobile component library for Vue3

Jun 27, 2022
Vuetify Material Dashboard - Open Source Material Design Admin by Creative Tim
Vuetify Material Dashboard - Open Source Material Design Admin by Creative Tim

Vuetify Material Dashboard Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs. It will help you get started develop

Jun 28, 2022
Material Design UI library for Vuejs 2.0
Material Design UI library for Vuejs 2.0

Muse-UI Material Design UI library for Vuejs 2.0 Installation Muse-UI is available as an npm package npm install muse-ui -S yarn add muse-ui Usage imp

Jul 1, 2022
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

Jun 29, 2022
A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.

Keen UI Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. Keen UI is not a CSS framework. Therefore, it doesn't

Jun 17, 2022
Vue Material Dashboard - Inspired by Material Dashboard of Creative Tim.
Vue Material Dashboard - Inspired by Material Dashboard of Creative Tim.

vue-material-dashboard Vue Material Dashboard - Inspired by Material Dashboard of Creative Tim. This project is using Vue 2 and based on HTML version

Mar 23, 2022
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jun 20, 2021
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro

Ant Design Vue Pro An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue 基于 Vite2 Vue3 Ant-Design-of-

Jun 28, 2022