v4 initial commit
This commit is contained in:
Łukasz Holeczek
+2
-544
@@ -1,547 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<WidgetsDropdown/>
|
||||
<CCard>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-muted">November 2017</div>
|
||||
</CCol>
|
||||
<CCol sm="7" class="d-none d-md-block">
|
||||
<CButton color="primary" class="float-right">
|
||||
<CIcon name="cil-cloud-download"/>
|
||||
</CButton>
|
||||
<CButtonGroup class="float-right mr-3">
|
||||
<CButton
|
||||
color="outline-secondary"
|
||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||
:key="key"
|
||||
class="mx-0"
|
||||
:pressed="value === selected ? true : false"
|
||||
@click="selected = value"
|
||||
>
|
||||
{{value}}
|
||||
</CButton>
|
||||
</CButtonGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<MainChartExample style="height:300px;margin-top:40px;"/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CRow class="text-center">
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="success"
|
||||
:value="40"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="info"
|
||||
:value="20"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="warning"
|
||||
:value="60"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||
<div class="text-muted">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
color="danger"
|
||||
:value="80"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-muted">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<CProgress
|
||||
class="progress-xs mt-2"
|
||||
:precision="1"
|
||||
:value="40"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<WidgetsBrand/>
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Traffic & Sales
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout color="info">
|
||||
<small class="text-muted">New Clients</small><br>
|
||||
<strong class="h4">9,123</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout color="danger">
|
||||
<small class="text-muted">Recurring Clients</small><br>
|
||||
<strong class="h4">22,643</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Monday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
color="info"
|
||||
:value="34"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
color="danger"
|
||||
:value="78"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Tuesday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="56"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="94"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Wednesday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="12"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="67"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Thursday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="43"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="91"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Friday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="22"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="73"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Saturday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="53"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="82"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text">
|
||||
Sunday
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="9"
|
||||
color="info"
|
||||
/>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="69"
|
||||
color="danger"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend text-center">
|
||||
<small>
|
||||
<sup><CBadge shape="pill" color="info"> </CBadge></sup>
|
||||
New clients
|
||||
|
||||
<sup><CBadge shape="pill" color="danger"> </CBadge></sup>
|
||||
Recurring clients
|
||||
</small>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCallout color="warning">
|
||||
<small class="text-muted">Pageviews</small><br>
|
||||
<strong class="h4">78,623</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCallout color="success">
|
||||
<small class="text-muted">Organic</small><br>
|
||||
<strong class="h4">49,123</strong>
|
||||
</CCallout>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0">
|
||||
<ul class="horizontal-bars type-2">
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon name="cil-user" class="progress-group-icon"/>
|
||||
<span class="title">Male</span>
|
||||
<span class="ml-auto font-weight-bold">43%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="43"
|
||||
color="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-5">
|
||||
<div class="progress-group-header">
|
||||
<CIcon name="cil-user-female" class="progress-group-icon"/>
|
||||
<span class="title">Female</span>
|
||||
<span class="ml-auto font-weight-bold">37%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="37"
|
||||
color="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon name="cil-globe-alt" class="progress-group-icon"/>
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
191,235 <span class="text-muted small">(56%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="56"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="17"
|
||||
class="progress-group-icon"
|
||||
/>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
51,223 <span class="text-muted small">(15%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="15"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="17"
|
||||
class="progress-group-icon"
|
||||
/>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
37,564 <span class="text-muted small">(11%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="11"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="17"
|
||||
class="progress-group-icon"
|
||||
/>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="ml-auto font-weight-bold">
|
||||
27,319 <span class="text-muted small"> (8%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
:value="8"
|
||||
color="success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider text-center">
|
||||
<CButton color="link" size="sm" class="text-muted">
|
||||
<CIcon name="cil-options"/>
|
||||
</CButton>
|
||||
</div>
|
||||
</ul>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<br/>
|
||||
<CDataTable
|
||||
class="mb-0 table-outline"
|
||||
hover
|
||||
:items="tableItems"
|
||||
:fields="tableFields"
|
||||
head-color="light"
|
||||
no-sorting
|
||||
>
|
||||
<td slot="avatar" class="text-center" slot-scope="{item}">
|
||||
<div class="c-avatar">
|
||||
<img :src="item.avatar.url" class="c-avatar-img" alt="">
|
||||
<span
|
||||
class="c-avatar-status"
|
||||
:class="`bg-${item.avatar.status || 'secondary'}`"
|
||||
></span>
|
||||
</div>
|
||||
</td>
|
||||
<td slot="user" slot-scope="{item}">
|
||||
<div>{{item.user.name}}</div>
|
||||
<div class="small text-muted">
|
||||
<span>
|
||||
<template v-if="item.user.new">New</template>
|
||||
<template v-else>Recurring</template>
|
||||
</span> | Registered: {{item.user.registered}}
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
slot="country"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
>
|
||||
<CIcon
|
||||
:name="item.country.flag"
|
||||
height="25"
|
||||
/>
|
||||
</td>
|
||||
<td slot="usage" slot-scope="{item}">
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<strong>{{item.usage.value}}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<small class="text-muted">{{item.usage.period}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress
|
||||
class="progress-xs"
|
||||
v-model="item.usage.value"
|
||||
:color="color(item.usage.value)"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
slot="payment"
|
||||
slot-scope="{item}"
|
||||
class="text-center"
|
||||
>
|
||||
<CIcon
|
||||
:name="item.payment.icon"
|
||||
height="25"
|
||||
/>
|
||||
</td>
|
||||
<td slot="activity" slot-scope="{item}">
|
||||
<div class="small text-muted">Last login</div>
|
||||
<strong>{{item.activity}}</strong>
|
||||
</td>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<div class="dashboard">
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainChartExample from './charts/MainChartExample'
|
||||
import WidgetsDropdown from './widgets/WidgetsDropdown'
|
||||
import WidgetsBrand from './widgets/WidgetsBrand'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
MainChartExample,
|
||||
WidgetsDropdown,
|
||||
WidgetsBrand
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: 'Month',
|
||||
tableItems: [
|
||||
{
|
||||
avatar: { url: 'img/avatars/1.jpg', status: 'success' },
|
||||
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'USA', flag: 'cif-us' },
|
||||
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
|
||||
activity: '10 sec ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
|
||||
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Brazil', flag: 'cif-br' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Visa', icon: 'cib-cc-visa' },
|
||||
activity: '5 minutes ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
|
||||
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'India', flag: 'cif-in' },
|
||||
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Stripe', icon: 'cib-stripe' },
|
||||
activity: '1 hour ago'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/4.jpg', status: '' },
|
||||
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'France', flag: 'cif-fr' },
|
||||
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'PayPal', icon: 'cib-paypal' },
|
||||
activity: 'Last month'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/5.jpg', status: 'success' },
|
||||
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Spain', flag: 'cif-es' },
|
||||
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
|
||||
activity: 'Last week'
|
||||
},
|
||||
{
|
||||
avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
|
||||
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
|
||||
country: { name: 'Poland', flag: 'cif-pl' },
|
||||
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
|
||||
payment: { name: 'Amex', icon: 'cib-cc-amex' },
|
||||
activity: 'Last week'
|
||||
}
|
||||
],
|
||||
tableFields: [
|
||||
{ key: 'avatar', label: '', _classes: 'text-center' },
|
||||
{ key: 'user' },
|
||||
{ key: 'country', _classes: 'text-center' },
|
||||
{ key: 'usage' },
|
||||
{ key: 'payment', label: 'Payment method', _classes: 'text-center' },
|
||||
{ key: 'activity' },
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
color (value) {
|
||||
let $color
|
||||
if (value <= 25) {
|
||||
$color = 'info'
|
||||
} else if (value > 25 && value <= 50) {
|
||||
$color = 'success'
|
||||
} else if (value > 50 && value <= 75) {
|
||||
$color = 'warning'
|
||||
} else if (value > 75 && value <= 100) {
|
||||
$color = 'danger'
|
||||
}
|
||||
return $color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/breadcrumb"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
<strong>Vue Breadcrumb</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBreadcrumb :items="items"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
<Example href="breadcrumbs">
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem active>Home</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Library</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
|
||||
<CBreadcrumbItem href="#">Library</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Data</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
@@ -27,70 +28,6 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Breadcrumbs',
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
text: 'Admin',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Manage',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Library'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items2: [
|
||||
{
|
||||
text: 'Go to dashboard',
|
||||
to: '/dashboard'
|
||||
},
|
||||
{
|
||||
text: 'Go to widgets',
|
||||
to: '/Widgets'
|
||||
},
|
||||
{
|
||||
text: 'Go to Google',
|
||||
href: 'http://google.com'
|
||||
},
|
||||
{
|
||||
text: 'Current page'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items3: [
|
||||
{
|
||||
text: 'Added',
|
||||
to: '#2',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Custom',
|
||||
to: '#3',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Classes',
|
||||
to: '#4',
|
||||
addClasses: 'font-xl text-danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
name: "Breadcrumbs",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.breadcrumb-item + .font-xl.breadcrumb-item::before {
|
||||
color: rgb(140, 195, 38);
|
||||
content: '>>';
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,289 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card title
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/card-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
<CCardFooter>Card Footer</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with switch
|
||||
<CSwitch
|
||||
class="float-right"
|
||||
size="sm"
|
||||
shape="pill"
|
||||
color="info"
|
||||
data-on="On"
|
||||
data-off="Off"
|
||||
:checked="true"
|
||||
/>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge color="success" class="float-right">Success</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge shape="pill" color="danger" class="float-right">42</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="primary">
|
||||
<CCardHeader>Card outline primary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="secondary">
|
||||
<CCardHeader>Card outline secondary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="success">
|
||||
<CCardHeader>Card outline success</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="info">
|
||||
<CCardHeader>Card outline info</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="warning">
|
||||
<CCardHeader>Card outline warning</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="danger">
|
||||
<CCardHeader>Card outline danger</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="primary">
|
||||
<CCardHeader>Card with primary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="secondary">
|
||||
<CCardHeader>Card with secondary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="success">
|
||||
<CCardHeader>Card with success accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="danger">
|
||||
<CCardHeader>Card with danger accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" class="text-center" body-wrapper text-color="white">
|
||||
<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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard
|
||||
color="success"
|
||||
class="text-center"
|
||||
body-wrapper
|
||||
text-color="white"
|
||||
>
|
||||
<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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" class="text-center" body-wrapper text-color="white">
|
||||
<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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" class="text-center" body-wrapper text-color="white">
|
||||
<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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" class="text-center" body-wrapper text-color="white">
|
||||
<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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="secondary" class="text-center" body-wrapper>
|
||||
<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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="success" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show" color="secondary">
|
||||
<CCardHeader>
|
||||
Card with header actions
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||
<CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="isCollapsed" :duration="400">
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Cards',
|
||||
data: function () {
|
||||
return {
|
||||
show: true,
|
||||
isCollapsed: true,
|
||||
loremIpsum: '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.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol md="12" lg="7">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Carousel</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/carousel"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel
|
||||
arrows
|
||||
indicators
|
||||
animate
|
||||
height="400px"
|
||||
>
|
||||
<CCarouselItem
|
||||
captionHeader="First Slide"
|
||||
image="https://picsum.photos/1024/480/?image=52"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
captionHeader="Blank page"
|
||||
:image="{ placeholderColor: 'grey' }"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
image="https://picsum.photos/1024/480/?image=54"
|
||||
/>
|
||||
</CCarousel>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Carousels'
|
||||
}
|
||||
</script>
|
||||
@@ -1,153 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Collapse </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/collapse"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton @click="collapse = !collapse" color="primary" class="mb-2">
|
||||
Toggle Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="collapse" :duration="400">
|
||||
<CCard body-wrapper>
|
||||
<CCardText>Collapse contents Here</CCardText>
|
||||
<CButton
|
||||
@click="innerCollapse = !innerCollapse"
|
||||
size="sm"
|
||||
color="secondary"
|
||||
>
|
||||
Toggle Inner Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="innerCollapse" class="mt-2">
|
||||
<CCard body-wrapper>Hello!</CCard>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CButton
|
||||
@click="cardCollapse = !cardCollapse"
|
||||
tag="button"
|
||||
color="link"
|
||||
block
|
||||
class="text-left shadow-none card-header"
|
||||
>
|
||||
<h5 class="m-0">Collapsible card</h5>
|
||||
</CButton>
|
||||
<CCollapse :show="cardCollapse">
|
||||
<CCardBody class="m-1">
|
||||
{{text}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<small> accordion</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CCard class="mb-0">
|
||||
<CButton
|
||||
block
|
||||
color="link"
|
||||
class="text-left shadow-none card-header"
|
||||
@click="accordion = accordion === 0 ? false : 0"
|
||||
>
|
||||
<h5 class="m-0">Collapsible Group Item #1</h5>
|
||||
</CButton>
|
||||
<CCollapse :show="accordion === 0">
|
||||
<CCardBody>
|
||||
1. 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 sustainable VHS.
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard class="mb-0">
|
||||
<CButton
|
||||
block
|
||||
color="link"
|
||||
class="text-left shadow-none card-header"
|
||||
@click="accordion = accordion === 1 ? false : 1"
|
||||
>
|
||||
<h5 class="m-0">Collapsible Group Item #2</h5>
|
||||
</CButton>
|
||||
<CCollapse :show="accordion === 1">
|
||||
<CCardBody>
|
||||
2. 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 sustainable VHS.
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard class="mb-0">
|
||||
<CButton
|
||||
block
|
||||
color="link"
|
||||
class="text-left shadow-none card-header"
|
||||
@click="accordion = accordion === 2 ? false : 2"
|
||||
>
|
||||
<h5 class="m-0">Collapsible Group Item #3</h5>
|
||||
</CButton>
|
||||
<CCollapse :show="accordion === 2">
|
||||
<CCardBody>
|
||||
3. 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 havent heard of them accusamus labore sustainable VHS.
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Collapses',
|
||||
data () {
|
||||
return {
|
||||
collapse: false,
|
||||
cardCollapse: true,
|
||||
innerCollapse: false,
|
||||
accordion: 0,
|
||||
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>
|
||||
@@ -1,926 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Credit Card </strong> <small>Form</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/form-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Name"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Credit Card Number"
|
||||
placeholder="0000 0000 0000 0000"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Month"
|
||||
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Year"
|
||||
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="CVV/CVC"
|
||||
placeholder="123"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Company </strong><small>Form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Company"
|
||||
placeholder="Enter your company name"
|
||||
/>
|
||||
<CInput
|
||||
label="VAT"
|
||||
placeholder="PL1234567890"
|
||||
/>
|
||||
<CInput
|
||||
label="Street"
|
||||
placeholder="Enter street name"
|
||||
/>
|
||||
<CRow>
|
||||
<CCol sm="8">
|
||||
<CInput
|
||||
label="City"
|
||||
placeholder="Enter your city"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="Postal code"
|
||||
placeholder="Postal code"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CInput
|
||||
label="Country"
|
||||
placeholder="Country name"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Form</strong> Elements
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
description="Let us know your full name."
|
||||
label="Enter your name"
|
||||
horizontal
|
||||
autocomplete="name"
|
||||
/>
|
||||
<CInput
|
||||
label="Static"
|
||||
value="Username"
|
||||
horizontal
|
||||
plaintext
|
||||
/>
|
||||
<CInput
|
||||
label="Text input"
|
||||
description="This is a help text"
|
||||
placeholder="Text"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Date"
|
||||
type="date"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Email input"
|
||||
description="Please enter your email"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
horizontal
|
||||
autocomplete="email"
|
||||
/>
|
||||
<CInput
|
||||
label="Password Input"
|
||||
description="Please enter a complex password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
horizontal
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<CInput
|
||||
label="Disabled Input"
|
||||
placeholder="Disabled"
|
||||
horizontal
|
||||
disabled
|
||||
/>
|
||||
<CTextarea
|
||||
label="Textarea"
|
||||
placeholder="Content..."
|
||||
horizontal
|
||||
rows="9"
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Large select"
|
||||
size="lg"
|
||||
horizontal
|
||||
:value.sync="selectedOption"
|
||||
:options="selectOptions"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Small select"
|
||||
size="sm"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
custom
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
disabled
|
||||
/>
|
||||
<template v-for="(name, key) in checkboxNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol tag="label" sm="3" class="col-form-label">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||
<CInputCheckbox
|
||||
v-for="(option, optionIndex) in options"
|
||||
:key="key + option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
:custom="key > 1"
|
||||
:name="`Option 1${key}`"
|
||||
:checked="optionIndex === key"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<CRow form class="form-group">
|
||||
<CCol tag="label" sm="3" class="col-form-label">
|
||||
Switch checkboxes
|
||||
</CCol>
|
||||
<CCol sm="9">
|
||||
<CSwitch
|
||||
class="mr-1"
|
||||
color="primary"
|
||||
:checked="true"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mr-1"
|
||||
color="success"
|
||||
:checked="true"
|
||||
variant="outline"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mr-1"
|
||||
color="warning"
|
||||
:checked="true"
|
||||
variant="opposite"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mr-1"
|
||||
color="danger"
|
||||
:checked="true"
|
||||
shape="pill"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mr-1"
|
||||
color="info"
|
||||
:checked="true"
|
||||
shape="pill"
|
||||
variant="outline"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mr-1"
|
||||
color="dark"
|
||||
:checked="true"
|
||||
shape="pill"
|
||||
variant="opposite"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<template v-for="(name, key) in radioNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol sm="3">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CInputRadioGroup
|
||||
class="col-sm-9"
|
||||
:options="options"
|
||||
:custom="key > 1"
|
||||
:checked="`Option ${key}`"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CRow>
|
||||
</template>
|
||||
<CInputFile
|
||||
label="File input"
|
||||
horizontal
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file input"
|
||||
horizontal
|
||||
multiple
|
||||
/>
|
||||
<CInputFile
|
||||
label="File custom input"
|
||||
horizontal
|
||||
custom
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file custom input"
|
||||
horizontal
|
||||
multiple
|
||||
custom
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Inline</strong> Form
|
||||
</CCardHeader>
|
||||
|
||||
<CCardBody>
|
||||
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-2"
|
||||
placeholder="Jane Doe"
|
||||
>
|
||||
<template #label>
|
||||
<small>Name: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="jane.doe@example.com"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #label>
|
||||
<small>Email: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Horizontal</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
horizontal
|
||||
placeholder="Enter Email..."
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
horizontal
|
||||
placeholder="Enter Password..."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Normal</strong> Form
|
||||
</CCardHeader>
|
||||
<CForm novalidate>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
placeholder="Enter Email..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
placeholder="Enter Password..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CForm>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Grid</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="3">
|
||||
<CInput class="mb-0" placeholder=".col-sm-3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="4">
|
||||
<CInput class="mb-0" placeholder=".col-sm-4"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="5">
|
||||
<CInput class="mb-0" placeholder=".col-sm-5"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CInput class="mb-0" placeholder=".col-sm-6"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="7">
|
||||
<CInput class="mb-0" placeholder=".col-sm-7"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="8">
|
||||
<CInput class="mb-0" placeholder=".col-sm-8"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="9">
|
||||
<CInput class="mb-0" placeholder=".col-sm-9"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="10">
|
||||
<CInput class="mb-0" placeholder=".col-sm-10"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="11">
|
||||
<CInput class="mb-0" placeholder=".col-sm-11"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<CInput class="mb-0" placeholder=".col-sm-12"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Small input"
|
||||
size="sm"
|
||||
horizontal
|
||||
placeholder="size='sm'"
|
||||
/>
|
||||
<CInput
|
||||
label="Default input"
|
||||
horizontal
|
||||
placeholder="normal"
|
||||
/>
|
||||
<CInput
|
||||
label="Large input"
|
||||
size="lg"
|
||||
horizontal
|
||||
placeholder="size='lg'"
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm validated novalidate>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is not required."
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
required
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide a required input."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Custom Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is valid."
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
value="Valid value"
|
||||
:is-valid="validator"
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
:is-valid="validator"
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-open"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="ex. $1.000.000"
|
||||
append=".00"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-euro"/></template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Buttons</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-magnifying-glass"/> Search
|
||||
</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CButton type="submit" color="primary">Submit</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend>
|
||||
<CButton color="primary"><CIcon name="cib-facebook"/></CButton>
|
||||
</template>
|
||||
<template #append>
|
||||
<CButton color="primary"><CIcon name="cib-twitter"/></CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput placeholder="...">
|
||||
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Split"
|
||||
color="primary"
|
||||
split
|
||||
>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input Grid for small devices! <small> <code>.col-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput prepend="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="Email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
prepend="Password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="primary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" class="btn btn-sm btn-secondary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="success">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol lg="12">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show">
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-pencil"/> Form Elements
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink
|
||||
class="card-header-action btn-minimize"
|
||||
@click="formCollapsed=!formCollapsed"
|
||||
>
|
||||
<CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="formCollapsed">
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Prepended text"
|
||||
description="Here's some help text"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended and prepended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
prepend="$"
|
||||
/>
|
||||
<CInput
|
||||
label="Append with button"
|
||||
description="Here's some help text"
|
||||
>
|
||||
<template #append>
|
||||
<CButton color="primary">Go!</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput label="Two-buttons append">
|
||||
<template #append>
|
||||
<CButton color="primary">Search</CButton>
|
||||
<CButton color="danger">Options</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<div class="form-actions">
|
||||
<CButton type="submit" color="primary">Save changes</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Forms',
|
||||
data () {
|
||||
return {
|
||||
selected: [], // Must be an array reference!
|
||||
show: true,
|
||||
horizontal: { label:'col-3', input:'col-9' },
|
||||
options: ['Option 1', 'Option 2', 'Option 3'],
|
||||
selectOptions: [
|
||||
'Option 1', 'Option 2', 'Option 3',
|
||||
{
|
||||
value: 'some value',
|
||||
label: 'Selected option'
|
||||
}
|
||||
],
|
||||
selectedOption: 'some value',
|
||||
|
||||
formCollapsed: true,
|
||||
checkboxNames: ['Checkboxes', 'Inline Checkboxes',
|
||||
'Checkboxes - custom', 'Inline Checkboxes - custom'],
|
||||
radioNames: ['Radios', 'Inline Radios',
|
||||
'Radios - custom', 'Inline Radios - custom']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validator (val) {
|
||||
return val ? val.length >= 4 : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Jumbotron </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/jumbotron"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
|
||||
<p>For more information visit website</p>
|
||||
<CButton color="primary" href="#">More Info</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>with slots</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron header="Bootstrap 4" lead="">
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<CButton color="primary" href="#">Do Something</CButton>
|
||||
<CButton color="success" href="#">Do Something Else</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron
|
||||
color="info"
|
||||
text-color="white"
|
||||
border-color="dark"
|
||||
>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Jumbotrons'
|
||||
}
|
||||
</script>
|
||||
@@ -1,241 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>disabled items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItemDivider/>
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>actionable items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
|
||||
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
|
||||
<CListGroupItem href="#">Action links are easy</CListGroupItem>
|
||||
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem tag="button">Button item</CListGroupItem>
|
||||
<CListGroupItem tag="button">I am a button</CListGroupItem>
|
||||
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
|
||||
<CListGroupItem tag="button">This is a button too</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>with badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Cras justo odio
|
||||
<CBadge color="primary" shape="pill">14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Dapibus ac facilisis in
|
||||
<CBadge color="primary" shape="pill">2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Morbi leo risus
|
||||
<CBadge color="primary" shape="pill">1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors active accent</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup accent>
|
||||
<CListGroupItem href="#" accent="light">This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="primary" accent="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="secondary" accent="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="success" accent="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="danger" accent="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="warning" accent="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="info" accent="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="light" accent="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="dark" accent="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>inside cards</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardGroup deck>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<b>Card with list group</b>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardText class="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.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader><b>Card with flush list group</b></CCardHeader>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
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.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
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>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem 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>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem 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>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListGroups'
|
||||
}
|
||||
</script>
|
||||
@@ -1,179 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navbar </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/navbar"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar
|
||||
expandable="md"
|
||||
color="info"
|
||||
>
|
||||
<CToggler inNavbar @click="show=!show"/>
|
||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||
<CCollapse :show="show" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<CNavItem href="#" disabled>Disabled</CNavItem>
|
||||
</CNavbarNav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CForm inline class="align-middle">
|
||||
<CInput
|
||||
class="mr-2 my-0"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="light" size="sm">
|
||||
Search
|
||||
</CButton>
|
||||
</CForm>
|
||||
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown
|
||||
in-nav
|
||||
toggler-text="User"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>brand</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<!-- Image and text -->
|
||||
<CNavbar color="faded" light>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
||||
CoreuiVue
|
||||
</CNavbarBrand>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>text</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar toggleable="sm" light color="light">
|
||||
<CToggler inNavbar @click="navbarText=!navbarText"/>
|
||||
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
||||
<CCollapse :show="navbarText" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavbarText>Navbar text</CNavbarText>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>dropdown</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar expandable="sm" color="primary" >
|
||||
<CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
|
||||
<CCollapse :show="navbarDropdown" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Home</CNavItem>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<!-- Navbar dropdowns -->
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
toggler-text="User"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>input group</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navbars',
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
navbarText: false,
|
||||
navbarDropdown: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem title="Link"/>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>
|
||||
<CIcon name="cil-basket"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-settings"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-bell"/>
|
||||
</CNavItem>
|
||||
<CNavItem disabled>
|
||||
<CIcon name="cil-envelope-closed"/>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>tab style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="tabs">
|
||||
<CNavItem active>
|
||||
Active
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader @click="item++">
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>pill style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>fill tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav fill variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>justified tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav justified variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>dropdown support</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CDropdown
|
||||
in-nav
|
||||
placement="bottom-end"
|
||||
button-content="Dropdown"
|
||||
>
|
||||
<CDropdownItem>one</CDropdownItem>
|
||||
<CDropdownItem>two</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>three</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>vertical variation</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="12" class="m-0">
|
||||
<CNav vertical="lg" pills >
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navs'
|
||||
}
|
||||
</script>
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>size</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/pagination"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<CPagination
|
||||
size="sm"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"/>
|
||||
<br>
|
||||
|
||||
<div class="d-md-down-none">
|
||||
<h6>Large</h6>
|
||||
<CPagination
|
||||
size="lg"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="10"
|
||||
:active-page.sync="currentPage"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<CPagination
|
||||
align="end"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Paginations',
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Popovers</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/popover"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Click Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Popovers </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Popovers',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,252 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Progress</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/progress"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
||||
<CProgress class="mt-1" :max="max" show-value>
|
||||
<CProgressBar :value="counter*(6/10)" color="gradient-success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" color="gradient-warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" color="gradient-danger"/>
|
||||
</CProgress>
|
||||
<CButton
|
||||
@click="clicked"
|
||||
color="secondary"
|
||||
class="mt-4"
|
||||
>
|
||||
Click me to animate progress bars
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>No label</h6>
|
||||
<CProgress :value="value" :max="max2" class="mb-3"/>
|
||||
<h6>Value label</h6>
|
||||
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
|
||||
<h6>Progress label</h6>
|
||||
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
|
||||
<h6>Value label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
|
||||
<h6>Progress label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>width</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default width</h6>
|
||||
<CProgress :value="value3" class="mb-3"/>
|
||||
<h6>Custom widths</h6>
|
||||
<CProgress :value="value3" class="w-75 mb-2"/>
|
||||
<CProgress :value="value3" class="w-50 mb-2"/>
|
||||
<CProgress :value="value3" class="w-25"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>height</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default height</h6>
|
||||
<CProgress :value="value3" show-percentage class="mb-3"/>
|
||||
<h6>Custom heights</h6>
|
||||
<CProgress size="xs" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress size="sm" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress style="height:2rem" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress style="height:20px" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress style="height:2px" :value="value3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
|
||||
<div class="col-sm-2">{{ bar.color }}:</div>
|
||||
<div class="col-sm-10 pt-1">
|
||||
<CProgress
|
||||
:value="bar.value"
|
||||
:color="bar.color"
|
||||
:key="bar.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>striped</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CButton color="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>animated</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:animated="animate"
|
||||
class="mb-3"
|
||||
/>
|
||||
<CButton color="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>multiple bars</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="gradient-primary" :value="values[0]"/>
|
||||
<CProgressBar color="gradient-success" :value="values[1]"/>
|
||||
<CProgressBar color="gradient-info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-percentage :max="max3" class="mb-3">
|
||||
<CProgressBar color="gradient-primary" :value="values[0]"/>
|
||||
<CProgressBar color="gradient-success" :value="values[1]"/>
|
||||
<CProgressBar color="gradient-info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-value striped :max="max3" class="mb-3">
|
||||
<CProgressBar color="gradient-primary" :value="values[0]"/>
|
||||
<CProgressBar color="gradient-success" :value="values[1]"/>
|
||||
<CProgressBar color="gradient-info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="gradient-primary" :value="values[0]" show-percentage/>
|
||||
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
|
||||
<CProgressBar color="gradient-info" :value="values[2]" striped show-percentage/>
|
||||
</CProgress>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProgressBars',
|
||||
data () {
|
||||
return {
|
||||
counter: 73,
|
||||
max: 100,
|
||||
max2: 50,
|
||||
value: 33.333333333,
|
||||
value3: 75,
|
||||
bars: [
|
||||
{color: 'gradient-success', value: 75},
|
||||
{color: 'gradient-info', value: 75},
|
||||
{color: 'gradient-warning', value: 75},
|
||||
{color: 'gradient-danger', value: 75},
|
||||
{color: 'gradient-primary', value: 75},
|
||||
{color: 'gradient-secondary', value: 75},
|
||||
{color: 'gradient-dark', value: 75}
|
||||
],
|
||||
timer: null,
|
||||
striped: true,
|
||||
animate: true,
|
||||
max3: 100,
|
||||
values: [ 15, 30, 20 ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clicked () {
|
||||
this.counter = Math.random() * this.max
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setInterval(() => {
|
||||
this.bars.forEach(bar => {
|
||||
bar.value = 25 + (Math.random() * 75)
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,396 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard v-if="true">
|
||||
<CCardHeader>
|
||||
Radio switches
|
||||
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/switch"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
v-for="(color, key) in colors"
|
||||
:key="'radio' + key"
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
variant="3d"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
:checked="key === 2"
|
||||
@update:checked="(val) => val ? radio = color : null"
|
||||
:value="color"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch default
|
||||
<CBadge color="primary">{{checker}}</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
color="primary"
|
||||
name="switch1"
|
||||
:checked.sync="checker"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||
/>
|
||||
<CSwitch class="mx-1" color="primary" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch pills
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>shape
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol md="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Sizes
|
||||
</CCardHeader>
|
||||
<CCardBody class="p-0">
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
class="table-align-middle mb-0"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
no-sorting
|
||||
>
|
||||
<template #example="{item}">
|
||||
<td>
|
||||
<CSwitch
|
||||
:variant="item.example.variant"
|
||||
:color="item.example.color"
|
||||
:size="item.example.size"
|
||||
:checked="item.example.checked"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template #size_prop="{item}">
|
||||
<td>
|
||||
<span v-html="item.size_prop"></span>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Switches',
|
||||
data () {
|
||||
return {
|
||||
colors: [
|
||||
'primary','secondary','warning','success','info','danger','light','dark'
|
||||
],
|
||||
fields: [
|
||||
{ key: 'size' },
|
||||
{ key: 'example' },
|
||||
{ key: 'size_prop', label: 'Size prop' }
|
||||
],
|
||||
items: [
|
||||
{
|
||||
size: 'Large',
|
||||
example: { variant: '3d', color: 'primary', size: 'lg', checked: true },
|
||||
size_prop: 'Add following prop <code>size="lg"</code>'
|
||||
},
|
||||
{
|
||||
size: 'Normal',
|
||||
example: { variant: '3d', color: 'primary', size: '', checked: true },
|
||||
size_prop: '-'
|
||||
},
|
||||
{
|
||||
size: 'Small',
|
||||
example: { variant: '3d', color: 'primary', size: 'sm', checked: true},
|
||||
size_prop: 'Add following prop <code>size="sm"</code>'
|
||||
}
|
||||
],
|
||||
checker: true,
|
||||
radio: 'warning',
|
||||
labelIcon: {
|
||||
labelOn: '\u2713',
|
||||
labelOff: '\u2715'
|
||||
},
|
||||
labelTxt: {
|
||||
labelOn: 'yes',
|
||||
labelOff: 'no'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<slot name="header">
|
||||
<CIcon name="cil-grid"/> {{caption}}
|
||||
</slot>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDataTable
|
||||
:hover="hover"
|
||||
:striped="striped"
|
||||
:border="border"
|
||||
:small="small"
|
||||
:fixed="fixed"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:items-per-page="small ? 10 : 5"
|
||||
:dark="dark"
|
||||
pagination
|
||||
>
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Table',
|
||||
props: {
|
||||
items: Array,
|
||||
fields: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['username', 'registered', 'role', 'status']
|
||||
}
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: Boolean,
|
||||
striped: Boolean,
|
||||
border: Boolean,
|
||||
small: Boolean,
|
||||
fixed: Boolean,
|
||||
dark: Boolean
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
return status === 'Active' ? 'success'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper :items="getShuffledUsersData()">
|
||||
<template #header>
|
||||
<CIcon name="cil-grid"/> Simple Table
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</CTableWrapper>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
striped
|
||||
caption="Striped Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
small
|
||||
caption="Condensed Table"
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
fixed
|
||||
border
|
||||
caption="Bordered Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
border
|
||||
small
|
||||
fixed
|
||||
caption="Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
border
|
||||
small
|
||||
fixed
|
||||
dark
|
||||
caption="Combined All dark Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CTableWrapper from './Table.vue'
|
||||
import usersData from '../users/UsersData'
|
||||
|
||||
export default {
|
||||
name: 'Tables',
|
||||
components: { CTableWrapper },
|
||||
methods: {
|
||||
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
|
||||
},
|
||||
|
||||
getShuffledUsersData () {
|
||||
return this.shuffleArray(usersData.slice(0))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,219 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/tabs"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs>
|
||||
<CTab title="Home" active>
|
||||
1. 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.
|
||||
</CTab>
|
||||
<CTab title="Profile" active>
|
||||
2. 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.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. 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.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills">
|
||||
<CTab title="Home" active>
|
||||
1. 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.
|
||||
</CTab>
|
||||
<CTab title="Profile">
|
||||
2. 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.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. 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.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs :active-tab.sync="activeTab">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/>
|
||||
</template>
|
||||
1. 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.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/>
|
||||
</template>
|
||||
2. 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.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/>
|
||||
</template>
|
||||
3. 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.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs add-tab-classes="mt-1">
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
1. 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.
|
||||
</CTab>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
2. 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.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
3. 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.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs vertical
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills" vertical>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
1. 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.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
2. 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.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
3. 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.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tabs',
|
||||
data () {
|
||||
return {
|
||||
tabs: [
|
||||
'Calculator',
|
||||
'Shopping cart',
|
||||
'Charts'
|
||||
],
|
||||
activeTab: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Tooltips </strong>
|
||||
<small><code>v-c-tooltip</code> directive</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/tooltip"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
color="secondary"
|
||||
v-c-tooltip.hover.click="'I am a tooltip!'"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
v-c-tooltip="{content: 'I start open!', active:true }"
|
||||
color="secondary"
|
||||
>
|
||||
Hover me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Tooltips </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-tooltip.hover="{
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tooltips',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.usage }}</code>
|
||||
<hr/>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>Add <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Icons only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.iconsOnlyUsage }}</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Text only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>
|
||||
{{ $options.textOnlyUsage }}
|
||||
</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BrandButtons',
|
||||
usage: '<CButton color="facebook"><CIcon name="cib-facebook"/><span>Facebook</span></CButton>',
|
||||
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
|
||||
textOnlyUsage: '<CButton color="facebook"><span>Facebook</span></CButton>',
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
'linkedin',
|
||||
'flickr',
|
||||
'tumblr',
|
||||
'xing',
|
||||
'github',
|
||||
'stackoverflow',
|
||||
'youtube',
|
||||
'dribbble',
|
||||
'instagram',
|
||||
'pinterest',
|
||||
'vk',
|
||||
'yahoo',
|
||||
'behance',
|
||||
'reddit',
|
||||
'vimeo'
|
||||
]
|
||||
// labels: {
|
||||
// facebook: 'Facebook',
|
||||
// twitter: 'Twitter',
|
||||
// linkedin: 'LinkedIn',
|
||||
// flickr: 'Flickr',
|
||||
// tumblr: 'Tumblr',
|
||||
// xing: 'Xing',
|
||||
// github: 'Github',
|
||||
// stackoverflow: 'StackOverflow',
|
||||
// youtube: 'YouTube',
|
||||
// dribbble: 'Dribbble',
|
||||
// instagram: 'Instagram',
|
||||
// pinterest: 'Pinterest',
|
||||
// vk: 'VK',
|
||||
// yahoo: 'Yahoo',
|
||||
// behance: 'Behance',
|
||||
// reddit: 'Reddit',
|
||||
// vimeo: 'Vimeo'
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btn {
|
||||
margin-bottom: 4px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
// todo
|
||||
.btn-brand:not(:only-child) {
|
||||
.c-icon {
|
||||
margin-top: 0 !important;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.c-icon-sm {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.c-icon-lg {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap button group</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">One</CButton>
|
||||
<CButton color="secondary">Two</CButton>
|
||||
<CButton color="secondary">Three</CButton>
|
||||
<CButton color="secondary">Four</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none" color="success">Success</CButton>
|
||||
<CButton color="info">Info</CButton>
|
||||
<CButton color="warning">Warn</CButton>
|
||||
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
|
||||
<CButton color="danger">Danger</CButton>
|
||||
<CButton color="link">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>sizing
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
|
||||
<CDropdown right text="Menu" color="success">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||
<CDropdown right split text="Split Menu" color="info">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>vertical variation
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup vertical>
|
||||
<CButton color="secondary">Top</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button toolbar </strong>
|
||||
<small>with button groups</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups" >
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">«</CButton>
|
||||
<CButton color="secondary">‹</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
<CButton color="secondary">Redo</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary">›</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">»</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr class="d-sm-down-none"/>
|
||||
<CButtonToolbar
|
||||
aria-label="Toolbar with button groups and input groups"
|
||||
class="d-sm-down-none"
|
||||
>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
</CButtonGroup>
|
||||
<CInput
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
append=".00"
|
||||
value="100"
|
||||
prepend="$"
|
||||
/>
|
||||
<CSelect
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
prepend="Size"
|
||||
/>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr/>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
</CButtonGroup>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
class="mx-1"
|
||||
placement="bottom-end"
|
||||
button-content="Menu"
|
||||
>
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonGroups',
|
||||
}
|
||||
</script>
|
||||
@@ -1,363 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Dropdown</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/dropdown"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown Button"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
|
||||
<CDropdownItem>I'm a button</CDropdownItem>
|
||||
<CDropdownItem>I'm also a button</CDropdownItem>
|
||||
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
||||
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div> -->
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with divider"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Separated Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with header"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>positioning</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Left align"
|
||||
color="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
placement="bottom-end"
|
||||
toggler-text="Right align"
|
||||
color="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Drop-Up"
|
||||
color="info"
|
||||
class="m-2"
|
||||
placement="top-start"
|
||||
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
:offset="[10, 5]"
|
||||
toggler-text="Offset Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
split
|
||||
toggler-text="Split Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>hidden caret</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="link"
|
||||
size="lg"
|
||||
:caret="false"
|
||||
>
|
||||
<template #toggler-content>
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="lg"
|
||||
toggler-text="Large"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="lg"
|
||||
split
|
||||
toggler-text="Large Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<br>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="sm"
|
||||
toggler-text="Small"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="sm"
|
||||
split toggler-text="Small Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>headers and accessibility</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown ARIA" color="primary"
|
||||
class="m-2"
|
||||
>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Groups</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Users</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>
|
||||
Something <strong>not</strong> associated with user
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small><code>color</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Primary"
|
||||
color="primary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Secondary"
|
||||
color="secondary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Success"
|
||||
color="success"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Warning"
|
||||
color="warning"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Danger"
|
||||
color="danger"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Info"
|
||||
color="info"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Light"
|
||||
color="light"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Dark"
|
||||
color="dark"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Link"
|
||||
color="link"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Dropdowns'
|
||||
}
|
||||
</script>
|
||||
@@ -1,704 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Standard buttons</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Outline Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use <code>variant="outline"</code> prop
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Ghost Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>variant="ghost"</code> prop for ghost buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Square Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>square</code> prop for square buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" square>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" square disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Pill Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>pill</code> prop for pill buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" shape="pill">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" shape="pill" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Small
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="sm">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="sm" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Large
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="lg">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="lg" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>With Icons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-lightbulb"/> Standard Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="secondary" variant="outline">
|
||||
<CIcon name="cil-lightbulb"/> Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="success">
|
||||
<CIcon name="cil-lightbulb"/> Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="warning" square>
|
||||
<CIcon name="cil-lightbulb"/> Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="danger" shape="pill">
|
||||
<CIcon name="cil-lightbulb"/> Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Toggle pressed state</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" color="link" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StandardButtons',
|
||||
data () {
|
||||
return { togglePress: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
components: { CChartBar },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
components: { CChartBar },
|
||||
props: {
|
||||
...CChartBar.props,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.2)'
|
||||
},
|
||||
pointHoverBackgroundColor: String,
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedDatasets () {
|
||||
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions () {
|
||||
return deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<CChartDoughnut
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartDoughnut } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
components: { CChartDoughnut },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
components: { CChartLine },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
||||
data: [30, 39, 10, 50, 30, 70, 35]
|
||||
},
|
||||
{
|
||||
label: 'Data Two',
|
||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
||||
data: [39, 80, 40, 35, 40, 20, 45]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
components: { CChartLine },
|
||||
props: {
|
||||
...CChartLine.props,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean,
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor () {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: getColor(this.borderColor),
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointBackgroundColor: getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
]
|
||||
},
|
||||
pointedOptions () {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
offset: true,
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, this.dataPoints) - 5,
|
||||
max: Math.max.apply(Math, this.dataPoints) + 5
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
straightOptions () {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultOptions () {
|
||||
const options = this.pointed ? this.pointedOptions : this.straightOptions
|
||||
return Object.assign({}, options, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
},
|
||||
computedDatasets () {
|
||||
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions () {
|
||||
return deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<CChartPie
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPie } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
components: { CChartPie },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPolarArea } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
components: { CChartPolarArea },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
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: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartRadar } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
components: { CChartRadar },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: '2019',
|
||||
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)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '2020',
|
||||
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)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCardGroup columns class="card-columns cols-2">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Line Chart
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/charts"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineExample/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Bar Chart</CCardHeader>
|
||||
<CCardBody><CChartBarExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody><CChartDoughnutExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody><CChartRadarExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody><CChartPieExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody><CChartPolarAreaExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple line chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineSimple border-color="success" labels="months"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple pointed chart</CCardHeader>
|
||||
<CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple bar chart</CCardHeader>
|
||||
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Charts from './index.js'
|
||||
export default {
|
||||
name: 'Charts',
|
||||
components: {
|
||||
...Charts
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
|
||||
function random (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MainChartExample',
|
||||
components: {
|
||||
CChartLine
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
const brandSuccess = getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
|
||||
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>
|
||||
@@ -1,19 +0,0 @@
|
||||
import CChartLineSimple from './CChartLineSimple'
|
||||
import CChartBarSimple from './CChartBarSimple'
|
||||
import CChartLineExample from './CChartLineExample'
|
||||
import CChartBarExample from './CChartBarExample'
|
||||
import CChartDoughnutExample from './CChartDoughnutExample'
|
||||
import CChartRadarExample from './CChartRadarExample'
|
||||
import CChartPieExample from './CChartPieExample'
|
||||
import CChartPolarAreaExample from './CChartPolarAreaExample'
|
||||
|
||||
export {
|
||||
CChartLineSimple,
|
||||
CChartBarSimple,
|
||||
CChartLineExample,
|
||||
CChartBarExample,
|
||||
CChartDoughnutExample,
|
||||
CChartRadarExample,
|
||||
CChartPieExample,
|
||||
CChartPolarAreaExample
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-basket"/>Brand icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<template v-for="(brand, brandName) in $options.brands">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="brandName"
|
||||
>
|
||||
<CIcon :height="42" :content="brand"/>
|
||||
<div>{{toKebabCase(brandName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { brandSet as brands } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'Brands',
|
||||
brands,
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,50 +0,0 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon :content="$options.freeSet.cilHandPointDown"/>
|
||||
CoreUI Icons
|
||||
<CBadge color="info">New</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://github.com/coreui/coreui-icons"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
class="card-header-action"
|
||||
>
|
||||
<small class="text-muted">Github</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<template v-for="(icon, iconName) in $options.freeSet">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="iconName"
|
||||
>
|
||||
<CIcon :height="42" :content="icon"/>
|
||||
<div>{{toKebabCase(iconName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { freeSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'CoreUIIcons',
|
||||
freeSet,
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-globe-alt"/> Flags
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<CCol class="mb-5" col="12">
|
||||
<!-- For using the flags inline with text add the classes
|
||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
||||
span. If you want to have a squared version flag then add the class
|
||||
flag-icon-squared as well. -->
|
||||
</CCol>
|
||||
<template v-for="(flag, flagName) in displayedFlags">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="flagName"
|
||||
>
|
||||
<CIcon :height="42" :content="flag"/>
|
||||
<div>{{toKebabCase(flagName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flagSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'Flags',
|
||||
flagSet,
|
||||
computed: {
|
||||
displayedFlags () {
|
||||
return this.$options.flagSet
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,195 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Alert</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/alert"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<p></p>
|
||||
<CAlert show color="primary">Primary Alert</CAlert>
|
||||
<CAlert show color="secondary">Secondary Alert</CAlert>
|
||||
<CAlert show color="success">Success Alert</CAlert>
|
||||
<CAlert show color="danger">Danger Alert</CAlert>
|
||||
<CAlert show color="warning">Warning Alert</CAlert>
|
||||
<CAlert show color="info">Info Alert</CAlert>
|
||||
<CAlert show color="light">Light Alert</CAlert>
|
||||
<CAlert show color="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert show color="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="dark">
|
||||
Dark Alert with
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts <small>with additional content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert show color="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>
|
||||
</CAlert>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts
|
||||
<small>dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert
|
||||
color="secondary"
|
||||
closeButton
|
||||
:show.sync="alert1"
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
color="secondary"
|
||||
:show.sync="alert2"
|
||||
class="alert-dismissible"
|
||||
>
|
||||
Dismissible Alert with custom button!
|
||||
<CButton
|
||||
class="position-absolute"
|
||||
color="secondary"
|
||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||
@click="alert2 = false"
|
||||
>
|
||||
Close
|
||||
</CButton>
|
||||
</CAlert>
|
||||
<CButton
|
||||
@click="showDismissibleAlerts"
|
||||
color="info"
|
||||
class="m-1"
|
||||
>
|
||||
Show dismissible alerts
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts
|
||||
<small>auto dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
color="warning"
|
||||
fade
|
||||
>
|
||||
Alert will dismiss after
|
||||
<strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
color="info"
|
||||
>
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress
|
||||
color="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" color="info" class="m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Alerts',
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
dismissCountDown: 10,
|
||||
alert1: true,
|
||||
alert2: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countDownChanged (dismissCountDown) {
|
||||
this.dismissCountDown = dismissCountDown
|
||||
},
|
||||
showAlert () {
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
},
|
||||
showDismissibleAlerts () {
|
||||
['alert1', 'alert2'].forEach(alert => this[alert] = true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template functional>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Badge</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/badge"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
|
||||
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
|
||||
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
|
||||
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
|
||||
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton color="primary">
|
||||
Notifications
|
||||
<CBadge color="light" class="ml-2 position-static">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>contextual variations</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge color="primary">Primary</CBadge>
|
||||
<CBadge color="secondary">Secondary</CBadge>
|
||||
<CBadge color="success">Success</CBadge>
|
||||
<CBadge color="danger">Danger</CBadge>
|
||||
<CBadge color="warning">Warning</CBadge>
|
||||
<CBadge color="info">Info</CBadge>
|
||||
<CBadge color="light">Light</CBadge>
|
||||
<CBadge color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>shape="pill"</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge shape="pill" color="primary">Primary</CBadge>
|
||||
<CBadge shape="pill" color="secondary">Secondary</CBadge>
|
||||
<CBadge shape="pill" color="success">Success</CBadge>
|
||||
<CBadge shape="pill" color="danger">Danger</CBadge>
|
||||
<CBadge shape="pill" color="warning">Warning</CBadge>
|
||||
<CBadge shape="pill" color="info">Info</CBadge>
|
||||
<CBadge shape="pill" color="light">Light</CBadge>
|
||||
<CBadge shape="pill" color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>actionable</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge href="#" color="primary">Primary</CBadge>
|
||||
<CBadge href="#" color="secondary">Secondary</CBadge>
|
||||
<CBadge href="#" color="success">Success</CBadge>
|
||||
<CBadge href="#" color="danger">Danger</CBadge>
|
||||
<CBadge href="#" color="warning">Warning</CBadge>
|
||||
<CBadge href="#" color="info">Info</CBadge>
|
||||
<CBadge href="#" color="light">Light</CBadge>
|
||||
<CBadge href="#" color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Badges'
|
||||
}
|
||||
</script>
|
||||
@@ -1,196 +0,0 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Bootstrap Modals
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/modal"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton color="secondary" @click="myModal = true" class="mr-1">
|
||||
Launch demo modal
|
||||
</CButton>
|
||||
<CButton color="secondary" @click="largeModal = true" class="mr-1">
|
||||
Launch large modal
|
||||
</CButton>
|
||||
<CButton color="secondary" @click="smallModal = true" class="mr-1">
|
||||
Launch small modal
|
||||
</CButton>
|
||||
<hr>
|
||||
<CButton color="primary" @click="primaryModal = true" class="mr-1">
|
||||
Launch primary modal
|
||||
</CButton>
|
||||
<CButton color="success" @click="successModal = true" class="mr-1">
|
||||
Launch success modal
|
||||
</CButton>
|
||||
<CButton color="warning" @click="warningModal = true" class="mr-1">
|
||||
Launch warning modal
|
||||
</CButton>
|
||||
<CButton color="danger" @click="dangerModal = true" class="mr-1">
|
||||
Launch danger modal
|
||||
</CButton>
|
||||
<CButton color="info" @click="infoModal = true" class="mr-1">
|
||||
Launch info modal
|
||||
</CButton>
|
||||
<CButton color="dark" @click="darkModal = true" class="mr-1">
|
||||
Launch dark modal
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
<!-- Modal Component -->
|
||||
<CModal
|
||||
title="Modal title"
|
||||
:show.sync="myModal"
|
||||
size="xl"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
size="lg"
|
||||
:show.sync="largeModal"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
size="sm"
|
||||
:show.sync="smallModal"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
title="Modal title"
|
||||
:show.sync="primaryModal"
|
||||
color="primary"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="success"
|
||||
:show.sync="successModal"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="warning"
|
||||
:show.sync="warningModal"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="danger"
|
||||
:show.sync="dangerModal"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="info"
|
||||
:show.sync="infoModal"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
:show.sync="darkModal"
|
||||
:no-close-on-backdrop="true"
|
||||
:centered="true"
|
||||
title="Modal title 2"
|
||||
size="lg"
|
||||
color="dark"
|
||||
>
|
||||
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.
|
||||
<template #header>
|
||||
<h6 class="modal-title">Custom smaller modal title</h6>
|
||||
<CButtonClose @click="darkModal = false" class="text-white"/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CButton @click="darkModal = false" color="danger">Discard</CButton>
|
||||
<CButton @click="darkModal = false" color="success">Accept</CButton>
|
||||
</template>
|
||||
</CModal>
|
||||
</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,
|
||||
darkModal: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="c-app flex-row align-items-center">
|
||||
<CContainer>
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="8">
|
||||
<CCardGroup>
|
||||
<CCard class="p-4">
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<h1>Login</h1>
|
||||
<p class="text-muted">Sign In to your account</p>
|
||||
<CInput
|
||||
placeholder="Username"
|
||||
autocomplete="username email"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="curent-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CRow>
|
||||
<CCol col="6" class="text-left">
|
||||
<CButton color="primary" class="px-4">Login</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" class="text-right">
|
||||
<CButton color="link" class="px-0">Forgot password?</CButton>
|
||||
<CButton color="link" class="d-lg-none">Register now!</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard
|
||||
color="primary"
|
||||
text-color="white"
|
||||
class="text-center py-5 d-md-down-none"
|
||||
body-wrapper
|
||||
>
|
||||
<CCardBody>
|
||||
<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>
|
||||
<CButton
|
||||
color="light"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
>
|
||||
Register Now!
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Login'
|
||||
}
|
||||
</script>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<CContainer class="d-flex align-items-center min-vh-100">
|
||||
<CRow class="w-100 justify-content-center">
|
||||
<CCol md="6">
|
||||
<div class="w-100">
|
||||
<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>
|
||||
<CInput
|
||||
class="mb-3"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
|
||||
<template #append>
|
||||
<CButton color="info">Search</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page404'
|
||||
}
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<CContainer class="d-flex align-items-center min-vh-100">
|
||||
<CRow class="w-100 justify-content-center">
|
||||
<CCol 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>
|
||||
<CInput
|
||||
class="mb-3"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
|
||||
<template #append>
|
||||
<CButton color="info">Search</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page500'
|
||||
}
|
||||
</script>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center min-vh-100">
|
||||
<CContainer fluid>
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="6">
|
||||
<CCard class="mx-4 mb-0">
|
||||
<CCardBody class="p-4">
|
||||
<CForm>
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<CInput
|
||||
placeholder="Username"
|
||||
autocomplete="username"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Repeat password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="mb-4"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CButton color="success" block>Create Account</CButton>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter class="p-4">
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CButton block color="facebook">
|
||||
Facebook
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<CButton block color="twitter">
|
||||
Twitter
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Register'
|
||||
}
|
||||
</script>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||
<div
|
||||
:class="['theme-color w-75 rounded mb-3', color]"
|
||||
:style="{ paddingTop: '75%' }"
|
||||
></div>
|
||||
<slot></slot>
|
||||
<ColorView/>
|
||||
</CCol>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorView from './ColorView'
|
||||
export default {
|
||||
name: 'ColorTheme',
|
||||
components: { ColorView },
|
||||
props: {
|
||||
color: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<table class="w-100">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted">HEX:</td>
|
||||
<td class="font-weight-bold">{{this.hexColor}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">RGB:</td>
|
||||
<td class="font-weight-bold">{{this.bgColor}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rgbToHex } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'ColorView',
|
||||
data () {
|
||||
return {
|
||||
bgColor: 'rgb(255, 255, 255)'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hexColor () {
|
||||
return rgbToHex(this.bgColor)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setColor () {
|
||||
const elem = this.$parent.$el.children[0]
|
||||
const color = window.getComputedStyle(elem).getPropertyValue('background-color')
|
||||
this.bgColor = color || this.bgColor
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.setColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-drop"/> Theme colors
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ColorTheme>
|
||||
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-drop"/> Grays
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorTheme from './ColorTheme'
|
||||
export default {
|
||||
name: 'Colors',
|
||||
components: { ColorTheme }
|
||||
}
|
||||
</script>
|
||||
@@ -1,220 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<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 nunc.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Typography'
|
||||
}
|
||||
</script>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
User id: {{ $route.params.id }}
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDataTable
|
||||
striped
|
||||
small
|
||||
fixed
|
||||
:items="visibleData"
|
||||
:fields="fields"
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton color="primary" @click="goBack">Back</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import usersData from './UsersData'
|
||||
export default {
|
||||
name: 'User',
|
||||
beforeRouteEnter(to, from, next) {
|
||||
next(vm => {
|
||||
vm.usersOpened = from.fullPath.includes('users')
|
||||
})
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
usersOpened: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fields () {
|
||||
return [
|
||||
{ key: 'key', label: this.username, _style: 'width:150px'},
|
||||
{ key: 'value', label: '', _style: 'width:150px;' }
|
||||
]
|
||||
},
|
||||
userData () {
|
||||
const id = this.$route.params.id
|
||||
const user = usersData.find((user, index) => index + 1 == id)
|
||||
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
||||
return userDetails.map(([key, value]) => { return { key, value } })
|
||||
},
|
||||
visibleData () {
|
||||
return this.userData.filter(param => param.key !== 'username')
|
||||
},
|
||||
username () {
|
||||
return this.userData.filter(param => param.key === 'username')[0].value
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.usersOpened ? this.$router.go(-1) : this.$router.push({path: '/users'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" xl="8">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Users
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:items-per-page="5"
|
||||
clickable-rows
|
||||
:active-page="activePage"
|
||||
@row-clicked="rowClicked"
|
||||
:pagination="{ doubleArrows: false, align: 'center'}"
|
||||
@page-change="pageChange"
|
||||
>
|
||||
<template #status="data">
|
||||
<td>
|
||||
<CBadge :color="getBadge(data.item.status)">
|
||||
{{data.item.status}}
|
||||
</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import usersData from './UsersData'
|
||||
export default {
|
||||
name: 'Users',
|
||||
data () {
|
||||
return {
|
||||
items: usersData,
|
||||
fields: [
|
||||
{ key: 'username', label: 'Name', _classes: 'font-weight-bold' },
|
||||
{ key: 'registered' },
|
||||
{ key: 'role' },
|
||||
{ key: 'status' }
|
||||
],
|
||||
activePage: 1
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler (route) {
|
||||
if (route.query && route.query.page) {
|
||||
this.activePage = Number(route.query.page)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
switch (status) {
|
||||
case 'Active': return 'success'
|
||||
case 'Inactive': return 'secondary'
|
||||
case 'Pending': return 'warning'
|
||||
case 'Banned': return 'danger'
|
||||
default: 'primary'
|
||||
}
|
||||
},
|
||||
rowClicked (item, index) {
|
||||
this.$router.push({path: `users/${index + 1}`})
|
||||
},
|
||||
pageChange (val) {
|
||||
this.$router.push({ query: { page: val }})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,31 +0,0 @@
|
||||
const usersData = [
|
||||
{ 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', _classes: 'table-success'},
|
||||
{ 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', _classes: 'table-success'},
|
||||
{ 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', _classes: 'table-danger'},
|
||||
{ username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{ username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]
|
||||
|
||||
export default usersData
|
||||
|
||||
|
||||
@@ -1,502 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress footer="Lorem ipsum dolor sit amet enim.">
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/widgets"
|
||||
class="card-header-action position-absolute"
|
||||
style="right:5px; top:5px"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<CProgress
|
||||
color="gradient-success"
|
||||
:value="25"
|
||||
class="progress-xs my-3 mb-0"
|
||||
/>
|
||||
</CWidgetProgress>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="12.124"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-info"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="$98.111,00"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-warning"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="2 TB"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-danger"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="89.9%"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-success"
|
||||
inverse :value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="12.124"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-info"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="$98.111,00"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-warning"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="2 TB"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="gradient-danger"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
>
|
||||
<CIcon name="cil-settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
>
|
||||
<CIcon name="cil-moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-danger"
|
||||
>
|
||||
<CIcon name="cil-bell" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-danger"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-bell" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-settings" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-moon" class="mx-5 " width="24"/>
|
||||
<template #footer>
|
||||
<CCardFooter class="px-3 py-2">
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-muted d-flex justify-content-between"
|
||||
href="https://coreui.io/"
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon name="cil-arrow-right" width="16"/>
|
||||
</CLink>
|
||||
</CCardFooter>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<!-- <CRow>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-primary"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-settings" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-info"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="gradient-warning"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-moon" class="mx-5" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow> -->
|
||||
<WidgetsBrand noCharts/>
|
||||
<WidgetsBrand/>
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="gradient-primary"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="gradient-primary"
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="972"
|
||||
text="comments"
|
||||
color="gradient-info"
|
||||
>
|
||||
<CIcon name="cil-speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="gradient-info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="gradient-success"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="gradient-warning"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="gradient-primary"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="gradient-danger"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="972"
|
||||
text="comments"
|
||||
color="gradient-info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<WidgetsDropdown/>
|
||||
<CRow>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="danger"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="primary"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="success"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="danger"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="primary"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="success"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetsBrand from './WidgetsBrand'
|
||||
import WidgetsDropdown from './WidgetsDropdown'
|
||||
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'Widgets',
|
||||
components: {
|
||||
CChartLineSimple,
|
||||
CChartBarSimple,
|
||||
WidgetsBrand,
|
||||
WidgetsDropdown
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,178 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<template v-if="!noCharts">
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
label="Friends"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
label="Contracts"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLineSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'WidgetsBrand',
|
||||
components: {
|
||||
CChartLineSimple
|
||||
},
|
||||
props: {
|
||||
noCharts: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-chart-brand {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
point-hover-background-color="primary"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
:caret="false"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-location-pin"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
||||
point-hover-background-color="info"
|
||||
:options="{ elements: { line: { tension: 0.00001 }}}"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="warning"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
class="mt-3"
|
||||
style="height:70px"
|
||||
background-color="rgba(255,255,255,.2)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
:options="{ elements: { line: { borderWidth: 2.5 }}}"
|
||||
point-hover-background-color="warning"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="danger"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartBarSimple
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
background-color="rgb(250, 152, 152)"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'WidgetsDropdown',
|
||||
components: { CChartLineSimple, CChartBarSimple }
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user