基于Vue的Qabler组件库

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：

参数	说明	类型	默认值
text	alert框中的文本	String	''
type	alert框类型: primary, secondary, success, info, warning, danger	String	primary

使用：

<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：

参数	说明	类型	默认值
text	alert框中的文本	String	''
type	alert框类型: primary, secondary, success, info, warning, danger	String	primary
enter-text	确认按钮的文本	String	Enter
cancel-text	取消按钮的文本	String	Cancel
enter-handler	确认按钮的事件	Function	alert('Enter 确认')
cancel-handler	取消按钮的事件	Function	alert('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-gray	String	avatar-blue
size	avatar大小, `avatar-`前缀: sm, md, lg, xl, xxl	String	avatar
status	是否有状态，状态颜色用上面的color	Boolean	false

使用：

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-gray	String	tag-default-color
link	是否有链接效果，link	String	''

使用：

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, danger	String	btn-primary
size	按钮大小, `btn-`前缀：sm, lg	String	''
block	按钮是否占满一行, `btn-`前缀：block	String	''
disable	按钮是否可点击, `btn-`前缀：disbale	String	''
outline	另一种按钮样式, `btn-outline-`前缀：加上color属性	String	'btn-outline-primary'
social	icon的一种样式, `btn-`前缀：social	String	''
loading	是否带有loading效果	Boolean	false
clickHandler	按钮事件	Function	function(){}

使用：

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, danger	String	btn-primary
loading	是否带有loading效果	Boolean	false

使用：

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

Qabler

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

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

组件详细信息

vue组件注册的步骤（讲解vue组件注册的方式）

Mpvue中使用Vant Weapp组件库的方法步骤

如何写好一个vue组件,老夫的一年经验全在这了（推荐）

atom-design(Vue.js移动端组件库)手势组件使用教程

详解如何搭建mpvue框架搭配vant组件库的小程序项目

vue弹窗组件的实现示例代码

vue2.0 使用element-ui里的upload组件实现图片预览效果方法

Vue中Table组件Select的勾选和取消勾选事件详解

JS组件系列之MVVM组件构建自己的Vue组件

基于vue如何发布一个npm包的方法步骤