Hello World!
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card-columns cols-2">
|
||||
<b-card header="Line Chart">
|
||||
<div class="chart-wrapper">
|
||||
<line-example/>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Bar Chart">
|
||||
<div class="chart-wrapper">
|
||||
<bar-example/>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Doughnut Chart">
|
||||
<div class="chart-wrapper">
|
||||
<doughnut-example/>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Radar Chart">
|
||||
<div class="chart-wrapper">
|
||||
<radar-example/>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Pie Chart">
|
||||
<div class="chart-wrapper">
|
||||
<pie-example/>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Polar Area Chart">
|
||||
<div class="chart-wrapper">
|
||||
<polar-area-example/>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BarExample from './charts/BarExample'
|
||||
import LineExample from './charts/LineExample'
|
||||
import DoughnutExample from './charts/DoughnutExample'
|
||||
import RadarExample from './charts/RadarExample'
|
||||
import PieExample from './charts/PieExample'
|
||||
import PolarAreaExample from './charts/PolarAreaExample'
|
||||
|
||||
export default {
|
||||
name: 'charts',
|
||||
components: {
|
||||
BarExample,
|
||||
LineExample,
|
||||
DoughnutExample,
|
||||
RadarExample,
|
||||
PieExample,
|
||||
PolarAreaExample
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,643 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="bg-primary" :no-block="true">
|
||||
<div class="card-body pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="bg-info" :no-block="true">
|
||||
<div class="card-body pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="bg-warning" :no-block="true">
|
||||
<div class="card-body pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="bg-danger" :no-block="true">
|
||||
<div class="card-body pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||
<template slot="button-content">
|
||||
<i class="icon-settings"></i>
|
||||
</template>
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<h4 class="mb-0">9.823</h4>
|
||||
<p>Members online</p>
|
||||
</div>
|
||||
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<b-card>
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<h4 class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2016</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-7 hidden-sm-down">
|
||||
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
|
||||
<b-button-toolbar class="float-right" aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mr-3" aria-label="First group">
|
||||
<b-button variant="outline-secondary">Day</b-button>
|
||||
<b-button variant="outline-secondary" :active="true">Month</b-button>
|
||||
<b-button variant="outline-secondary">Year</b-button>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
|
||||
<div slot="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<b-progress class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<b-progress class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
|
||||
</li>
|
||||
<li>
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<b-progress class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<b-progress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
|
||||
</li>
|
||||
<li class="hidden-sm-down">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>40.15%</strong>
|
||||
<b-progress class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</b-card>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>89k</strong>
|
||||
<span>friends</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>973k</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1.792</strong>
|
||||
<span>tweets</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>500+</strong>
|
||||
<span>contacts</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>292</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="social-box google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<div class="chart-wrapper">
|
||||
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>894</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>92</strong>
|
||||
<span>circles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.social-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<b-card header="Traffic & Sales">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="danger">
|
||||
<small class="text-muted">Recuring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars">
|
||||
<li>
|
||||
<div class="title">
|
||||
Monday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="34" variant="info"></b-progress>
|
||||
<b-progress class="progress-xs" :value="78" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="56" variant="info"></b-progress>
|
||||
<b-progress class="progress-xs" :value="94" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="12" variant="info"></b-progress>
|
||||
<b-progress class="progress-xs" :value="67" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="43" variant="info"></b-progress>
|
||||
<b-progress class="progress-xs" :value="91" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Friday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="22" variant="info"></b-progress>
|
||||
<b-progress class="progress-xs" :value="73" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="53" variant="info"></b-progress>
|
||||
<b-progress class="progress-xs" :value="82" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="9" variant="info"></b-progress>
|
||||
<b-progress class="progress-xs" :value="69" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="legend">
|
||||
<span class="badge badge-pill badge-info"></span> <small>New clients</small> <span class="badge badge-pill badge-danger"></span> <small>Recurring clients</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<li>
|
||||
<i class="icon-user"></i>
|
||||
<span class="title">Male</span>
|
||||
<span class="value">43%</span>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="43" variant="warning"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user-female"></i>
|
||||
<span class="title">Female</span>
|
||||
<span class="value">37%</span>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="37" variant="warning"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<i class="icon-globe"></i>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="value">191,235 <span class="text-muted small">(56%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="56" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-facebook"></i>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="value">51,223 <span class="text-muted small">(15%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="15" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-twitter"></i>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="value">37,564 <span class="text-muted small">(11%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="11" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-linkedin"></i>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="value">27,319 <span class="text-muted small">(8%)</span></span>
|
||||
<div class="bars">
|
||||
<b-progress class="progress-xs" :value="8" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<Callout>
|
||||
<small class="text-muted">CTR</small><br>
|
||||
<strong class="h4">23%</strong>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<Callout variant="primary">
|
||||
<small class="text-muted">Bounce Rate</small><br>
|
||||
<strong class="h4">5%</strong>
|
||||
</Callout>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<hr class="mt-0">
|
||||
<ul class="icons-list">
|
||||
<li>
|
||||
<i class="icon-screen-desktop bg-primary"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iMac 4k</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-info"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Samsung Galaxy Edge</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.224</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-screen-smartphone bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">iPhone 6S</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>1.163</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-user bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Premium accounts</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>928</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-social-spotify bg-success"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Spotify Subscriptions</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Sold this week</div>
|
||||
<strong>893</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-cloud-download bg-danger"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Ebook</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Downloads</div>
|
||||
<strong>121.924</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-camera bg-warning"></i>
|
||||
<div class="desc">
|
||||
<div class="title">Photos</div>
|
||||
<small>Lorem ipsum dolor sit amet</small>
|
||||
</div>
|
||||
<div class="value">
|
||||
<div class="small text-muted">Uploaded</div>
|
||||
<strong>12.125</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn btn-link text-muted"><i class="icon-settings"></i></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<button type="button" class="btn btn-sm btn-link text-muted"><i class="icon-options"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<br/>
|
||||
<b-table class="table-outline mb-0" hover responsive outline
|
||||
:items="tableItems"
|
||||
:fields="tableFields"
|
||||
head-variant="default"
|
||||
>
|
||||
<template slot="avatar" scope="item">
|
||||
<div class="avatar">
|
||||
<img :src="item.value.url" class="img-avatar" alt="">
|
||||
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="user" scope="item">
|
||||
<div>{{item.value.name}}</div>
|
||||
<div class="small text-muted">
|
||||
<span>
|
||||
<template v-if="item.value.new">New</template>
|
||||
<template v-else>Recurring</template>
|
||||
</span> | Registered: {{item.value.registered}}
|
||||
</div>
|
||||
</template>
|
||||
<template slot="country" scope="item">
|
||||
<img :src="item.value.flag" :alt="item.value.name" style="height:24px;">
|
||||
</template>
|
||||
<template slot="usage" scope="item">
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>{{item.value.value}}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">{{item.value.period}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<b-progress class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
|
||||
</template>
|
||||
<template slot="payment" scope="item">
|
||||
<i :class="item.value.icon" style="font-size:24px"></i>
|
||||
</template>
|
||||
<template slot="activity" scope="item">
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>{{item.value}}</strong>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardLine1ChartExample from './dashboard/CardLine1ChartExample'
|
||||
import CardLine2ChartExample from './dashboard/CardLine2ChartExample'
|
||||
import CardLine3ChartExample from './dashboard/CardLine3ChartExample'
|
||||
import CardBarChartExample from './dashboard/CardBarChartExample'
|
||||
import MainChartExample from './dashboard/MainChartExample'
|
||||
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
|
||||
import { Callout } from '../components/'
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {
|
||||
Callout,
|
||||
CardLine1ChartExample,
|
||||
CardLine2ChartExample,
|
||||
CardLine3ChartExample,
|
||||
CardBarChartExample,
|
||||
MainChartExample,
|
||||
SocialBoxChartExample
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
tableItems: [
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/1.jpg', status: 'success' },
|
||||
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'USA', flag: 'static/img/flags/USA.png' },
|
||||
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
|
||||
activity: '10 sec ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/2.jpg', status: 'danger' },
|
||||
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Brazil', flag: 'static/img/flags/Brazil.png' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
|
||||
activity: '5 minutes ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/3.jpg', status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'India', flag: 'static/img/flags/India.png' },
|
||||
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
|
||||
activity: '1 hour ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/4.jpg', status: '' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'France', flag: 'static/img/flags/France.png' },
|
||||
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'PayPal', icon: 'fa fa-paypal' },
|
||||
activity: 'Last month'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/5.jpg', status: 'success' },
|
||||
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Spain', flag: 'static/img/flags/Spain.png' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
|
||||
activity: 'Last week'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/6.jpg', status: 'danger' },
|
||||
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Poland', flag: 'static/img/flags/Poland.png' },
|
||||
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
|
||||
activity: 'Last week'
|
||||
}
|
||||
],
|
||||
tableFields: {
|
||||
avatar: {
|
||||
label: '<i class="icon-people"></i>',
|
||||
class: 'text-center'
|
||||
},
|
||||
user: {
|
||||
label: 'User'
|
||||
},
|
||||
country: {
|
||||
label: 'Country',
|
||||
class: 'text-center'
|
||||
},
|
||||
usage: {
|
||||
label: 'Usage'
|
||||
},
|
||||
payment: {
|
||||
label: 'Payment method',
|
||||
class: 'text-center'
|
||||
},
|
||||
activity: {
|
||||
label: 'Activity'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
variant (value) {
|
||||
let $variant
|
||||
if (value <= 25) {
|
||||
$variant = 'info'
|
||||
} else if (value > 25 && value <= 50) {
|
||||
$variant = 'success'
|
||||
} else if (value > 50 && value <= 75) {
|
||||
$variant = 'warning'
|
||||
} else if (value > 75 && value <= 100) {
|
||||
$variant = 'danger'
|
||||
}
|
||||
return $variant
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-xs my-3" variant="success" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">12.124</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-xs my-3" variant="info" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">$98.111,00</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-xs my-3" variant="warning" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">2 TB</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-xs my-3" variant="danger" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="text-white bg-primary">
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="text-white bg-warning">
|
||||
<div class="h4 m-0">12.124</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="text-white bg-danger">
|
||||
<div class="h4 m-0">$98.111,00</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<b-card class="text-white bg-info">
|
||||
<div class="h4 m-0">2 TB</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block footer-class="px-3 py-2">
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block footer-class="px-3 py-2">
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block footer-class="px-3 py-2">
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block footer-class="px-3 py-2">
|
||||
<div class="card-body p-3 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-6 col-lg-3">
|
||||
<b-card no-block>
|
||||
<div class="card-body p-0 clearfix">
|
||||
<i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
|
||||
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
|
||||
<div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box facebook">
|
||||
<i class="fa fa-facebook"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>89k</strong>
|
||||
<span>friends</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>459</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box twitter">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>973k</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1.792</strong>
|
||||
<span>tweets</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box linkedin">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>500+</strong>
|
||||
<span>contacts</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>292</strong>
|
||||
<span>feeds</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="social-box google-plus">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>894</strong>
|
||||
<span>followers</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>92</strong>
|
||||
<span>circles</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/social-box-->
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="card-group">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-people"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">87.500</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-user-follow"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">385</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">1238</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">28%</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" :value="25"/>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speedometer"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">5:34:11</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-people"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">87.500</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-user-follow"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">385</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">1238</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">28%</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speedometer"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">5:34:11</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card>
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speech"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">972</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
||||
<b-progress class="progress-xs mt-3 mb-0"variant="info" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card class="text-white bg-info">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-people"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">87.500</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Visitors</small>
|
||||
<b-progress class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card class="text-white bg-success">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-user-follow"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">385</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">New Clients</small>
|
||||
<b-progress class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card class="text-white bg-warning">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">1238</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Products sold</small>
|
||||
<b-progress class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card class="text-white bg-primary">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">28%</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
|
||||
<b-progress class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card class="text-white bg-danger">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speedometer"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">5:34:11</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
|
||||
<b-progress class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-2">
|
||||
<b-card class="text-white bg-info">
|
||||
<div class="h1 text-muted text-right mb-4">
|
||||
<i class="icon-speech"></i>
|
||||
</div>
|
||||
<div class="h4 mb-0">972</div>
|
||||
<small class="text-muted text-uppercase font-weight-bold">Comments</small>
|
||||
<b-progress class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'widgets',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Widgets'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
|
||||
export default Doughnut.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 39, 10, 40, 39, 80, 40]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { Pie } from 'vue-chartjs'
|
||||
|
||||
export default Pie.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script>
|
||||
import { PolarArea } from 'vue-chartjs'
|
||||
|
||||
export default PolarArea.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script>
|
||||
import { Radar } from 'vue-chartjs'
|
||||
|
||||
export default Radar.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<b-button variant="primary">Primary</b-button>
|
||||
<!-- Secondary, outline button -->
|
||||
<b-button variant="secondary">Secondary</b-button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<b-button variant="success">Success</b-button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<b-button variant="warning">Warning</b-button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<b-button variant="danger">Danger</b-button>
|
||||
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
|
||||
<b-button variant="link">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<b-button variant="primary"><i class="fa fa-star"></i> Primary</b-button>
|
||||
<b-button variant="secondary"><i class="fa fa-lightbulb-o"></i> Secondary</b-button>
|
||||
<b-button variant="success"><i class="fa fa-magic"></i> Success</b-button>
|
||||
<b-button variant="warning"><i class="fa fa-map-marker"></i> Warning</b-button>
|
||||
<b-button variant="danger"><i class="fa fa-rss"></i> Danger</b-button>
|
||||
<b-button variant="link"><i class="fa fa-link"></i> Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Large</strong> <small>Add this <code>size="lg"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="primary">Primary</b-button>
|
||||
<b-button size="lg" variant="secondary">Secondary</b-button>
|
||||
<b-button size="lg" variant="success">Success</b-button>
|
||||
<b-button size="lg" variant="info">Info</b-button>
|
||||
<b-button size="lg" variant="warning">Warning</b-button>
|
||||
<b-button size="lg" variant="danger">Danger</b-button>
|
||||
<b-button size="lg" variant="link">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small>
|
||||
</div>
|
||||
<b-button size="sm" variant="primary">Primary</b-button>
|
||||
<b-button size="sm" variant="secondary">Secondary</b-button>
|
||||
<b-button size="sm" variant="success">Success</b-button>
|
||||
<b-button size="sm" variant="info">Info</b-button>
|
||||
<b-button size="sm" variant="warning">Warning</b-button>
|
||||
<b-button size="sm" variant="danger">Danger</b-button>
|
||||
<b-button size="sm" variant="link">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Disabled state</strong> <small>Add this <code>:disabled="true"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="primary" :disabled="true">Primary</b-button>
|
||||
<b-button size="lg" variant="secondary" :disabled="true">Secondary</b-button>
|
||||
<b-button size="lg" variant="success" :disabled="true">Success</b-button>
|
||||
<b-button size="lg" variant="info" :disabled="true">Info</b-button>
|
||||
<b-button size="lg" variant="warning" :disabled="true">Warning</b-button>
|
||||
<b-button size="lg" variant="danger" :disabled="true">Danger</b-button>
|
||||
<b-button size="lg" variant="link" :disabled="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="primary" :active="true">Primary</b-button>
|
||||
<b-button variant="secondary" :active="true">Secondary</b-button>
|
||||
<b-button variant="success" :active="true">Success</b-button>
|
||||
<b-button variant="info" :active="true">Info</b-button>
|
||||
<b-button variant="warning" :active="true">Warning</b-button>
|
||||
<b-button variant="danger" :active="true">Danger</b-button>
|
||||
<b-button variant="link" :active="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="secondary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="primary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="success" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="info" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="warning" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="danger" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="link" :block="true">Block level button</b-button>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Options</strong>
|
||||
</div>
|
||||
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
|
||||
<b-button variant="outline-primary">Primary</b-button>
|
||||
<!-- Secondary, outline button -->
|
||||
<b-button variant="outline-secondary">Secondary</b-button>
|
||||
<!-- Indicates a successful or positive action -->
|
||||
<b-button variant="outline-success">Success</b-button>
|
||||
<!-- Indicates caution should be taken with this action -->
|
||||
<b-button variant="outline-warning">Warning</b-button>
|
||||
<!-- Indicates a dangerous or potentially negative action -->
|
||||
<b-button variant="outline-danger">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>With Icons</strong>
|
||||
</div>
|
||||
<b-button variant="outline-primary"><i class="fa fa-star"></i> Primary</b-button>
|
||||
<b-button variant="outline-secondary"><i class="fa fa-lightbulb-o"></i> Secondary</b-button>
|
||||
<b-button variant="outline-success"><i class="fa fa-magic"></i> Success</b-button>
|
||||
<b-button variant="outline-warning"><i class="fa fa-map-marker"></i> Warning</b-button>
|
||||
<b-button variant="outline-danger"><i class="fa fa-rss"></i> Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Large</strong> <small>Add this <code>size="lg"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="outline-primary">Primary</b-button>
|
||||
<b-button size="lg" variant="outline-secondary">Secondary</b-button>
|
||||
<b-button size="lg" variant="outline-success">Success</b-button>
|
||||
<b-button size="lg" variant="outline-info">Info</b-button>
|
||||
<b-button size="lg" variant="outline-warning">Warning</b-button>
|
||||
<b-button size="lg" variant="outline-danger">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Size Small</strong> <small>Add this <code>size="sm"</code></small></small>
|
||||
</div>
|
||||
<b-button size="sm" variant="outline-primary">Primary</b-button>
|
||||
<b-button size="sm" variant="outline-secondary">Secondary</b-button>
|
||||
<b-button size="sm" variant="outline-success">Success</b-button>
|
||||
<b-button size="sm" variant="outline-info">Info</b-button>
|
||||
<b-button size="sm" variant="outline-warning">Warning</b-button>
|
||||
<b-button size="sm" variant="outline-danger">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Disabled state</strong> <small>Add this <code>:disabled="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :disabled="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :disabled="true">Secondary</b-button>
|
||||
<b-button variant="success" :disabled="true">Success</b-button>
|
||||
<b-button variant="outline-info" :disabled="true">Info</b-button>
|
||||
<b-button variant="outline-warning" :disabled="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :disabled="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Active state</strong> <small>Add this <code>:active="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :active="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :active="true">Secondary</b-button>
|
||||
<b-button variant="outline-success" :active="true">Success</b-button>
|
||||
<b-button variant="outline-info" :active="true">Info</b-button>
|
||||
<b-button variant="outline-warning" :active="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :active="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Block Level Buttons</strong> <small>Add this <code>:block="true"</code></small>
|
||||
</div>
|
||||
<b-button size="lg" variant="outline-secondary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-primary" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-success" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-info" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-warning" :block="true">Block level button</b-button>
|
||||
<b-button size="lg" variant="outline-danger" :block="true">Block level button</b-button>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'buttons'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card title">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card show-footer>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
<div slot="footer">Card footer</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="<i class='fa fa-check'></i> Card with icon">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with switch
|
||||
<label class="switch switch-sm switch-text switch-info float-right mb-0">
|
||||
<input type="checkbox" class="switch-input">
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<span class="badge badge-success float-right">Success</span>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<span class="badge badge-pill badge-danger float-right">42</span>
|
||||
</div>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card outline" class="border-primary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card outline" class="border-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card outline" class="border-success">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card outline" class="border-info">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card outline" class="border-warning">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card outline" class="border-danger">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card variant="accent-primary" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card variant="accent-secondary" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card variant="accent-success" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card variant="accent-info" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card variant="accent-warning" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card variant="accent-danger" header="Card with accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card class="bg-primary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card class="bg-success text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card class="bg-info text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card class="bg-warning text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card class="bg-danger text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card class="bg-secondary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card title" class="bg-primary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card title" class="bg-success">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card title" class="bg-info">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card title" class="bg-warning">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card title" class="bg-danger">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<b-card header="Card title" class="bg-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'cards'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,856 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Credit Card</strong> <small>Form</small>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<b-form-fieldset label="Name">
|
||||
<b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<b-form-fieldset label="Credit Card Number">
|
||||
<b-form-input type="text" id="ccnumber" placeholder="0000 0000 0000 0000"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<b-form-fieldset label="Month">
|
||||
<b-form-select
|
||||
:plain="true"
|
||||
:options="[1,2,3,4,5,6,7,8,9,10,11,12]">
|
||||
</b-form-select>
|
||||
</b-form-fieldset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-4">
|
||||
<b-form-fieldset label="Year">
|
||||
<b-form-select
|
||||
:plain="true"
|
||||
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]">
|
||||
</b-form-select>
|
||||
</b-form-fieldset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-4">
|
||||
<b-form-fieldset label="CVV/CVC">
|
||||
<b-form-input type="text" id="cvv" placeholder="123"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Company</strong> <small>Form</small>
|
||||
</div>
|
||||
<b-form-fieldset label="Company">
|
||||
<b-form-input type="text" id="company" placeholder="Enter your company name"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset label="VAT">
|
||||
<b-form-input type="text" id="vat" placeholder="PL1234567890"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset label="Street">
|
||||
<b-form-input type="text" id="street" placeholder="Enter street name"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<b-form-fieldset label="City">
|
||||
<b-form-input type="text" id="city" placeholder="Enter your city"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-4">
|
||||
<b-form-fieldset label="Postal Code">
|
||||
<b-form-input type="text" id="postal-code" placeholder="Postal Code"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<b-form-fieldset label="Country">
|
||||
<b-form-input type="text" id="country" placeholder="Country name"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Basic Form</strong> Elements
|
||||
</div>
|
||||
<b-form-fieldset
|
||||
description="Let us know your full name."
|
||||
label="Enter your name"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input type="text"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Static"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input-static type="text" value="Username"></b-form-input-static>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
description="This is a help text"
|
||||
label="Text Input"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input type="text" placeholder="Text"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
description="Please enter your email"
|
||||
label="Email Input"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input type="email" placeholder="Enter your email"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
description="Please enter a complex password"
|
||||
label="Password Input"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input type="password" placeholder="Enter your password"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Disabled Input"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input type="text" :disabled="true" placeholder="Disabled"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Textarea"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input :textarea="true" :rows="9" placeholder="Content.."></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Select"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-select
|
||||
:plain="true"
|
||||
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
|
||||
value="Please select">
|
||||
</b-form-select>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Select large"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-select
|
||||
size="lg"
|
||||
:plain="true"
|
||||
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
|
||||
value="Please select">
|
||||
</b-form-select>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Select small"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-select
|
||||
size="sm"
|
||||
:plain="true"
|
||||
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
|
||||
value="Please select">
|
||||
</b-form-select>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Disabled select"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-select
|
||||
:plain="true"
|
||||
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
|
||||
:disabled="true"
|
||||
value="Please select">
|
||||
</b-form-select>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Select"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-select
|
||||
:plain="true"
|
||||
:multiple="true"
|
||||
:options="[
|
||||
{
|
||||
text: 'Please select some item',
|
||||
value: null
|
||||
},
|
||||
{
|
||||
text: 'This is First option',
|
||||
value: 'a'
|
||||
}, {
|
||||
text: 'Default Selected Option',
|
||||
value: 'b'
|
||||
}, {
|
||||
text: 'This is another option',
|
||||
value: 'c'
|
||||
}, {
|
||||
text: 'This one is disabled',
|
||||
value: 'd',
|
||||
disabled: true
|
||||
}]"
|
||||
:value="[null,'c']">
|
||||
</b-form-select>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Radios"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-radio
|
||||
:plain="true"
|
||||
:options="[
|
||||
{text: 'Option 1 ',value: '1'},
|
||||
{text: 'Option 2 ',value: '2'},
|
||||
{text: 'Option 3 ',value: '3'}
|
||||
]"
|
||||
value="1"
|
||||
stacked></b-form-radio>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Radios - custom"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-radio
|
||||
:options="[
|
||||
{text: 'Option 1',value: '1'},
|
||||
{text: 'Option 2',value: '2'},
|
||||
{text: 'Option 3',value: '3'}
|
||||
]"
|
||||
value="1"
|
||||
stacked></b-form-radio>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Inline radios"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-radio
|
||||
:plain="true"
|
||||
:options="[
|
||||
{text: 'Option 1 ',value: '1'},
|
||||
{text: 'Option 2 ',value: '2'},
|
||||
{text: 'Option 3 ',value: '3'}
|
||||
]"
|
||||
value="1"></b-form-radio>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Inline radios - custom"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-radio
|
||||
:options="[
|
||||
{text: 'Option 1',value: '1'},
|
||||
{text: 'Option 2',value: '2'},
|
||||
{text: 'Option 3',value: '3'}
|
||||
]"
|
||||
value="1"></b-form-radio>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Checkboxes"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-checkbox :plain="true" value="1">Option 1</b-form-checkbox><br>
|
||||
<b-form-checkbox :plain="true" value="2">Option 2</b-form-checkbox><br>
|
||||
<b-form-checkbox :plain="true" value="3">Option 3</b-form-checkbox><br>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Inline checkboxes"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-checkbox :plain="true" value="1">Option 1</b-form-checkbox>
|
||||
<b-form-checkbox :plain="true" value="2">Option 2</b-form-checkbox>
|
||||
<b-form-checkbox :plain="true" value="3">Option 3</b-form-checkbox>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Checkboxes - custom"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-checkbox value="1">Option 1</b-form-checkbox><br>
|
||||
<b-form-checkbox value="2">Option 2</b-form-checkbox><br>
|
||||
<b-form-checkbox value="3">Option 3</b-form-checkbox><br>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Inline checkboxes - custom"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-checkbox value="1">Option 1</b-form-checkbox>
|
||||
<b-form-checkbox value="2">Option 2</b-form-checkbox>
|
||||
<b-form-checkbox value="3">Option 3</b-form-checkbox>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="File input"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-file :plain="true"></b-form-file>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Multiple file input"
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-file :plain="true" :multiple="true"></b-form-file>
|
||||
</b-form-fieldset>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Inline</strong> Form
|
||||
</div>
|
||||
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
||||
<b-form :inline="true">
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
<b-form-input type="text" placeholder="Jane Doe"></b-form-input>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<b-form-input type="email" placeholder="ane.doe@example.com"></b-form-input>
|
||||
</div>
|
||||
</b-form>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Horizontal</strong> Form
|
||||
</div>
|
||||
<b-form-fieldset
|
||||
label="Email"
|
||||
description="Please enter your email."
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input type="email" placeholder="Enter Email.."></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Password"
|
||||
description="Please enter your password."
|
||||
:label-cols="3"
|
||||
:horizontal="true">
|
||||
<b-form-input type="email" placeholder="Enter Password.."></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Normal</strong> Form
|
||||
</div>
|
||||
<b-form-fieldset
|
||||
label="Email"
|
||||
description="Please enter your email.">
|
||||
<b-form-input type="email" placeholder="Enter Email.."></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Password"
|
||||
description="Please enter your password.">
|
||||
<b-form-input type="email" placeholder="Enter Password.."></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card :no-block="true">
|
||||
<div slot="header">
|
||||
Input <strong>Grid</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<b-form-input type="text" placeholder=".col-sm-3"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-4">
|
||||
<b-form-input type="text" placeholder=".col-sm-4"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-5">
|
||||
<b-form-input type="text" placeholder=".col-sm-5"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<b-form-input type="text" placeholder=".col-sm-6"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-7">
|
||||
<b-form-input type="text" placeholder=".col-sm-7"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-8">
|
||||
<b-form-input type="text" placeholder=".col-sm-8"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-9">
|
||||
<b-form-input type="text" placeholder=".col-sm-9"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<b-form-input type="text" placeholder=".col-sm-10"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-11">
|
||||
<b-form-input type="text" placeholder=".col-sm-11"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-12">
|
||||
<b-form-input type="text" placeholder=".col-sm-12"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Input <strong>Sizes</strong>
|
||||
</div>
|
||||
<b-form-fieldset
|
||||
label="Small input"
|
||||
:label-cols="5"
|
||||
:horizontal="true">
|
||||
<b-form-input type="text" size="sm" placeholder="size='sm'"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Normal input"
|
||||
:label-cols="5"
|
||||
:horizontal="true">
|
||||
<b-form-input type="text" placeholder="normal"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset
|
||||
label="Large input"
|
||||
:label-cols="5"
|
||||
:horizontal="true">
|
||||
<b-form-input type="text" size="lg" placeholder="size='lg'"></b-form-input>
|
||||
</b-form-fieldset>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card :no-block="true">
|
||||
<div slot="header">
|
||||
<strong>Validation states</strong> Form
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="form-form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control is-valid" id="inputSuccess1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-form-control-label" for="inputError1">Input with error</label>
|
||||
<input type="text" class="form-control is-invalid" id="inputError1">
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid informations.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</div>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="<i class='fa fa-user'></i>">
|
||||
<b-form-input type="text" placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group right="<i class='fa fa-envelope-o'></i>">
|
||||
<b-form-input type="email" placeholder="Email"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="<i class='fa fa-euro'></i>" right=".00">
|
||||
<b-form-input type="text" placeholder="ex. $1.000.000"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Buttons</strong> Groups
|
||||
</div>
|
||||
<b-form-fieldset>
|
||||
<b-input-group>
|
||||
<b-form-input type="text" placeholder="Username"></b-form-input>
|
||||
<!-- Attach Left button -->
|
||||
<b-input-group-button slot="left">
|
||||
<b-button variant="primary">
|
||||
<i class="fa fa-search"></i> Search
|
||||
</b-button>
|
||||
</b-input-group-button>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group>
|
||||
<b-form-input type="email" placeholder="Email"></b-form-input>
|
||||
<!-- Attach Right button -->
|
||||
<b-input-group-button slot="right">
|
||||
<b-button variant="primary">Submit</b-button>
|
||||
</b-input-group-button>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group>
|
||||
<b-form-input type="email" placeholder="Email"></b-form-input>
|
||||
<!-- Attach Right button -->
|
||||
<b-input-group-button slot="left">
|
||||
<b-button variant="primary"><i class="fa fa-facebook"></i></b-button>
|
||||
</b-input-group-button>
|
||||
<b-input-group-button slot="right">
|
||||
<b-button variant="primary"><i class="fa fa-twitter"></i></b-button>
|
||||
</b-input-group-button>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</div>
|
||||
<b-form-fieldset>
|
||||
<b-input-group>
|
||||
<!-- Attach Left button -->
|
||||
<b-input-group-button slot="left">
|
||||
<b-dropdown text="Action" variant="primary">
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-input-group-button>
|
||||
<b-form-input placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group>
|
||||
<b-form-input placeholder="Email"></b-form-input>
|
||||
<!-- Attach Right button -->
|
||||
<b-input-group-button slot="right">
|
||||
<b-dropdown text="Action" variant="primary">
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-input-group-button>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group>
|
||||
<!-- Attach Left button -->
|
||||
<b-input-group-button slot="left">
|
||||
<b-dropdown text="Split" variant="primary" split>
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-input-group-button>
|
||||
<b-form-input placeholder="..."></b-form-input>
|
||||
<!-- Attach Right button -->
|
||||
<b-input-group-button slot="right">
|
||||
<b-dropdown text="Action" variant="primary">
|
||||
<b-dropdown-item>Action</b-dropdown-item>
|
||||
<b-dropdown-item>Another action</b-dropdown-item>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-input-group-button>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
|
||||
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-8">
|
||||
<b-form-input type="text" placeholder=".col-md-8"></b-form-input>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<b-form-input type="text" placeholder=".col-md-4"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-7">
|
||||
<b-form-input type="text" placeholder=".col-md-7"></b-form-input>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<b-form-input type="text" placeholder=".col-md-5"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-6">
|
||||
<b-form-input type="text" placeholder=".col-md-6"></b-form-input>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<b-form-input type="text" placeholder=".col-md-6"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-5">
|
||||
<b-form-input type="text" placeholder=".col-md-5"></b-form-input>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<b-form-input type="text" placeholder=".col-md-7"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-4">
|
||||
<b-form-input type="text" placeholder=".col-md-4"></b-form-input>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<b-form-input type="text" placeholder=".col-md-8"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary">Action</b-button>
|
||||
<b-button type="button" size="sm" variant="danger">Action</b-button>
|
||||
<b-button type="button" class="btn btn-sm btn-warning">Action</b-button>
|
||||
<b-button type="button" class="btn btn-sm btn-info">Action</b-button>
|
||||
<b-button type="button" size="sm" variant="success">Action</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Input Grid for small devices! <small> <code>.col-*</code></small>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<b-form-input type="text" placeholder=".col-4"></b-form-input>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<b-form-input type="text" placeholder=".col-8"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-5">
|
||||
<b-form-input type="text" placeholder=".col-5"></b-form-input>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<b-form-input type="text" placeholder=".col-7"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<b-form-input type="text" placeholder=".col-6"></b-form-input>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<b-form-input type="text" placeholder=".col-6"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-7">
|
||||
<b-form-input type="text" placeholder=".col-5"></b-form-input>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<b-form-input type="text" placeholder=".col-5"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-8">
|
||||
<b-form-input type="text" placeholder=".col-8"></b-form-input>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<b-form-input type="text" placeholder=".col-4"></b-form-input>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<b-button type="submit" size="sm" variant="primary">Action</b-button>
|
||||
<b-button type="button" size="sm" variant="danger">Action</b-button>
|
||||
<b-button type="button" class="btn btn-sm btn-warning">Action</b-button>
|
||||
<b-button type="button" class="btn btn-sm btn-info">Action</b-button>
|
||||
<b-button type="button" size="sm" variant="success">Action</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Example Form
|
||||
</div>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="Username" right="<i class='fa fa-user'></i>">
|
||||
<b-form-input type="text"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="Email" right="<i class='fa fa-envelope'></i>">
|
||||
<b-form-input type="email"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="Password" right="<i class='fa fa-asterisk'></i>">
|
||||
<b-form-input type="password"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<div class="form-group form-actions">
|
||||
<b-button type="submit" size="sm" variant="primary">Submit</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Example Form
|
||||
</div>
|
||||
<b-form-fieldset>
|
||||
<b-input-group right="<i class='fa fa-user'></i>">
|
||||
<b-form-input type="text" placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group right="<i class='fa fa-envelope'></i>">
|
||||
<b-form-input type="email" placeholder="Email"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group right="<i class='fa fa-asterisk'></i>">
|
||||
<b-form-input type="password" placeholder="Password"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<div class="form-group form-actions">
|
||||
<b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Example Form
|
||||
</div>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="<i class='fa fa-user'></i>">
|
||||
<b-form-input type="text" placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="<i class='fa fa-envelope'></i>">
|
||||
<b-form-input type="email" placeholder="Email"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset>
|
||||
<b-input-group left="<i class='fa fa-asterisk'></i>">
|
||||
<b-form-input type="password" placeholder="Password"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<div class="form-group form-actions">
|
||||
<b-button type="submit" size="sm" variant="success">Submit</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<i class="fa fa-edit"></i> Form Elements
|
||||
</div>
|
||||
<b-form-fieldset label="Prepended text" description="Here's some help text">
|
||||
<b-input-group left="@">
|
||||
<b-form-input type="email"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset label="Appended text" description="Here's some help text">
|
||||
<b-input-group right=".00">
|
||||
<b-form-input type="text"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset label="Append and prepend" description="Here's some help text">
|
||||
<b-input-group left="$" right=".00">
|
||||
<b-form-input type="text"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset label="Append with button" description="Here's some help text">
|
||||
<b-input-group>
|
||||
<b-form-input type="text"></b-form-input>
|
||||
<b-input-group-button slot="right">
|
||||
<b-button variant="primary">Go!</b-button>
|
||||
</b-input-group-button>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<b-form-fieldset label="Two-buttons append">
|
||||
<b-input-group>
|
||||
<b-form-input type="text"></b-form-input>
|
||||
<b-input-group-button slot="right">
|
||||
<b-button variant="primary">Search</b-button>
|
||||
</b-input-group-button>
|
||||
<b-input-group-button slot="right">
|
||||
<b-button variant="danger">Options</b-button>
|
||||
</b-input-group-button>
|
||||
</b-input-group>
|
||||
</b-form-fieldset>
|
||||
<div class="form-actions">
|
||||
<b-button type="submit" variant="primary">Save changes</b-button>
|
||||
<b-button type="button" variant="secondary">Cancel</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'forms',
|
||||
methods: {
|
||||
click () {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<b-card header="Bootstrap Modals">
|
||||
<b-button type="button" variant="secondary" @click="myModal = true">Launch demo modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="largeModal = true">Launch large modal</b-button>
|
||||
<b-button type="button" variant="secondary" @click="smallModal = true">Launch small modal</b-button>
|
||||
<hr>
|
||||
<b-button type="button" variant="primary" @click="primaryModal = true">Launch primary modal</b-button>
|
||||
<b-button type="button" variant="success" @click="successModal = true">Launch success modal</b-button>
|
||||
<b-button type="button" variant="warning" @click="warningModal = true">Launch warning modal</b-button>
|
||||
<b-button type="button" variant="danger" @click="dangerModal = true">Launch danger modal</b-button>
|
||||
<b-button type="button" variant="info" @click="infoModal = true">Launch info modal</b-button>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
||||
<!-- Modal Component -->
|
||||
<b-modal title="Modal title" v-model="myModal" @ok="myModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" size="lg" v-model="largeModal" @ok="largeModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" size="sm" v-model="smallModal" @ok="smallModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
|
||||
<b-modal title="Modal title" class="modal-primary" v-model="primaryModal" @ok="primaryModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
<b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</b-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'modals',
|
||||
data () {
|
||||
return {
|
||||
myModal: false,
|
||||
largeModal: false,
|
||||
smallModal: false,
|
||||
primaryModal: false,
|
||||
successModal: false,
|
||||
warningModal: false,
|
||||
dangerModal: false,
|
||||
infoModal: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Social Media Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase"><b-button variant="facebook"><span>Facebook</span></b-button></code>
|
||||
</div>
|
||||
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook"><span>Facebook</span></b-button>
|
||||
<b-button size="sm" variant="twitter"><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin"><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr"><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr"><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing"><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github"><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5"><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid"><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow"><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3"><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube"><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble"><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus"><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram"><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest"><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk"><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo"><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance"><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox"><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit"><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify"><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine"><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare"><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook"><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter"><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin"><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr"><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr"><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing"><span>Xing</span></b-button>
|
||||
<b-button variant="github"><span>Github</span></b-button>
|
||||
<b-button variant="html5"><span>HTML5</span></b-button>
|
||||
<b-button variant="openid"><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow"><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3"><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube"><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble"><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus"><span>Google+</span></b-button>
|
||||
<b-button variant="instagram"><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest"><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk"><span>VK</span></b-button>
|
||||
<b-button variant="yahoo"><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance"><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox"><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit"><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify"><span>Spotify</span></b-button>
|
||||
<b-button variant="vine"><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare"><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase"><b-button variant="facebook icon"><span>Facebook</span></b-button></code>
|
||||
</div>
|
||||
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook icon"></b-button>
|
||||
<b-button size="sm" variant="twitter icon"></b-button>
|
||||
<b-button size="sm" variant="linkedin icon"></b-button>
|
||||
<b-button size="sm" variant="flickr icon"></b-button>
|
||||
<b-button size="sm" variant="tumblr icon"></b-button>
|
||||
<b-button size="sm" variant="xing icon"></b-button>
|
||||
<b-button size="sm" variant="github icon"></b-button>
|
||||
<b-button size="sm" variant="html5 icon"></b-button>
|
||||
<b-button size="sm" variant="openid icon"></b-button>
|
||||
<b-button size="sm" variant="stack-overflow icon"></b-button>
|
||||
<b-button size="sm" variant="css3 icon"></b-button>
|
||||
<b-button size="sm" variant="youtube icon"></b-button>
|
||||
<b-button size="sm" variant="dribbble icon"></b-button>
|
||||
<b-button size="sm" variant="google-plus icon"></b-button>
|
||||
<b-button size="sm" variant="instagram icon"></b-button>
|
||||
<b-button size="sm" variant="pinterest icon"></b-button>
|
||||
<b-button size="sm" variant="vk icon"></b-button>
|
||||
<b-button size="sm" variant="yahoo icon"></b-button>
|
||||
<b-button size="sm" variant="behance icon"></b-button>
|
||||
<b-button size="sm" variant="dropbox icon"></b-button>
|
||||
<b-button size="sm" variant="reddit icon"></b-button>
|
||||
<b-button size="sm" variant="spotify icon"></b-button>
|
||||
<b-button size="sm" variant="vine icon"></b-button>
|
||||
<b-button size="sm" variant="foursquare icon"></b-button>
|
||||
<b-button size="sm" variant="vimeo icon"></b-button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook icon"></b-button>
|
||||
<b-button variant="twitter icon"></b-button>
|
||||
<b-button variant="linkedin icon"></b-button>
|
||||
<b-button variant="flickr icon"></b-button>
|
||||
<b-button variant="tumblr icon"></b-button>
|
||||
<b-button variant="xing icon"></b-button>
|
||||
<b-button variant="github icon"></b-button>
|
||||
<b-button variant="html5 icon"></b-button>
|
||||
<b-button variant="openid icon"></b-button>
|
||||
<b-button variant="stack-overflow icon"></b-button>
|
||||
<b-button variant="css3 icon"></b-button>
|
||||
<b-button variant="youtube icon"></b-button>
|
||||
<b-button variant="dribbble icon"></b-button>
|
||||
<b-button variant="google-plus icon"></b-button>
|
||||
<b-button variant="instagram icon"></b-button>
|
||||
<b-button variant="pinterest icon"></b-button>
|
||||
<b-button variant="vk icon"></b-button>
|
||||
<b-button variant="yahoo icon"></b-button>
|
||||
<b-button variant="behance icon"></b-button>
|
||||
<b-button variant="dropbox icon"></b-button>
|
||||
<b-button variant="reddit icon"></b-button>
|
||||
<b-button variant="spotify icon"></b-button>
|
||||
<b-button variant="vine icon"></b-button>
|
||||
<b-button variant="foursquare icon"></b-button>
|
||||
<b-button variant="vimeo icon"></b-button>
|
||||
</p>
|
||||
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook icon"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter icon"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin icon"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr icon"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr icon"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing icon"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github icon"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5 icon"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid icon"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow icon"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3 icon"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube icon"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble icon"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus icon"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram icon"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest icon"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk icon"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo icon"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance icon"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox icon"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit icon"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify icon"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine icon"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare icon"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo icon"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
|
||||
<div class="col-12">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase"><b-button variant="facebook text"><span>Facebook</span></b-button></code>
|
||||
</div>
|
||||
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="sm" variant="facebook text"><span>Facebook</span></b-button>
|
||||
<b-button size="sm" variant="twitter text"><span>Twitter</span></b-button>
|
||||
<b-button size="sm" variant="linkedin text"><span>LinkedIn</span></b-button>
|
||||
<b-button size="sm" variant="flickr text"><span>Flickr</span></b-button>
|
||||
<b-button size="sm" variant="tumblr text"><span>Tumblr</span></b-button>
|
||||
<b-button size="sm" variant="xing text"><span>Xing</span></b-button>
|
||||
<b-button size="sm" variant="github text"><span>Github</span></b-button>
|
||||
<b-button size="sm" variant="html5 text"><span>HTML5</span></b-button>
|
||||
<b-button size="sm" variant="openid text"><span>OpenID</span></b-button>
|
||||
<b-button size="sm" variant="stack-overflow text"><span>StackOverflow</span></b-button>
|
||||
<b-button size="sm" variant="css3 text"><span>CSS3</span></b-button>
|
||||
<b-button size="sm" variant="youtube text"><span>YouTube</span></b-button>
|
||||
<b-button size="sm" variant="dribbble text"><span>Dribbble</span></b-button>
|
||||
<b-button size="sm" variant="google-plus text"><span>Google+</span></b-button>
|
||||
<b-button size="sm" variant="instagram text"><span>Instagram</span></b-button>
|
||||
<b-button size="sm" variant="pinterest text"><span>Pinterest</span></b-button>
|
||||
<b-button size="sm" variant="vk text"><span>VK</span></b-button>
|
||||
<b-button size="sm" variant="yahoo text"><span>Yahoo</span></b-button>
|
||||
<b-button size="sm" variant="behance text"><span>Behance</span></b-button>
|
||||
<b-button size="sm" variant="dropbox text"><span>Dropbox</span></b-button>
|
||||
<b-button size="sm" variant="reddit text"><span>Reddit</span></b-button>
|
||||
<b-button size="sm" variant="spotify text"><span>Spotify</span></b-button>
|
||||
<b-button size="sm" variant="vine text"><span>Vine</span></b-button>
|
||||
<b-button size="sm" variant="foursquare text"><span>Forsquare</span></b-button>
|
||||
<b-button size="sm" variant="vimeo text"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<b-button variant="facebook text"><span>Facebook</span></b-button>
|
||||
<b-button variant="twitter text"><span>Twitter</span></b-button>
|
||||
<b-button variant="linkedin text"><span>LinkedIn</span></b-button>
|
||||
<b-button variant="flickr text"><span>Flickr</span></b-button>
|
||||
<b-button variant="tumblr text"><span>Tumblr</span></b-button>
|
||||
<b-button variant="xing text"><span>Xing</span></b-button>
|
||||
<b-button variant="github text"><span>Github</span></b-button>
|
||||
<b-button variant="html5 text"><span>HTML5</span></b-button>
|
||||
<b-button variant="openid text"><span>OpenID</span></b-button>
|
||||
<b-button variant="stack-overflow text"><span>StackOverflow</span></b-button>
|
||||
<b-button variant="css3 text"><span>CSS3</span></b-button>
|
||||
<b-button variant="youtube text"><span>YouTube</span></b-button>
|
||||
<b-button variant="dribbble text"><span>Dribbble</span></b-button>
|
||||
<b-button variant="google-plus text"><span>Google+</span></b-button>
|
||||
<b-button variant="instagram text"><span>Instagram</span></b-button>
|
||||
<b-button variant="pinterest text"><span>Pinterest</span></b-button>
|
||||
<b-button variant="vk text"><span>VK</span></b-button>
|
||||
<b-button variant="yahoo text"><span>Yahoo</span></b-button>
|
||||
<b-button variant="behance text"><span>Behance</span></b-button>
|
||||
<b-button variant="dropbox text"><span>Dropbox</span></b-button>
|
||||
<b-button variant="reddit text"><span>Reddit</span></b-button>
|
||||
<b-button variant="spotify text"><span>Spotify</span></b-button>
|
||||
<b-button variant="vine text"><span>Vine</span></b-button>
|
||||
<b-button variant="foursquare text"><span>Forsquare</span></b-button>
|
||||
<b-button variant="vimeo text"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<b-button size="lg" variant="facebook text"><span>Facebook</span></b-button>
|
||||
<b-button size="lg" variant="twitter text"><span>Twitter</span></b-button>
|
||||
<b-button size="lg" variant="linkedin text"><span>LinkedIn</span></b-button>
|
||||
<b-button size="lg" variant="flickr text"><span>Flickr</span></b-button>
|
||||
<b-button size="lg" variant="tumblr text"><span>Tumblr</span></b-button>
|
||||
<b-button size="lg" variant="xing text"><span>Xing</span></b-button>
|
||||
<b-button size="lg" variant="github text"><span>Github</span></b-button>
|
||||
<b-button size="lg" variant="html5 text"><span>HTML5</span></b-button>
|
||||
<b-button size="lg" variant="openid text"><span>OpenID</span></b-button>
|
||||
<b-button size="lg" variant="stack-overflow text"><span>StackOverflow</span></b-button>
|
||||
<b-button size="lg" variant="css3 text"><span>CSS3</span></b-button>
|
||||
<b-button size="lg" variant="youtube text"><span>YouTube</span></b-button>
|
||||
<b-button size="lg" variant="dribbble text"><span>Dribbble</span></b-button>
|
||||
<b-button size="lg" variant="google-plus text"><span>Google+</span></b-button>
|
||||
<b-button size="lg" variant="instagram text"><span>Instagram</span></b-button>
|
||||
<b-button size="lg" variant="pinterest text"><span>Pinterest</span></b-button>
|
||||
<b-button size="lg" variant="vk text"><span>VK</span></b-button>
|
||||
<b-button size="lg" variant="yahoo text"><span>Yahoo</span></b-button>
|
||||
<b-button size="lg" variant="behance text"><span>Behance</span></b-button>
|
||||
<b-button size="lg" variant="dropbox text"><span>Dropbox</span></b-button>
|
||||
<b-button size="lg" variant="reddit text"><span>Reddit</span></b-button>
|
||||
<b-button size="lg" variant="spotify text"><span>Spotify</span></b-button>
|
||||
<b-button size="lg" variant="vine text"><span>Vine</span></b-button>
|
||||
<b-button size="lg" variant="foursquare text"><span>Forsquare</span></b-button>
|
||||
<b-button size="lg" variant="vimeo text"><span>Vimeo</span></b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'social-buttons'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="css">
|
||||
.btn {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<b-card header="3d Switch">
|
||||
<c-switch type="3d" variant="primary" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="secondary" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="success" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="warning" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="info" :checked="true"/>
|
||||
|
||||
<c-switch type="3d" variant="danger" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch default">
|
||||
<c-switch type="default" variant="primary" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch default - pills">
|
||||
<c-switch type="default" variant="primary" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch outline">
|
||||
<c-switch type="default" variant="primary-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch outline - pills">
|
||||
<c-switch type="default" variant="primary-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch outline alternative">
|
||||
<c-switch type="default" variant="primary-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline-alt" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline-alt" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch outline alternative - pills">
|
||||
<c-switch type="default" variant="primary-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="secondary-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="success-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="warning-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="info-outline-alt" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="default" variant="danger-outline-alt" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with text">
|
||||
<c-switch type="text" variant="primary" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with text - pills">
|
||||
<c-switch type="text" variant="primary" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with text outline">
|
||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with text outline - pills">
|
||||
<c-switch type="text" variant="primary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with text outline alternative">
|
||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with text outline alternative - pills">
|
||||
<c-switch type="text" variant="primary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="secondary-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="success-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="warning-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="info-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="text" variant="danger-outline-alt" on="On" off="Off" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with icon">
|
||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with icon - pills">
|
||||
<c-switch type="icon" variant="primary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with icon outline">
|
||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with icon outline - pills">
|
||||
<c-switch type="icon" variant="primary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with icon outline alternative">
|
||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<b-card header="Switch with icon outline alternative - pills">
|
||||
<c-switch type="icon" variant="primary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="secondary-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="success-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="warning-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="info-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
|
||||
<c-switch type="icon" variant="danger-outline-alt" v-bind="{on: '\uf00c', off: '\uf00d'}" :pill="true" :checked="true"/>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Sizes
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-hover table-striped table-align-middle mb-0">
|
||||
<thead>
|
||||
<th>Size</th>
|
||||
<th>Example</th>
|
||||
<th>CSS Class</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Large
|
||||
</td>
|
||||
<td>
|
||||
<c-switch type="3d" variant="primary" size="lg" :checked="true"/>
|
||||
</td>
|
||||
<td>
|
||||
Add following code <code>size="lg"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Normal
|
||||
</td>
|
||||
<td>
|
||||
<c-switch type="3d" variant="primary" :checked="true"/>
|
||||
</td>
|
||||
<td>
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Small
|
||||
</td>
|
||||
<td>
|
||||
<c-switch type="3d" variant="primary" size="sm" :checked="true"/>
|
||||
</td>
|
||||
<td>
|
||||
Add following code <code>size="sm"</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Extra small
|
||||
</td>
|
||||
<td>
|
||||
<c-switch type="3d" variant="primary" size="xs" :checked="true"/>
|
||||
</td>
|
||||
<td>
|
||||
Add following code <code>size="xs"</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cSwitch from '../../components/Switch'
|
||||
export default {
|
||||
name: 'switches',
|
||||
components: {
|
||||
cSwitch
|
||||
},
|
||||
computed: {
|
||||
icon (icon) {
|
||||
return icon
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Simple Table">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Samppa Nori</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estavan Lykos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chetan Mohamed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Derick Maximinus</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Friderik Dávid</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Striped Table">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Yiorgos Avraamu</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avram Tarasios</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quintin Ed</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Enéas Kwadwo</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agapetus Tadeáš</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Condensed Table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Carwyn Fachtna</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nehemiah Tatius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebbe Gemariah</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eustorgios Amulius</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Leopold Gáspár</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Bordered Table">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Pompeius René</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paĉjo Jadon</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Micheal Mercurius</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ganesha Dubhghall</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hiroto Šimun</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</b-card>
|
||||
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<b-card header="<i class='fa fa-align-justify'></i> Combined All Table">
|
||||
<table class="table table-bordered table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Date registered</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Vishnu Serghei</td>
|
||||
<td>2012/01/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zbyněk Phoibos</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-danger">Banned</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Einar Randall</td>
|
||||
<td>2012/02/01</td>
|
||||
<td>Admin</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">Inactive</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Félix Troels</td>
|
||||
<td>2012/03/01</td>
|
||||
<td>Member</td>
|
||||
<td>
|
||||
<span class="badge badge-warning">Pending</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aulus Agmundr</td>
|
||||
<td>2012/01/21</td>
|
||||
<td>Staff</td>
|
||||
<td>
|
||||
<span class="badge badge-success">Active</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</b-card>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tables'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.3)',
|
||||
borderColor: 'transparent',
|
||||
data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
|
||||
}
|
||||
]
|
||||
|
||||
export default Bar.extend({
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
categoryPercentage: 1,
|
||||
barPercentage: 0.5
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
const brandPrimary = '#20a8d8'
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: brandPrimary,
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [65, 59, 84, 84, 51, 55, 40]
|
||||
}
|
||||
]
|
||||
|
||||
export default Line.extend({
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, datasets[0].data) - 5,
|
||||
max: Math.max.apply(Math, datasets[0].data) + 5
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
const brandInfo = '#63c2de'
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: brandInfo,
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [1, 18, 9, 17, 34, 22, 11]
|
||||
}
|
||||
]
|
||||
|
||||
export default Line.extend({
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, datasets[0].data) - 5,
|
||||
max: Math.max.apply(Math, datasets[0].data) + 5
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.00001,
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
const datasets = [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [78, 81, 80, 45, 34, 12, 40]
|
||||
}
|
||||
]
|
||||
|
||||
export default Line.extend({
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: datasets
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
// const brandPrimary = '#20a8d8'
|
||||
const brandSuccess = '#4dbd74'
|
||||
const brandInfo = '#63c2de'
|
||||
const brandDanger = '#f86c6b'
|
||||
|
||||
function convertHex (hex, opacity) {
|
||||
hex = hex.replace('#', '')
|
||||
const r = parseInt(hex.substring(0, 2), 16)
|
||||
const g = parseInt(hex.substring(2, 4), 16)
|
||||
const b = parseInt(hex.substring(4, 6), 16)
|
||||
|
||||
const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
|
||||
return result
|
||||
}
|
||||
|
||||
function random (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default Line.extend({
|
||||
props: ['height'],
|
||||
mounted () {
|
||||
var elements = 27
|
||||
var data1 = []
|
||||
var data2 = []
|
||||
var data3 = []
|
||||
|
||||
for (var i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
this.renderChart({
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: convertHex(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
}, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
},
|
||||
gridLines: {
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'height'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,751 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card card-default">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-picture-o"></i> Simple Line Icons
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row text-center">
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4 col-md-3">
|
||||
<i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'simple-line-icons'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card-group mb-0">
|
||||
<div class="card p-4">
|
||||
<div class="card-body">
|
||||
<h1>Login</h1>
|
||||
<p class="text-muted">Sign In to your account</p>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<div class="input-group mb-4">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-primary px-4">Login</button>
|
||||
</div>
|
||||
<div class="col-6 text-right">
|
||||
<button type="button" class="btn btn-link px-0">Forgot password?</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
|
||||
<div class="card-body text-center">
|
||||
<div>
|
||||
<h2>Sign up</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Login'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">404</h1>
|
||||
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||
<p class="text-muted">The page you are looking for was not found.</p>
|
||||
</div>
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-info" type="button">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page404'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">500</h1>
|
||||
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||
</div>
|
||||
<div class="input-prepend input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-info" type="button">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page500'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card mx-4">
|
||||
<div class="card-body p-4">
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-4">
|
||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||
<input type="password" class="form-control" placeholder="Repeat password">
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-block btn-success">Create Account</button>
|
||||
</div>
|
||||
<div class="card-footer p-4">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Register'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user