refactor: new project structure
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-card-group columns 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>
|
||||
</b-card-group>
|
||||
</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,658 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-primary">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-info">
|
||||
<b-card-body class="pb-0">
|
||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
||||
<template slot="button-content">
|
||||
<i class="icon-location-pin"></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>
|
||||
</b-card-body>
|
||||
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-warning">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card no-body class="bg-danger">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2017</div>
|
||||
</b-col>
|
||||
<b-col sm="7" class="d-none d-md-block">
|
||||
<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 buttons group">
|
||||
<b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn">
|
||||
<b-form-radio class="mx-0" value="Day">Day</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Month">Month</b-form-radio>
|
||||
<b-form-radio class="mx-0" value="Year">Year</b-form-radio>
|
||||
</b-form-radio-group>
|
||||
</b-button-toolbar>
|
||||
</b-col>
|
||||
</b-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 height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
|
||||
</li>
|
||||
<li class="d-none d-md-table-cell">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<b-progress height={} 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 height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
|
||||
</li>
|
||||
<li class="d-none d-md-table-cell">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
|
||||
</li>
|
||||
<li class="d-none d-md-table-cell">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>40.15%</strong>
|
||||
<b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col sm="6" 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-->
|
||||
</b-col>
|
||||
<b-col sm="6" 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-->
|
||||
</b-col>
|
||||
<b-col sm="6" 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-->
|
||||
</b-col>
|
||||
<b-col sm="6" 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-->
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="12">
|
||||
<b-card header="Traffic & Sales">
|
||||
<b-row>
|
||||
<b-col sm="12" lg="4">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
<Callout variant="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
<Callout variant="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars">
|
||||
<li>
|
||||
<div class="title">
|
||||
Monday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="34" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="78" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="56" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="12" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="43" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Friday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="22" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="53" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="bars">
|
||||
<b-progress height={} class="progress-xs" :value="9" variant="info"></b-progress>
|
||||
<b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="legend">
|
||||
<b-badge pill variant="info"></b-badge> <small>New clients</small> <b-badge pill variant="danger"></b-badge> <small>Recurring clients</small>
|
||||
</li>
|
||||
</ul>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="4">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
<Callout variant="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
<Callout variant="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-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 height={} 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 height={} 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 height={} 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 height={} 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 height={} 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 height={} class="progress-xs" :value="8" variant="success"></b-progress>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<b-button variant="link" size="sm" class="text-muted"><i class="icon-options"></i></b-button>
|
||||
</li>
|
||||
</ul>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="4">
|
||||
<b-row>
|
||||
<b-col sm="6">
|
||||
<Callout>
|
||||
<small class="text-muted">CTR</small><br>
|
||||
<strong class="h4">23%</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
<b-col sm="6">
|
||||
<Callout variant="primary">
|
||||
<small class="text-muted">Bounce Rate</small><br>
|
||||
<strong class="h4">5%</strong>
|
||||
<div class="chart-wrapper">
|
||||
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80px" height="30" />
|
||||
</div>
|
||||
</Callout>
|
||||
</b-col>
|
||||
</b-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">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-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">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-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">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-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">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-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">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-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">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-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">
|
||||
<b-button variant="link" class="text-muted"><i class="icon-settings"></i></b-button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="divider text-center">
|
||||
<b-button size="sm" variant="link" class="text-muted"><i class="icon-options"></i></b-button>
|
||||
</li>
|
||||
</ul>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<br/>
|
||||
<b-table class="mb-0 table-outline" responsive="sm" hover :items="tableItems" :fields="tableFields" head-variant="light">
|
||||
<div slot="avatar" class="avatar" slot-scope="item">
|
||||
<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>
|
||||
<div slot="user" slot-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>
|
||||
</div>
|
||||
<i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i>
|
||||
<i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
|
||||
<div slot="usage" slot-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 height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
|
||||
</div>
|
||||
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
|
||||
<div slot="activity" slot-scope="item">
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>{{item.value}}</strong>
|
||||
</div>
|
||||
</b-table>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-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 CalloutChartExample from './dashboard/CalloutChartExample'
|
||||
import { Callout } from '../components/'
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {
|
||||
Callout,
|
||||
CardLine1ChartExample,
|
||||
CardLine2ChartExample,
|
||||
CardLine3ChartExample,
|
||||
CardBarChartExample,
|
||||
MainChartExample,
|
||||
SocialBoxChartExample,
|
||||
CalloutChartExample
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selected: 'Month',
|
||||
tableItems: [
|
||||
{
|
||||
avatar: { url: 'static/img/avatars/1.jpg', status: 'success' },
|
||||
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'USA', flag: 'us' },
|
||||
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: 'br' },
|
||||
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: 'in' },
|
||||
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: 'fr' },
|
||||
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: 'es' },
|
||||
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: 'pl' },
|
||||
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
|
||||
},
|
||||
flag (value) {
|
||||
return 'flag-icon flag-icon-' + value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-xs my-3" variant="success" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">12.124</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-xs my-3" variant="info" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">$98.111,00</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-xs my-3" variant="warning" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card>
|
||||
<div class="h4 m-0">2 TB</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-xs my-3" variant="danger" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card class="text-white bg-primary">
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card class="text-white bg-warning">
|
||||
<div class="h4 m-0">12.124</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card class="text-white bg-danger">
|
||||
<div class="h4 m-0">$98.111,00</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" lg="3">
|
||||
<b-card class="text-white bg-info">
|
||||
<div class="h4 m-0">2 TB</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
<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>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
<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>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
<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>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true" footer-class="px-3 py-2">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
<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>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="6" lg="3">
|
||||
<b-card :no-body="true">
|
||||
<b-card-body class="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>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col md="3" 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-->
|
||||
</b-col>
|
||||
<b-col md="3" 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-->
|
||||
</b-col>
|
||||
<b-col md="3" 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-->
|
||||
</b-col>
|
||||
<b-col md="3" 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-->
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-card-group class="mb-4">
|
||||
<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 height={} 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 height={} 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 height={} 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 height={} 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 height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
<b-row>
|
||||
<b-col sm="6" 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 height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-xs mt-3 mb-0" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-xs mt-3 mb-0"variant="info" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" 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 height={} class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" 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 height={} class="progress-white progress-xs mt-3" :value="25"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'widgets',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Widgets'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<b-breadcrumb :items="items"/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'breadcrumbs',
|
||||
data () {
|
||||
return {
|
||||
items: [{
|
||||
text: 'Admin',
|
||||
href: '#'
|
||||
}, {
|
||||
text: 'Manage',
|
||||
href: '#'
|
||||
}, {
|
||||
text: 'Library',
|
||||
active: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge variant="success" class="float-right">Success</b-badge>
|
||||
</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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge pill variant="danger" class="float-right">42</b-badge>
|
||||
</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>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline" border-variant="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>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-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>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
<b-col sm="6" 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>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'cards'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/carousel" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-carousel id="carousel1"
|
||||
style="text-shadow: 1px 1px 2px #333;"
|
||||
controls
|
||||
indicators
|
||||
background="#ababab"
|
||||
:interval="4000"
|
||||
img-width="1024"
|
||||
img-height="480"
|
||||
v-model="slide"
|
||||
@sliding-start="onSlideStart"
|
||||
@sliding-end="onSlideEnd"
|
||||
>
|
||||
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide caption="First slide"
|
||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
img-src="https://lorempixel.com/1024/480/technics/2/"
|
||||
></b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/4/">
|
||||
<h1>Hello world!</h1>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with image only -->
|
||||
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with img slot -->
|
||||
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
|
||||
<b-carousel-slide>
|
||||
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
|
||||
src="https://lorempixel.com/1024/480/technics/5/" alt="image slot">
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
|
||||
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
||||
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
|
||||
ut lacus vel interdum.
|
||||
</p>
|
||||
</b-carousel-slide>
|
||||
|
||||
</b-carousel>
|
||||
|
||||
<p class="mt-4">
|
||||
Slide #: {{ slide }}<br>
|
||||
Sliding: {{ sliding }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'carousels',
|
||||
data () {
|
||||
return {
|
||||
slide: 0,
|
||||
sliding: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSlideStart (slide) {
|
||||
this.sliding = true
|
||||
},
|
||||
onSlideEnd (slide) {
|
||||
this.sliding = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/collapse" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
|
||||
<b-collapse id="collapse1" class="mt-2">
|
||||
<b-card>
|
||||
<p class="card-text">Collapse contents Here</p>
|
||||
<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
|
||||
<b-collapse id=collapse1_inner class="mt-2">
|
||||
<b-card>Hello!</b-card>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>v-b-toggle</code>directive</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Using modifiers -->
|
||||
<b-btn v-b-toggle.collapse2 class="m-1">Toggle Collapse</b-btn>
|
||||
|
||||
<!-- Using value -->
|
||||
<b-btn v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</b-btn>
|
||||
|
||||
<!-- element to collapse -->
|
||||
<b-collapse id="collapse2">
|
||||
<b-card>
|
||||
I am collapsible content!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>visibility</code></small>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
|
||||
<b-collapse visible id="collapse3">
|
||||
<b-card>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with<code>v-model</code></small>
|
||||
</div>
|
||||
<div>
|
||||
<b-btn @click="showCollapse = !showCollapse"
|
||||
:class="showCollapse ? 'collapsed' : null"
|
||||
aria-controls="collapse4"
|
||||
:aria-expanded="showCollapse ? 'true' : 'false'">
|
||||
Toggle Collapse
|
||||
</b-btn>
|
||||
<b-collapse class="mt-2" v-model="showCollapse" id="collapse4">
|
||||
<b-card>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>multiple elements</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Single button triggers two b-collapse components -->
|
||||
<b-btn v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</b-btn>
|
||||
|
||||
<!-- elements to collapse -->
|
||||
<b-collapse id="collapseA" class="mt-2">
|
||||
<b-card>
|
||||
I am collapsable content A!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
<b-collapse id="collapseB" class="mt-2">
|
||||
<b-card>
|
||||
I am collapsable content B!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Collapse</strong><small><code>accordion</code>support</small>
|
||||
</div>
|
||||
<div role="tablist">
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<p class="card-text">
|
||||
I start opened because <code>visible</code> is <code>true</code>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'collapses',
|
||||
data () {
|
||||
return {
|
||||
showCollapse: true,
|
||||
text: `
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
|
||||
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
|
||||
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
|
||||
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
|
||||
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore VHS.
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||
<p>For more information visit website</p>
|
||||
<b-btn variant="primary" href="#">More Info</b-btn>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
|
||||
<small>with slots</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron>
|
||||
<template slot="header">
|
||||
Bootstrap 4
|
||||
</template>
|
||||
<template slot="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</template>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<b-btn variant="primary" href="#">Do Something</b-btn>
|
||||
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
|
||||
<small>variants</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
|
||||
<template slot="header">
|
||||
Bootstrap 4
|
||||
</template>
|
||||
<template slot="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</template>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</b-jumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'jumbotrons'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/list-group" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item>Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
||||
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
|
||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>active items</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item>Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
||||
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
|
||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>disabled items</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
||||
<b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
|
||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>actionable items</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
|
||||
<b-list-group-item href="#" active>Link with active state</b-list-group-item>
|
||||
<b-list-group-item href="#">Action links are easy</b-list-group-item>
|
||||
<b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>buttons</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item button>Button item</b-list-group-item>
|
||||
<b-list-group-item button>I am a button</b-list-group-item>
|
||||
<b-list-group-item button disabled>Disabled button</b-list-group-item>
|
||||
<b-list-group-item button>This is a button too</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>with badges</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<b-badge variant="primary" pill>14</b-badge>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<b-badge variant="primary" pill>2</b-badge>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<b-badge variant="primary" pill>1</b-badge>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item>This is a default list group item</b-list-group-item>
|
||||
<b-list-group-item variant="primary">This is a primary list group item</b-list-group-item>
|
||||
<b-list-group-item variant="secondary">This is a secondary list group item</b-list-group-item>
|
||||
<b-list-group-item variant="success">This is a success list group item</b-list-group-item>
|
||||
<b-list-group-item variant="danger">This is a danger list group item</b-list-group-item>
|
||||
<b-list-group-item variant="warning">This is a warning list group item</b-list-group-item>
|
||||
<b-list-group-item variant="info">This is a info list group item</b-list-group-item>
|
||||
<b-list-group-item variant="light">This is a light list group item</b-list-group-item>
|
||||
<b-list-group-item variant="dark">This is a dark list group item</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants active</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#">This is a default list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="primary">This is a primary list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="secondary">This is a secondary list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="success">This is a success list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="danger">This is a danger list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="warning">This is a warning list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="info">This is a info list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="light">This is a light list group item</b-list-group-item>
|
||||
<b-list-group-item href="#" variant="dark">This is a dark list group item</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>inside cards</small>
|
||||
</div>
|
||||
<b-card-group deck>
|
||||
<b-card header="<b>Card with list group</b>">
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
<p class="card-text mt-2">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</p>
|
||||
</b-card>
|
||||
<b-card no-body header="<b>Card with flush list group</b>">
|
||||
<b-list-group flush>
|
||||
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
|
||||
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
|
||||
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
|
||||
</b-list-group>
|
||||
<b-card-body>
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>custom content</small>
|
||||
</div>
|
||||
<b-list-group>
|
||||
<b-list-group-item href="#" active class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item href="#" class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item href="#" disabled class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">Disabled List group item</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'list-groups'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/navbar" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-navbar toggleable="md" type="dark" variant="info">
|
||||
|
||||
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
|
||||
|
||||
<b-navbar-brand href="#">NavBar</b-navbar-brand>
|
||||
|
||||
<b-collapse is-nav id="nav_collapse">
|
||||
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<b-nav-item href="#" disabled>Disabled</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto">
|
||||
|
||||
<b-nav-form>
|
||||
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
|
||||
<b-nav-item-dropdown right>
|
||||
<!-- Using button-content slot -->
|
||||
<template slot="button-content">
|
||||
<em>User</em>
|
||||
</template>
|
||||
<b-dropdown-item href="#">Profile</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Signout</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>brand</small>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Image and text -->
|
||||
<b-navbar variant="faded" type="light">
|
||||
<b-navbar-brand tag="h1" href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
|
||||
BootstrapVue
|
||||
</b-navbar-brand>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>text</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar toggleable type="light" variant="light">
|
||||
<b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
|
||||
<b-navbar-brand>BootstrapVue</b-navbar-brand>
|
||||
<b-collapse is-nav id="nav_text_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-text>Navbar text</b-nav-text>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>dropdown</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar type="dark" variant="primary" toggleable>
|
||||
<b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
|
||||
<b-collapse is-nav id="nav_dropdown_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Home</b-nav-item>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<!-- Navbar dropdowns -->
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
<b-nav-item-dropdown text="User" right>
|
||||
<b-dropdown-item href="#">Account</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Settings</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>form</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
|
||||
<b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
|
||||
<small>input group</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-input-group left="@">
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'navbars'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/nav" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>tab style</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav tabs>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>pill style</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>fill tabs</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav fill tabs>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Link with a long name </b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>justified tabs</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav justified tabs>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Link with a long name </b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>dropdown support</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav pills>
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" right>
|
||||
<b-dropdown-item>one</b-dropdown-item>
|
||||
<b-dropdown-item>two</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>three</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>vertical variation</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-nav vertical class="w-25">
|
||||
<b-nav-item active>Active</b-nav-item>
|
||||
<b-nav-item>Link</b-nav-item>
|
||||
<b-nav-item>Another Link</b-nav-item>
|
||||
<b-nav-item disabled>Disabled</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'navs'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Default</h6>
|
||||
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<div class="d-sm-down-none">
|
||||
<h6>Large</h6>
|
||||
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Pagination</strong>
|
||||
<small>alignment</small>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Pagination</strong>
|
||||
<small>navigation</small>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Default</h6>
|
||||
<b-pagination-nav base-url="#" :number-of-pages="10" v-model="currentPage"/>
|
||||
|
||||
<h6 class="mt-4">With link generator function</h6>
|
||||
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" v-model="currentPage"/>
|
||||
<br>
|
||||
|
||||
<div class="mt-4">currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'paginations',
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkGen (pageNum) {
|
||||
return '#page/' + pageNum + '/foobar'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
|
||||
Hover Me
|
||||
</b-btn>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn id="popoverButton-open" variant="primary">Button</b-btn>
|
||||
|
||||
<b-popover show target="popoverButton-open" title="Popover">
|
||||
I start <strong>open</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>placement</small>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<b-row>
|
||||
<b-col md="4" class="py-4 text-center"
|
||||
v-for="placement in placements" :key="placement">
|
||||
<b-btn :id="'exPopover1-'+placement" variant="primary">
|
||||
{{ placement }}
|
||||
</b-btn>
|
||||
<b-popover :target="'exPopover1-'+placement"
|
||||
:placement="placement"
|
||||
title="Popover!"
|
||||
triggers="hover focus"
|
||||
:content="`Placement ${placement}`">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card class="d-sm-down-none"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>via properties or slots</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover2" variant="primary">Using properties</b-btn>
|
||||
<b-popover target="exPopover2"
|
||||
title="Prop Examples"
|
||||
triggers="hover focus"
|
||||
content="Embedding content using properties is easy">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover3" variant="primary">Using slots</b-btn>
|
||||
<b-popover target="exPopover3" triggers="hover focus">
|
||||
<template slot="title">Content via Slots</template>
|
||||
Embedding content <span class="text-danger">using slots</span>
|
||||
affords you <em>greater <strong>control.</strong></em> and
|
||||
basic HTML support.
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>show</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>
|
||||
|
||||
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
|
||||
<small>open/close events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
|
||||
<small>enable/disable events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onEnable">Enable</b-btn>
|
||||
<b-btn class="px-1" @click="onDisable">Disable</b-btn>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong><small><code>v-b-popover</code>directive</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.top="'I am Top'"
|
||||
title="Popover!"
|
||||
variant="primary">Top</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.left="'I am Left'"
|
||||
title="Popover!"
|
||||
variant="primary">Left</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.right="'I am Right'"
|
||||
title="Popover!"
|
||||
variant="primary">Right</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.bottom="'I am Bottom'"
|
||||
title="Popover!"
|
||||
variant="primary">Bottom</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'popovers',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'topright', 'top', 'topleft',
|
||||
'bottomright', 'bottom', 'bottomleft',
|
||||
'righttop', 'right', 'lefttop',
|
||||
'rightbottom', 'left', 'leftbottom'
|
||||
],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen () {
|
||||
this.$refs.popover1.$emit('open')
|
||||
},
|
||||
onClose () {
|
||||
this.$refs.popover1.$emit('close')
|
||||
},
|
||||
onEnable () {
|
||||
this.$refs.popover2.$emit('enable')
|
||||
},
|
||||
onDisable () {
|
||||
this.$refs.popover2.$emit('disable')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Progress</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/progress" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :value="counter" :max="max" show-progress animated></b-progress>
|
||||
<b-progress class="mt-1" :max="max" show-value>
|
||||
<b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
|
||||
<b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
|
||||
<b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>labels</small>
|
||||
</div>
|
||||
<div>
|
||||
<h5>No label</h5>
|
||||
<b-progress :value="value" :max="max2" class="mb-3"></b-progress>
|
||||
<h5>Value label</h5>
|
||||
<b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
|
||||
<h5>Progress label</h5>
|
||||
<b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
|
||||
<h5>Value label with precision</h5>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
|
||||
<h5>Progress label with precision</h5>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>width</small>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Default width</h5>
|
||||
<b-progress :value="value3" class="mb-3"></b-progress>
|
||||
<h5>Custom widths</h5>
|
||||
<b-progress :value="value3" class="w-75 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-50 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-25"></b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>height</small>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Default height</h5>
|
||||
<b-progress :value="value3" show-progress class="mb-3"></b-progress>
|
||||
<h5>Custom heights</h5>
|
||||
<b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="2px" :value="value3"></b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>variants</small>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="bar in bars" class="row mb-1">
|
||||
<div class="col-sm-2">{{ bar.variant }}:</div>
|
||||
<div class="col-sm-10 pt-1">
|
||||
<b-progress :value="bar.value"
|
||||
:variant="bar.variant"
|
||||
:key="bar.variant"
|
||||
></b-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>striped</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-button variant="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>animated</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress>
|
||||
<b-button variant="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>multiple bars</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-progress :max="max3" class="mb-3"></b-progress-bar>
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-value striped :max="max3" class="mb-3"></b-progress-bar>
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
|
||||
</b-progress>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'progress-bars',
|
||||
data () {
|
||||
return {
|
||||
counter: 45,
|
||||
max: 100,
|
||||
max2: 50,
|
||||
value: 33.333333333,
|
||||
value3: 75,
|
||||
bars: [
|
||||
{variant: 'success', value: 75},
|
||||
{variant: 'info', value: 75},
|
||||
{variant: 'warning', value: 75},
|
||||
{variant: 'danger', value: 75},
|
||||
{variant: 'primary', value: 75},
|
||||
{variant: 'secondary', value: 75},
|
||||
{variant: 'dark', value: 75}
|
||||
],
|
||||
timer: null,
|
||||
striped: true,
|
||||
animate: true,
|
||||
max3: 100,
|
||||
values: [ 15, 30, 20 ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clicked () {
|
||||
this.counter = Math.random() * this.max
|
||||
console.log('Change progress to ' +
|
||||
Math.round(this.counter * 100) / 100)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setInterval(() => {
|
||||
this.bars.forEach(bar => {
|
||||
bar.value = 25 + (Math.random() * 75)
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
<b-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>
|
||||
</b-col>
|
||||
|
||||
<b-col md="12">
|
||||
<b-card no-body>
|
||||
<div slot="header">
|
||||
Sizes
|
||||
</div>
|
||||
<b-card-body class="p-0">
|
||||
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
|
||||
<template slot="example" slot-scope="data">
|
||||
<c-switch :type="data.value.type" :variant="data.value.variant" :size="data.value.size" :checked="data.value.checked"/>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cSwitch from '../../components/Switch'
|
||||
|
||||
export default {
|
||||
name: 'switches',
|
||||
components: {
|
||||
cSwitch
|
||||
},
|
||||
computed: {
|
||||
icon (icon) {
|
||||
return icon
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
fields: [
|
||||
{key: 'size'},
|
||||
{key: 'example'},
|
||||
{key: 'css_class', label: 'CSS Class'}
|
||||
],
|
||||
items: [
|
||||
{size: 'Large', example: {type: '3d', variant: 'primary', size: 'lg', checked: true}, css_class: 'Add following code <code>size="lg"</code>'},
|
||||
{size: 'Normal', example: {type: '3d', variant: 'primary', size: '', checked: true}, css_class: '-'},
|
||||
{size: 'Small', example: {type: '3d', variant: 'primary', size: 'sm', checked: true}, css_class: 'Add following code <code>size="sm"</code>'},
|
||||
{size: 'Extra small', example: {type: '3d', variant: 'primary', size: 'xs', checked: true}, css_class: 'Add following code <code>size="xs"</code>'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<b-card :header="caption">
|
||||
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
|
||||
<template slot="status" slot-scope="data">
|
||||
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
|
||||
</template>
|
||||
</b-table>
|
||||
<nav>
|
||||
<b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
|
||||
</nav>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Randomize array element order in-place.
|
||||
* Using Durstenfeld shuffle algorithm.
|
||||
*/
|
||||
const shuffleArray = (array) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'c-table',
|
||||
props: {
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
striped: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
items: shuffleArray([
|
||||
{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]),
|
||||
fields: [
|
||||
{key: 'username'},
|
||||
{key: 'registered'},
|
||||
{key: 'role'},
|
||||
{key: 'status'}
|
||||
],
|
||||
currentPage: 1,
|
||||
perPage: 5,
|
||||
totalRows: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
return status === 'Active' ? 'success'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
getRowCount (items) {
|
||||
return items.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<c-table caption="<i class='fa fa-align-justify'></i> Simple Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cTable from './Table.vue'
|
||||
|
||||
export default {
|
||||
name: 'tables',
|
||||
components: {cTable}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Tooltips</strong><small><code>v-b-tooltip</code>directive</small>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn v-b-tooltip.hover title="I am a tooltip!">Hover Me</b-btn>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn id="tooltipButton-2" variant="primary">Button</b-btn>
|
||||
<b-tooltip show target="tooltipButton-2">
|
||||
I start open
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>b-tooltip</code>component</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton1" variant="outline-success">Live chat</b-btn>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton2" variant="outline-success">Html chat</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<!-- Tooltip title specified via prop title -->
|
||||
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
|
||||
|
||||
<!-- HTML title specified via default slot -->
|
||||
<b-tooltip target="exButton2" placement="bottom">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>show</code>prop</small>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
|
||||
<br><br>
|
||||
<b-btn @click="show = !show">Toggle Tooltip</b-btn>
|
||||
|
||||
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>open close</code>events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
</div>
|
||||
|
||||
<b-tooltip ref="tooltip" target="tooltipButton-showEvent">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>enable disable</code>events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn @click="disabled = !disabled">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
|
||||
</b-btn>
|
||||
|
||||
<b-btn @click="disableByRef">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
|
||||
</b-btn>
|
||||
|
||||
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tooltips',
|
||||
data () {
|
||||
return {
|
||||
show: true,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen () {
|
||||
this.$refs.tooltip.$emit('open')
|
||||
},
|
||||
onClose () {
|
||||
this.$refs.tooltip.$emit('close')
|
||||
},
|
||||
disableByRef () {
|
||||
if (this.disabled) {
|
||||
this.$refs.tooltip2.$emit('enable')
|
||||
} else {
|
||||
this.$refs.tooltip2.$emit('disable')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" >
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap button group</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/button-group" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-button-group>
|
||||
<b-button>One</b-button>
|
||||
<b-button>Two</b-button>
|
||||
<b-button>Three</b-button>
|
||||
<b-button>Four</b-button>
|
||||
<b-button class="d-sm-down-none">Five</b-button>
|
||||
</b-button-group>
|
||||
<br><br>
|
||||
<b-button-group>
|
||||
<b-button class="d-sm-down-none" variant="success">Success</b-button>
|
||||
<b-button variant="info">Info</b-button>
|
||||
<b-button variant="warning">Warn</b-button>
|
||||
<b-button class="d-sm-down-none" variant="primary">Primary</b-button>
|
||||
<b-button variant="danger">Danger</b-button>
|
||||
<b-button variant="link">Link</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Button group</strong> sizing
|
||||
</div>
|
||||
<div>
|
||||
<b-button-group>
|
||||
<b-button>Left</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Right</b-button>
|
||||
</b-button-group>
|
||||
<br><br>
|
||||
<b-button-group size="sm">
|
||||
<b-button>Left</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Right</b-button>
|
||||
</b-button-group>
|
||||
<br><br>
|
||||
<b-button-group size="lg">
|
||||
<b-button>Left</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Right</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Button group</strong> dropdown support
|
||||
</div>
|
||||
<div>
|
||||
<b-button-group>
|
||||
<b-button class="d-sm-down-none">Button 1</b-button>
|
||||
<b-button class="d-sm-down-none">Button 2</b-button>
|
||||
<b-dropdown right text="Menu" variant="success">
|
||||
<b-dropdown-item>Item 1</b-dropdown-item>
|
||||
<b-dropdown-item>Item 2</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>Item 3</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-button class="d-sm-down-none">Button 3</b-button>
|
||||
<b-dropdown right split text="Split Menu" variant="info">
|
||||
<b-dropdown-item>Item 1</b-dropdown-item>
|
||||
<b-dropdown-item>Item 2</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>Item 3</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Button group</strong> vertical variation
|
||||
</div>
|
||||
<div>
|
||||
<b-button-group vertical>
|
||||
<b-button>Top</b-button>
|
||||
<b-button>Middle</b-button>
|
||||
<b-button>Bottom</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn class="d-sm-down-none">«</b-btn>
|
||||
<b-btn>‹</b-btn>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn class="d-sm-down-none">Edit</b-btn>
|
||||
<b-btn>Undo</b-btn>
|
||||
<b-btn>Redo</b-btn>
|
||||
</b-button-group>
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn>›</b-btn>
|
||||
<b-btn class="d-sm-down-none">»</b-btn>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</div>
|
||||
<hr class="d-sm-down-none"/>
|
||||
<div>
|
||||
<b-button-toolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
|
||||
<b-button-group size="sm" class="mx-1">
|
||||
<b-btn>New</b-btn>
|
||||
<b-btn>Edit</b-btn>
|
||||
</b-button-group>
|
||||
<b-input-group size="sm" class="w-25 mx-1">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>$</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input value="100" class="text-right"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-input-group-text>.00</b-input-group-text>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<b-input-group size="sm" class="w-25 mx-1">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>Size</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select>
|
||||
</b-input-group>
|
||||
<b-button-group size="sm" class="mx-1">
|
||||
<b-btn>Save</b-btn>
|
||||
<b-btn>Cancel</b-btn>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</div>
|
||||
<hr/>
|
||||
<div>
|
||||
<b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<b-button-group class="mx-1 d-sm-down-none">
|
||||
<b-btn>New</b-btn>
|
||||
<b-btn>Edit</b-btn>
|
||||
<b-btn>Undo</b-btn>
|
||||
</b-button-group>
|
||||
<b-dropdown class="mx-1" right text="menu">
|
||||
<b-dropdown-item>Item 1</b-dropdown-item>
|
||||
<b-dropdown-item>Item 2</b-dropdown-item>
|
||||
<b-dropdown-item>Item 3</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-button-group class="mx-1">
|
||||
<b-btn>Save</b-btn>
|
||||
<b-btn>Cancel</b-btn>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'button-groups'
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Dropdown</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown1" text="Dropdown Button" class="m-2">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item>Something else here...</b-dropdown-item>
|
||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-buttons" text="Dropdown using buttons as menu items" class="m-2">
|
||||
<b-dropdown-item-button>I'm a button</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>I'm also a button</b-dropdown-item-button>
|
||||
<b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-divider" text="Dropdown with divider" class="m-2">
|
||||
<b-dropdown-item-button>First item</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Second item</b-dropdown-item-button>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item-button>Separated Item</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-header" text="Dropdown with header" class="m-2">
|
||||
<b-dropdown-header>Dropdown header</b-dropdown-header>
|
||||
<b-dropdown-item-button>First item</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Second Item</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>positioning</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
|
||||
<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>
|
||||
<b-dropdown id="ddown-right" right text="Right align" variant="primary" class="m-2">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="info" class="m-2">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-offset" offset="25" text="Offset Dropdown" class="m-2">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-split" split text="Split Dropdown" class="m-2">
|
||||
<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>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>hidden caret</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown variant="link" size="lg" no-caret>
|
||||
<template slot="button-content">
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>sizing</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<b-dropdown id="ddown-lg-split" size="lg" split text="Large Split" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<br>
|
||||
<b-dropdown id="ddown-sm" size="sm" text="Small" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<b-dropdown id="ddown-sm-split" size="sm" split text="Small Split" class="m-2">
|
||||
<b-dropdown-item-button>Action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Another action</b-dropdown-item-button>
|
||||
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>headers and accessibility</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
|
||||
<div role="group" aria-lableledby="header1">
|
||||
<b-dropdown-header id="header1">Groups</b-dropdown-header>
|
||||
<b-dropdown-item-button aria-describedby="header1">Add</b-dropdown-item-button>
|
||||
<b-dropdown-item-button aria-describedby="header1">Delete</b-dropdown-item-button>
|
||||
</div>
|
||||
<div role="group" aria-lableledby="header2">
|
||||
<b-dropdown-header id="header2">Users</b-dropdown-header>
|
||||
<b-dropdown-item-button aria-describedby="header2">Add</b-dropdown-item-button>
|
||||
<b-dropdown-item-button aria-describedby="header2">Delete</b-dropdown-item-button>
|
||||
</div>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item-button>Something <strong>not</strong> associated with user</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong><small><code>variant</code></small>
|
||||
</div>
|
||||
<b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_secondary" text="Secondary" variant="secondary" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_success" text="Success" variant="success" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_warning" text="Warning" variant="warning" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_danger" text="Danger" variant="danger" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_info" text="Info" variant="info" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_light" text="Light" variant="light" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_dark" text="Dark" variant="dark" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-dropdown size="sm" id="ddown_link" text="Link" variant="link" class="m-0">
|
||||
<b-dropdown-item>First Action</b-dropdown-item>
|
||||
<b-dropdown-item>Second Action</b-dropdown-item>
|
||||
<b-dropdown-item>Third Action</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'dropdowns'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="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>
|
||||
</b-col><!--/.col-->
|
||||
<b-col cols="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>
|
||||
</b-col><!--/.col-->
|
||||
|
||||
<b-col cols="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>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'social-buttons'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="css">
|
||||
.btn {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-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 header-tag="header">
|
||||
<div slot="header">
|
||||
<strong>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="primary" :pressed="true">Primary</b-button>
|
||||
<b-button variant="secondary" :pressed="true">Secondary</b-button>
|
||||
<b-button variant="success" :pressed="true">Success</b-button>
|
||||
<b-button variant="info" :pressed="true">Info</b-button>
|
||||
<b-button variant="warning" :pressed="true">Warning</b-button>
|
||||
<b-button variant="danger" :pressed="true">Danger</b-button>
|
||||
<b-button variant="link" :pressed="true">Link</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Toggle pressed state</strong>
|
||||
</div>
|
||||
<b-button variant="primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</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>
|
||||
</b-col><!--/.col-->
|
||||
<b-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>
|
||||
</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>Pressed state</strong> <small>Add this <code>:pressed="true"</code></small>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :pressed="true">Primary</b-button>
|
||||
<b-button variant="outline-secondary" :pressed="true">Secondary</b-button>
|
||||
<b-button variant="outline-success" :pressed="true">Success</b-button>
|
||||
<b-button variant="outline-info" :pressed="true">Info</b-button>
|
||||
<b-button variant="outline-warning" :pressed="true">Warning</b-button>
|
||||
<b-button variant="outline-danger" :pressed="true">Danger</b-button>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<strong>Toggle pressed state</strong>
|
||||
</div>
|
||||
<b-button variant="outline-primary" :pressed.sync="myToggle">Primary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-secondary" :pressed.sync="myToggle">Secondary {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-success" :pressed.sync="myToggle">Success {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-info" :pressed.sync="myToggle">Info {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-warning" :pressed.sync="myToggle">Warning {{myToggle ? 'On ' : 'Off'}}</b-button>
|
||||
<b-button variant="outline-danger" :pressed.sync="myToggle">Danger {{myToggle ? 'On ' : 'Off'}}</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>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'standard-buttons',
|
||||
data: () => {
|
||||
return { myToggle: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Bar,
|
||||
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,23 @@
|
||||
<script>
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Doughnut,
|
||||
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,19 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
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,23 @@
|
||||
<script>
|
||||
import { Pie } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Pie,
|
||||
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,32 @@
|
||||
<script>
|
||||
import { PolarArea } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: PolarArea,
|
||||
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,34 @@
|
||||
<script>
|
||||
import { Radar } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Radar,
|
||||
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,51 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
// const brandPrimary = '#20a8d8'
|
||||
// const brandSuccess = '#4dbd74'
|
||||
// const brandInfo = '#63c2de'
|
||||
// const brandWarning = '#f8cb00'
|
||||
// const brandDanger = '#f86c6b'
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['data', 'height', 'width', 'variant'],
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: this.variant ? this.variant : '#c2cfd6',
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<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 {
|
||||
extends: Bar,
|
||||
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,59 @@
|
||||
<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 {
|
||||
extends: Line,
|
||||
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,61 @@
|
||||
<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 {
|
||||
extends: Line,
|
||||
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,46 @@
|
||||
<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 {
|
||||
extends: Line,
|
||||
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,100 @@
|
||||
<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 {
|
||||
extends: Line,
|
||||
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,44 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
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
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,751 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-card no-body class="card-default">
|
||||
<div slot="header">
|
||||
<i class="fa fa-picture-o"></i> Simple Line Icons
|
||||
</div>
|
||||
<b-card-body>
|
||||
<b-row class="text-center">
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
|
||||
</b-col>
|
||||
|
||||
<b-col> cols="6" sm="4" md="3">
|
||||
<i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3">
|
||||
<i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'simple-line-icons'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Alert</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/alert" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show variant="primary">Primary Alert</b-alert>
|
||||
<b-alert show variant="secondary">Secondary Alert</b-alert>
|
||||
<b-alert show variant="success">Success Alert</b-alert>
|
||||
<b-alert show variant="danger">Danger Alert</b-alert>
|
||||
<b-alert show variant="warning">Warning Alert</b-alert>
|
||||
<b-alert show variant="info">Info Alert</b-alert>
|
||||
<b-alert show variant="light">Light Alert</b-alert>
|
||||
<b-alert show variant="dark">Dark Alert</b-alert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</b-alert>
|
||||
<b-alert show variant="dark">
|
||||
Dark Alert with
|
||||
<b-link href="#" class="alert-link">an example link</b-link>
|
||||
.
|
||||
</b-alert>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i>Alerts</strong>
|
||||
<small>with additional content</small>
|
||||
</div>
|
||||
<b-alert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
This example text is going to run a bit longer so that you can see
|
||||
how spacing within an alert works with this kind of content.
|
||||
</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</b-alert>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i>Alerts</strong>
|
||||
<small>dismissible</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert show dismissible>
|
||||
Dismissible Alert!
|
||||
</b-alert>
|
||||
<b-alert variant="danger"
|
||||
dismissible
|
||||
:show="showDismissibleAlert"
|
||||
@dismissed="showDismissibleAlert=false">
|
||||
Dismissible Alert!
|
||||
</b-alert>
|
||||
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
|
||||
</b-btn>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i>Alerts</strong>
|
||||
<small>auto dismissible</small>
|
||||
</div>
|
||||
<div>
|
||||
<b-alert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="warning"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
|
||||
</b-alert>
|
||||
<b-alert :show="dismissCountDown"
|
||||
dismissible
|
||||
variant="info"
|
||||
@dismissed="dismissCountdown=0"
|
||||
@dismiss-count-down="countDownChanged">
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<b-progress variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</b-progress>
|
||||
</b-alert>
|
||||
<b-btn @click="showAlert" variant="info" class="m-1">
|
||||
Show alert with timer
|
||||
</b-btn>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'alerts',
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
dismissCountDown: 0,
|
||||
showDismissibleAlert: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countDownChanged (dismissCountDown) {
|
||||
this.dismissCountDown = dismissCountDown
|
||||
},
|
||||
showAlert () {
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Badge</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/badge" target="_blank"><small class="text-muted">docs</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Example heading <b-badge>New</b-badge></h2>
|
||||
<h3>Example heading <b-badge>New</b-badge></h3>
|
||||
<h4>Example heading <b-badge>New</b-badge></h4>
|
||||
<h5>Example heading <b-badge>New</b-badge></h5>
|
||||
<h6>Example heading <b-badge>New</b-badge></h6>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<b-button variant="primary">
|
||||
Notifications <b-badge variant="light" :style="{position: 'static'}">4</b-badge>
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card header="Badge <small>contextual variations</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div>
|
||||
<b-badge variant="primary">Primary</b-badge>
|
||||
<b-badge variant="secondary">Secondary</b-badge>
|
||||
<b-badge variant="success">Success</b-badge>
|
||||
<b-badge variant="danger">Danger</b-badge>
|
||||
<b-badge variant="warning">Warning</b-badge>
|
||||
<b-badge variant="info">Info</b-badge>
|
||||
<b-badge variant="light">Light</b-badge>
|
||||
<b-badge variant="dark">Dark</b-badge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Badge <small>pills</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div>
|
||||
<b-badge pill variant="primary">Primary</b-badge>
|
||||
<b-badge pill variant="secondary">Secondary</b-badge>
|
||||
<b-badge pill variant="success">Success</b-badge>
|
||||
<b-badge pill variant="danger">Danger</b-badge>
|
||||
<b-badge pill variant="warning">Warning</b-badge>
|
||||
<b-badge pill variant="info">Info</b-badge>
|
||||
<b-badge pill variant="light">Light</b-badge>
|
||||
<b-badge pill variant="dark">Dark</b-badge>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card header="Badge <small>actionable</small>"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div>
|
||||
<b-badge href="#" variant="primary">Primary</b-badge>
|
||||
<b-badge href="#" variant="secondary">Secondary</b-badge>
|
||||
<b-badge href="#" variant="success">Success</b-badge>
|
||||
<b-badge href="#" variant="danger">Danger</b-badge>
|
||||
<b-badge href="#" variant="warning">Warning</b-badge>
|
||||
<b-badge href="#" variant="info">Info</b-badge>
|
||||
<b-badge href="#" variant="light">Light</b-badge>
|
||||
<b-badge href="#" variant="dark">Dark</b-badge>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'badges',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="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>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.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" ok-variant="success">
|
||||
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" ok-variant="warning">
|
||||
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" ok-variant="danger">
|
||||
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" ok-variant="info">
|
||||
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,49 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-col md="8">
|
||||
<b-card-group>
|
||||
<b-card no-body class="p-4">
|
||||
<b-card-body>
|
||||
<h1>Login</h1>
|
||||
<p class="text-muted">Sign In to your account</p>
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</b-input-group>
|
||||
<b-input-group class="mb-4">
|
||||
<b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</b-input-group>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<b-button variant="primary" class="px-4">Login</b-button>
|
||||
</b-col>
|
||||
<b-col cols="6" class="text-right">
|
||||
<b-button variant="link" class="px-0">Forgot password?</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%">
|
||||
<b-card-body class="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>
|
||||
<b-button variant="primary" class="active mt-3">Register Now!</b-button>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Login'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-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>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>
|
||||
<i class="fa fa-search"></i>
|
||||
</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<b-input-group-append>
|
||||
<b-button variant="info">Search</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page404'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-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>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>
|
||||
<i class="fa fa-search"></i>
|
||||
</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
|
||||
<b-input-group-append>
|
||||
<b-button variant="info">Search</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page500'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="app flex-row align-items-center">
|
||||
<div class="container">
|
||||
<b-row class="justify-content-center">
|
||||
<b-col md="6" sm="8">
|
||||
<b-card no-body class="mx-4">
|
||||
<b-card-body class="p-4">
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text><i class="icon-user"></i></b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</b-input-group>
|
||||
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text>@</b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</b-input-group>
|
||||
|
||||
<b-input-group class="mb-3">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text><i class="icon-lock"></i></b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</b-input-group>
|
||||
|
||||
<b-input-group class="mb-4">
|
||||
<b-input-group-prepend>
|
||||
<b-input-group-text><i class="icon-lock"></i></b-input-group-text>
|
||||
</b-input-group-prepend>
|
||||
<input type="password" class="form-control" placeholder="Repeat password">
|
||||
</b-input-group>
|
||||
|
||||
<b-button variant="success" block>Create Account</b-button>
|
||||
</b-card-body>
|
||||
<b-card-footer class="p-4">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<b-button block class="btn btn-facebook"><span>facebook</span></b-button>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<b-button block class="btn btn-twitter" type="button"><span>twitter</span></b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Register'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Theme colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-primary">Primary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-secondary">Secondary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-success">Success</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-danger">Danger</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-warning">Warning</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-info">Info</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-light">Light</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-dark">Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Grays
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 bg-gray-100">100</div>
|
||||
<div class="p-3 bg-gray-200">200</div>
|
||||
<div class="p-3 bg-gray-300">300</div>
|
||||
<div class="p-3 bg-gray-400">400</div>
|
||||
<div class="p-3 bg-gray-500">500</div>
|
||||
<div class="p-3 bg-gray-600">600</div>
|
||||
<div class="p-3 bg-gray-700">700</div>
|
||||
<div class="p-3 bg-gray-800">800</div>
|
||||
<div class="p-3 bg-gray-900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="icon-drop"></i> Additional colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-blue">Blue</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-indigo">Indigo</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-purple">Purple</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-pink">Pink</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-red">Red</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-orange">Orange</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-yellow">Yellow</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-green">Green</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-teal">Teal</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-cyan">Cyan</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'colors'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h1></h1></code></p>
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h2></h2></code></p>
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h3></h3></code></p>
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h4></h4></code></p>
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h5></h5></code></p>
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h6></h6></code></p>
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Display headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="display-1">Display 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-2">Display 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-3">Display 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-4">Display 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Inline text elements
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Description list alignment
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
<div class="bd-example">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">
|
||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'typography'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user