sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: delete 'c-' class prefix, update coreui styles to alpha-v13

Browse Source
This commit is contained in:
woothu
2019-09-20 13:59:53 +02:00
parent 6969728859
commit b3e6540052
46 changed files with 1125 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Charts.vue
+2 -2
View File
@@ -1,10 +1,10 @@
<template>
<div>
<CCardGroup columns class="c-card-columns c-cols-2">
<CCardGroup columns class="card-columns cols-2">
<CCard>
<CCardHeader>
Line Chart
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Charts"
class="card-header-action"
src/views/Dashboard.vue
+141 -141
View File
@@ -5,19 +5,19 @@
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
<div class="c-small c-text-muted">November 2017</div>
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" class="c-d-none c-d-md-block">
<CButton variant="primary" class="c-float-right">
<CCol sm="7" class="d-none d-md-block">
<CButton variant="primary" class="float-right">
<i class="cui-cloud-download"></i>
</CButton>
<CButtonGroup class="c-float-right c-mr-3">
<CButtonGroup class="float-right mr-3">
<CButton
variant="outline-secondary"
v-for="(value, key) in ['Day', 'Month', 'Year']"
:key="key"
class="c-mx-0"
class="mx-0"
:pressed="value === selected ? true : false"
@click="selected = value"
>
@@ -29,52 +29,52 @@
<MainChartExample style="height:300px;margin-top:40px;"/>
</CCardBody>
<CCardFooter>
<CRow class="c-text-center">
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
<div class="c-text-muted">Visits</div>
<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="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="success"
:value="40"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
<div class="c-text-muted">Unique</div>
<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="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="info"
:value="20"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
<div class="c-text-muted">Pageviews</div>
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
class="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="warning"
:value="60"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
<div class="c-text-muted">New Users</div>
<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="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
variant="danger"
:value="80"
/>
</CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
<div class="c-text-muted">Bounce Rate</div>
<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="c-progress-xs c-mt-2"
class="progress-xs mt-2"
:precision="1"
:value="40"
/>
@@ -91,152 +91,152 @@
<CRow>
<CCol sm="6">
<CCallout variant="info">
<small class="c-text-muted">New Clients</small><br>
<strong class="c-h4">9,123</strong>
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout variant="danger">
<small class="c-text-muted">Recurring Clients</small><br>
<strong class="c-h4">22,643</strong>
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>
<hr class="c-mt-0">
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
variant="info"
:value="34"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
variant="danger"
:value="78"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Tuesday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="56"
variant="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="94"
variant="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Wednesday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="12"
variant="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="67"
variant="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Thursday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="43"
variant="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="91"
variant="danger"
/>
</div>
</div>
<div class="c-progress-group mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Friday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="22"
variant="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="73"
variant="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Saturday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="53"
variant="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="82"
variant="danger"
/>
</div>
</div>
<div class="c-progress-group c-mb-4">
<div class="c-progress-group-prepend">
<span class="c-progress-group-text">
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text">
Sunday
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="9"
variant="info"
/>
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="69"
variant="danger"
/>
</div>
</div>
<div class="c-legend c-text-center">
<div class="legend text-center">
<small>
<sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
New clients
@@ -250,125 +250,125 @@
<CRow>
<CCol sm="6">
<CCallout variant="warning">
<small class="c-text-muted">Pageviews</small><br>
<strong class="c-h4">78,623</strong>
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout variant="success">
<small class="c-text-muted">Organic</small><br>
<strong class="c-h4">49,123</strong>
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>
<hr class="c-mt-0">
<ul class="c-horizontal-bars c-type-2">
<div class="c-progress-group">
<div class="c-progress-group-header">
<i class="cui-user c-progress-group-icon"></i>
<span class="c-title">Male</span>
<span class="c-ml-auto c-font-weight-bold">43%</span>
<hr class="mt-0">
<ul class="horizontal-bars type-2">
<div class="progress-group">
<div class="progress-group-header">
<i class="cui-user progress-group-icon"></i>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="43"
variant="warning"
/>
</div>
</div>
<div class="c-progress-group c-mb-5">
<div class="c-progress-group-header">
<i class="cui-user-female c-progress-group-icon"></i>
<span class="c-title">Female</span>
<span class="c-ml-auto c-font-weight-bold">37%</span>
<div class="progress-group mb-5">
<div class="progress-group-header">
<i class="cui-user-female progress-group-icon"></i>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="37"
variant="warning"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<i class="cui-globe c-progress-group-icon"></i>
<span class="c-title">Organic Search</span>
<span class="c-ml-auto c-font-weight-bold">
<div class="progress-group">
<div class="progress-group-header">
<i class="cui-globe progress-group-icon"></i>
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="56"
variant="success"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialFacebook"
height="17"
class="c-progress-group-icon"
class="progress-group-icon"
/>
<span class="c-title">Facebook</span>
<span class="c-ml-auto c-font-weight-bold">
51,223 <span class="c-text-muted small">(15%)</span>
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="15"
variant="success"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialTwitter"
height="17"
class="c-progress-group-icon"
class="progress-group-icon"
/>
<span class="c-title">Twitter</span>
<span class="c-ml-auto c-font-weight-bold">
37,564 <span class="c-text-muted c-small">(11%)</span>
<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="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="11"
variant="success"
/>
</div>
</div>
<div class="c-progress-group">
<div class="c-progress-group-header">
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="socialLinkedin"
height="17"
class="c-progress-group-icon"
class="progress-group-icon"
/>
<span class="c-title">LinkedIn</span>
<span class="c-ml-auto c-font-weight-bold">
27,319 <span class="c-text-muted small">&nbsp;(8%)</span>
<span class="title">LinkedIn</span>
<span class="ml-auto font-weight-bold">
27,319 <span class="text-muted small">&nbsp;(8%)</span>
</span>
</div>
<div class="c-progress-group-bars">
<div class="progress-group-bars">
<CProgress
class="c-progress-xs"
class="progress-xs"
:value="8"
variant="success"
/>
</div>
</div>
<div class="c-divider c-text-center">
<CButton variant="link" size="sm" class="c-text-muted">
<div class="divider text-center">
<CButton variant="link" size="sm" class="text-muted">
<i class="cui-options"></i>
</CButton>
</div>
@@ -377,25 +377,25 @@
</CRow>
<br/>
<CTable
class="c-mb-0 c-table-outline"
class="mb-0 table-outline"
hover
:items="tableItems"
:fields="tableFields"
head-variant="light"
no-sorting
>
<td slot="avatar" class="c-text-center" slot-scope="{item}">
<div class="c-avatar">
<img :src="item.avatar.url" class="c-img-avatar" alt="">
<td slot="avatar" class="text-center" slot-scope="{item}">
<div class="avatar">
<img :src="item.avatar.url" class="img-avatar" alt="">
<span
class="c-avatar-status"
:class="`c-bg-${item.avatar.status || 'secondary'}`"
class="avatar-status"
:class="`bg-${item.avatar.status || 'secondary'}`"
></span>
</div>
</td>
<td slot="user" slot-scope="{item}">
<div>{{item.user.name}}</div>
<div class="c-small c-text-muted">
<div class="small text-muted">
<span>
<template v-if="item.user.new">New</template>
<template v-else>Recurring</template>
@@ -405,7 +405,7 @@
<td
slot="country"
slot-scope="{item}"
class="c-text-center"
class="text-center"
>
<CIcon
:name="item.country.flag"
@@ -413,16 +413,16 @@
/>
</td>
<td slot="usage" slot-scope="{item}">
<div class="c-clearfix">
<div class="c-float-left">
<div class="clearfix">
<div class="float-left">
<strong>{{item.usage.value}}%</strong>
</div>
<div class="c-float-right">
<small class="c-text-muted">{{item.usage.period}}</small>
<div class="float-right">
<small class="text-muted">{{item.usage.period}}</small>
</div>
</div>
<CProgress
class="c-progress-xs"
class="progress-xs"
v-model="item.usage.value"
:variant="variant(item.usage.value)"
/>
@@ -430,7 +430,7 @@
<td
slot="payment"
slot-scope="{item}"
class="c-text-center"
class="text-center"
>
<CIcon
:name="item.payment.icon"
@@ -438,7 +438,7 @@
/>
</td>
<td slot="activity" slot-scope="{item}">
<div class="c-small c-text-muted">Last login</div>
<div class="small text-muted">Last login</div>
<strong>{{item.activity}}</strong>
</td>
</CTable>
@@ -514,11 +514,11 @@ export default {
}
],
tableFields: [
{ key: 'avatar', label: '', _classes: 'c-text-center' },
{ key: 'avatar', label: '', _classes: 'text-center' },
{ key: 'user' },
{ key: 'country', _classes: 'c-text-center' },
{ key: 'country', _classes: 'text-center' },
{ key: 'usage' },
{ key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
{ key: 'payment', label: 'Payment method', _classes: 'text-center' },
{ key: 'activity' },
]
}
src/views/base/Breadcrumbs.vue
+6 -6
View File
@@ -1,12 +1,12 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
class="card-header-action"
@@ -72,17 +72,17 @@ export default {
{
textHtml: 'Added',
to: '#2',
addClasses: 'c-font-xl'
addClasses: 'font-xl'
},
{
textHtml: 'Custom',
to: '#3',
addClasses: 'c-font-xl'
addClasses: 'font-xl'
},
{
textHtml: 'Classes',
to: '#4',
addClasses: 'c-font-xl c-text-danger'
addClasses: 'font-xl text-danger'
}
]
}
@@ -91,7 +91,7 @@ export default {
</script>
<style>
.c-breadcrumb-item + .c-font-xl.c-breadcrumb-item::before {
.breadcrumb-item + .font-xl.breadcrumb-item::before {
color: rgb(140, 195, 38);
content: '>>';
padding: 0px 10px;
src/views/base/Cards.vue
+32 -32
View File
@@ -5,7 +5,7 @@
<CCard>
<CCardHeader>
Card title
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/CardComponents"
class="card-header-action"
@@ -35,7 +35,7 @@
<CCardHeader>
Card with switch
<CSwitch
class="c-float-right"
class="float-right"
size="sm"
shape="pill"
variant="info"
@@ -53,7 +53,7 @@
<CCard>
<CCardHeader>
Card with label
<CBadge variant="success" class="c-float-right">Success</CBadge>
<CBadge variant="success" class="float-right">Success</CBadge>
</CCardHeader>
<CCardBody>
{{loremIpsum}}
@@ -64,7 +64,7 @@
<CCard>
<CCardHeader>
Card with label
<CBadge pill variant="danger" class="c-float-right">42</CBadge>
<CBadge pill variant="danger" class="float-right">42</CBadge>
</CCardHeader>
<CCardBody :body-html="loremIpsum"/>
</CCard>
@@ -113,40 +113,40 @@
<CRow>
<CCol sm="6" md="4">
<CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
<CCard class="card-accent-success" header="Card with success accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
<CCard class="card-accent-info" header="Card with info accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard class="c-bg-primary c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-primary 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>
@@ -155,8 +155,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-success c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-success 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>
@@ -165,8 +165,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-info c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-info 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>
@@ -175,8 +175,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-warning c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-warning 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>
@@ -185,8 +185,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-danger c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-danger 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>
@@ -195,8 +195,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-secondary c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<CCard class="bg-secondary 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>
@@ -207,43 +207,43 @@
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-primary" body-wrapper>
<CCard header-html="Card title" class="bg-primary" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-success" body-wrapper>
<CCard header-html="Card title" class="bg-success" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-info" body-wrapper>
<CCard header-html="Card title" class="bg-info" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-warning" body-wrapper>
<CCard header-html="Card title" class="bg-warning" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header-html="Card title" class="c-bg-danger" body-wrapper>
<CCard header-html="Card title" class="bg-danger" body-wrapper>
{{loremIpsum}}
</CCard>
</CCol>
<CCol sm="6" md="4">
<transition name="fade">
<CCard class="c-bg-secondary" v-if="show" >
<CCard class="bg-secondary" v-if="show" >
<CCardHeader>
Card with header actions
<div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action btn-setting" >
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting" >
<i class="cui-settings"></i>
</CLink>
<CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
</CLink>
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
<i class="cui-circle-x"></i>
</CLink>
</div>
src/views/base/Carousels.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<CRow>
<CCol md="12" lg="7">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Carousel"
class="card-header-action"
src/views/base/Collapses.vue
+5 -5
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Collapse"
class="card-header-action"
@@ -22,13 +22,13 @@
<CButton id="collapse1" variant="primary">
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="c-mt-2">
<CCollapse toggler="collapse1" class="mt-2">
<CCard body-wrapper>
<p class="c-card-text">Collapse contents Here</p>
<p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm" variant="secondary">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="c-mt-2">
<CCollapse toggler="collapse2" class="mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
src/views/base/Forms.vue
+42 -42
View File
@@ -5,7 +5,7 @@
<CCard>
<CCardHeader>
<strong>Credit Card </strong> <small>Form</small>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/FormComponents"
class="card-header-action"
@@ -185,11 +185,11 @@
disabled
/>
<template v-for="(name, key) in checkboxNames">
<div class="c-form-group c-form-row" :key="name">
<CCol tag="label" sm="3" class="c-col-form-label">
<div class="form-group form-row" :key="name">
<CCol tag="label" sm="3" class="col-form-label">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CFormCheckbox
v-for="option in options"
:key="option"
@@ -204,11 +204,11 @@
</div>
</template>
<template v-for="(name, key) in radioNames">
<div class="c-form-row c-form-group" :key="name">
<div class="form-row form-group" :key="name">
<CCol sm="3">
{{name}}
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CFormRadio
v-for="option in options"
:key="option"
@@ -259,7 +259,7 @@
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline>
<CFormInput
class="c-mr-2"
class="mr-2"
placeholder="Jane Doe"
>
<template #label>
@@ -348,54 +348,54 @@
Input <strong>Grid</strong>
</CCardHeader>
<CCardBody>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="3">
<CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
<CFormInput class="mb-0" placeholder=".col-sm-3"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="4">
<CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
<CFormInput class="mb-0" placeholder=".col-sm-4"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="5">
<CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
<CFormInput class="mb-0" placeholder=".col-sm-5"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="6">
<CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
<CFormInput class="mb-0" placeholder=".col-sm-6"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="7">
<CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
<CFormInput class="mb-0" placeholder=".col-sm-7"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="8">
<CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
<CFormInput class="mb-0" placeholder=".col-sm-8"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="9">
<CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
<CFormInput class="mb-0" placeholder=".col-sm-9"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="10">
<CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
<CFormInput class="mb-0" placeholder=".col-sm-10"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="11">
<CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
<CFormInput class="mb-0" placeholder=".col-sm-11"/>
</CCol>
</CRow>
<CRow class="c-form-group">
<CRow class="form-group">
<CCol sm="12">
<CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
<CFormInput class="mb-0" placeholder=".col-sm-12"/>
</CCol>
</CRow>
</CCardBody>
@@ -634,15 +634,15 @@
</CCardHeader>
<CCardBody>
<CRow
class="c-form-group"
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<CCol :col="12 - number">
<CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
<CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
</CCol>
<CCol :col="number">
<CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
<CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
</CCol>
</CRow>
</CCardBody>
@@ -662,15 +662,15 @@
</CCardHeader>
<CCardBody>
<CRow
class="c-form-group"
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
:key="key"
>
<CCol :col="number">
<CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
<CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
</CCol>
<CCol :col="12 - number">
<CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
<CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol>
</CRow>
</CCardBody>
@@ -708,7 +708,7 @@
autocomplete="current-password"
append-html="<i class='cui-shield'></i>"
/>
<div class="c-form-group c-form-actions">
<div class="form-group form-actions">
<CButton type="submit" size="sm" variant="primary">
Submit
</CButton>
@@ -740,8 +740,8 @@
autocomplete="current-password"
append-html="<i class='cui-shield'></i>"
/>
<div class="c-form-group c-form-actions">
<CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
<div class="form-group form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary">
Submit
</CButton>
</div>
@@ -772,7 +772,7 @@
autocomplete="current-password"
prependHtml="<i class='cui-shield'></i>"
/>
<div class="c-form-group c-form-actions">
<div class="form-group form-actions">
<CButton type="submit" size="sm" variant="success">
Submit
</CButton>
@@ -788,17 +788,17 @@
<CCard v-if="show">
<CCardHeader>
<i class="cui-pencil"></i> Form Elements
<div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action c-btn-setting">
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i>
</CLink>
<CLink
class="c-card-header-action c-btn-minimize"
class="card-header-action btn-minimize"
@click="formCollapsed=!formCollapsed"
>
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
</CLink>
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="cui-circle-x"></i>
</CLink>
</div>
@@ -837,7 +837,7 @@
<CButton variant="danger">Options</CButton>
</template>
</CFormInput>
<div class="c-form-actions">
<div class="form-actions">
<CButton type="submit" variant="primary">Save changes</CButton>
<CButton variant="secondary">Cancel</CButton>
</div>
src/views/base/Jumbotrons.vue
+6 -6
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol>
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
class="card-header-action"
@@ -34,11 +34,11 @@
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="c-lead">
<p slot="lead" 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="c-my-4">
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
@@ -64,11 +64,11 @@
border-variant="dark"
header="Bootstrap 4"
>
<p slot="lead" class="c-lead">
<p slot="lead" 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="c-my-4">
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
src/views/base/ListGroups.vue
+22 -22
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ListGroup"
class="card-header-action"
@@ -111,19 +111,19 @@
<CCardBody>
<CListGroup>
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<CBadge variant="primary" pill>14</CBadge>
</CListGroupItem>
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge variant="primary" pill>2</CBadge>
</CListGroupItem>
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge variant="primary" pill>1</CBadge>
@@ -195,7 +195,7 @@
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="c-card-text c-mt-2">
<p class="card-text mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
@@ -231,39 +231,39 @@
<CListGroupItem
href="#"
active
class="c-flex-column c-align-items-start"
class="flex-column align-items-start"
>
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">List group item heading</h5>
<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="c-mb-1">
<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="c-flex-column c-align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">List group item heading</h5>
<small class="c-text-muted">3 days ago</small>
<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="c-mb-1">
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="c-text-muted">Donec id elit non mi porta.</small>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" disabled class="c-flex-column c-align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">Disabled List group item</h5>
<small class="c-text-muted">3 days ago</small>
<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="c-mb-1">
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="c-text-muted">Donec id elit non mi porta.</small>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
src/views/base/Navbars.vue
+11 -11
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<!-- <CCard>
<CNavbar toggleable="md" light variant="light">
@@ -19,7 +19,7 @@
<DefaultHeaderDropdownAccnt/>
</CNavbarNav>
<CNavbarNav class="ml-auto">
<CDropdown right class="c-nav-item " toggle-classes="c-nav-link">
<CDropdown right class="nav-item " toggle-classes="nav-link">
<CDropdownItem><i class="cui-file" /> Projects
<CBadge variant="primary">32</CBadge>
</CDropdownItem>
@@ -34,7 +34,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Navbar"
class="card-header-action"
@@ -59,14 +59,14 @@
</CNavbarNav>
<!-- Right aligned nav items -->
<CNavbarNav class="c-ml-auto">
<CNavbarNav class="ml-auto">
<CForm inline>
<CFormInput
class="c-mr-sm-2"
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="light" size="sm" class="c-my-2 c-my-sm-0">
<CButton variant="light" size="sm" class="my-2 my-sm-0">
Search
</CButton>
</CForm>
@@ -104,7 +104,7 @@
<!-- Image and text -->
<CNavbar variant="faded" light>
<CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="CoreuiVue">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
CoreuiVue
</CNavbarBrand>
</CNavbar>
@@ -121,7 +121,7 @@
<CNavbarBrand>CoreuiVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar>
<CNavbarNav>
<span class="c-navbar-text">Navbar text</span>
<span class="navbar-text">Navbar text</span>
</CNavbarNav>
</CCollapse>
</CNavbar>
@@ -172,11 +172,11 @@
<CNavbar light variant="light">
<CForm inline>
<CFormInput
class="c-mr-sm-2"
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</CCardBody>
@@ -190,7 +190,7 @@
<CNavbar light variant="light">
<CForm inline>
<CFormInput
class="c-mr-sm-2"
class="mr-sm-2"
placeholder="Username"
/>
</CForm>
src/views/base/Navs.vue
+4 -4
View File
@@ -1,10 +1,10 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Nav"
class="card-header-action"
@@ -127,7 +127,7 @@
placement="bottom-end"
button-content="Dropdown"
>
<!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
@@ -144,7 +144,7 @@
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="3" class="c-m-0">
<CCol col="3" class="m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
src/views/base/Paginations.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Responsive bootstrap Pagination</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Pagination"
class="card-header-action"
src/views/base/Popovers.vue
+7 -7
View File
@@ -1,11 +1,11 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Popover"
class="card-header-action"
@@ -19,7 +19,7 @@
<CCardBody>
<CRow>
<CCol col="4">
<div class="c-my-3 c-text-center">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover="{
@@ -32,7 +32,7 @@
</div>
</CCol>
<CCol col="4">
<div class="c-my-3 c-text-center">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover="{
@@ -45,7 +45,7 @@
</div>
</CCol>
<CCol col="4">
<div class="c-my-3 c-text-center">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover.click="{
@@ -67,11 +67,11 @@
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<CCardBody class="c-my-3">
<CCardBody class="my-3">
<CRow>
<CCol
md="4"
class="c-py-4 c-text-center"
class="py-4 text-center"
v-for="placement in placements"
:key="placement"
>
src/views/base/ProgressBars.vue
+31 -31
View File
@@ -1,11 +1,11 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Progress"
class="card-header-action"
@@ -18,7 +18,7 @@
</CCardHeader>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="c-mt-1" :max="max" show-value>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
@@ -26,7 +26,7 @@
<CButton
@click="clicked"
variant="secondary"
class="c-mt-4"
class="mt-4"
>
Click me to animate progress bars
</CButton>
@@ -38,15 +38,15 @@
</CCardHeader>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="c-mb-3"/>
<CProgress :value="value" :max="max2" class="mb-3"/>
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
<CProgress :value="value" :max="max2" show-progress class="mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
<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-progress class="c-mb-3"/>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
</CCardBody>
</CCard>
<CCard>
@@ -57,11 +57,11 @@
</CCardHeader>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="c-mb-3"/>
<CProgress :value="value3" class="mb-3"/>
<h6>Custom widths</h6>
<CProgress :value="value3" class="c-w-75 c-mb-2"/>
<CProgress :value="value3" class="c-w-50 c-mb-2"/>
<CProgress :value="value3" class="c-w-25"/>
<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>
@@ -72,10 +72,10 @@
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="c-mb-3"/>
<CProgress :value="value3" show-progress class="mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
@@ -86,9 +86,9 @@
<small>variants</small>
</CCardHeader>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
<div class="c-col-sm-2">{{ bar.variant }}:</div>
<div class="c-col-sm-10 c-pt-1">
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
<CProgress
:value="bar.value"
:variant="bar.variant"
@@ -109,25 +109,25 @@
:value="25"
variant="success"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
@@ -146,27 +146,27 @@
variant="success"
striped
:animated="animate"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
striped
:animated="animate"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
striped
:animated="animate"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:animated="animate"
class="c-mb-3"
class="mb-3"
/>
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
@@ -180,22 +180,22 @@
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="c-mb-3">
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-progress :max="max3" class="c-mb-3">
<CProgress show-progress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="c-mb-3">
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="c-mb-3">
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
src/views/base/Switches.vue
+216 -216
View File
@@ -5,8 +5,8 @@
<CCard v-if="true">
<CCardHeader>
Radio switches
<CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
<div class="c-card-header-actions">
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Switch"
class="card-header-action"
@@ -26,9 +26,9 @@
name="lg"
required
/> -->
<!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
<CSwitch
class="c-mx-1"
class="mx-1"
:key="key"
:variant="variant"
shape="3d"
@@ -53,7 +53,7 @@
</CCardHeader>
<CCardBody>
<CSwitch
class="c-mx-1"
class="mx-1"
variant="primary"
name="switch1"
:checked.sync="checker"
@@ -61,13 +61,13 @@
false-value="no"
/>
<CSwitch
class="c-mx-1"
class="mx-1"
:variant="variant"
checked
:key="key"
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
/>
<CSwitch class="c-mx-1" variant="primary" disabled />
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -77,15 +77,15 @@
Switch pills
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
</CCardBody>
</CCard>
</CCol>
@@ -95,15 +95,15 @@
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="mx-1" variant="success" checked shape="3d" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" />
<CSwitch class="mx-1" variant="info" checked shape="3d" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" />
<CSwitch class="mx-1" variant="light" checked shape="3d" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -113,15 +113,15 @@
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -131,15 +131,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -149,15 +149,15 @@
3d Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -167,15 +167,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -185,15 +185,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -203,15 +203,15 @@
Switch <small><code>outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled />
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -221,15 +221,15 @@
Switch <small><code>outline shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -239,15 +239,15 @@
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -257,15 +257,15 @@
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -275,15 +275,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked />
<CSwitch class="c-mx-1" variant="secondary" checked />
<CSwitch class="c-mx-1" variant="success" checked />
<CSwitch class="c-mx-1" variant="warning" checked />
<CSwitch class="c-mx-1" variant="info" checked />
<CSwitch class="c-mx-1" variant="danger" checked />
<CSwitch class="c-mx-1" variant="light" checked />
<CSwitch class="c-mx-1" variant="dark" checked />
<CSwitch class="c-mx-1" variant="primary" disabled />
<CSwitch class="mx-1" variant="primary" checked />
<CSwitch class="mx-1" variant="secondary" checked />
<CSwitch class="mx-1" variant="success" checked />
<CSwitch class="mx-1" variant="warning" checked />
<CSwitch class="mx-1" variant="info" checked />
<CSwitch class="mx-1" variant="danger" checked />
<CSwitch class="mx-1" variant="light" checked />
<CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -293,15 +293,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled />
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -311,15 +311,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled />
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -329,15 +329,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -347,15 +347,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -365,15 +365,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -384,15 +384,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/>
<CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>shape
</CCol>
@@ -402,15 +402,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -420,15 +420,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline disabled v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -438,15 +438,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -456,15 +456,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -474,15 +474,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -492,11 +492,11 @@
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody class="c-p-0">
<CCardBody class="p-0">
<CTable
hover
striped
class="c-table-align-middle c-mb-0"
class="table-align-middle mb-0"
:items="items"
:fields="fields"
no-sorting
src/views/base/Tables.vue
+9 -12
View File
@@ -5,7 +5,7 @@
<CCard>
<CCardHeader>
CTable component functionality presentation
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Table"
class="card-header-action"
@@ -20,14 +20,11 @@
<CTable
:items="getItems()"
:fields="fields"
:per-page="6"
index-column
filter-row
options-row
hover
:default-column-filter="{ role:'staff' }"
:default-filter="2012"
dark-header
sorting
footer
pagination
>
@@ -35,10 +32,10 @@
<td
@click="toggleDetails(index)"
style="cursor:pointer"
class="c-text-center"
class="text-center"
>
<i
class="c-icons c-font-lg c-d-block cui-chevron-right"
class="icons font-lg d-block cui-chevron-right"
style="transition: transform 0.4s"
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
></i>
@@ -52,7 +49,7 @@
</td>
</template>
<template #show_details="{item, index}">
<td class="c-py-2">
<td class="py-2">
<CButton
variant="outline-primary"
square
@@ -157,17 +154,17 @@ const fields = [
{ key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
]
const items = [
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:11.1, username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'c-table-success'},
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'c-table-info'},
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
@@ -179,7 +176,7 @@ const items = [
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'c-table-danger'},
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
]
src/views/base/Tabs.vue
+2 -2
View File
@@ -5,7 +5,7 @@
<CCard>
<CCardHeader>
Tabs
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Tabs"
class="card-header-action"
@@ -122,7 +122,7 @@
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs add-tab-classes="c-mt-1">
<CTabs add-tab-classes="mt-1">
<CTab active>
<template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}}
src/views/base/Tooltips.vue
+7 -7
View File
@@ -1,12 +1,12 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Tooltip"
class="card-header-action"
@@ -20,7 +20,7 @@
<CCardBody>
<CRow>
<CCol col="4">
<div class="c-text-center c-my-3">
<div class="text-center my-3">
<CButton
variant="secondary"
v-c-tooltip.hover.click="'I am a tooltip!'"
@@ -30,7 +30,7 @@
</div>
</CCol>
<CCol col="4">
<div class="c-text-center c-my-3">
<div class="text-center my-3">
<CButton
v-c-tooltip="{content: 'I start open!', active:true }"
variant="secondary"
@@ -40,7 +40,7 @@
</div>
</CCol>
<CCol col="4">
<div class="c-text-center c-my-3">
<div class="text-center my-3">
<CButton
variant="secondary"
v-c-tooltip.click="
@@ -61,11 +61,11 @@
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="c-my-3">
<div class="my-3">
<CRow>
<CCol
md="4"
class="c-py-4 c-text-center"
class="py-4 text-center"
v-for="placement in placements"
:key="placement"
>
src/views/buttons/BrandButtons.vue
+4 -4
View File
@@ -5,7 +5,7 @@
<CCard>
<CCardHeader>
<strong>Brand Button</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
@@ -219,12 +219,12 @@ export default {
}
</script>
<style scoped lang="css">
.c-btn {
<style scoped>
.btn {
margin-bottom: 4px;
margin-right: 6px;
}
.c-btn svg + span {
.btn svg + span {
margin-left: 8px;
}
</style>
src/views/buttons/ButtonGroups.vue
+23 -23
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" >
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
@@ -25,14 +25,14 @@
<CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Five</CButton>
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="c-d-sm-down-none" variant="success">Success</CButton>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
@@ -77,15 +77,15 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary" class="c-d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Button 2</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton variant="secondary" class="c-d-sm-down-none">Button 3</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
@@ -129,47 +129,47 @@
<CCardBody>
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="c-mx-1">
<CButton variant="secondary" class="c-d-sm-down-none">&laquo;</CButton>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButton variant="secondary" class="c-d-sm-down-none">Edit</CButton>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">&raquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="c-d-sm-down-none"/>
<hr class="d-sm-down-none"/>
<div>
<CButtonToolbar
aria-label="Toolbar with button groups and input groups"
class="c-d-sm-down-none"
class="d-sm-down-none"
>
<CButtonGroup size="sm" class="c-mx-1">
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="c-mb-0 c-w-25 c-mx-1"
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="c-mb-0 c-w-25 c-mx-1"
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="c-mx-1">
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
@@ -178,14 +178,14 @@
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
class="c-mx-1"
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
@@ -193,7 +193,7 @@
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="c-mx-1">
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
src/views/buttons/Dropdowns.vue
+25 -25
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
class="card-header-action"
@@ -22,7 +22,7 @@
<div>
<CDropdown
toggler-text="Dropdown Button"
class="c-m-2"
class="m-2"
variant="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -34,7 +34,7 @@
</CDropdown>
</div>
<!-- <div>
<CDropdown toggler-text="Dropdown using buttons as menu items" class="c-m-2">
<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>
@@ -44,7 +44,7 @@
<div>
<CDropdown
toggler-text="Dropdown with divider"
class="c-m-2"
class="m-2"
variant="secondary"
>
<CDropdownItem>First item</CDropdownItem>
@@ -56,7 +56,7 @@
<div>
<CDropdown
toggler-text="Dropdown with header"
class="c-m-2"
class="m-2"
variant="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader>
@@ -79,7 +79,7 @@
<CDropdown
toggler-text="Left align"
variant="primary"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -89,7 +89,7 @@
placement="bottom-end"
toggler-text="Right align"
variant="primary"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -100,7 +100,7 @@
<CDropdown
toggler-text="Drop-Up"
variant="info"
class="c-m-2"
class="m-2"
placement="top-start"
>
@@ -114,7 +114,7 @@
variant="secondary"
:offset="25"
toggler-text="Offset Dropdown"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -126,7 +126,7 @@
variant="secondary"
split
toggler-text="Split Dropdown"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -176,7 +176,7 @@
variant="secondary"
size="lg"
toggler-text="Large"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -187,7 +187,7 @@
size="lg"
split
toggler-text="Large Split"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -198,7 +198,7 @@
variant="secondary"
size="sm"
toggler-text="Small"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -208,7 +208,7 @@
variant="secondary"
size="sm"
split toggler-text="Small Split"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -231,7 +231,7 @@
<div>
<CDropdown
toggler-text="Dropdown ARIA" variant="primary"
class="c-m-2"
class="m-2"
>
<div role="group">
<CDropdownHeader>Groups</CDropdownHeader>
@@ -264,7 +264,7 @@
size="sm"
toggler-text="Primary"
variant="primary"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -274,7 +274,7 @@
size="sm"
toggler-text="Secondary"
variant="secondary"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -284,7 +284,7 @@
size="sm"
toggler-text="Success"
variant="success"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -294,7 +294,7 @@
size="sm"
toggler-text="Warning"
variant="warning"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -304,7 +304,7 @@
size="sm"
toggler-text="Danger"
variant="danger"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -314,7 +314,7 @@
size="sm"
toggler-text="Info"
variant="info"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -324,7 +324,7 @@
size="sm"
toggler-text="Light"
variant="light"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -334,7 +334,7 @@
size="sm"
toggler-text="Dark"
variant="dark"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -344,7 +344,7 @@
size="sm"
toggler-text="Link"
variant="link"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
src/views/buttons/StandardButtons.vue
+199 -199
View File
@@ -3,7 +3,7 @@
<CCard >
<CCardHeader>
<strong>Standard buttons</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
@@ -15,99 +15,99 @@
</div>
</CCardHeader>
<CCardBody>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link">Link</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" disabled>Link</CButton>
</CCol>
</CRow>
@@ -121,95 +121,95 @@
<p>
Use <code>outline</code> prop
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -222,95 +222,95 @@
Use
<code>ghost</code> prop for ghost buttons.
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0" >
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
<CButton block ghost variant="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -323,99 +323,99 @@
Use
<code>square</code> prop for square buttons.
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square>Link</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square disabled>Link</CButton>
</CCol>
</CRow>
@@ -430,99 +430,99 @@
Use
<code>pill</code> prop for pill buttons.
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill>Link</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<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="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill disabled>Link</CButton>
</CCol>
</CRow>
@@ -534,63 +534,63 @@
</CCardHeader>
<CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<CRow class="c-align-items-center">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center">
<CCol col="2" xl class="mb-3 mb-xl-0">
Small
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="sm" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary">Standard Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" >Outline Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" square>Square Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
Large
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="lg" pill>Pill Button</CButton>
</CCol>
</CRow>
@@ -601,28 +601,28 @@
<strong>With Icons</strong>
</CCardHeader>
<CCardBody>
<CRow class="c-align-items-center">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary">
<i class="cui-lightbulb"></i>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="secondary" outline>
<i class="cui-lightbulb"></i>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="success">
<i class="cui-lightbulb"></i>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="warning" square>
<i class="cui-lightbulb"></i>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="danger" pill>
<i class="cui-lightbulb"></i>&nbsp;Pill Button
</CButton>
@@ -636,22 +636,22 @@
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
src/views/icons/Brands.vue
+2 -2
View File
@@ -5,10 +5,10 @@
<i class="cui-globe"></i>Font Awesome brand icons
</CCardHeader>
<CCardBody>
<CRow class="c-text-center">
<CRow class="text-center">
<template v-for="(brand, brandName) in $options.brands">
<CCol
class="c-mb-5"
class="mb-5"
col="3"
sm="2"
:key="brandName"
src/views/icons/CoreUIIcons.vue
+106 -106
View File
@@ -4,426 +4,426 @@
<CCardHeader>
<i class="cui-pencil"></i>CoreUI Icons
<CBadge variant="info">New</CBadge>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://github.com/coreui/coreui-icons"
rel="noreferrer noopener"
target="_blank"
class="c-card-header-action"
class="card-header-action"
>
<small class="c-text-muted">Github</small>
<small class="text-muted">Github</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<!-- <CRow class="c-text-center c-mb-5">
<!-- <CRow class="text-center mb-5">
<template v-for="(name, key) in $options.iconNames">
<CCol :key="key" col="6" sm="4" md="3" xl="2" >
<CIcon :name="name" width="24" class="c-mt-4"/>
<CIcon :name="name" width="24" class="mt-4"/>
<div>{{name}}</div>
</CCol>
</template>
</CRow>
-->
<CRow class="c-text-center ">
<CRow class="text-center ">
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-account-logout icons font-2xl d-block mt-4"></i>
<div>account-logout</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-redo c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-action-redo icons font-2xl d-block mt-4"></i>
<div>action-redo</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-undo c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-action-undo icons font-2xl d-block mt-4"></i>
<div>action-undo</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-center c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-align-center icons font-2xl d-block mt-4"></i>
<div>align-center</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-left c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-align-left icons font-2xl d-block mt-4"></i>
<div>align-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-right c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-align-right icons font-2xl d-block mt-4"></i>
<div>align-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
<div>arrow-bottom</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-left c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
<div>arrow-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-right c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
<div>arrow-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-top c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
<div>arrow-top</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-ban c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-ban icons font-2xl d-block mt-4"></i>
<div>ban</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-basket-loaded c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
<div>basket-loaded</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bell c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-bell icons font-2xl d-block mt-4"></i>
<div>bell</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bold c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-bold icons font-2xl d-block mt-4"></i>
<div>bold</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bookmark c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-bookmark icons font-2xl d-block mt-4"></i>
<div>bookmark</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-briefcase c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-briefcase icons font-2xl d-block mt-4"></i>
<div>briefcase</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-british-pound c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-british-pound icons font-2xl d-block mt-4"></i>
<div>british-pound</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-brush c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-brush icons font-2xl d-block mt-4"></i>
<div>brush</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calculator c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-calculator icons font-2xl d-block mt-4"></i>
<div>calculator</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calendar c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-calendar icons font-2xl d-block mt-4"></i>
<div>calendar</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cart c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-cart icons font-2xl d-block mt-4"></i>
<div>cart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-chart icons font-2xl d-block mt-4"></i>
<div>chart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-check c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-check icons font-2xl d-block mt-4"></i>
<div>check</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
<div>chevron-bottom</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-left c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
<div>chevron-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-right c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
<div>chevron-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-top c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
<div>chevron-top</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-check c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-circle-check icons font-2xl d-block mt-4"></i>
<div>circle-check</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-x c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-circle-x icons font-2xl d-block mt-4"></i>
<div>circle-x</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-cloud icons font-2xl d-block mt-4"></i>
<div>cloud</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-download c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
<div>cloud-download</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-upload c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
<div>cloud-upload</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-code c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-code icons font-2xl d-block mt-4"></i>
<div>code</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cog c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-cog icons font-2xl d-block mt-4"></i>
<div>cog</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-comment-square c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-comment-square icons font-2xl d-block mt-4"></i>
<div>comment-square</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-credit-card c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-credit-card icons font-2xl d-block mt-4"></i>
<div>credit-card</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cursor c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-cursor icons font-2xl d-block mt-4"></i>
<div>cursor</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dashboard c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-dashboard icons font-2xl d-block mt-4"></i>
<div>dashboard</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-delete c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-delete icons font-2xl d-block mt-4"></i>
<div>delete</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dollar c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-dollar icons font-2xl d-block mt-4"></i>
<div>dollar</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-drop c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-drop icons font-2xl d-block mt-4"></i>
<div>drop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-closed c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
<div>envelope-closed</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-letter c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
<div>envelope-letter</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-open c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
<div>envelope-open</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-euro c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-euro icons font-2xl d-block mt-4"></i>
<div>euro</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-file c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-file icons font-2xl d-block mt-4"></i>
<div>file</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-globe c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-globe icons font-2xl d-block mt-4"></i>
<div>globe</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-graph c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-graph icons font-2xl d-block mt-4"></i>
<div>graph</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-home c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-home icons font-2xl d-block mt-4"></i>
<div>home</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-inbox c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-inbox icons font-2xl d-block mt-4"></i>
<div>inbox</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-info c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-info icons font-2xl d-block mt-4"></i>
<div>info</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-italic c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-italic icons font-2xl d-block mt-4"></i>
<div>italic</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-center c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-justify-center icons font-2xl d-block mt-4"></i>
<div>justify-center</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-left c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-justify-left icons font-2xl d-block mt-4"></i>
<div>justify-left</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-right c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-justify-right icons font-2xl d-block mt-4"></i>
<div>justify-right</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-laptop c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-laptop icons font-2xl d-block mt-4"></i>
<div>laptop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-layers c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-layers icons font-2xl d-block mt-4"></i>
<div>layers</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lightbulb c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
<div>lightbulb</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-list c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-list icons font-2xl d-block mt-4"></i>
<div>list</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-location-pin c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-location-pin icons font-2xl d-block mt-4"></i>
<div>location-pin</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-locked c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
<div>lock-locked</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-unlocked c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
<div>lock-unlocked</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-magnifying-glass c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
<div>magnifying-glass</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-map c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-map icons font-2xl d-block mt-4"></i>
<div>map</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-monitor c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-monitor icons font-2xl d-block mt-4"></i>
<div>monitor</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-moon c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-moon icons font-2xl d-block mt-4"></i>
<div>moon</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-note c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-note icons font-2xl d-block mt-4"></i>
<div>note</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-options c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-options icons font-2xl d-block mt-4"></i>
<div>options</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-paperclip c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-paperclip icons font-2xl d-block mt-4"></i>
<div>paperclip</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pencil c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-pencil icons font-2xl d-block mt-4"></i>
<div>pencil</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-people c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-people icons font-2xl d-block mt-4"></i>
<div>people</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-phone c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-phone icons font-2xl d-block mt-4"></i>
<div>phone</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pie-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
<div>pie-chart</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-print c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-print icons font-2xl d-block mt-4"></i>
<div>print</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-puzzle c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-puzzle icons font-2xl d-block mt-4"></i>
<div>puzzle</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-rss c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-rss icons font-2xl d-block mt-4"></i>
<div>rss</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-desktop c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
<div>screen-desktop</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-smartphone c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
<div>screen-smartphone</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-settings c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-settings icons font-2xl d-block mt-4"></i>
<div>settings</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-share c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-share icons font-2xl d-block mt-4"></i>
<div>share</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-shield c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-shield icons font-2xl d-block mt-4"></i>
<div>shield</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-ascending c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
<div>sort-ascending</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-descending c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
<div>sort-descending</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speech c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-speech icons font-2xl d-block mt-4"></i>
<div>speech</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speedometer c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-speedometer icons font-2xl d-block mt-4"></i>
<div>speedometer</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-star c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-star icons font-2xl d-block mt-4"></i>
<div>star</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sun c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-sun icons font-2xl d-block mt-4"></i>
<div>sun</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tablet c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-tablet icons font-2xl d-block mt-4"></i>
<div>tablet</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tags c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-tags icons font-2xl d-block mt-4"></i>
<div>tags</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-task c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-task icons font-2xl d-block mt-4"></i>
<div>task</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-down c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
<div>thumb-down</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-up c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
<div>thumb-up</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-trash c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-trash icons font-2xl d-block mt-4"></i>
<div>trash</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-underline c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-underline icons font-2xl d-block mt-4"></i>
<div>underline</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-user icons font-2xl d-block mt-4"></i>
<div>user</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-female c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-user-female icons font-2xl d-block mt-4"></i>
<div>user-female</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-follow c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-user-follow icons font-2xl d-block mt-4"></i>
<div>user-follow</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-unfollow c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
<div>user-unfollow</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-wrench c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-wrench icons font-2xl d-block mt-4"></i>
<div>wrench</div>
</CCol>
<CCol col="6" sm="4" md="3" xl="2">
<i class="cui-yen c-icons c-font-2xl c-d-block c-mt-4"></i>
<i class="cui-yen icons font-2xl d-block mt-4"></i>
<div>yen</div>
</CCol>
</CRow>
src/views/icons/Flags.vue
+3 -3
View File
@@ -5,8 +5,8 @@
<i class="cui-globe"></i> Flags
</CCardHeader>
<CCardBody>
<CRow class="c-text-center">
<CCol class="c-mb-5" col="12">
<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
@@ -15,7 +15,7 @@
</CCol>
<template v-for="(flag, key) in displayedFlags">
<CCol
class="c-mb-5"
class="mb-5"
col="3"
sm="2"
:key="key"
src/views/notifications/Alerts.vue
+17 -17
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Alert"
class="card-header-action"
@@ -37,34 +37,34 @@
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.c-alert-link</code> to provide links</small>
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
Success Alert with <a href="#" class="c-alert-link">an example link</a>.
Success Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
Info Alert with <a href="#" class="c-alert-link">an example link</a>.
Info Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
Light Alert with <a href="#" class="c-alert-link">an example link</a>.
Light Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
Dark Alert with
<CLink href="#" class="c-alert-link">an example link</CLink>
<CLink href="#" class="alert-link">an example link</CLink>
.
</CAlert>
</div>
@@ -78,14 +78,14 @@
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="c-alert-heading">Well done!</h4>
<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="c-mb-0">
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
@@ -120,11 +120,11 @@
variant="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="c-alert-dismissible"
class="alert-dismissible"
>
Dismissible Alert with custom button!
<CButton
class="c-position-absolute"
class="position-absolute"
variant="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>"
@@ -134,7 +134,7 @@
<CButton
@click="showDismissibleAlerts"
variant="info"
class="c-m-1"
class="m-1"
>
Show dismissible alerts
</CButton>
@@ -170,7 +170,7 @@
height="4px"
/>
</CAlert>
<CButton @click="showAlert" variant="info" class="c-m-1">
<CButton @click="showAlert" variant="info" class="m-1">
Show alert with timer
</CButton>
</div>
src/views/notifications/Badges.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template functional>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Badge"
class="card-header-action"
src/views/notifications/Modals.vue
+13 -13
View File
@@ -1,12 +1,12 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Modal"
class="card-header-action"
@@ -18,32 +18,32 @@
</div>
</CCardHeader>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="c-mr-1">
<CButton variant="secondary" @click="myModal = true" class="mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="c-mr-1">
<CButton variant="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="c-mr-1">
<CButton variant="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="c-mr-1">
<CButton variant="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="c-mr-1">
<CButton variant="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
@@ -162,8 +162,8 @@
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="{hide}">
<h6 class="c-modal-title">Custom smaller modal title</h6>
<CButtonClose @click="hide()" class="c-text-white"/>
<h6 class="modal-title">Custom smaller modal title</h6>
<CButtonClose @click="hide()" class="text-white"/>
</template>
<template #footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton>
src/views/pages/Login.vue
+9 -9
View File
@@ -1,13 +1,13 @@
<template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
<CRow class="c-justify-content-center">
<CContainer class="d-flex align-items-center min-vh-100">
<CRow class="justify-content-center">
<CCol md="8">
<CCardGroup>
<CCard class="c-p-4">
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="c-text-muted">Sign In to your account</p>
<p class="text-muted">Sign In to your account</p>
<CFormInput
prependHtml="<i class='cui-user'></i>"
placeholder="Username"
@@ -21,17 +21,17 @@
/>
<CRow>
<CCol col="6">
<CButton variant="primary" class="c-px-4">Login</CButton>
<CButton variant="primary" class="px-4">Login</CButton>
</CCol>
<CCol col="6" class="c-text-right">
<CButton variant="link" class="c-px-0">Forgot password?</CButton>
<CCol col="6" class="text-right">
<CButton variant="link" class="px-0">Forgot password?</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard
class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
class="text-white text-center bg-primary py-5 d-md-down-none"
style="width:44%"
body-wrapper
>
@@ -39,7 +39,7 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<CButton
variant="primary"
class="c-active c-mt-3"
class="active mt-3"
>
Register Now!
</CButton>
src/views/pages/Page404.vue
+8 -8
View File
@@ -1,15 +1,15 @@
<template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
<CRow class="c-w-100 c-justify-content-center">
<CContainer class="d-flex align-items-center min-vh-100">
<CRow class="w-100 justify-content-center">
<CCol md="6">
<div class="c-w-100">
<div class="c-clearfix">
<h1 class="c-float-left c-display-3 c-mr-4">404</h1>
<h4 class="c-pt-3">Oops! You're lost.</h4>
<p class="c-text-muted">The page you are looking for was not found.</p>
<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>
<CFormInput
class="c-mb-0"
class="mb-0"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?"
>
src/views/pages/Page500.vue
+7 -7
View File
@@ -1,14 +1,14 @@
<template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
<CRow class="c-w-100 c-justify-content-center">
<CContainer class="d-flex align-items-center min-vh-100">
<CRow class="w-100 justify-content-center">
<CCol md="6">
<div class="c-clearfix">
<h1 class="c-float-left c-display-3 c-mr-4">500</h1>
<h4 class="c-pt-3">Houston, we have a problem!</h4>
<p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
<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>
<CFormInput
class="c-mb-0"
class="mb-0"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?"
>
src/views/pages/Register.vue
+7 -7
View File
@@ -1,12 +1,12 @@
<template>
<CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
<CRow class="c-w-100 c-justify-content-center">
<CContainer class="min-vh-100 d-flex align-items-center">
<CRow class="w-100 justify-content-center">
<CCol md="6" sm="8">
<CCard class="c-mx-4">
<CCardBody class="c-p-4">
<CCard class="mx-4">
<CCardBody class="p-4">
<CForm>
<h1>Register</h1>
<p class="c-text-muted">Create your account</p>
<p class="text-muted">Create your account</p>
<CFormInput
placeholder="Username"
prependHtml="<i class='cui-user'></i>"
@@ -28,12 +28,12 @@
type="password"
prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password"
class="c-mb-4"
class="mb-4"
/>
<CButton variant="success" block>Create Account</CButton>
</CForm>
</CCardBody>
<CCardFooter class="c-p-4">
<CCardFooter class="p-4">
<CRow>
<CCol col="6">
<CButton block variant="facebook" textHtml="Facebook"/>
src/views/theme/ColorTheme.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
<div
:class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
:class="['theme-color w-75 rounded mb-3', color]"
:style="{ paddingTop: '75%' }"
></div>
<slot></slot>
@@ -17,7 +17,7 @@ export default {
props: {
color: {
type: String,
default: 'c-bg-secondary'
default: 'bg-secondary'
}
}
}
src/views/theme/ColorView.vue
+5 -5
View File
@@ -1,13 +1,13 @@
<template>
<table class="c-w-100">
<table class="w-100">
<tbody>
<tr>
<td class="c-text-muted">HEX:</td>
<td class="c-font-weight-bold">{{this.hexColor}}</td>
<td class="text-muted">HEX:</td>
<td class="font-weight-bold">{{this.hexColor}}</td>
</tr>
<tr>
<td class="c-text-muted">RGB:</td>
<td class="c-font-weight-bold">{{this.bgColor}}</td>
<td class="text-muted">RGB:</td>
<td class="font-weight-bold">{{this.bgColor}}</td>
</tr>
</tbody>
</table>
src/views/theme/Colors.vue
+27 -27
View File
@@ -6,16 +6,16 @@
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="c-bg-primary">
<ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6>
</ColorTheme>
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="c-bg-dark"><h6>Brand Dark 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>
@@ -25,15 +25,15 @@
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
<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>
@@ -43,16 +43,16 @@
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
<ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
<ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
<ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
<ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
<ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
<ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
<ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
<ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
<ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
<ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
<ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
<ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
<ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
<ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
<ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
<ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
</CRow>
</CCardBody>
</CCard>
src/views/theme/Typography.vue
+59 -59
View File
@@ -1,13 +1,13 @@
<template>
<div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Headings
</div>
<div class="c-card-body">
<div class="card-body">
<p>Documentation and examples for Bootstrap typography,
including global settings, headings, body text, lists, and more.</p>
<table class="c-table">
<table class="table">
<thead>
<tr>
<th>Heading</th>
@@ -18,131 +18,131 @@
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt;
</code>
</p>
</td>
<td><span class="c-h1">h1. Bootstrap heading</span></td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt;
</code>
</p>
</td>
<td><span class="c-h2">h2. Bootstrap heading</span></td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt;
</code>
</p>
</td>
<td><span class="c-h3">h3. Bootstrap heading</span></td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt;
</code>
</p>
</td>
<td><span class="c-h4">h4. Bootstrap heading</span></td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt;
</code>
</p>
</td>
<td><span class="c-h5">h5. Bootstrap heading</span></td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt;
</code>
</p>
</td>
<td><span class="c-h6">h6. Bootstrap heading</span></td>
<td><span class="h6">h6. Bootstrap heading</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Headings
</div>
<div class="c-card-body">
<div class="card-body">
<p>
<code class="c-highlighter-rouge">.h1</code> through
<code class="c-highlighter-rouge">.h6</code>
<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="c-bd-example">
<p class="c-h1">h1. Bootstrap heading</p>
<p class="c-h2">h2. Bootstrap heading</p>
<p class="c-h3">h3. Bootstrap heading</p>
<p class="c-h4">h4. Bootstrap heading</p>
<p class="c-h5">h5. Bootstrap heading</p>
<p class="c-h6">h6. Bootstrap heading</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="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Display headings
</div>
<div class="c-card-body">
<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="c-bd-example c-bd-example-type">
<table class="c-table">
<div class="bd-example bd-example-type">
<table class="table">
<tbody>
<tr>
<td><span class="c-display-1">Display 1</span></td>
<td><span class="display-1">Display 1</span></td>
</tr>
<tr>
<td><span class="c-display-2">Display 2</span></td>
<td><span class="display-2">Display 2</span></td>
</tr>
<tr>
<td><span class="c-display-3">Display 3</span></td>
<td><span class="display-3">Display 3</span></td>
</tr>
<tr>
<td><span class="c-display-4">Display 4</span></td>
<td><span class="display-4">Display 4</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Inline text elements
</div>
<div class="c-card-body">
<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="c-bd-example">
<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.
@@ -162,46 +162,46 @@
</div>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Description list alignment
</div>
<div class="c-card-body">
<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="c-bd-example">
<dl class="c-row">
<dt class="c-col-sm-3">Description lists</dt>
<dd class="c-col-sm-9">
<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="c-col-sm-3">Euismod</dt>
<dd class="c-col-sm-9">
<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="c-col-sm-3">Malesuada porta</dt>
<dd class="c-col-sm-9">
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">
Etiam porta sem malesuada magna mollis euismod.
</dd>
<dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="c-col-sm-9">
<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="c-col-sm-3">Nesting</dt>
<dd class="c-col-sm-9">
<dl class="c-row">
<dt class="c-col-sm-4">Nested definition list</dt>
<dd class="c-col-sm-8">
<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>
src/views/users/Users.vue
+1 -1
View File
@@ -76,7 +76,7 @@ export default {
</script>
<style scoped>
.c-card-body >>> table > tbody > tr > td {
.card-body >>> table > tbody > tr > td {
cursor: pointer;
}
</style>
src/views/widgets/Widgets.vue
+14 -14
View File
@@ -10,13 +10,13 @@
<CProgress
variant="success"
:value="25"
class="c-progress-xs c-my-3 c-mb-0"
class="progress-xs my-3 mb-0"
/>
<template #header>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action c-position-absolute"
class="card-header-action position-absolute"
style="right:10px; top:10px"
rel="noreferrer noopener"
target="_blank"
@@ -184,7 +184,7 @@
variant="primary"
no-icon-padding
>
<CIcon name="settings" class="c-mx-5 " width="24"/>
<CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -194,7 +194,7 @@
variant="info"
no-icon-padding
>
<CIcon name="laptop" class="c-mx-5 " width="24"/>
<CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -204,15 +204,15 @@
variant="warning"
no-icon-padding
>
<CIcon name="moon" class="c-mx-5 " width="24"/>
<CIcon name="moon" class="mx-5 " width="24"/>
<template #footer>
<CCardFooter class="c-card-footer c-px-3 c-py-2">
<CCardFooter class="card-footer px-3 py-2">
<CLink
class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
class="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
>
View more
<CIcon name="arrowRight" class="c-float-right" width="16"/>
<CIcon name="arrowRight" class="float-right" width="16"/>
</CLink>
</CCardFooter>
</template>
@@ -228,7 +228,7 @@
no-icon-padding
link="#"
>
<CIcon name="settings" class="c-mx-5 " width="24"/>
<CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -239,7 +239,7 @@
no-icon-padding
link="#"
>
<CIcon name="laptop" class="c-mx-5 " width="24"/>
<CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -250,13 +250,13 @@
no-icon-padding
link="#"
>
<CIcon name="moon" class="c-mx-5" width="24"/>
<CIcon name="moon" class="mx-5" width="24"/>
</CWidgetIcon>
</CCol>
</CRow> -->
<WidgetsBrand noCharts/>
<WidgetsBrand/>
<CCardGroup class="c-mb-4">
<CCardGroup class="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
@@ -292,7 +292,7 @@
<CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CCardGroup class="c-mb-4">
<CCardGroup class="mb-4">
<CWidgetProgressIcon
header="87.500"
text="Visitors"
src/views/widgets/WidgetsBrand.vue
+12 -12
View File
@@ -12,11 +12,11 @@
<CIcon
name="socialFacebook"
height="52"
class="c-my-4"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="position-absolute"
background-color="rgba(255,255,255,.1)"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
label="Friends"
@@ -35,11 +35,11 @@
<CIcon
name="socialTwitter"
height="52"
class="c-my-4"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="position-absolute"
background-color="rgba(255,255,255,.1)"
:data-points="[1, 13, 9, 17, 34, 41, 38]"
label="Followers"
@@ -58,11 +58,11 @@
<CIcon
name="socialLinkedin"
height="52"
class="c-my-4"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="position-absolute"
background-color="rgba(255,255,255,.1)"
:data-points="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts"
@@ -81,11 +81,11 @@
<CIcon
name="calendar"
height="52"
class="c-my-4"
class="my-4"
/>
<CChartLineSimple
style="height:100px"
class="c-position-absolute"
class="position-absolute"
background-color="rgba(255,255,255,.1)"
:data-points="[35, 23, 56, 22, 97, 23, 64]"
label="Followers"
@@ -106,7 +106,7 @@
<CIcon
name="socialFacebook"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
@@ -121,7 +121,7 @@
<CIcon
name="socialTwitter"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
@@ -136,7 +136,7 @@
<CIcon
name="socialLinkedin"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
@@ -151,7 +151,7 @@
<CIcon
name="calendar"
height="56"
class="c-my-4"
class="my-4"
/>
</CWidgetBrand>
</CCol>
src/views/widgets/WidgetsDropdown.vue
+10 -10
View File
@@ -4,8 +4,8 @@
<CWidgetDropdown variant="primary" header="9.823" text="Members online">
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
variant="transparent p-0"
placement="bottom-end"
>
<template #toggler-content>
@@ -20,7 +20,7 @@
<template #footer>
<CChartLineSimple
pointed
class="c-px-3"
class="px-3"
style="height:70px"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
background-color="primary"
@@ -34,8 +34,8 @@
<CWidgetDropdown variant="info" header="9.823" text="Members online">
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
variant="transparent p-0"
placement="bottom-end"
no-caret
buttonHtml="<i class='cui-location-pin'></i>"
@@ -52,7 +52,7 @@
<template #footer>
<CChartLineSimple
pointed
class="c-px-3"
class="px-3"
style="height:70px"
:data-points="[1, 18, 9, 17, 34, 22, 11]"
background-color="info"
@@ -71,8 +71,8 @@
>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
variant="transparent p-0"
placement="bottom-end"
>
<template #toggler-content>
@@ -105,8 +105,8 @@
>
<template #default>
<CDropdown
class="c-float-right"
variant="transparent c-p-0"
class="float-right"
variant="transparent p-0"
placement="bottom-end"
>
<template #toggler-content>