基于Vue的Qabler组件库

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量219 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b555e87f265da0f531e766d
版权

Qabler

参考Tabler的项目，使用Vue技术栈来实现。求一波Star，谢谢！?Github地址：github.com/QianGuoqing…

效果图 (效果图是动态图，如果图片静止请点击图片查看)

  • Home

  • Interface/Cards Design

  • Interface/Charts

  • Interface/Price Cards

  • Components/Store

  • Components/Blog

  • Components/Carousel

  • Pages/Profile

  • Pages/Login Register ForgetPassword

  • Pages/400 401 403 404 Error

  • Pages/500 503 Error

  • Pages/Email EmptyPage

  • Pages/RLT

  • Forms

  • Gallery

  • Documentations(具体可以参照下面各个组件的效果图)

封装的组件 (点击组件类型跳转到组件详情)

Alert

  • q-basic-alert
  • q-icon-alert
  • q-action-alert

--

Avatar

  • q-avatars

--

Tag

  • q-tag

--

Button

  • q-button

Card

  • q-card
  • q-raw-card

--

Form (基于Semantic-ui)

  • q-basic-input
  • q-icon-input
  • q-action-input
  • q-checkbox
  • q-toggle
  • q-select

--

Chart (基于viser)

折线图:

  • q-line-chart
  • q-gradient-chart

直方图

  • q-histogram-chart
  • q-interval-chart
  • q-waterful-chart

饼图

  • q-pie-chart
  • q-pie-color-chart

散点图

  • q-scatter-chart
  • q-scatter-color-chart
  • q-scatter-disturb-chart
  • q-scatter-bubble-chart

面积图

  • q-area-chart
  • q-area-heap-chart
  • q-area-interval-chart
  • q-area-percent-chart

--

组件详细信息

Alert

q-basic-alert

基础的alert组件，API：

参数说明类型默认值
textalert框中的文本String''
typealert框类型: primary, secondary, success, info, warning, dangerStringprimary

使用：

<q-basic-alert :text="danger" type="danger">
</q-basic-alert>
复制代码

点击此处查看效果

--

q-icon-alert

在q-basic-alert的基础上可以增加icon，avatar等图标类型，以slot的方式添加

使用：

<q-icon-alert :text="iconDanger" type="danger">
  <a-icon type="warning" slot="icon"/>
</q-icon-alert>
复制代码

点击此处查看效果

--

q-action-alert

在q-basic-alert的基础上添加确认和取消按钮，按钮的文字可以自己设置，按钮的事件可以自定义，API：

参数说明类型默认值
textalert框中的文本String''
typealert框类型: primary, secondary, success, info, warning, dangerStringprimary
enter-text确认按钮的文本StringEnter
cancel-text取消按钮的文本StringCancel
enter-handler确认按钮的事件Functionalert('Enter 确认')
cancel-handler取消按钮的事件Functionalert('Cancel 取消')

使用：

<q-action-alert 
	:text="actionText1" 
	type="primary" 
	enter-text="primary 确认" 
	cancel-text="primary 取消" 
	:enter-handler="enterPrimary" 
	:cancel-handler="cancelPrimary">
</q-action-alert>

methods: {
  enterPrimary() {
    alert('传递事件 -> primary enter click')
  },
  cancelPrimary() {
    alert('传递事件 -> primary cancel click')
  }
}
复制代码

点击此处查看效果

--

Avatar

q-avatars

显示头像的组件：包括默认头像、不同大小的头像、如果没有图片则文字占位的头像、有状态的头像。

参数说明类型默认值
text占位文字String''
color占位文字的颜色, avatar-前缀：blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan, gray, dark-grayStringavatar-blue
sizeavatar大小, avatar-前缀: sm, md, lg, xl, xxlStringavatar
status是否有状态，状态颜色用上面的colorBooleanfalse

使用：

simple-avatar

<q-avatars>
  <img src="1.jpg" alt="" slot="avatar">
</q-avatars>
复制代码

点击此处查看效果

size-avatar

<q-avatars size="avatar-sm">
  <img src="1.jpg" alt="" slot="avatar">
</q-avatars>
复制代码

点击此处查看效果

status-avatar

<q-avatars :status="true" color="avatar-red">
  <img src="1.jpg" alt="" slot="avatar">
</q-avatars>
复制代码

点击此处查看效果

placeholder-avatar

<q-avatars text="PH" color="avatar-red" size="avatar-sm">
</q-avatars>
复制代码

点击此处查看效果

--

Tag

q-tag

标签组件：包括基础的标签，link标签，color标签，avatar标签

参数说明类型默认值
text标签文字String''
color标签文字的颜色, tag-前缀：blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan, gray, dark-grayStringtag-default-color
link是否有链接效果，linkString''

使用：

simple-tag

<q-tag text="simple tag"></q-tag>
复制代码

点击此处查看效果

link-tag

<q-tag text="link tag" link="link"></q-tag>
复制代码

点击此处查看效果

color-tag

<q-tag :text="color" link="link" :color="color"></q-tag>

color取值: tag-blue, tag-red ...
复制代码

点击此处查看效果

avatar-tag

<q-tag text="victoria">
  <img slot="avatar" src="1.jpg" alt="">
</q-tag>
复制代码

点击此处查看效果

--

Button

q-button

按钮标签：包括基础button，不同颜色的button，outline button，不同大小的button，带icon的button，仅仅包含icon的button，以及带loading的button

参数说明类型默认值
text按钮文字String''
color按钮文字的颜色, btn-前缀：blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan, gray, dark-gray, primary, secondary, info, success, warning, dangerStringbtn-primary
size按钮大小, btn-前缀：sm, lgString''
block按钮是否占满一行, btn-前缀：blockString''
disable按钮是否可点击, btn-前缀：disbaleString''
outline另一种按钮样式, btn-outline-前缀：加上color属性String'btn-outline-primary'
socialicon的一种样式, btn-前缀：socialString''
loading是否带有loading效果Booleanfalse
clickHandler按钮事件Functionfunction(){}

使用：

basic-button

<q-button text="Link"></q-button>
复制代码

点击此处查看效果

color-buttons

<q-button text="primary" color="btn-primary"></q-button>

<q-button text="color" color="btn-color-red"></q-button>
复制代码

点击此处查看效果 点击此处查看效果

disabled-buttons

<q-button text="primary" color="btn-primary" disable="disable"></q-button>
复制代码

点击此处查看效果

outline-button

<q-button text="primary" outline="btn-outline-primary"></q-button>
复制代码

点击此处查看效果

size-button

<q-button size="btn-sm" text="small button"></q-button>
<q-button size="btn-lg" text="large button"></q-button>
复制代码

点击此处查看效果

block-button

<q-button block="btn-block" text="block button" color="btn-danger"></q-button>
复制代码

点击此处查看效果

icon-botton

<q-button text="upload" color="btn-black">
  <a-icon type="upload" slot="icon"/>
</q-button>

<q-button social="btn-social">
  <a-icon type="facebook" slot="icon"/>
</q-button>
复制代码

点击此处查看效果 点击此处查看效果

loading-button

<q-button :loading="true"></q-button>
<q-button :loading="true" social="btn-social" color="btn-green"></q-button>
<q-button :loading="true" color="btn-black" block="btn-block"></q-button>
复制代码

点击此处查看效果

events-button

<q-button text="color" :click-handler="buttonClick"></q-button>
复制代码

点击此处查看效果

--

Card

  • q-card
  • q-raw-card

卡片效果，可以在里面填充东西

参数说明类型默认值
color按钮文字的颜色, card-前缀：blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan, gray, dark-gray, primary, secondary, info, success, warning, dangerStringbtn-primary
loading是否带有loading效果Booleanfalse

使用：

card-default

<q-card style="width: 50%">
  <div slot="card-title">Card title</div>
  <div slot="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Aperiam deleniti fugit incidunt, iste, itaque minima 
    neque pariatur perferendis sed suscipit velit vitae 
    voluptatem. A consequuntur, deserunt eaque error nulla !
  </div>
</q-card>
复制代码

点击此处查看效果

card-advance

<q-card style="width: 50%">
  <div slot="card-title">
    <div>Card title</div>
    <div>
      <q-button text="action 1" size="btn-sm"></q-button>
      <q-button text="action 2" size="btn-sm" color="btn-danger"></q-button>
    </div>
  </div>
  <div slot="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div slot="card-footer">
    This is standard card footer
  </div>
</q-card>
复制代码

点击此处查看效果

card-post

<q-card style="width: 50%">
  <img src="david-klaasen-54203-500.jpg" alt="" slot="card-poster">
  <div slot="card-title">
    <a href="">And this isn't my nose. This is a false one.</a>
  </div>
  <div slot="card-body">
    Look, my liege! The Knights Who Say Ni demand a sacrifice!
     …Are you suggesting that coconuts migr...
  </div>
  <div slot="card-footer">
    <q-button color="btn-black" block="btn-block" text="send"></q-button>
  </div>
</q-card>
复制代码

点击此处查看效果

card-color

<q-card style="width: 95%" color="card-red">
  <div slot="card-title">Card title</div>
  <div slot="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</q-card>
复制代码

点击此处查看效果

card-loading

<q-card style="width: 50%" :loading="true">
  <div slot="card-title">Card with loading</div>
</q-card>
复制代码

点击此处查看效果

card-raw

<q-raw-card style="width: 50%">
  <div slot="card-content">
    Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </div>
</q-raw-card>
复制代码

点击此处查看效果

--

Form

点击此处查看效果

--

Chart

转载于:https://juejin.im/post/5b555e87f265da0f531e766d

weixin_34348805
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-qabler:Vue技术栈实现Tabler，封装一些常用UI组件:carp_streamer:
04-28
Qabler 参考的项目，使用Vue技术栈来实现。 效果图 (效果图是动态图，如果图片静止请点击图片查看) Home Interface/Cards Design Interface/Charts Interface/Price Cards Components/Store Components/Blog Components/Carousel Pages/Profile Pages/Login Register ForgetPassword Pages/400 401 403 404 Error Pages/500 503 Error Pages/Email EmptyPage Pages/RLT Forms Gallery Documentations(具体可以参照下面各个组件的效果图) 封装的组件 (点击组件类型跳转到组件详情) Alert q-basic-alert q-icon-
vue-charts的使用，导入，配置，及常见错误
m0_52952413的博客
02-16 8895
vue-charts作用： 在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 第一步:下载 npm i v-charts echarts -S 第二部:导入同时配置 import { CanvasRenderer } from 'echarts/renderers'
vue中echarts不重叠且分布均匀的气泡图
weixin_45599105的博客
02-01 1642
vue中echarts不重叠且分布均匀的气泡图
在echarts中应用阿里巴巴图标库（iconfont）的图标——以散点图为例
关注前端，关注原创
07-29 2857
在ehcarts中使用自定义图标
echarts 散点图 icon的自定义
cofecode的博客
06-17 6163
echarts 散点图 icon的自定义 1.对默认红色圆点的修改 设置symbol属性，可以生成不同的图形。 echarts默认提供了’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, 'arrow’这么几种散点。 symbol可以是image的地址，也可以是svg的一段path。支持回调函数写法 2.给不同icon上不同颜色 symbol的各种颜色 还是得通过itemStyle来控制。 3.不同icon不同的旋转角度 symbol的角
Vue多组件仓库开发与发布详解
10-17
${componentName}
mycom-vue3:vue3组件库,基于vue3.0的组件库
04-29
mycom-vue3mycom-vue3主页安装组件库npm install mycom-vue3 --save引入到vue3项目import { createApp } from 'vue'import App from './App.vue'import {mc} from 'mycom-vue3'//引入组件库import 'mycom-vue3/lib/...
Mint UI 基于 Vue.js 移动端组件库
10-19
Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库，需要的朋友参考下吧
Farris UI Vue 是一套基于Farris Design 的 Vue3 组件库
07-17
Farris UI Vue 是一套基于Farris Design 的 Vue3 组件库。具有Fast Reliable Responsive Intuitive Smart 五大特性。Fast : Farris Vue 是一套具有急速用户体验的 UI 套件，Farris Data Grid 在渲染大量数据时具有...
Vue-map:基于vue封装的openlayers组件库
04-14
语音地图 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue实现表单未编辑或未保存离开弹窗提示功能
Haines
10-20 2676
说明 UI组件是使用Quasar Framework。 最近做一个表单弹出框，表单保存提交，但是，产品提出，用户不保存，而关闭弹出框时，要给出一个弹窗提示。这个功能，可以用watch监听表单数据。当数据表单发生变化，用户点击了关闭按钮，则根据监听结果来判断用户输入或编辑了数据，进而出现弹窗提示，让用户选择是否离开；当数据没发生变化，则不必提示。 确认离开提示框 实现效果 先实现一个确认离开提示框，效果如下： 实现代码： 1 2 3 4 5 ..
vue项目的card的组件
MOWENDAO的博客
09-25 6425
<div class="main-body-text-card"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>{{card_header}}</span> <el-bu...
vue 分步引导组件_引导卡组件：完整介绍
culi3118的博客
09-02 2468
vue 分步引导组件In this article, I’m going to introduce you to the Bootstrap card component and walk you through its many features and uses. By the end of this tutorial, you’ll be able to incorporate Bootst...
Viser X轴数据太多的时候，出现 X轴内容显示不全的问题
康师傅架构学习之路
09-03 4899
问题来源https://github.com/zhangdaiscott/jeecg-boot/issues/452 1.问题来源 简单理解下就是，canvas的大小是固定的，x最后存放的内容距离边框的距离不足，导致数据超出canvas范围显示不全 增大 数据内容和边框的距离可以解决问题 类似盒子模型 增加paddinng 即可 <v-chart :padding="p...
基于vue的ui组件库
weixin_41914782的博客
06-13 663
MintUI（移动端）官网：http://mint-ui.github.io/#!/zh-cn文档：http://mint-ui.github.io/docs/#/!/zh-cngithub：https://github.com/ElemeFE/mint-uidemo：http://elemefe.github.io/mint-ui/#/VUX（移动端）官网：https://vux.li/文档：h...
bpmn-js推荐几款常用的插件
飞云先生
04-30 122
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 1003
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 927
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
表格隔行变色
weixin_54339833的博客
05-02 382
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
基于vue的svg画线_基于SVG的Vue图组件库
06-10
好的，对于基于SVG的Vue图组件库，我可以给您一些建议。您可以考虑使用Vue.js和SVG.js来构建您的图组件库。SVG.js是一个基于SVG的JavaScript库，它可以帮助您轻松创建和操作SVG元素。您可以使用Vue.js来管理和呈现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值