BalmUI - 基于 Vue 3 的模块化且高度可定制化的 Material Design 风格 UI 组件库

最新推荐文章于 2024-04-17 10:06:11 发布
最新推荐文章于 2024-04-17 10:06:11 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： 前端优秀开源项目 文章标签： ui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583710/article/details/121927624
版权

BalmUI - 基于 Vue 3 的模块化且高度可定制化的 Material Design 风格 UI 组件库

一款漂亮大气、交互动效优秀的 Vue 3 UI 组件库，看看都有哪些值得关注的地方吧。

关于 BalmUI

BalmUI 是一款由 Balm.js （一款类似 Vue CLI 的前端工作流工具）团队打造前端 UI 组件库，基于最新的 Vue 3 构建，开箱即用，定制化强，设计风格完全遵循谷歌的 Material Design 设计规范，是一款交互体验非常优秀的 UI 组件库。

balmui 官网

balmui 弹框组件

BalmUI 的特色

  • 提炼自企业级中后台产品的交互效果和视觉风格，美观大方，细节体验极佳
  • 开箱即用。不仅是一款高质量的 Vue 组件，还有大量封装好的插件/指令/常用工具库供调用
  • 内置图标库。集成最新的 Material Icons 图标库
  • 所有组件和插件均高可定制化，并且可被独立使用

balmui 内置图标库

开发上手体验和使用建议

使用 BalmUI 创建项目很简单，不仅支持自家的 Balm CLI，还支持 Vue CLI 或者 当前很火热的 Vite，甚至也可以通过 标签引入的方式来快速创建。

官网提供了专门编写的中文文档，通俗易懂，表达准确，开发查阅时阅读流畅，这很难得。同时提供了大量的代码例子，大大降低了学习成本。在文档方面，看下来相比 element ui 要更清晰，查询体验更胜一筹。

balmui 表格组件

BalmUI 支持的浏览器范围与 Google MDC Web 保持一致：

  • Chrome on Android, Windows, macOS, and Linux
  • Firefox on Windows, macOS, and Linux
  • Safari on iOS and macOS
  • Edge on Windows
  • IE 11 on Windows

鉴于在手机浏览器上表现也很好，以及 Material Design 漂亮大气的 UI 设计风格，在很大程度上拓宽了 BalmUI 的使用场景，不仅可以用来搭建桌面 web 项目，也可以通过类似 vue native / uni-app 这样的方式来开发手机应用。

国内中后台 admin 管理系统和很多 App 的风格都偏中性，看起来貌似都千篇一律，像之前推荐的 ArcoDesign / Ant Design 这样具有设计系统、设计规范/设计指南的组件库并不多见。所有在新项目 UI 风格选择阶段，不妨考虑选择这一款优质、漂亮的 Vue 3 UI 组件库，能让项目整体素质提高，并且令人眼前一亮。

免费开源说明

BalmUI 是一款免费开源的前端 UI 组件库，基于 MIT 开源协议在 Github 上开放量源码，任何个人和公司都可以免费下载使用。当然 BalmUI 也有 Vue 2.x 版本，在这：BalmUI for vue@2.x

原文链接：https://www.thosefree.com/balmui

那些免费的砖
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
balm-ui：基于Material Design和Vue的模块化且可自定义的UI库
02-03
Vue.js的下一代Material UI 介绍 是的模块化和可自定义的 UI库。 :party_popper: 现在， （v9.0）支持Vue 3.0 产品特点 专为Web应用程序设计的企业级UI 开箱即用的一组高质量Vue组件/插件/指令/实用程序 强大的主题定制细节 集成了一整套最​​新的Material Icons 所有组件和插件都是高度可定制的，可以单独使用 文档和演示 访问 访问 （适用于Vue 3.0） 快速开始 要求 Vue.js@2.1.0+ :rocket: （推荐）或或其他工具链 1.对于Balm CLI（推荐） 1.0创建一个项目 balm init vue my-project cd my-project 1.1安装balm-ui yarn add balm-ui # OR npm install --save balm-ui 1.2配置 更新balm.config.js 无需下载即可获取（或下载并解压缩到/path/to/my-project/app/fonts ） const api = ( mix ) => { if ( mix
Vuetify - 广受欢迎的 Material Design 风格的开源 UI 框架
那些免费的砖
11-10 2713
全世界范围内广受欢迎的 Vue UI 框架，一个非常精致的 Material Design UI 套件。 Material Design 风格 UI 框架 Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。 Material Design 是 Google 推出的设计语言，颜色鲜艳、动画效果突出，旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。.
探索Balm UI：一个现代前端框架的强大助力
最新发布
gitblog_00074的博客
04-17 328
探索Balm UI：一个现代前端框架的强大助力 项目地址:https://gitcode.com/balmjs/balm-ui Balm UI 是一款基于Vue.js的现代化UI组件库，专为构建高效、优雅的Web应用程序而设计。它提供了丰富的预置组件和易于使用的API，旨在简化开发流程并提升用户体验。 项目简介 Balm UI的核心理念是“简洁、实用”。它的目标是通过提供一套与Material D...
Vue Material - 基于谷歌 Material Design 打造的前端组件库，用 Vue 开发海外应用的绝佳选择
那些免费的砖
12-12 3815
一位朋友问我用 vue 开发 APP 在谷歌商店上架，有什么简单的 UI 组件库，我推荐了这款，同样推荐给各位。
vue.js ui_Vue.js的Material Design样式UI
cuk5340的博客
07-29 104
vue.js ui 克雷基基伊 (clearaki-ui) MD style UI for Vue.js. Vue.js的MD样式用户界面。 View Documentation 查看文档 Download Source 下载源 用 (Use) npm i clearaki-ui // main.js import AkiUI from 'clearaki-ui' Vue.use(AkiU...
vue.js 组件化_Vue.js的Material Design样式化组件
cuk5340的博客
07-25 175
vue.js 组件化 材料成分Vue (Material Components Vue) Material-components-vue integrates the mdc-web (by google) vanilla components following the simple approach. Material-components-vue按照简单的方法集成了mdc-web(由Goo...
基于Vue 2.0的模块化前端 UI 组件库小结
11-29
AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库，主要用于快速开发 PC 网站产品。 专门为桌面应用程序构建，AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程，以及一个体面的干净整洁的 UI ...
mdb-vue-ui-kit:Vue 3和Bootstrap 5和Material Design 2.0 UI套件
03-22
Vue 3和Bootstrap 5和Material Design 2.0 UI套件 500多种材料UI组件 超级简单，一分钟安装 详细的文档和多个实际示例 Vue 3 庞大而活跃的社区 MIT许可证-免费供个人和商业使用 受到2000000+开发人员和设计师的...
基于vue3的炫酷风格ui组件库
11-20
基于vue3的炫酷风格ui组件库。基于vue3的炫酷ui组件库 特点：活力性 可玩性 原子性 组件库使用方式参考elementUI 使用 # npm npm install viog-ui #yarn yarn add viog-ui 特殊标注样式属性请添加前缀--vi-组件...
基于Vue的MaterialDesignUI库Vue-Carbon.zip
07-19
vue-carbon，基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。安装目前只使用 npm 安装，和使用 webpack 项目的应用npm install vue-carbon --saveimport Vue from 'vue' import VueCarbon from 'vue-carbon' Vue.use(VueCarbon)简单使用例如这个 Refresh Control 组件的demo页面<template> <div class="page">   <header-bar>     <icon-button slot="left" @click="back()" icon="arrow_back"></icon-button>     <span>Refresh Control</span>     <icon-button slot="right" @click="refresh()" icon="refresh"></icon-button>   </header-bar>   <content v-el:trigger>     <refresh-control @refresh="refresh" :trigger="$els.trigger" :refreshing="refreshing"></refresh-control>     <content-block>       <p class="refresh-desc">          按住 - 下拉 - 释放可以刷新数据       </p>     </content-block>     <list>       <item-cell v-for="item in items">         <item-title>           {{item}}         </item-title>       </item-cell>     </list>   </content> </div> </template>[removed]export default {  data () {    return {      items: ['1', '2', '3', '5', '6', '7', '8', '9', '10'],      end: 10,      refreshing: false    }  },  methods: {    back () {      window.history.back()    },    refresh () {      this.refreshing = true      setTimeout(() => {        this.refreshing = false        var arr = []        for (let i = this.end; i < this.end   10; i ) {          arr.push(String(i   1))        }        this.end  = 10        this.items = arr      }, 2000)    }  }}[removed]<style lang="less">.refresh-desc{  text-align: center;}</style>效果如下 标签：VueCarbon
Varlet是基于Vue3开发的Material Design移动组件库，-Vue.js开发
05-27
Varlet是基于Vue3开发的Material design移动组件库，由社区中的合作伙伴开发和维护。 VARLET Vue3的Material Design移动组件库简介Varlet是基于Vue3开发的Material design移动组件库，由社区中的合作伙伴开发和维护。 功能提供40多种高质量的通用组件组件非常轻巧由中文开发，提供完整的中英文文档和物流支持支持按需介绍支持主题定制支持国际化支持WebStorm
VueMaterial是根据MaterialDesign规范构建的轻量级框架
08-10
Vue Material是根据Material Design规范构建的轻量级框架
VueMaterialAdminTemplate是一个基于Vue的MaterialDesign后台管理模板
08-12
Vue Material Admin Template是一个基于Vue的Material Design后台管理模板，使用Vuetifyjs作为基础的框架。
MaterialDesign风格的Vuejs轻量UI组件库
08-10
Rubik UI 是一个基于 Vue.js 2.0 的开源 UI 组件库，在交互和视觉设计上遵循 Material Design 规范，适用于 PC 端和 mobile 端。
vue-cli3与Vuetify（material design）
yanmeiyan的博客
03-14 5880
Why Vuetify？ Vuetify 是 Vue 的语义组件框架。 Vuetify完全根据Material Design规范开发的一个UI 布局，提供vue组件，每个组件都是手工制作。 Quick start npm install -g @vue/cli vue --version vue create mia-app cd mia-app npm run serve vue ui...
Material Design风格神框架vuetify 学习笔记(一)
finedayforu的博客
08-19 990
一. 安装vuetify 1. vue插件式安装 首先我们使用vue_cli创建一个新的vue项目, 进入项目, 然后: vue add vuetify 他会问一个git问题, 直接选y 他会问版本问题, 我们直接选default vuetify就这么装好了 2. 项目目录文件变化 变化1: 我们发现相比vue-cli默认构建的项目, 多了一个plugins/vuet...
vue 发布_Vue和Material Design开源框架Vuetify发布2.0 release版本
weixin_39870413的博客
12-12 96
简介Vuetify Star 数为 20.5K+，提供了 80 多个 Vue.js 组件，这些组件是根据谷歌 Material Design 指南实现的。开箱即用的项目脚手架，Vuetify已预先制作了8个vue-cli(支持vue-cli3)模板，从简单的HTML到全面的服务端渲染(SSR)项目，都只需几分钟就能创建完毕。2.0版本于2019年7月23日发布，vuetify 官网截图：2.0 发...
Material Design风格神框架vuetify 学习笔记(五) bar
finedayforu的博客
08-25 1256
一. 应用栏 V-app-bar v-app-bar组件通常是站点导航的主要来源。 App-bar组件与drawer配合使用，可以在应用程序中提供导航。 1. appbar的外观风格 (1). 内置风格 <template> <div class="text-center"> <v-app-bar color="success">普通appbar &...
Vue3生态插件
manyi8634的博客
10-12 685
Vue3生态插件
ant-design-vue3 table组件合并单元格
04-28
ant-design-vue3是一款基于Vue 3+的UI组件库，提供了丰富的组件以便用于构建现代化的Web应用程序。其中ant-design-vue3 table组件提供了许多数据表格显示的功能和特性，如分页、筛选、排序、合并单元格等，可以很方便地满足不同场景的需求。 要实现单元格合并，我们需要首先定义合并的规则，通常是通过设置rowspan和colspan两个属性来合并细胞，这两个属性分别表示当前单元格所占的行数和列数。具体实现步骤如下： 1. 首先需要对要合并的单元格进行排序，以确保被合并的单元格是连续的。 2. 在table的columns中设置需要合并的列的render函数，在render函数中判断当前单元格是否需要进行合并，如果需要返回合并后的单元格，否则正常渲染单元格内容。 3. 在合并单元格的过程中，我们需要考虑跨行和跨列的情况，因此需要记录当前列和行的索引，以便后面的单元格判断是否需要合并。 4. 在处理完表格数据后，将合并好的数据返回即可。 总之，ant-design-vue3 table组件的合并单元格功能通过设置rowspan和colspan两个属性来实现，利用render函数对合并规则进行判断，同时需要考虑跨行和跨列的情况，最终返回合并后的表格数据。通过这种方式，可以很方便地在数据表格中实现单元格合并的效果，提高数据的展示效率和可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值