Vue技术栈仿写的Tabler

参考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(具体可以参照下面各个组件的效果图)

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

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

--

• q-avatars

--

• q-tag

--

• q-button

q-card
q-raw-card

--

Form (基于Semantic-ui)

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

--

折线图:

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

• 折线图点击此处查看效果
• 直方图点击此处查看效果
• 饼图点击此处查看效果
• 散点图点击此处查看效果
• 面积图点击此处查看效果