Vue-Blu——组件丰富,样式美观的新兴Vue开源Vue组件

Posted mahuang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-Blu——组件丰富,样式美观的新兴Vue开源Vue组件相关的知识,希望对你有一定的参考价值。

Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。

Bulma是一个基于Flexbox的免费开源CSS框架,已有200,000多名开发人员使用;笔者曾经也介绍过这一款css框架,目前star数已突破38.9k,确实是一个非常受欢迎的纯css框架

 


 

技术图片

 

 


项目地址

  • vue-blu

https://github.com/chenz24/vue-blu

  • Bulma

https://github.com/jgthms/bulma/

特性

  • 基于 npm + webpack + babel 开发,支持 ES2015
  • 全面、灵活且强大的ui组件,API友好
  • 样式基于Bulma框架(Flexbox based),布局简单、响应式
  • 可定制化

 

技术图片

 

 

安装

$ npm install vue-blu --save

快速开始

import Vue from ‘vue‘
import VueBlu from ‘vue-blu‘
import ‘vue-blu/dist/css/vue-blu.min.css‘

Vue.use(VueBlu)

组件

  • Helper 帮助说明

Vue-Blu的样式库采用了bulma —— 一套新兴的、基于Flexbox、现代化的纯css框架。我们并不主张过度‘组件化‘,像layout、button之类的元素,原生已经有了足够的表达力, 组件化之后反而会降低效率和灵活性

 

技术图片

 

  • 布局

基于flexbox,强大的布局工具。

技术图片

 

 

技术图片

 

 

技术图片

 

  • 按钮

 

技术图片

 

 

技术图片

 

  • 面包屑

在一个带有层次的导航结构中标明当前页面的位置,并可返回上级

技术图片

 

  • 下拉菜单Dropdown
技术图片

 

 

  • 分页组件

 

技术图片

 

 

技术图片

 

  • 菜单Menu

 

技术图片

 

 

技术图片

 

  • 步骤条

步骤条,常用于分步操作

技术图片

 

 

技术图片

 

 

技术图片

 

  • Tab标签页

选项卡切换,常用于内容的收纳和展现

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

  • Alert警示框

警告提示,展现需要关注的信息。

技术图片

 

 

技术图片

 

  • 侧边模态框

从侧边滑出的模态框

技术图片

 

 

技术图片

 

  • 折叠面板

可折叠展开的内容区域

技术图片

 

  • 模态框

模态对话框

技术图片

 

 

技术图片

 

  • 通知提示框

全局的消息提示

技术图片

 

  • tag标签

对不同事物的属性或维度进行标记和分类的小标签

技术图片

 

  • 进度条

为当前工作流程和动作提供实时反馈

技术图片

 

  • Popover

鼠标click/hover,弹出气泡似的浮层。类似popover,但可承载更多内容

技术图片

 

技术图片

 

  • tips

简单的文字提示气泡框,常用于鼠标hover时

技术图片

 

  • 时间线

垂直按时间展示的信息流

技术图片

 

  • DataTable表格

列表展示结构化的数据,支持排序、分页、自定义操作等复杂行为

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

  • 表单

对于表单的样式和布局等展现方面的实现,我们认为原生的html元素加CSS足以满足,特别是有了Bulma。所以Blu的Form基本全部依赖于Bulma。对于某些功能性的表单组件如AutoComplete、Select, Blu会另有封装。

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

 

技术图片

 

  • 数字输入

用在数字的输入场景中,可使用鼠标和键盘操作

技术图片

 

  • Radio单选框

 

技术图片

 

  • CheckBox复选框

 

技术图片

 

  • Switch开关

 

技术图片

 

  • 日期

日期时间选择器,基于轻量且强大的 flatpickr

技术图片

 

 

总结

不论是从UI还是从功能,以及从组件丰富程度来看,Vue-Blu都是非常值得使用的一个Vue的组件,可以不必拘泥于市面上最常用的UI,偶尔换一下风格也是非常有必要的!enjoy IT!

以上是关于Vue-Blu——组件丰富,样式美观的新兴Vue开源Vue组件的主要内容,如果未能解决你的问题,请参考以下文章

vue组件篇---封装组件并发布到npm

vue.js+boostrap最佳实践

Vue.js ui框架大全,总有一款适合你

vue.js+boostrap

组件拆分

vue.js+boostrap最佳实践