请选择 进入手机版 | 继续访问电脑版

#楼主# 2020-3-30

跳转到指定楼层
介绍

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

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




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

项目地址

    vue-blu

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

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

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


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

安装

$ 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之类的元素,原生已经有了足够的表达力, 组件化之后反而会降低效率和灵活性

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

    布局

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

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

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

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

    按钮


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

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

    面包屑

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

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

    下拉菜单Dropdown

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

    分页组件


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

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

    菜单Menu


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

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

    步骤条

步骤条,常用于分步操作

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

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

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

    Tab标签页

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

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

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

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

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

    Alert警示框

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

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

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

    侧边模态框

从侧边滑出的模态框

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

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

    折叠面板

可折叠展开的内容区域

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

    模态框

模态对话框

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

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

    通知提示框

全局的消息提示

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

    tag标签

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

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

    进度条

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

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

    Popover

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

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

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

    tips

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

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

    时间线

垂直按时间展示的信息流

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

    DataTable表格

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

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

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

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

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

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

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

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

    表单

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

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

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

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

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

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

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

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

    数字输入

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

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

    Radio单选框


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

    CheckBox复选框


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

    Switch开关


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

    日期

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

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

总结

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

原文地址:https://www.toutiao.com/a6806916079588213255/
转播转播 分享淘帖
回复

使用道具

0

主题

65

帖子

134

积分

注册会员

Rank: 2

积分
134
幻影模影j 发表于 2020-3-30 11:08:17
转发了
回复

使用道具 举报

3

主题

78

帖子

169

积分

注册会员

Rank: 2

积分
169
123457776 发表于 2020-3-30 11:09:02
转发了
回复

使用道具 举报

0

主题

65

帖子

140

积分

注册会员

Rank: 2

积分
140
lang3344 发表于 2020-3-30 11:09:21
转发了
回复

使用道具 举报

2

主题

68

帖子

148

积分

注册会员

Rank: 2

积分
148
Lieutenant555 发表于 2020-3-30 11:09:35
转发了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则