基於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

• 折線圖 點擊此處查看效果
• 直方圖 點擊此處查看效果
• 餅圖 點擊此處查看效果
• 散點圖 點擊此處查看效果
• 面積圖 點擊此處查看效果