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 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建多个轻量库搭配使用请访问链接: https://ww ...
vue中scoped的样式污染处理
1.为什么要用scoped? 当组件间的类名相同时,会发生css样式污染问题. 如果是父子组件有相同类名,则样式都为父组件中的同类名样式,如果是兄弟组件,看哪个组件最后创建,样式就以哪个为主进行覆盖之 ...
vue中私有样式(scoped)中修改其他组件的样式
1.使用">>>"符号更改其他组件的样式例如 <style lang="stylus" scoped> .a >>& ...
[vue] 怎么使css样式只在当前组件中生效？
[vue] 怎么使css样式只在当前组件中生效? <style scoped> </style> 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
vue按钮字体大小设置_用Vue模仿antd的样式造UI组件之button
一.环境的配遇新是直朋能到置 1.新建一个遇新是直朋能到分览文件夹 mkdir eassyui 2.使用npm作为包管理新直能分支调二浏页器朋代说,工具 npm init -y 3件览客需和下于有快都 ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
uni-app 全端通用组件库unify_Ui（全端兼容nvue和vue），所有组件全端兼容，可配置全局样样式，350+常用图标
简介基于uni-app平台开发的一套轻量级全端UI框架,适用于nvue与vue页面,核心样式文件遵循weex规范编写,在uni.scss文件可配置全局的样式. 编写nvue或者vue文件使用unif ...
vue 组件不受全局样式影响_Vue 组件之间样式冲突
Vue 组件之间样式冲突 vue 组件化,各组件内都可以在 style 部分写样式,这些样式却不是相互独立的,最终组合在一起,难免就会产生样式的污染. 首先来看一下两个 vue 组件代码: 1.Par ...
vue中style的scoped属性这样用，修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式文章目录 vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式 ...

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

项目地址

特性

安装

快速开始

组件

总结

Vue-Blu——组件丰富，样式美观的新兴Vue开源Vue组件相关推荐

最新文章

热门文章