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

• 折線圖 點選此處檢視效果
• 直方圖 點選此處檢視效果
• 餅圖 點選此處檢視效果
• 散點圖 點選此處檢視效果
• 面積圖 點選此處檢視效果