sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 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
package.json
+1 -1
View File
@@ -14,7 +14,7 @@
"test:e2e": "vue-cli-service test:e2e" "test:e2e": "vue-cli-service test:e2e"
}, },
"dependencies": { "dependencies": {
"@coreui/coreui": "next", "@coreui/coreui": "3.0.0-alpha.13",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1", "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/coreui-vue-chartjs": "../coreui-vue-chartjs", "@coreui/coreui-vue-chartjs": "../coreui-vue-chartjs",
"@coreui/icons": "github:coreui/coreui-icons#v1-alpha", "@coreui/icons": "github:coreui/coreui-icons#v1-alpha",
src/containers/DefaultHeaderDropdownAccnt.vue
+4 -4
View File
@@ -3,16 +3,16 @@
nav nav
no-caret no-caret
no-popper no-popper
add-menu-classes="c-dropdown-menu-right" add-menu-classes="dropdown-menu-right"
> >
<template #toggler-content> <template #toggler-content>
<img <img
src="img/avatars/6.jpg" src="img/avatars/6.jpg"
class="c-img-avatar" class="img-avatar"
alt="admin@bootstrapmaster.com" alt="admin@bootstrapmaster.com"
/> />
</template> </template>
<CDropdownHeader tag="div" class="c-text-center"> <CDropdownHeader tag="div" class="text-center">
<strong>Account</strong> <strong>Account</strong>
</CDropdownHeader> </CDropdownHeader>
<CDropdownItem> <CDropdownItem>
@@ -33,7 +33,7 @@
</CDropdownItem> </CDropdownItem>
<CDropdownHeader <CDropdownHeader
tag="div" tag="div"
class="c-text-center" class="text-center"
> >
<strong>Settings</strong> <strong>Settings</strong>
</CDropdownHeader> </CDropdownHeader>
src/containers/TheFooter.vue
+3 -3
View File
@@ -2,10 +2,10 @@
<CFooter> <CFooter>
<div> <div>
<a href="https://coreui.io">CoreUI</a> <a href="https://coreui.io">CoreUI</a>
<span class="c-ml-1">&copy; 2018 creativeLabs.</span> <span class="ml-1">&copy; 2018 creativeLabs.</span>
</div> </div>
<div class="c-ml-auto"> <div class="ml-auto">
<span class="c-mr-1">Powered by</span> <span class="mr-1">Powered by</span>
<a href="https://coreui.io">CoreUI for Vue</a> <a href="https://coreui.io">CoreUI for Vue</a>
</div> </div>
</CFooter> </CFooter>
src/containers/TheHeader.vue
+12 -16
View File
@@ -1,13 +1,13 @@
<template> <template>
<CHeader fixed> <CHeader fixed>
<CSidebarToggler <CSidebarToggler
class="c-header-toggler c-d-lg-none c-mr-auto" class="c-header-toggler d-lg-none mr-auto"
v-c-emit-root-event:c-sidebar-toggle v-c-emit-root-event:c-sidebar-toggle
/> />
<CLink :class="logoClasses" to="/"> <CLink :class="logoClasses" to="/">
<img <img
v-show="sidebarIsMinimized" v-show="sidebarIsMinimized"
class="c-navbar-brand-minimized c-d-md-down-none" class="navbar-brand-minimized d-md-down-none"
src="img/brand/sygnet.svg" src="img/brand/sygnet.svg"
width="30" width="30"
height="30" height="30"
@@ -15,14 +15,14 @@
> >
<img <img
v-show="!sidebarIsMinimized" v-show="!sidebarIsMinimized"
class="c-navbar-brand-full c-d-md-down-none" class="navbar-brand-full d-md-down-none"
src="img/brand/logo.svg" src="img/brand/logo.svg"
width="89" width="89"
height="25" height="25"
alt="CoreUI Logo" alt="CoreUI Logo"
> >
<img <img
class="c-navbar-brand-full c-d-lg-none" class="navbar-brand-full d-lg-none"
src="img/brand/logo.svg" src="img/brand/logo.svg"
width="89" width="89"
height="25" height="25"
@@ -30,20 +30,20 @@
> >
</CLink> </CLink>
<CSidebarToggler <CSidebarToggler
class="c-header-toggler c-d-md-down-none" class="c-header-toggler d-md-down-none"
v-c-emit-root-event:c-sidebar-toggle v-c-emit-root-event:c-sidebar-toggle
/> />
<ul class="c-header-nav c-d-md-down-none"> <ul class="c-header-nav d-md-down-none">
<CNavItem class="c-px-3" to="/dashboard">Dashboard</CNavItem> <CNavItem class="px-3" to="/dashboard">Dashboard</CNavItem>
<CNavItem class="c-px-3" to="/users" exact>Users</CNavItem> <CNavItem class="px-3" to="/users" exact>Users</CNavItem>
<CNavItem class="c-px-3">Settings</CNavItem> <CNavItem class="px-3">Settings</CNavItem>
</ul> </ul>
<CNav class="c-header-nav c-ml-auto"> <CNav class="c-header-nav ml-auto">
<CNavItem class="c-d-md-down-none"> <CNavItem class="d-md-down-none">
<i class="cui-bell"></i> <i class="cui-bell"></i>
<CBadge pill variant="danger">5</CBadge> <CBadge pill variant="danger">5</CBadge>
</CNavItem> </CNavItem>
<CNavItem class="c-d-md-down-none"> <CNavItem class="d-md-down-none">
<i class="cui-list"></i> <i class="cui-list"></i>
</CNavItem> </CNavItem>
<CNavItem class="d-md-down-none"> <CNavItem class="d-md-down-none">
@@ -51,10 +51,6 @@
</CNavItem> </CNavItem>
<DefaultHeaderDropdownAccnt/> <DefaultHeaderDropdownAccnt/>
</CNav> </CNav>
<!-- <CSidebarToggler
class="c-header-toggler c-d-md-down-none"
aside
/> -->
</CHeader> </CHeader>
</template> </template>
src/containers/TheSidebar.vue
+1 -1
View File
@@ -8,7 +8,7 @@
<CRenderFunction :contentToRender="nav"/> <CRenderFunction :contentToRender="nav"/>
<!-- <CSidebarFooter/> --> <!-- <CSidebarFooter/> -->
<CSidebarMinimizer <CSidebarMinimizer
class="c-d-md-down-none" class="d-md-down-none"
@click.native="minimize = !minimize" @click.native="minimize = !minimize"
/> />
</CSidebar> </CSidebar>
src/router/index.js
+1 -1
View File
@@ -61,7 +61,7 @@ Vue.use(Router)
export default new Router({ export default new Router({
mode: 'hash', // https://router.vuejs.org/api/#mode mode: 'hash', // https://router.vuejs.org/api/#mode
linkActiveClass: 'c-active', linkActiveClass: 'active',
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: [ routes: [
{ {
src/views/Charts.vue
+2 -2
View File
@@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<CCardGroup columns class="c-card-columns c-cols-2"> <CCardGroup columns class="card-columns cols-2">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Line Chart Line Chart
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Charts" href="https://coreui.io/vue/docs/3.0/components/Charts"
class="card-header-action" class="card-header-action"
src/views/Dashboard.vue
+141 -141
View File
@@ -5,19 +5,19 @@
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm="5"> <CCol sm="5">
<h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4> <h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="c-small c-text-muted">November 2017</div> <div class="small text-muted">November 2017</div>
</CCol> </CCol>
<CCol sm="7" class="c-d-none c-d-md-block"> <CCol sm="7" class="d-none d-md-block">
<CButton variant="primary" class="c-float-right"> <CButton variant="primary" class="float-right">
<i class="cui-cloud-download"></i> <i class="cui-cloud-download"></i>
</CButton> </CButton>
<CButtonGroup class="c-float-right c-mr-3"> <CButtonGroup class="float-right mr-3">
<CButton <CButton
variant="outline-secondary" variant="outline-secondary"
v-for="(value, key) in ['Day', 'Month', 'Year']" v-for="(value, key) in ['Day', 'Month', 'Year']"
:key="key" :key="key"
class="c-mx-0" class="mx-0"
:pressed="value === selected ? true : false" :pressed="value === selected ? true : false"
@click="selected = value" @click="selected = value"
> >
@@ -29,52 +29,52 @@
<MainChartExample style="height:300px;margin-top:40px;"/> <MainChartExample style="height:300px;margin-top:40px;"/>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CRow class="c-text-center"> <CRow class="text-center">
<CCol md sm="12" class="c-mb-sm-2 c-mb-0"> <CCol md sm="12" class="mb-sm-2 mb-0">
<div class="c-text-muted">Visits</div> <div class="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong> <strong>29.703 Users (40%)</strong>
<CProgress <CProgress
class="c-progress-xs c-mt-2" class="progress-xs mt-2"
:precision="1" :precision="1"
variant="success" variant="success"
:value="40" :value="40"
/> />
</CCol> </CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none"> <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
<div class="c-text-muted">Unique</div> <div class="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong> <strong>24.093 Users (20%)</strong>
<CProgress <CProgress
class="c-progress-xs c-mt-2" class="progress-xs mt-2"
:precision="1" :precision="1"
variant="info" variant="info"
:value="20" :value="20"
/> />
</CCol> </CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0"> <CCol md sm="12" class="mb-sm-2 mb-0">
<div class="c-text-muted">Pageviews</div> <div class="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong> <strong>78.706 Views (60%)</strong>
<CProgress <CProgress
class="c-progress-xs c-mt-2" class="progress-xs mt-2"
:precision="1" :precision="1"
variant="warning" variant="warning"
:value="60" :value="60"
/> />
</CCol> </CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0"> <CCol md sm="12" class="mb-sm-2 mb-0">
<div class="c-text-muted">New Users</div> <div class="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong> <strong>22.123 Users (80%)</strong>
<CProgress <CProgress
class="c-progress-xs c-mt-2" class="progress-xs mt-2"
:precision="1" :precision="1"
variant="danger" variant="danger"
:value="80" :value="80"
/> />
</CCol> </CCol>
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none"> <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
<div class="c-text-muted">Bounce Rate</div> <div class="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong> <strong>Average Rate (40.15%)</strong>
<CProgress <CProgress
class="c-progress-xs c-mt-2" class="progress-xs mt-2"
:precision="1" :precision="1"
:value="40" :value="40"
/> />
@@ -91,152 +91,152 @@
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCallout variant="info"> <CCallout variant="info">
<small class="c-text-muted">New Clients</small><br> <small class="text-muted">New Clients</small><br>
<strong class="c-h4">9,123</strong> <strong class="h4">9,123</strong>
</CCallout> </CCallout>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<CCallout variant="danger"> <CCallout variant="danger">
<small class="c-text-muted">Recurring Clients</small><br> <small class="text-muted">Recurring Clients</small><br>
<strong class="c-h4">22,643</strong> <strong class="h4">22,643</strong>
</CCallout> </CCallout>
</CCol> </CCol>
</CRow> </CRow>
<hr class="c-mt-0"> <hr class="mt-0">
<div class="c-progress-group c-mb-4"> <div class="progress-group mb-4">
<div class="c-progress-group-prepend"> <div class="progress-group-prepend">
<span class="c-progress-group-text"> <span class="progress-group-text">
Monday Monday
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
variant="info" variant="info"
:value="34" :value="34"
/> />
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
variant="danger" variant="danger"
:value="78" :value="78"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group c-mb-4"> <div class="progress-group mb-4">
<div class="c-progress-group-prepend"> <div class="progress-group-prepend">
<span class="c-progress-group-text"> <span class="progress-group-text">
Tuesday Tuesday
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="56" :value="56"
variant="info" variant="info"
/> />
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="94" :value="94"
variant="danger" variant="danger"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group c-mb-4"> <div class="progress-group mb-4">
<div class="c-progress-group-prepend"> <div class="progress-group-prepend">
<span class="c-progress-group-text"> <span class="progress-group-text">
Wednesday Wednesday
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="12" :value="12"
variant="info" variant="info"
/> />
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="67" :value="67"
variant="danger" variant="danger"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group c-mb-4"> <div class="progress-group mb-4">
<div class="c-progress-group-prepend"> <div class="progress-group-prepend">
<span class="c-progress-group-text"> <span class="progress-group-text">
Thursday Thursday
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="43" :value="43"
variant="info" variant="info"
/> />
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="91" :value="91"
variant="danger" variant="danger"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group mb-4"> <div class="progress-group mb-4">
<div class="c-progress-group-prepend"> <div class="progress-group-prepend">
<span class="c-progress-group-text"> <span class="progress-group-text">
Friday Friday
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="22" :value="22"
variant="info" variant="info"
/> />
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="73" :value="73"
variant="danger" variant="danger"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group c-mb-4"> <div class="progress-group mb-4">
<div class="c-progress-group-prepend"> <div class="progress-group-prepend">
<span class="c-progress-group-text"> <span class="progress-group-text">
Saturday Saturday
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="53" :value="53"
variant="info" variant="info"
/> />
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="82" :value="82"
variant="danger" variant="danger"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group c-mb-4"> <div class="progress-group mb-4">
<div class="c-progress-group-prepend"> <div class="progress-group-prepend">
<span class="c-progress-group-text"> <span class="progress-group-text">
Sunday Sunday
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="9" :value="9"
variant="info" variant="info"
/> />
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="69" :value="69"
variant="danger" variant="danger"
/> />
</div> </div>
</div> </div>
<div class="c-legend c-text-center"> <div class="legend text-center">
<small> <small>
<sup><CBadge pill variant="info">&nbsp;</CBadge></sup> <sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
New clients New clients
@@ -250,125 +250,125 @@
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCallout variant="warning"> <CCallout variant="warning">
<small class="c-text-muted">Pageviews</small><br> <small class="text-muted">Pageviews</small><br>
<strong class="c-h4">78,623</strong> <strong class="h4">78,623</strong>
</CCallout> </CCallout>
</CCol> </CCol>
<CCol sm="6"> <CCol sm="6">
<CCallout variant="success"> <CCallout variant="success">
<small class="c-text-muted">Organic</small><br> <small class="text-muted">Organic</small><br>
<strong class="c-h4">49,123</strong> <strong class="h4">49,123</strong>
</CCallout> </CCallout>
</CCol> </CCol>
</CRow> </CRow>
<hr class="c-mt-0"> <hr class="mt-0">
<ul class="c-horizontal-bars c-type-2"> <ul class="horizontal-bars type-2">
<div class="c-progress-group"> <div class="progress-group">
<div class="c-progress-group-header"> <div class="progress-group-header">
<i class="cui-user c-progress-group-icon"></i> <i class="cui-user progress-group-icon"></i>
<span class="c-title">Male</span> <span class="title">Male</span>
<span class="c-ml-auto c-font-weight-bold">43%</span> <span class="ml-auto font-weight-bold">43%</span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="43" :value="43"
variant="warning" variant="warning"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group c-mb-5"> <div class="progress-group mb-5">
<div class="c-progress-group-header"> <div class="progress-group-header">
<i class="cui-user-female c-progress-group-icon"></i> <i class="cui-user-female progress-group-icon"></i>
<span class="c-title">Female</span> <span class="title">Female</span>
<span class="c-ml-auto c-font-weight-bold">37%</span> <span class="ml-auto font-weight-bold">37%</span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="37" :value="37"
variant="warning" variant="warning"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group"> <div class="progress-group">
<div class="c-progress-group-header"> <div class="progress-group-header">
<i class="cui-globe c-progress-group-icon"></i> <i class="cui-globe progress-group-icon"></i>
<span class="c-title">Organic Search</span> <span class="title">Organic Search</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="ml-auto font-weight-bold">
191,235<span class="text-muted small">(56%)</span> 191,235<span class="text-muted small">(56%)</span>
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="56" :value="56"
variant="success" variant="success"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group"> <div class="progress-group">
<div class="c-progress-group-header"> <div class="progress-group-header">
<CIcon <CIcon
name="socialFacebook" name="socialFacebook"
height="17" height="17"
class="c-progress-group-icon" class="progress-group-icon"
/> />
<span class="c-title">Facebook</span> <span class="title">Facebook</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="ml-auto font-weight-bold">
51,223 <span class="c-text-muted small">(15%)</span> 51,223 <span class="text-muted small">(15%)</span>
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="15" :value="15"
variant="success" variant="success"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group"> <div class="progress-group">
<div class="c-progress-group-header"> <div class="progress-group-header">
<CIcon <CIcon
name="socialTwitter" name="socialTwitter"
height="17" height="17"
class="c-progress-group-icon" class="progress-group-icon"
/> />
<span class="c-title">Twitter</span> <span class="title">Twitter</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="ml-auto font-weight-bold">
37,564 <span class="c-text-muted c-small">(11%)</span> 37,564 <span class="text-muted small">(11%)</span>
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="11" :value="11"
variant="success" variant="success"
/> />
</div> </div>
</div> </div>
<div class="c-progress-group"> <div class="progress-group">
<div class="c-progress-group-header"> <div class="progress-group-header">
<CIcon <CIcon
name="socialLinkedin" name="socialLinkedin"
height="17" height="17"
class="c-progress-group-icon" class="progress-group-icon"
/> />
<span class="c-title">LinkedIn</span> <span class="title">LinkedIn</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="ml-auto font-weight-bold">
27,319 <span class="c-text-muted small">&nbsp;(8%)</span> 27,319 <span class="text-muted small">&nbsp;(8%)</span>
</span> </span>
</div> </div>
<div class="c-progress-group-bars"> <div class="progress-group-bars">
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
:value="8" :value="8"
variant="success" variant="success"
/> />
</div> </div>
</div> </div>
<div class="c-divider c-text-center"> <div class="divider text-center">
<CButton variant="link" size="sm" class="c-text-muted"> <CButton variant="link" size="sm" class="text-muted">
<i class="cui-options"></i> <i class="cui-options"></i>
</CButton> </CButton>
</div> </div>
@@ -377,25 +377,25 @@
</CRow> </CRow>
<br/> <br/>
<CTable <CTable
class="c-mb-0 c-table-outline" class="mb-0 table-outline"
hover hover
:items="tableItems" :items="tableItems"
:fields="tableFields" :fields="tableFields"
head-variant="light" head-variant="light"
no-sorting no-sorting
> >
<td slot="avatar" class="c-text-center" slot-scope="{item}"> <td slot="avatar" class="text-center" slot-scope="{item}">
<div class="c-avatar"> <div class="avatar">
<img :src="item.avatar.url" class="c-img-avatar" alt=""> <img :src="item.avatar.url" class="img-avatar" alt="">
<span <span
class="c-avatar-status" class="avatar-status"
:class="`c-bg-${item.avatar.status || 'secondary'}`" :class="`bg-${item.avatar.status || 'secondary'}`"
></span> ></span>
</div> </div>
</td> </td>
<td slot="user" slot-scope="{item}"> <td slot="user" slot-scope="{item}">
<div>{{item.user.name}}</div> <div>{{item.user.name}}</div>
<div class="c-small c-text-muted"> <div class="small text-muted">
<span> <span>
<template v-if="item.user.new">New</template> <template v-if="item.user.new">New</template>
<template v-else>Recurring</template> <template v-else>Recurring</template>
@@ -405,7 +405,7 @@
<td <td
slot="country" slot="country"
slot-scope="{item}" slot-scope="{item}"
class="c-text-center" class="text-center"
> >
<CIcon <CIcon
:name="item.country.flag" :name="item.country.flag"
@@ -413,16 +413,16 @@
/> />
</td> </td>
<td slot="usage" slot-scope="{item}"> <td slot="usage" slot-scope="{item}">
<div class="c-clearfix"> <div class="clearfix">
<div class="c-float-left"> <div class="float-left">
<strong>{{item.usage.value}}%</strong> <strong>{{item.usage.value}}%</strong>
</div> </div>
<div class="c-float-right"> <div class="float-right">
<small class="c-text-muted">{{item.usage.period}}</small> <small class="text-muted">{{item.usage.period}}</small>
</div> </div>
</div> </div>
<CProgress <CProgress
class="c-progress-xs" class="progress-xs"
v-model="item.usage.value" v-model="item.usage.value"
:variant="variant(item.usage.value)" :variant="variant(item.usage.value)"
/> />
@@ -430,7 +430,7 @@
<td <td
slot="payment" slot="payment"
slot-scope="{item}" slot-scope="{item}"
class="c-text-center" class="text-center"
> >
<CIcon <CIcon
:name="item.payment.icon" :name="item.payment.icon"
@@ -438,7 +438,7 @@
/> />
</td> </td>
<td slot="activity" slot-scope="{item}"> <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> <strong>{{item.activity}}</strong>
</td> </td>
</CTable> </CTable>
@@ -514,11 +514,11 @@ export default {
} }
], ],
tableFields: [ tableFields: [
{ key: 'avatar', label: '', _classes: 'c-text-center' }, { key: 'avatar', label: '', _classes: 'text-center' },
{ key: 'user' }, { key: 'user' },
{ key: 'country', _classes: 'c-text-center' }, { key: 'country', _classes: 'text-center' },
{ key: 'usage' }, { key: 'usage' },
{ key: 'payment', label: 'Payment method', _classes: 'c-text-center' }, { key: 'payment', label: 'Payment method', _classes: 'text-center' },
{ key: 'activity' }, { key: 'activity' },
] ]
} }
src/views/base/Breadcrumbs.vue
+6 -6
View File
@@ -1,12 +1,12 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol col> <CCol col>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
class="card-header-action" class="card-header-action"
@@ -72,17 +72,17 @@ export default {
{ {
textHtml: 'Added', textHtml: 'Added',
to: '#2', to: '#2',
addClasses: 'c-font-xl' addClasses: 'font-xl'
}, },
{ {
textHtml: 'Custom', textHtml: 'Custom',
to: '#3', to: '#3',
addClasses: 'c-font-xl' addClasses: 'font-xl'
}, },
{ {
textHtml: 'Classes', textHtml: 'Classes',
to: '#4', to: '#4',
addClasses: 'c-font-xl c-text-danger' addClasses: 'font-xl text-danger'
} }
] ]
} }
@@ -91,7 +91,7 @@ export default {
</script> </script>
<style> <style>
.c-breadcrumb-item + .c-font-xl.c-breadcrumb-item::before { .breadcrumb-item + .font-xl.breadcrumb-item::before {
color: rgb(140, 195, 38); color: rgb(140, 195, 38);
content: '>>'; content: '>>';
padding: 0px 10px; padding: 0px 10px;
src/views/base/Cards.vue
+32 -32
View File
@@ -5,7 +5,7 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Card title Card title
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/CardComponents" href="https://coreui.io/vue/docs/3.0/components/CardComponents"
class="card-header-action" class="card-header-action"
@@ -35,7 +35,7 @@
<CCardHeader> <CCardHeader>
Card with switch Card with switch
<CSwitch <CSwitch
class="c-float-right" class="float-right"
size="sm" size="sm"
shape="pill" shape="pill"
variant="info" variant="info"
@@ -53,7 +53,7 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Card with label Card with label
<CBadge variant="success" class="c-float-right">Success</CBadge> <CBadge variant="success" class="float-right">Success</CBadge>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
{{loremIpsum}} {{loremIpsum}}
@@ -64,7 +64,7 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Card with label Card with label
<CBadge pill variant="danger" class="c-float-right">42</CBadge> <CBadge pill variant="danger" class="float-right">42</CBadge>
</CCardHeader> </CCardHeader>
<CCardBody :body-html="loremIpsum"/> <CCardBody :body-html="loremIpsum"/>
</CCard> </CCard>
@@ -113,40 +113,40 @@
<CRow> <CRow>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-bg-primary c-text-center" body-wrapper> <CCard class="bg-primary text-center" body-wrapper>
<blockquote class="c-card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
<cite title="Source Title">Source Title</cite> <cite title="Source Title">Source Title</cite>
@@ -155,8 +155,8 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-bg-success c-text-center" body-wrapper> <CCard class="bg-success text-center" body-wrapper>
<blockquote class="c-card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
<cite title="Source Title">Source Title</cite> <cite title="Source Title">Source Title</cite>
@@ -165,8 +165,8 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-bg-info c-text-center" body-wrapper> <CCard class="bg-info text-center" body-wrapper>
<blockquote class="c-card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
<cite title="Source Title">Source Title</cite> <cite title="Source Title">Source Title</cite>
@@ -175,8 +175,8 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-bg-warning c-text-center" body-wrapper> <CCard class="bg-warning text-center" body-wrapper>
<blockquote class="c-card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
<cite title="Source Title">Source Title</cite> <cite title="Source Title">Source Title</cite>
@@ -185,8 +185,8 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-bg-danger c-text-center" body-wrapper> <CCard class="bg-danger text-center" body-wrapper>
<blockquote class="c-card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
<cite title="Source Title">Source Title</cite> <cite title="Source Title">Source Title</cite>
@@ -195,8 +195,8 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="c-bg-secondary c-text-center" body-wrapper> <CCard class="bg-secondary text-center" body-wrapper>
<blockquote class="c-card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
<cite title="Source Title">Source Title</cite> <cite title="Source Title">Source Title</cite>
@@ -207,43 +207,43 @@
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <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}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<transition name="fade"> <transition name="fade">
<CCard class="c-bg-secondary" v-if="show" > <CCard class="bg-secondary" v-if="show" >
<CCardHeader> <CCardHeader>
Card with header actions Card with header actions
<div class="c-card-header-actions"> <div class="card-header-actions">
<CLink href="#" class="c-card-header-action btn-setting" > <CLink href="#" class="card-header-action btn-setting" >
<i class="cui-settings"></i> <i class="cui-settings"></i>
</CLink> </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> <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
</CLink> </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> <i class="cui-circle-x"></i>
</CLink> </CLink>
</div> </div>
src/views/base/Carousels.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<CRow> <CRow>
<CCol md="12" lg="7"> <CCol md="12" lg="7">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong> <strong> Bootstrap Carousel</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Carousel" href="https://coreui.io/vue/docs/3.0/components/Carousel"
class="card-header-action" class="card-header-action"
src/views/base/Collapses.vue
+5 -5
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol col="12" md="6"> <CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong> <strong> Bootstrap Collapse </strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Collapse" href="https://coreui.io/vue/docs/3.0/components/Collapse"
class="card-header-action" class="card-header-action"
@@ -22,13 +22,13 @@
<CButton id="collapse1" variant="primary"> <CButton id="collapse1" variant="primary">
Toggle Collapse Toggle Collapse
</CButton> </CButton>
<CCollapse toggler="collapse1" class="c-mt-2"> <CCollapse toggler="collapse1" class="mt-2">
<CCard body-wrapper> <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"> <CButton id="collapse2" size="sm" variant="secondary">
Toggle Inner Collapse Toggle Inner Collapse
</CButton> </CButton>
<CCollapse toggler="collapse2" class="c-mt-2"> <CCollapse toggler="collapse2" class="mt-2">
<CCard body-wrapper>Hello!</CCard> <CCard body-wrapper>Hello!</CCard>
</CCollapse> </CCollapse>
</CCard> </CCard>
src/views/base/Forms.vue
+42 -42
View File
@@ -5,7 +5,7 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Credit Card </strong> <small>Form</small> <strong>Credit Card </strong> <small>Form</small>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/FormComponents" href="https://coreui.io/vue/docs/3.0/components/FormComponents"
class="card-header-action" class="card-header-action"
@@ -185,11 +185,11 @@
disabled disabled
/> />
<template v-for="(name, key) in checkboxNames"> <template v-for="(name, key) in checkboxNames">
<div class="c-form-group c-form-row" :key="name"> <div class="form-group form-row" :key="name">
<CCol tag="label" sm="3" class="c-col-form-label"> <CCol tag="label" sm="3" class="col-form-label">
{{name}} {{name}}
</CCol> </CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''"> <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CFormCheckbox <CFormCheckbox
v-for="option in options" v-for="option in options"
:key="option" :key="option"
@@ -204,11 +204,11 @@
</div> </div>
</template> </template>
<template v-for="(name, key) in radioNames"> <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"> <CCol sm="3">
{{name}} {{name}}
</CCol> </CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''"> <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CFormRadio <CFormRadio
v-for="option in options" v-for="option in options"
:key="option" :key="option"
@@ -259,7 +259,7 @@
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes --> <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline> <CForm inline>
<CFormInput <CFormInput
class="c-mr-2" class="mr-2"
placeholder="Jane Doe" placeholder="Jane Doe"
> >
<template #label> <template #label>
@@ -348,54 +348,54 @@
Input <strong>Grid</strong> Input <strong>Grid</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="3"> <CCol sm="3">
<CFormInput class="c-mb-0" placeholder=".col-sm-3"/> <CFormInput class="mb-0" placeholder=".col-sm-3"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="4"> <CCol sm="4">
<CFormInput class="c-mb-0" placeholder=".col-sm-4"/> <CFormInput class="mb-0" placeholder=".col-sm-4"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="5"> <CCol sm="5">
<CFormInput class="c-mb-0" placeholder=".col-sm-5"/> <CFormInput class="mb-0" placeholder=".col-sm-5"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="6"> <CCol sm="6">
<CFormInput class="c-mb-0" placeholder=".col-sm-6"/> <CFormInput class="mb-0" placeholder=".col-sm-6"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="7"> <CCol sm="7">
<CFormInput class="c-mb-0" placeholder=".col-sm-7"/> <CFormInput class="mb-0" placeholder=".col-sm-7"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="8"> <CCol sm="8">
<CFormInput class="c-mb-0" placeholder=".col-sm-8"/> <CFormInput class="mb-0" placeholder=".col-sm-8"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="9"> <CCol sm="9">
<CFormInput class="c-mb-0" placeholder=".col-sm-9"/> <CFormInput class="mb-0" placeholder=".col-sm-9"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="10"> <CCol sm="10">
<CFormInput class="c-mb-0" placeholder=".col-sm-10"/> <CFormInput class="mb-0" placeholder=".col-sm-10"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="11"> <CCol sm="11">
<CFormInput class="c-mb-0" placeholder=".col-sm-11"/> <CFormInput class="mb-0" placeholder=".col-sm-11"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-form-group"> <CRow class="form-group">
<CCol sm="12"> <CCol sm="12">
<CFormInput class="c-mb-0" placeholder=".col-sm-12"/> <CFormInput class="mb-0" placeholder=".col-sm-12"/>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -634,15 +634,15 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow <CRow
class="c-form-group" class="form-group"
v-for="(number, key) in [4,5,6,7,8]" v-for="(number, key) in [4,5,6,7,8]"
:key="key" :key="key"
> >
<CCol :col="12 - number"> <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>
<CCol :col="number"> <CCol :col="number">
<CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/> <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -662,15 +662,15 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow <CRow
class="c-form-group" class="form-group"
v-for="(number, key) in [4,5,6,7,8]" v-for="(number, key) in [4,5,6,7,8]"
:key="key" :key="key"
> >
<CCol :col="number"> <CCol :col="number">
<CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/> <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
</CCol> </CCol>
<CCol :col="12 - number"> <CCol :col="12 - number">
<CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/> <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -708,7 +708,7 @@
autocomplete="current-password" autocomplete="current-password"
append-html="<i class='cui-shield'></i>" 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"> <CButton type="submit" size="sm" variant="primary">
Submit Submit
</CButton> </CButton>
@@ -740,8 +740,8 @@
autocomplete="current-password" autocomplete="current-password"
append-html="<i class='cui-shield'></i>" append-html="<i class='cui-shield'></i>"
/> />
<div class="c-form-group c-form-actions"> <div class="form-group form-actions">
<CButton type="submit" class="c-btn c-btn-sm c-btn-secondary"> <CButton type="submit" class="btn btn-sm btn-secondary">
Submit Submit
</CButton> </CButton>
</div> </div>
@@ -772,7 +772,7 @@
autocomplete="current-password" autocomplete="current-password"
prependHtml="<i class='cui-shield'></i>" 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"> <CButton type="submit" size="sm" variant="success">
Submit Submit
</CButton> </CButton>
@@ -788,17 +788,17 @@
<CCard v-if="show"> <CCard v-if="show">
<CCardHeader> <CCardHeader>
<i class="cui-pencil"></i> Form Elements <i class="cui-pencil"></i> Form Elements
<div class="c-card-header-actions"> <div class="card-header-actions">
<CLink href="#" class="c-card-header-action c-btn-setting"> <CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i> <i class="cui-settings"></i>
</CLink> </CLink>
<CLink <CLink
class="c-card-header-action c-btn-minimize" class="card-header-action btn-minimize"
@click="formCollapsed=!formCollapsed" @click="formCollapsed=!formCollapsed"
> >
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i> <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
</CLink> </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> <i class="cui-circle-x"></i>
</CLink> </CLink>
</div> </div>
@@ -837,7 +837,7 @@
<CButton variant="danger">Options</CButton> <CButton variant="danger">Options</CButton>
</template> </template>
</CFormInput> </CFormInput>
<div class="c-form-actions"> <div class="form-actions">
<CButton type="submit" variant="primary">Save changes</CButton> <CButton type="submit" variant="primary">Save changes</CButton>
<CButton variant="secondary">Cancel</CButton> <CButton variant="secondary">Cancel</CButton>
</div> </div>
src/views/base/Jumbotrons.vue
+6 -6
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol> <CCol>
@@ -7,7 +7,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong> <strong> Bootstrap Jumbotron </strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Jumbotron" href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
class="card-header-action" class="card-header-action"
@@ -34,11 +34,11 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CJumbotron header="Bootstrap 4" lead=""> <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 This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information. calling extra attention to featured content or information.
</p> </p>
<hr class="c-my-4"> <hr class="my-4">
<p> <p>
It uses utility classes for typography and spacing to space content It uses utility classes for typography and spacing to space content
out within the larger container. out within the larger container.
@@ -64,11 +64,11 @@
border-variant="dark" border-variant="dark"
header="Bootstrap 4" 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 This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information. calling extra attention to featured content or information.
</p> </p>
<hr class="c-my-4"> <hr class="my-4">
<p> <p>
It uses utility classes for typography and spacing to space content It uses utility classes for typography and spacing to space content
out within the larger container. out within the larger container.
src/views/base/ListGroups.vue
+22 -22
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol md="6"> <CCol md="6">
@@ -7,7 +7,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong> <strong> Bootstrap list group </strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/ListGroup" href="https://coreui.io/vue/docs/3.0/components/ListGroup"
class="card-header-action" class="card-header-action"
@@ -111,19 +111,19 @@
<CCardBody> <CCardBody>
<CListGroup> <CListGroup>
<CListGroupItem <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 Cras justo odio
<CBadge variant="primary" pill>14</CBadge> <CBadge variant="primary" pill>14</CBadge>
</CListGroupItem> </CListGroupItem>
<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 Dapibus ac facilisis in
<CBadge variant="primary" pill>2</CBadge> <CBadge variant="primary" pill>2</CBadge>
</CListGroupItem> </CListGroupItem>
<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 Morbi leo risus
<CBadge variant="primary" pill>1</CBadge> <CBadge variant="primary" pill>1</CBadge>
@@ -195,7 +195,7 @@
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem> <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup> </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 Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
@@ -231,39 +231,39 @@
<CListGroupItem <CListGroupItem
href="#" href="#"
active 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"> <div class="d-flex w-100 justify-content-between">
<h5 class="c-mb-1">List group item heading</h5> <h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small> <small>3 days ago</small>
</div> </div>
<p class="c-mb-1"> <p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit. sed diam eget risus varius blandit.
</p> </p>
<small>Donec id elit non mi porta.</small> <small>Donec id elit non mi porta.</small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem href="#" class="c-flex-column c-align-items-start"> <CListGroupItem href="#" class="flex-column align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between"> <div class="d-flex w-100 justify-content-between">
<h5 class="c-mb-1">List group item heading</h5> <h5 class="mb-1">List group item heading</h5>
<small class="c-text-muted">3 days ago</small> <small class="text-muted">3 days ago</small>
</div> </div>
<p class="c-mb-1"> <p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit. sed diam eget risus varius blandit.
</p> </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>
<CListGroupItem href="#" disabled class="c-flex-column c-align-items-start"> <CListGroupItem href="#" disabled class="flex-column align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between"> <div class="d-flex w-100 justify-content-between">
<h5 class="c-mb-1">Disabled List group item</h5> <h5 class="mb-1">Disabled List group item</h5>
<small class="c-text-muted">3 days ago</small> <small class="text-muted">3 days ago</small>
</div> </div>
<p class="c-mb-1"> <p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit. sed diam eget risus varius blandit.
</p> </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>
</CListGroup> </CListGroup>
</CCardBody> </CCardBody>
src/views/base/Navbars.vue
+11 -11
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<!-- <CCard> <!-- <CCard>
<CNavbar toggleable="md" light variant="light"> <CNavbar toggleable="md" light variant="light">
@@ -19,7 +19,7 @@
<DefaultHeaderDropdownAccnt/> <DefaultHeaderDropdownAccnt/>
</CNavbarNav> </CNavbarNav>
<CNavbarNav class="ml-auto"> <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 <CDropdownItem><i class="cui-file" /> Projects
<CBadge variant="primary">32</CBadge> <CBadge variant="primary">32</CBadge>
</CDropdownItem> </CDropdownItem>
@@ -34,7 +34,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong> <strong> Bootstrap Navbar </strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Navbar" href="https://coreui.io/vue/docs/3.0/components/Navbar"
class="card-header-action" class="card-header-action"
@@ -59,14 +59,14 @@
</CNavbarNav> </CNavbarNav>
<!-- Right aligned nav items --> <!-- Right aligned nav items -->
<CNavbarNav class="c-ml-auto"> <CNavbarNav class="ml-auto">
<CForm inline> <CForm inline>
<CFormInput <CFormInput
class="c-mr-sm-2" class="mr-sm-2"
placeholder="Search" placeholder="Search"
size="sm" 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 Search
</CButton> </CButton>
</CForm> </CForm>
@@ -104,7 +104,7 @@
<!-- Image and text --> <!-- Image and text -->
<CNavbar variant="faded" light> <CNavbar variant="faded" light>
<CNavbarBrand href="#"> <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 CoreuiVue
</CNavbarBrand> </CNavbarBrand>
</CNavbar> </CNavbar>
@@ -121,7 +121,7 @@
<CNavbarBrand>CoreuiVue</CNavbarBrand> <CNavbarBrand>CoreuiVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar> <CCollapse :show="navbarText" navbar>
<CNavbarNav> <CNavbarNav>
<span class="c-navbar-text">Navbar text</span> <span class="navbar-text">Navbar text</span>
</CNavbarNav> </CNavbarNav>
</CCollapse> </CCollapse>
</CNavbar> </CNavbar>
@@ -172,11 +172,11 @@
<CNavbar light variant="light"> <CNavbar light variant="light">
<CForm inline> <CForm inline>
<CFormInput <CFormInput
class="c-mr-sm-2" class="mr-sm-2"
placeholder="Search" placeholder="Search"
size="sm" 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> </CForm>
</CNavbar> </CNavbar>
</CCardBody> </CCardBody>
@@ -190,7 +190,7 @@
<CNavbar light variant="light"> <CNavbar light variant="light">
<CForm inline> <CForm inline>
<CFormInput <CFormInput
class="c-mr-sm-2" class="mr-sm-2"
placeholder="Username" placeholder="Username"
/> />
</CForm> </CForm>
src/views/base/Navs.vue
+4 -4
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Nav" href="https://coreui.io/vue/docs/3.0/components/Nav"
class="card-header-action" class="card-header-action"
@@ -127,7 +127,7 @@
placement="bottom-end" placement="bottom-end"
button-content="Dropdown" 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>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem> <CDropdownItem>two</CDropdownItem>
<CDropdownDivider/> <CDropdownDivider/>
@@ -144,7 +144,7 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol col="3" class="c-m-0"> <CCol col="3" class="m-0">
<CNav vertical pills > <CNav vertical pills >
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
src/views/base/Paginations.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Responsive bootstrap Pagination</strong> <strong> Responsive bootstrap Pagination</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Pagination" href="https://coreui.io/vue/docs/3.0/components/Pagination"
class="card-header-action" class="card-header-action"
src/views/base/Popovers.vue
+7 -7
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong> <strong> Bootstrap Popovers</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Popover" href="https://coreui.io/vue/docs/3.0/components/Popover"
class="card-header-action" class="card-header-action"
@@ -19,7 +19,7 @@
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol col="4"> <CCol col="4">
<div class="c-my-3 c-text-center"> <div class="my-3 text-center">
<CButton <CButton
variant="primary" variant="primary"
v-c-popover="{ v-c-popover="{
@@ -32,7 +32,7 @@
</div> </div>
</CCol> </CCol>
<CCol col="4"> <CCol col="4">
<div class="c-my-3 c-text-center"> <div class="my-3 text-center">
<CButton <CButton
variant="primary" variant="primary"
v-c-popover="{ v-c-popover="{
@@ -45,7 +45,7 @@
</div> </div>
</CCol> </CCol>
<CCol col="4"> <CCol col="4">
<div class="c-my-3 c-text-center"> <div class="my-3 text-center">
<CButton <CButton
variant="primary" variant="primary"
v-c-popover.click="{ v-c-popover.click="{
@@ -67,11 +67,11 @@
<strong> Popovers </strong> <strong> Popovers </strong>
<small>placement</small> <small>placement</small>
</CCardHeader> </CCardHeader>
<CCardBody class="c-my-3"> <CCardBody class="my-3">
<CRow> <CRow>
<CCol <CCol
md="4" md="4"
class="c-py-4 c-text-center" class="py-4 text-center"
v-for="placement in placements" v-for="placement in placements"
:key="placement" :key="placement"
> >
src/views/base/ProgressBars.vue
+31 -31
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong> <strong> Bootstrap Progress</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Progress" href="https://coreui.io/vue/docs/3.0/components/Progress"
class="card-header-action" class="card-header-action"
@@ -18,7 +18,7 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress> <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*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" variant="warning"/> <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<CProgressBar :value="counter*(1.5/10)" variant="danger"/> <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
@@ -26,7 +26,7 @@
<CButton <CButton
@click="clicked" @click="clicked"
variant="secondary" variant="secondary"
class="c-mt-4" class="mt-4"
> >
Click me to animate progress bars Click me to animate progress bars
</CButton> </CButton>
@@ -38,15 +38,15 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>No label</h6> <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> <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> <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> <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> <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> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
@@ -57,11 +57,11 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Default width</h6> <h6>Default width</h6>
<CProgress :value="value3" class="c-mb-3"/> <CProgress :value="value3" class="mb-3"/>
<h6>Custom widths</h6> <h6>Custom widths</h6>
<CProgress :value="value3" class="c-w-75 c-mb-2"/> <CProgress :value="value3" class="w-75 mb-2"/>
<CProgress :value="value3" class="c-w-50 c-mb-2"/> <CProgress :value="value3" class="w-50 mb-2"/>
<CProgress :value="value3" class="c-w-25"/> <CProgress :value="value3" class="w-25"/>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
@@ -72,10 +72,10 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h6>Default height</h6> <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> <h6>Custom heights</h6>
<CProgress height="2rem" :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="c-mb-2"/> <CProgress height="20px" :value="value3" show-progress class="mb-2"/>
<CProgress height="2px" :value="value3"/> <CProgress height="2px" :value="value3"/>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -86,9 +86,9 @@
<small>variants</small> <small>variants</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1"> <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="c-col-sm-2">{{ bar.variant }}:</div> <div class="col-sm-2">{{ bar.variant }}:</div>
<div class="c-col-sm-10 c-pt-1"> <div class="col-sm-10 pt-1">
<CProgress <CProgress
:value="bar.value" :value="bar.value"
:variant="bar.variant" :variant="bar.variant"
@@ -109,25 +109,25 @@
:value="25" :value="25"
variant="success" variant="success"
:striped="striped" :striped="striped"
class="c-mb-2" class="mb-2"
/> />
<CProgress <CProgress
:value="50" :value="50"
variant="info" variant="info"
:striped="striped" :striped="striped"
class="c-mb-2" class="mb-2"
/> />
<CProgress <CProgress
:value="75" :value="75"
variant="warning" variant="warning"
:striped="striped" :striped="striped"
class="c-mb-2" class="mb-2"
/> />
<CProgress <CProgress
:value="100" :value="100"
variant="danger" variant="danger"
:striped="striped" :striped="striped"
class="c-mb-2" class="mb-2"
/> />
<CButton variant="secondary" @click="striped = !striped"> <CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped {{ striped ? 'Remove' : 'Add'}} Striped
@@ -146,27 +146,27 @@
variant="success" variant="success"
striped striped
:animated="animate" :animated="animate"
class="c-mb-2" class="mb-2"
/> />
<CProgress <CProgress
:value="50" :value="50"
variant="info" variant="info"
striped striped
:animated="animate" :animated="animate"
class="c-mb-2" class="mb-2"
/> />
<CProgress <CProgress
:value="75" :value="75"
variant="warning" variant="warning"
striped striped
:animated="animate" :animated="animate"
class="c-mb-2" class="mb-2"
/> />
<CProgress <CProgress
:value="100" :value="100"
variant="danger" variant="danger"
:animated="animate" :animated="animate"
class="c-mb-3" class="mb-3"
/> />
<CButton variant="secondary" @click="animate = !animate"> <CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation {{ animate ? 'Stop' : 'Start'}} Animation
@@ -180,22 +180,22 @@
<small>multiple bars</small> <small>multiple bars</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CProgress :max="max3" class="c-mb-3"> <CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/> <CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/> <CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/> <CProgressBar variant="info" :value="values[2]"/>
</CProgress> </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="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/> <CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/> <CProgressBar variant="info" :value="values[2]"/>
</CProgress> </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="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/> <CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/> <CProgressBar variant="info" :value="values[2]"/>
</CProgress> </CProgress>
<CProgress :max="max3" class="c-mb-3"> <CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/> <CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/> <CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped 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"> <CCard v-if="true">
<CCardHeader> <CCardHeader>
Radio switches Radio switches
<CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge> <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Switch" href="https://coreui.io/vue/docs/3.0/components/Switch"
class="card-header-action" class="card-header-action"
@@ -26,9 +26,9 @@
name="lg" name="lg"
required 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 <CSwitch
class="c-mx-1" class="mx-1"
:key="key" :key="key"
:variant="variant" :variant="variant"
shape="3d" shape="3d"
@@ -53,7 +53,7 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch <CSwitch
class="c-mx-1" class="mx-1"
variant="primary" variant="primary"
name="switch1" name="switch1"
:checked.sync="checker" :checked.sync="checker"
@@ -61,13 +61,13 @@
false-value="no" false-value="no"
/> />
<CSwitch <CSwitch
class="c-mx-1" class="mx-1"
:variant="variant" :variant="variant"
checked checked
:key="key" :key="key"
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']" 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> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -77,15 +77,15 @@
Switch pills Switch pills
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/> <CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" /> <CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" /> <CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" /> <CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" /> <CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" /> <CSwitch class="mx-1" variant="primary" disabled shape="pill" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -95,15 +95,15 @@
3d Switch 3d Switch
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" /> <CSwitch class="mx-1" variant="success" checked shape="3d" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" /> <CSwitch class="mx-1" variant="info" checked shape="3d" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" /> <CSwitch class="mx-1" variant="light" checked shape="3d" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -113,15 +113,15 @@
3d Switch <small><code>disabled</code></small> 3d Switch <small><code>disabled</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -131,15 +131,15 @@
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" /> <CSwitch class="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" disabled shape="3d" outline="alt" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -149,15 +149,15 @@
3d Switch <small><code>label</code></small> 3d Switch <small><code>label</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/> <CSwitch class="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="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="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="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="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="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="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="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" disabled shape="3d" v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -167,15 +167,15 @@
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch class="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="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="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="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="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="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="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="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" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -185,15 +185,15 @@
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" /> <CSwitch class="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" disabled shape="3d" outline="alt" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -203,15 +203,15 @@
Switch <small><code>outline</code></small> Switch <small><code>outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline /> <CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline /> <CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline /> <CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline /> <CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline /> <CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline /> <CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline /> <CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline /> <CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled /> <CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -221,15 +221,15 @@
Switch <small><code>outline shape="pill"</code></small> Switch <small><code>outline shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/> <CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" /> <CSwitch class="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" outline shape="pill" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -239,15 +239,15 @@
Switch <small><code>outline="alt"</code></small> Switch <small><code>outline="alt"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" /> <CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" /> <CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" /> <CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled /> <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -257,15 +257,15 @@
Switch <small><code>outline="alt" shape="pill"</code></small> Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/> <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" /> <CSwitch class="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" outline="alt" shape="pill" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -275,15 +275,15 @@
Switch <small><code>label</code></small> Switch <small><code>label</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked /> <CSwitch class="mx-1" variant="primary" checked />
<CSwitch class="c-mx-1" variant="secondary" checked /> <CSwitch class="mx-1" variant="secondary" checked />
<CSwitch class="c-mx-1" variant="success" checked /> <CSwitch class="mx-1" variant="success" checked />
<CSwitch class="c-mx-1" variant="warning" checked /> <CSwitch class="mx-1" variant="warning" checked />
<CSwitch class="c-mx-1" variant="info" checked /> <CSwitch class="mx-1" variant="info" checked />
<CSwitch class="c-mx-1" variant="danger" checked /> <CSwitch class="mx-1" variant="danger" checked />
<CSwitch class="c-mx-1" variant="light" checked /> <CSwitch class="mx-1" variant="light" checked />
<CSwitch class="c-mx-1" variant="dark" checked /> <CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="c-mx-1" variant="primary" disabled /> <CSwitch class="mx-1" variant="primary" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -293,15 +293,15 @@
Switch <small><code>label shape="pill"</code></small> Switch <small><code>label shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" /> <CSwitch class="mx-1" variant="primary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" /> <CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" /> <CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" /> <CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" /> <CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled /> <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -311,15 +311,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline /> <CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline /> <CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline /> <CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline /> <CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline /> <CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline /> <CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline /> <CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline /> <CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled /> <CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -329,15 +329,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" /> <CSwitch class="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" outline shape="pill" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -347,15 +347,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" /> <CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" /> <CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" /> <CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled /> <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -365,15 +365,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" /> <CSwitch class="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" outline="alt" shape="pill" disabled />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -384,15 +384,15 @@
Switch <small><code>label</code></small> Switch <small><code>label</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/> <CSwitch class="mx-1" variant="primary" checked v-bind="labelIcon"/>
<CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" /> <CSwitch class="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" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard>shape </CCard>shape
</CCol> </CCol>
@@ -402,15 +402,15 @@
Switch <small><code>label shape="pill"</code></small> Switch <small><code>label shape="pill"</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="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="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="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="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="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="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="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="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" shape="pill" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -420,15 +420,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" /> <CSwitch class="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" outline disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -438,15 +438,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch class="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="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="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="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="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="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="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="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" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -456,15 +456,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="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="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="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="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="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="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="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="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" outline="alt" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -474,15 +474,15 @@
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" /> <CSwitch class="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="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="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="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="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="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="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="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" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -492,11 +492,11 @@
<CCardHeader> <CCardHeader>
Sizes Sizes
</CCardHeader> </CCardHeader>
<CCardBody class="c-p-0"> <CCardBody class="p-0">
<CTable <CTable
hover hover
striped striped
class="c-table-align-middle c-mb-0" class="table-align-middle mb-0"
:items="items" :items="items"
:fields="fields" :fields="fields"
no-sorting no-sorting
src/views/base/Tables.vue
+9 -12
View File
@@ -5,7 +5,7 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
CTable component functionality presentation CTable component functionality presentation
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Table" href="https://coreui.io/vue/docs/3.0/components/Table"
class="card-header-action" class="card-header-action"
@@ -20,14 +20,11 @@
<CTable <CTable
:items="getItems()" :items="getItems()"
:fields="fields" :fields="fields"
:per-page="6"
index-column index-column
filter-row filter-row
options-row options-row
hover hover
:default-column-filter="{ role:'staff' }" sorting
:default-filter="2012"
dark-header
footer footer
pagination pagination
> >
@@ -35,10 +32,10 @@
<td <td
@click="toggleDetails(index)" @click="toggleDetails(index)"
style="cursor:pointer" style="cursor:pointer"
class="c-text-center" class="text-center"
> >
<i <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="transition: transform 0.4s"
:style="details.includes(index) ? 'transform:rotate(90deg)': ''" :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
></i> ></i>
@@ -52,7 +49,7 @@
</td> </td>
</template> </template>
<template #show_details="{item, index}"> <template #show_details="{item, index}">
<td class="c-py-2"> <td class="py-2">
<CButton <CButton
variant="outline-primary" variant="outline-primary"
square square
@@ -157,17 +154,17 @@ const fields = [
{ key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true }, { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
] ]
const items = [ 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: '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: '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: '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: '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: '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: '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: '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: '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: '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: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'}, {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: '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: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: 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: 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'} {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> <CCard>
<CCardHeader> <CCardHeader>
Tabs Tabs
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Tabs" href="https://coreui.io/vue/docs/3.0/components/Tabs"
class="card-header-action" class="card-header-action"
@@ -122,7 +122,7 @@
Tabs with icons Tabs with icons
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTabs add-tab-classes="c-mt-1"> <CTabs add-tab-classes="mt-1">
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}} <i class="cui-calculator"></i> {{tabs[0]}}
src/views/base/Tooltips.vue
+7 -7
View File
@@ -1,12 +1,12 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong> <strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small> <small><code>v-c-tooltip</code> directive</small>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Tooltip" href="https://coreui.io/vue/docs/3.0/components/Tooltip"
class="card-header-action" class="card-header-action"
@@ -20,7 +20,7 @@
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol col="4"> <CCol col="4">
<div class="c-text-center c-my-3"> <div class="text-center my-3">
<CButton <CButton
variant="secondary" variant="secondary"
v-c-tooltip.hover.click="'I am a tooltip!'" v-c-tooltip.hover.click="'I am a tooltip!'"
@@ -30,7 +30,7 @@
</div> </div>
</CCol> </CCol>
<CCol col="4"> <CCol col="4">
<div class="c-text-center c-my-3"> <div class="text-center my-3">
<CButton <CButton
v-c-tooltip="{content: 'I start open!', active:true }" v-c-tooltip="{content: 'I start open!', active:true }"
variant="secondary" variant="secondary"
@@ -40,7 +40,7 @@
</div> </div>
</CCol> </CCol>
<CCol col="4"> <CCol col="4">
<div class="c-text-center c-my-3"> <div class="text-center my-3">
<CButton <CButton
variant="secondary" variant="secondary"
v-c-tooltip.click=" v-c-tooltip.click="
@@ -61,11 +61,11 @@
<small>placement</small> <small>placement</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<div class="c-my-3"> <div class="my-3">
<CRow> <CRow>
<CCol <CCol
md="4" md="4"
class="c-py-4 c-text-center" class="py-4 text-center"
v-for="placement in placements" v-for="placement in placements"
:key="placement" :key="placement"
> >
src/views/buttons/BrandButtons.vue
+4 -4
View File
@@ -5,7 +5,7 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Brand Button</strong> <strong>Brand Button</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action" class="card-header-action"
@@ -219,12 +219,12 @@ export default {
} }
</script> </script>
<style scoped lang="css"> <style scoped>
.c-btn { .btn {
margin-bottom: 4px; margin-bottom: 4px;
margin-right: 6px; margin-right: 6px;
} }
.c-btn svg + span { .btn svg + span {
margin-left: 8px; margin-left: 8px;
} }
</style> </style>
src/views/buttons/ButtonGroups.vue
+23 -23
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol col="12" > <CCol col="12" >
@@ -7,7 +7,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</strong> <strong> Bootstrap button group</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action" class="card-header-action"
@@ -25,14 +25,14 @@
<CButton variant="secondary">Two</CButton> <CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton> <CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</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> </CButtonGroup>
<br><br> <br><br>
<CButtonGroup> <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="info">Info</CButton>
<CButton variant="warning">Warn</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="danger">Danger</CButton>
<CButton variant="link">Link</CButton> <CButton variant="link">Link</CButton>
</CButtonGroup> </CButtonGroup>
@@ -77,15 +77,15 @@
<CCardBody> <CCardBody>
<div> <div>
<CButtonGroup> <CButtonGroup>
<CButton variant="secondary" class="c-d-sm-down-none">Button 1</CButton> <CButton variant="secondary" class="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 2</CButton>
<CDropdown right text="Menu" variant="success"> <CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem> <CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider> <CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem> <CDropdownItem>Item 3</CDropdownItem>
</CDropdown> </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"> <CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem> <CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 2</CDropdownItem>
@@ -129,47 +129,47 @@
<CCardBody> <CCardBody>
<div> <div>
<CButtonToolbar aria-label="Toolbar with button groups"> <CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="c-mx-1"> <CButtonGroup class="mx-1">
<CButton variant="secondary" class="c-d-sm-down-none">&laquo;</CButton> <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton> <CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup class="c-mx-1"> <CButtonGroup class="mx-1">
<CButton variant="secondary" class="c-d-sm-down-none">Edit</CButton> <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton> <CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton> <CButton variant="secondary">Redo</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup class="c-mx-1"> <CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton> <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> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
</div> </div>
<hr class="c-d-sm-down-none"/> <hr class="d-sm-down-none"/>
<div> <div>
<CButtonToolbar <CButtonToolbar
aria-label="Toolbar with button groups and input groups" 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">New</CButton>
<CButton variant="secondary">Edit</CButton> <CButton variant="secondary">Edit</CButton>
</CButtonGroup> </CButtonGroup>
<CFormInput <CFormInput
class="c-mb-0 c-w-25 c-mx-1" class="mb-0 w-25 mx-1"
size="sm" size="sm"
prepend-html="$" prepend-html="$"
append-html=".00" append-html=".00"
value="100" value="100"
/> />
<CFormSelect <CFormSelect
class="c-mb-0 c-w-25 c-mx-1" class="mb-0 w-25 mx-1"
size="sm" size="sm"
prepend-html="Size" prepend-html="Size"
value="Medium" value="Medium"
:options="['Large','Medium','Small']" :options="['Large','Medium','Small']"
custom custom
/> />
<CButtonGroup size="sm" class="c-mx-1"> <CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton> <CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton> <CButton variant="secondary">Cancel</CButton>
</CButtonGroup> </CButtonGroup>
@@ -178,14 +178,14 @@
<hr/> <hr/>
<div> <div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu"> <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">New</CButton>
<CButton variant="secondary">Edit</CButton> <CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton> <CButton variant="secondary">Undo</CButton>
</CButtonGroup> </CButtonGroup>
<CDropdown <CDropdown
variant="secondary" variant="secondary"
class="c-mx-1" class="mx-1"
placement="bottom-end" placement="bottom-end"
button-content="Menu" button-content="Menu"
> >
@@ -193,7 +193,7 @@
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem> <CDropdownItem>Item 3</CDropdownItem>
</CDropdown> </CDropdown>
<CButtonGroup class="c-mx-1"> <CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton> <CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton> <CButton variant="secondary">Cancel</CButton>
</CButtonGroup> </CButtonGroup>
src/views/buttons/Dropdowns.vue
+25 -25
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol col="12" md="6"> <CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong> <strong> Bootstrap Dropdown</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Dropdown" href="https://coreui.io/vue/docs/3.0/components/Dropdown"
class="card-header-action" class="card-header-action"
@@ -22,7 +22,7 @@
<div> <div>
<CDropdown <CDropdown
toggler-text="Dropdown Button" toggler-text="Dropdown Button"
class="c-m-2" class="m-2"
variant="secondary" variant="secondary"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
@@ -34,7 +34,7 @@
</CDropdown> </CDropdown>
</div> </div>
<!-- <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 a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem> <CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem> <CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -44,7 +44,7 @@
<div> <div>
<CDropdown <CDropdown
toggler-text="Dropdown with divider" toggler-text="Dropdown with divider"
class="c-m-2" class="m-2"
variant="secondary" variant="secondary"
> >
<CDropdownItem>First item</CDropdownItem> <CDropdownItem>First item</CDropdownItem>
@@ -56,7 +56,7 @@
<div> <div>
<CDropdown <CDropdown
toggler-text="Dropdown with header" toggler-text="Dropdown with header"
class="c-m-2" class="m-2"
variant="secondary" variant="secondary"
> >
<CDropdownHeader>Dropdown header</CDropdownHeader> <CDropdownHeader>Dropdown header</CDropdownHeader>
@@ -79,7 +79,7 @@
<CDropdown <CDropdown
toggler-text="Left align" toggler-text="Left align"
variant="primary" variant="primary"
class="c-m-2 c-d-inline-block" class="m-2 d-inline-block"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -89,7 +89,7 @@
placement="bottom-end" placement="bottom-end"
toggler-text="Right align" toggler-text="Right align"
variant="primary" variant="primary"
class="c-m-2 c-d-inline-block" class="m-2 d-inline-block"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -100,7 +100,7 @@
<CDropdown <CDropdown
toggler-text="Drop-Up" toggler-text="Drop-Up"
variant="info" variant="info"
class="c-m-2" class="m-2"
placement="top-start" placement="top-start"
> >
@@ -114,7 +114,7 @@
variant="secondary" variant="secondary"
:offset="25" :offset="25"
toggler-text="Offset Dropdown" toggler-text="Offset Dropdown"
class="c-m-2" class="m-2"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -126,7 +126,7 @@
variant="secondary" variant="secondary"
split split
toggler-text="Split Dropdown" toggler-text="Split Dropdown"
class="c-m-2" class="m-2"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -176,7 +176,7 @@
variant="secondary" variant="secondary"
size="lg" size="lg"
toggler-text="Large" toggler-text="Large"
class="c-m-2 c-d-inline-block" class="m-2 d-inline-block"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -187,7 +187,7 @@
size="lg" size="lg"
split split
toggler-text="Large Split" toggler-text="Large Split"
class="c-m-2" class="m-2"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -198,7 +198,7 @@
variant="secondary" variant="secondary"
size="sm" size="sm"
toggler-text="Small" toggler-text="Small"
class="c-m-2 c-d-inline-block" class="m-2 d-inline-block"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -208,7 +208,7 @@
variant="secondary" variant="secondary"
size="sm" size="sm"
split toggler-text="Small Split" split toggler-text="Small Split"
class="c-m-2" class="m-2"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -231,7 +231,7 @@
<div> <div>
<CDropdown <CDropdown
toggler-text="Dropdown ARIA" variant="primary" toggler-text="Dropdown ARIA" variant="primary"
class="c-m-2" class="m-2"
> >
<div role="group"> <div role="group">
<CDropdownHeader>Groups</CDropdownHeader> <CDropdownHeader>Groups</CDropdownHeader>
@@ -264,7 +264,7 @@
size="sm" size="sm"
toggler-text="Primary" toggler-text="Primary"
variant="primary" variant="primary"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -274,7 +274,7 @@
size="sm" size="sm"
toggler-text="Secondary" toggler-text="Secondary"
variant="secondary" variant="secondary"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -284,7 +284,7 @@
size="sm" size="sm"
toggler-text="Success" toggler-text="Success"
variant="success" variant="success"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -294,7 +294,7 @@
size="sm" size="sm"
toggler-text="Warning" toggler-text="Warning"
variant="warning" variant="warning"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -304,7 +304,7 @@
size="sm" size="sm"
toggler-text="Danger" toggler-text="Danger"
variant="danger" variant="danger"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -314,7 +314,7 @@
size="sm" size="sm"
toggler-text="Info" toggler-text="Info"
variant="info" variant="info"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -324,7 +324,7 @@
size="sm" size="sm"
toggler-text="Light" toggler-text="Light"
variant="light" variant="light"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -334,7 +334,7 @@
size="sm" size="sm"
toggler-text="Dark" toggler-text="Dark"
variant="dark" variant="dark"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
@@ -344,7 +344,7 @@
size="sm" size="sm"
toggler-text="Link" toggler-text="Link"
variant="link" variant="link"
class="c-m-0 c-d-inline-block" class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
src/views/buttons/StandardButtons.vue
+199 -199
View File
@@ -3,7 +3,7 @@
<CCard > <CCard >
<CCardHeader> <CCardHeader>
<strong>Standard buttons</strong> <strong>Standard buttons</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action" class="card-header-action"
@@ -15,99 +15,99 @@
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-align-items-center"> <CRow class="align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </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> <CButton block variant="primary">Primary</CButton>
</CCol> </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> <CButton block variant="secondary">Secondary</CButton>
</CCol> </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> <CButton block variant="success">Success</CButton>
</CCol> </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> <CButton block variant="warning">Warning</CButton>
</CCol> </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> <CButton block variant="danger">Danger</CButton>
</CCol> </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> <CButton block variant="info">Info</CButton>
</CCol> </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> <CButton block variant="light">Light</CButton>
</CCol> </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> <CButton block variant="dark">Dark</CButton>
</CCol> </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> <CButton block variant="link">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Active State Active State
</CCol> </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> <CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton pressed block variant="success" aria-pressed="true">Success</CButton>
</CCol> </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> <CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton pressed block variant="info" aria-pressed="true">Info</CButton>
</CCol> </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> <CButton pressed block variant="light" aria-pressed="true">Light</CButton>
</CCol> </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> <CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
</CCol> </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> <CButton pressed block variant="link" aria-pressed="true">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Disabled Disabled
</CCol> </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> <CButton block variant="primary" disabled>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" disabled>Secondary</CButton>
</CCol> </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> <CButton block variant="success" disabled>Success</CButton>
</CCol> </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> <CButton block variant="warning" disabled>Warning</CButton>
</CCol> </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> <CButton block variant="danger" disabled>Danger</CButton>
</CCol> </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> <CButton block variant="info" disabled>Info</CButton>
</CCol> </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> <CButton block variant="light" disabled>Light</CButton>
</CCol> </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> <CButton block variant="dark" disabled>Dark</CButton>
</CCol> </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> <CButton block variant="link" disabled>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -121,95 +121,95 @@
<p> <p>
Use <code>outline</code> prop Use <code>outline</code> prop
</p> </p>
<CRow class="c-align-items-center"> <CRow class="align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </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> <CButton block outline variant="primary">Primary</CButton>
</CCol> </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> <CButton block outline variant="secondary">Secondary</CButton>
</CCol> </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> <CButton block outline variant="success">Success</CButton>
</CCol> </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> <CButton block outline variant="warning">Warning</CButton>
</CCol> </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> <CButton block outline variant="danger">Danger</CButton>
</CCol> </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> <CButton block outline variant="info">Info</CButton>
</CCol> </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> <CButton block outline variant="light">Light</CButton>
</CCol> </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> <CButton block outline variant="dark">Dark</CButton>
</CCol> </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>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Active State Active State
</CCol> </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> <CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
</CCol> </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> <CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
</CCol> </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> <CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
</CCol> </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> <CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
</CCol> </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>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Disabled Disabled
</CCol> </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> <CButton block outline variant="primary" disabled>Primary</CButton>
</CCol> </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> <CButton block outline variant="secondary" disabled>Secondary</CButton>
</CCol> </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> <CButton block outline variant="success" disabled>Success</CButton>
</CCol> </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> <CButton block outline variant="warning" disabled>Warning</CButton>
</CCol> </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> <CButton block outline variant="danger" disabled>Danger</CButton>
</CCol> </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> <CButton block outline variant="info" disabled>Info</CButton>
</CCol> </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> <CButton block outline variant="light" disabled>Light</CButton>
</CCol> </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> <CButton block outline variant="dark" disabled>Dark</CButton>
</CCol> </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>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -222,95 +222,95 @@
Use Use
<code>ghost</code> prop for ghost buttons. <code>ghost</code> prop for ghost buttons.
</p> </p>
<CRow class="c-align-items-center"> <CRow class="align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </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> <CButton block ghost variant="primary">Primary</CButton>
</CCol> </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> <CButton block ghost variant="secondary">Secondary</CButton>
</CCol> </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> <CButton block ghost variant="success">Success</CButton>
</CCol> </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> <CButton block ghost variant="warning">Warning</CButton>
</CCol> </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> <CButton block ghost variant="danger">Danger</CButton>
</CCol> </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> <CButton block ghost variant="info">Info</CButton>
</CCol> </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> <CButton block ghost variant="light">Light</CButton>
</CCol> </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> <CButton block ghost variant="dark">Dark</CButton>
</CCol> </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>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Active State Active State
</CCol> </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> <CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
</CCol> </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> <CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
</CCol> </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> <CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
</CCol> </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> <CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
</CCol> </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>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Disabled Disabled
</CCol> </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> <CButton block ghost variant="primary" disabled>Primary</CButton>
</CCol> </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> <CButton block ghost variant="secondary" disabled>Secondary</CButton>
</CCol> </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> <CButton block ghost variant="success" disabled>Success</CButton>
</CCol> </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> <CButton block ghost variant="warning" disabled>Warning</CButton>
</CCol> </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> <CButton block ghost variant="danger" disabled>Danger</CButton>
</CCol> </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> <CButton block ghost variant="info" disabled>Info</CButton>
</CCol> </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> <CButton block ghost variant="light" disabled>Light</CButton>
</CCol> </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> <CButton block ghost variant="dark" disabled>Dark</CButton>
</CCol> </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>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -323,99 +323,99 @@
Use Use
<code>square</code> prop for square buttons. <code>square</code> prop for square buttons.
</p> </p>
<CRow class="c-align-items-center"> <CRow class="align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </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> <CButton block variant="primary" square>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" square>Secondary</CButton>
</CCol> </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> <CButton block variant="success" square>Success</CButton>
</CCol> </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> <CButton block variant="warning" square>Warning</CButton>
</CCol> </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> <CButton block variant="danger" square>Danger</CButton>
</CCol> </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> <CButton block variant="info" square>Info</CButton>
</CCol> </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> <CButton block variant="light" square>Light</CButton>
</CCol> </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> <CButton block variant="dark" square>Dark</CButton>
</CCol> </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> <CButton block variant="link" square>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Active State Active State
</CCol> </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> <CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
</CCol> </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> <CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
</CCol> </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> <CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
</CCol> </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> <CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
</CCol> </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> <CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Disabled Disabled
</CCol> </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> <CButton block variant="primary" square disabled>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" square disabled>Secondary</CButton>
</CCol> </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> <CButton block variant="success" square disabled>Success</CButton>
</CCol> </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> <CButton block variant="warning" square disabled>Warning</CButton>
</CCol> </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> <CButton block variant="danger" square disabled>Danger</CButton>
</CCol> </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> <CButton block variant="info" square disabled>Info</CButton>
</CCol> </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> <CButton block variant="light" square disabled>Light</CButton>
</CCol> </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> <CButton block variant="dark" square disabled>Dark</CButton>
</CCol> </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> <CButton block variant="link" square disabled>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -430,99 +430,99 @@
Use Use
<code>pill</code> prop for pill buttons. <code>pill</code> prop for pill buttons.
</p> </p>
<CRow class="c-align-items-center"> <CRow class="align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </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> <CButton block variant="primary" pill>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" pill>Secondary</CButton>
</CCol> </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> <CButton block variant="success" pill>Success</CButton>
</CCol> </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> <CButton block variant="warning" pill>Warning</CButton>
</CCol> </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> <CButton block variant="danger" pill>Danger</CButton>
</CCol> </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> <CButton block variant="info" pill>Info</CButton>
</CCol> </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> <CButton block variant="light" pill>Light</CButton>
</CCol> </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> <CButton block variant="dark" pill>Dark</CButton>
</CCol> </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> <CButton block variant="link" pill>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Active State Active State
</CCol> </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> <CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
</CCol> </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> <CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
</CCol> </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> <CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
</CCol> </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> <CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
</CCol> </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> <CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0"> <CCol col="12" xl class="mb-3 mb-xl-0">
Disabled Disabled
</CCol> </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> <CButton block variant="primary" pill disabled>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" pill disabled>Secondary</CButton>
</CCol> </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> <CButton block variant="success" pill disabled>Success</CButton>
</CCol> </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> <CButton block variant="warning" pill disabled>Warning</CButton>
</CCol> </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> <CButton block variant="danger" pill disabled>Danger</CButton>
</CCol> </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> <CButton block variant="info" pill disabled>Info</CButton>
</CCol> </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> <CButton block variant="light" pill disabled>Light</CButton>
</CCol> </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> <CButton block variant="dark" pill disabled>Dark</CButton>
</CCol> </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> <CButton block variant="link" pill disabled>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -534,63 +534,63 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p> <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"> <CRow class="align-items-center">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0"> <CCol col="2" xl class="mb-3 mb-xl-0">
Small Small
</CCol> </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> <CButton variant="primary" size="sm">Standard Button</CButton>
</CCol> </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> <CButton outline variant="secondary" size="sm">Outline Button</CButton>
</CCol> </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> <CButton size="sm" ghost variant="success">Ghost Button</CButton>
</CCol> </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> <CButton variant="warning" size="sm" square>Square Button</CButton>
</CCol> </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> <CButton variant="danger" size="sm" pill>Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0"> <CCol col="2" xl class="mb-3 mb-xl-0">
Normal Normal
</CCol> </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> <CButton variant="primary">Standard Button</CButton>
</CCol> </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> <CButton outline variant="secondary" >Outline Button</CButton>
</CCol> </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> <CButton ghost variant="success">Ghost Button</CButton>
</CCol> </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> <CButton variant="warning" square>Square Button</CButton>
</CCol> </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> <CButton variant="danger" pill>Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="c-align-items-center c-mt-3"> <CRow class="align-items-center mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0"> <CCol col="2" xl class="mb-3 mb-xl-0">
Large Large
</CCol> </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> <CButton variant="primary" size="lg">Standard Button</CButton>
</CCol> </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> <CButton outline variant="secondary" size="lg">Outline Button</CButton>
</CCol> </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> <CButton ghost variant="success" size="lg">Ghost Button</CButton>
</CCol> </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> <CButton variant="warning" size="lg" square>Square Button</CButton>
</CCol> </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> <CButton variant="danger" size="lg" pill>Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -601,28 +601,28 @@
<strong>With Icons</strong> <strong>With Icons</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-align-items-center"> <CRow class="align-items-center">
<CCol sm xs="12" class="c-text-center c-mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary"> <CButton variant="primary">
<i class="cui-lightbulb"></i>&nbsp;Standard Button <i class="cui-lightbulb"></i>&nbsp;Standard Button
</CButton> </CButton>
</CCol> </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> <CButton variant="secondary" outline>
<i class="cui-lightbulb"></i>&nbsp;Outline Button <i class="cui-lightbulb"></i>&nbsp;Outline Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="c-text-center c-mt-3"> <CCol sm xs="12" class="text-center mt-3">
<CButton variant="success"> <CButton variant="success">
<i class="cui-lightbulb"></i>&nbsp;Ghost Button <i class="cui-lightbulb"></i>&nbsp;Ghost Button
</CButton> </CButton>
</CCol> </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> <CButton variant="warning" square>
<i class="cui-lightbulb"></i>&nbsp;Square Button <i class="cui-lightbulb"></i>&nbsp;Square Button
</CButton> </CButton>
</CCol> </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> <CButton variant="danger" pill>
<i class="cui-lightbulb"></i>&nbsp;Pill Button <i class="cui-lightbulb"></i>&nbsp;Pill Button
</CButton> </CButton>
@@ -636,22 +636,22 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <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> <CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </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> <CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </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> <CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </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> <CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </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> <CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </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> <CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol> </CCol>
</CRow> </CRow>
src/views/icons/Brands.vue
+2 -2
View File
@@ -5,10 +5,10 @@
<i class="cui-globe"></i>Font Awesome brand icons <i class="cui-globe"></i>Font Awesome brand icons
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-text-center"> <CRow class="text-center">
<template v-for="(brand, brandName) in $options.brands"> <template v-for="(brand, brandName) in $options.brands">
<CCol <CCol
class="c-mb-5" class="mb-5"
col="3" col="3"
sm="2" sm="2"
:key="brandName" :key="brandName"
src/views/icons/CoreUIIcons.vue
+106 -106
View File
@@ -4,426 +4,426 @@
<CCardHeader> <CCardHeader>
<i class="cui-pencil"></i>CoreUI Icons <i class="cui-pencil"></i>CoreUI Icons
<CBadge variant="info">New</CBadge> <CBadge variant="info">New</CBadge>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://github.com/coreui/coreui-icons" href="https://github.com/coreui/coreui-icons"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" 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> </a>
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<!-- <CRow class="c-text-center c-mb-5"> <!-- <CRow class="text-center mb-5">
<template v-for="(name, key) in $options.iconNames"> <template v-for="(name, key) in $options.iconNames">
<CCol :key="key" col="6" sm="4" md="3" xl="2" > <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> <div>{{name}}</div>
</CCol> </CCol>
</template> </template>
</CRow> </CRow>
--> -->
<CRow class="c-text-center "> <CRow class="text-center ">
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>account-logout</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>action-redo</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>action-undo</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>align-center</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>align-left</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>align-right</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>arrow-bottom</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>arrow-left</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>arrow-right</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>arrow-top</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>ban</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>basket-loaded</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>bell</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>bold</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>bookmark</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>briefcase</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>british-pound</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>brush</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>calculator</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>calendar</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>cart</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>chart</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>check</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>chevron-bottom</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>chevron-left</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>chevron-right</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>chevron-top</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>circle-check</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>circle-x</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>cloud</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>cloud-download</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>cloud-upload</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>code</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>cog</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>comment-square</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>credit-card</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>cursor</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>dashboard</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>delete</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>dollar</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>drop</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>envelope-closed</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>envelope-letter</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>envelope-open</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>euro</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>file</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>globe</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>graph</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>home</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>inbox</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>info</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>italic</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>justify-center</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>justify-left</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>justify-right</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>laptop</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>layers</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>lightbulb</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>list</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>location-pin</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>lock-locked</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>lock-unlocked</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>magnifying-glass</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>map</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>monitor</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>moon</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>note</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>options</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>paperclip</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>pencil</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>people</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>phone</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>pie-chart</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>print</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>puzzle</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>rss</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>screen-desktop</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>screen-smartphone</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>settings</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>share</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>shield</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>sort-ascending</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>sort-descending</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>speech</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>speedometer</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>star</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>sun</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>tablet</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>tags</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>task</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>thumb-down</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>thumb-up</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>trash</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>underline</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>user</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>user-female</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>user-follow</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>user-unfollow</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>wrench</div>
</CCol> </CCol>
<CCol col="6" sm="4" md="3" xl="2"> <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> <div>yen</div>
</CCol> </CCol>
</CRow> </CRow>
src/views/icons/Flags.vue
+3 -3
View File
@@ -5,8 +5,8 @@
<i class="cui-globe"></i> Flags <i class="cui-globe"></i> Flags
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-text-center"> <CRow class="text-center">
<CCol class="c-mb-5" col="12"> <CCol class="mb-5" col="12">
<!-- For using the flags inline with text add the classes <!-- For using the flags inline with text add the classes
<code>.flag-icon</code> and <code>.flag-icon-xx</code> <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 (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
@@ -15,7 +15,7 @@
</CCol> </CCol>
<template v-for="(flag, key) in displayedFlags"> <template v-for="(flag, key) in displayedFlags">
<CCol <CCol
class="c-mb-5" class="mb-5"
col="3" col="3"
sm="2" sm="2"
:key="key" :key="key"
src/views/notifications/Alerts.vue
+17 -17
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol col="12" md="6"> <CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong> <strong> Bootstrap Alert</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Alert" href="https://coreui.io/vue/docs/3.0/components/Alert"
class="card-header-action" class="card-header-action"
@@ -37,34 +37,34 @@
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alert <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> </CCardHeader>
<CCardBody> <CCardBody>
<div> <div>
<CAlert show variant="primary"> <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>
<CAlert show variant="secondary"> <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>
<CAlert show variant="success"> <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>
<CAlert show variant="danger"> <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>
<CAlert show variant="warning"> <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>
<CAlert show variant="info"> <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>
<CAlert show variant="light"> <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>
<CAlert show variant="dark"> <CAlert show variant="dark">
Dark Alert with Dark Alert with
<CLink href="#" class="c-alert-link">an example link</CLink> <CLink href="#" class="alert-link">an example link</CLink>
. .
</CAlert> </CAlert>
</div> </div>
@@ -78,14 +78,14 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CAlert show variant="success"> <CAlert show variant="success">
<h4 class="c-alert-heading">Well done!</h4> <h4 class="alert-heading">Well done!</h4>
<p> <p>
Aww yeah, you successfully read this important alert message. Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can see 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. how spacing within an alert works with this kind of content.
</p> </p>
<hr> <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. Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p> </p>
</CAlert> </CAlert>
@@ -120,11 +120,11 @@
variant="secondary" variant="secondary"
:show.sync="dismissibleAlerts[2]" :show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}" v-slot="{dismiss}"
class="c-alert-dismissible" class="alert-dismissible"
> >
Dismissible Alert with custom button! Dismissible Alert with custom button!
<CButton <CButton
class="c-position-absolute" class="position-absolute"
variant="secondary" variant="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);" style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>" textHtml="<i>Close</i>"
@@ -134,7 +134,7 @@
<CButton <CButton
@click="showDismissibleAlerts" @click="showDismissibleAlerts"
variant="info" variant="info"
class="c-m-1" class="m-1"
> >
Show dismissible alerts Show dismissible alerts
</CButton> </CButton>
@@ -170,7 +170,7 @@
height="4px" height="4px"
/> />
</CAlert> </CAlert>
<CButton @click="showAlert" variant="info" class="c-m-1"> <CButton @click="showAlert" variant="info" class="m-1">
Show alert with timer Show alert with timer
</CButton> </CButton>
</div> </div>
src/views/notifications/Badges.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template functional> <template functional>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol col="12" md="6"> <CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong> <strong> Bootstrap Badge</strong>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Badge" href="https://coreui.io/vue/docs/3.0/components/Badge"
class="card-header-action" class="card-header-action"
src/views/notifications/Modals.vue
+13 -13
View File
@@ -1,12 +1,12 @@
<template> <template>
<div class="c-wrapper"> <div class="wrapper">
<div> <div>
<CRow> <CRow>
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals <i class="fa fa-align-justify"></i> Bootstrap Modals
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/Modal" href="https://coreui.io/vue/docs/3.0/components/Modal"
class="card-header-action" class="card-header-action"
@@ -18,32 +18,32 @@
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CButton variant="secondary" @click="myModal = true" class="c-mr-1"> <CButton variant="secondary" @click="myModal = true" class="mr-1">
Launch demo modal Launch demo modal
</CButton> </CButton>
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1"> <CButton variant="secondary" @click="largeModal = true" class="mr-1">
Launch large modal Launch large modal
</CButton> </CButton>
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1"> <CButton variant="secondary" @click="smallModal = true" class="mr-1">
Launch small modal Launch small modal
</CButton> </CButton>
<hr> <hr>
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1"> <CButton variant="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal Launch primary modal
</CButton> </CButton>
<CButton variant="success" @click="successModal = true" class="c-mr-1"> <CButton variant="success" @click="successModal = true" class="mr-1">
Launch success modal Launch success modal
</CButton> </CButton>
<CButton variant="warning" @click="warningModal = true" class="c-mr-1"> <CButton variant="warning" @click="warningModal = true" class="mr-1">
Launch warning modal Launch warning modal
</CButton> </CButton>
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1"> <CButton variant="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal Launch danger modal
</CButton> </CButton>
<CButton variant="info" @click="infoModal = true" class="c-mr-1"> <CButton variant="info" @click="infoModal = true" class="mr-1">
Launch info modal Launch info modal
</CButton> </CButton>
<CButton variant="dark" @click="darkModal = true" class="c-mr-1"> <CButton variant="dark" @click="darkModal = true" class="mr-1">
Launch dark modal Launch dark modal
</CButton> </CButton>
</CCardBody> </CCardBody>
@@ -162,8 +162,8 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<template #header="{hide}"> <template #header="{hide}">
<h6 class="c-modal-title">Custom smaller modal title</h6> <h6 class="modal-title">Custom smaller modal title</h6>
<CButtonClose @click="hide()" class="c-text-white"/> <CButtonClose @click="hide()" class="text-white"/>
</template> </template>
<template #footer="{hide}"> <template #footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton> <CButton @click="hide()" variant="danger">Discard</CButton>
src/views/pages/Login.vue
+9 -9
View File
@@ -1,13 +1,13 @@
<template> <template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100"> <CContainer class="d-flex align-items-center min-vh-100">
<CRow class="c-justify-content-center"> <CRow class="justify-content-center">
<CCol md="8"> <CCol md="8">
<CCardGroup> <CCardGroup>
<CCard class="c-p-4"> <CCard class="p-4">
<CCardBody> <CCardBody>
<CForm> <CForm>
<h1>Login</h1> <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 <CFormInput
prependHtml="<i class='cui-user'></i>" prependHtml="<i class='cui-user'></i>"
placeholder="Username" placeholder="Username"
@@ -21,17 +21,17 @@
/> />
<CRow> <CRow>
<CCol col="6"> <CCol col="6">
<CButton variant="primary" class="c-px-4">Login</CButton> <CButton variant="primary" class="px-4">Login</CButton>
</CCol> </CCol>
<CCol col="6" class="c-text-right"> <CCol col="6" class="text-right">
<CButton variant="link" class="c-px-0">Forgot password?</CButton> <CButton variant="link" class="px-0">Forgot password?</CButton>
</CCol> </CCol>
</CRow> </CRow>
</CForm> </CForm>
</CCardBody> </CCardBody>
</CCard> </CCard>
<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%" style="width:44%"
body-wrapper 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> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<CButton <CButton
variant="primary" variant="primary"
class="c-active c-mt-3" class="active mt-3"
> >
Register Now! Register Now!
</CButton> </CButton>
src/views/pages/Page404.vue
+8 -8
View File
@@ -1,15 +1,15 @@
<template> <template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100"> <CContainer class="d-flex align-items-center min-vh-100">
<CRow class="c-w-100 c-justify-content-center"> <CRow class="w-100 justify-content-center">
<CCol md="6"> <CCol md="6">
<div class="c-w-100"> <div class="w-100">
<div class="c-clearfix"> <div class="clearfix">
<h1 class="c-float-left c-display-3 c-mr-4">404</h1> <h1 class="float-left display-3 mr-4">404</h1>
<h4 class="c-pt-3">Oops! You're lost.</h4> <h4 class="pt-3">Oops! You're lost.</h4>
<p class="c-text-muted">The page you are looking for was not found.</p> <p class="text-muted">The page you are looking for was not found.</p>
</div> </div>
<CFormInput <CFormInput
class="c-mb-0" class="mb-0"
prependHtml="<i class='cui-magnifying-glass'></i>" prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?" placeholder="What are you looking for?"
> >
src/views/pages/Page500.vue
+7 -7
View File
@@ -1,14 +1,14 @@
<template> <template>
<CContainer class="c-d-flex c-align-items-center c-min-vh-100"> <CContainer class="d-flex align-items-center min-vh-100">
<CRow class="c-w-100 c-justify-content-center"> <CRow class="w-100 justify-content-center">
<CCol md="6"> <CCol md="6">
<div class="c-clearfix"> <div class="clearfix">
<h1 class="c-float-left c-display-3 c-mr-4">500</h1> <h1 class="float-left display-3 mr-4">500</h1>
<h4 class="c-pt-3">Houston, we have a problem!</h4> <h4 class="pt-3">Houston, we have a problem!</h4>
<p class="c-text-muted">The page you are looking for is temporarily unavailable.</p> <p class="text-muted">The page you are looking for is temporarily unavailable.</p>
</div> </div>
<CFormInput <CFormInput
class="c-mb-0" class="mb-0"
prependHtml="<i class='cui-magnifying-glass'></i>" prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?" placeholder="What are you looking for?"
> >
src/views/pages/Register.vue
+7 -7
View File
@@ -1,12 +1,12 @@
<template> <template>
<CContainer class="c-min-vh-100 c-d-flex c-align-items-center"> <CContainer class="min-vh-100 d-flex align-items-center">
<CRow class="c-w-100 c-justify-content-center"> <CRow class="w-100 justify-content-center">
<CCol md="6" sm="8"> <CCol md="6" sm="8">
<CCard class="c-mx-4"> <CCard class="mx-4">
<CCardBody class="c-p-4"> <CCardBody class="p-4">
<CForm> <CForm>
<h1>Register</h1> <h1>Register</h1>
<p class="c-text-muted">Create your account</p> <p class="text-muted">Create your account</p>
<CFormInput <CFormInput
placeholder="Username" placeholder="Username"
prependHtml="<i class='cui-user'></i>" prependHtml="<i class='cui-user'></i>"
@@ -28,12 +28,12 @@
type="password" type="password"
prependHtml="<i class='cui-lock-locked'></i>" prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password" autocomplete="new-password"
class="c-mb-4" class="mb-4"
/> />
<CButton variant="success" block>Create Account</CButton> <CButton variant="success" block>Create Account</CButton>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter class="c-p-4"> <CCardFooter class="p-4">
<CRow> <CRow>
<CCol col="6"> <CCol col="6">
<CButton block variant="facebook" textHtml="Facebook"/> <CButton block variant="facebook" textHtml="Facebook"/>
src/views/theme/ColorTheme.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template> <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 <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%' }" :style="{ paddingTop: '75%' }"
></div> ></div>
<slot></slot> <slot></slot>
@@ -17,7 +17,7 @@ export default {
props: { props: {
color: { color: {
type: String, type: String,
default: 'c-bg-secondary' default: 'bg-secondary'
} }
} }
} }
src/views/theme/ColorView.vue
+5 -5
View File
@@ -1,13 +1,13 @@
<template> <template>
<table class="c-w-100"> <table class="w-100">
<tbody> <tbody>
<tr> <tr>
<td class="c-text-muted">HEX:</td> <td class="text-muted">HEX:</td>
<td class="c-font-weight-bold">{{this.hexColor}}</td> <td class="font-weight-bold">{{this.hexColor}}</td>
</tr> </tr>
<tr> <tr>
<td class="c-text-muted">RGB:</td> <td class="text-muted">RGB:</td>
<td class="c-font-weight-bold">{{this.bgColor}}</td> <td class="font-weight-bold">{{this.bgColor}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
src/views/theme/Colors.vue
+27 -27
View File
@@ -6,16 +6,16 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<ColorTheme color="c-bg-primary"> <ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6> <h6>Brand Primary Color</h6>
</ColorTheme> </ColorTheme>
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme> <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme> <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme> <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme> <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme> <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme> <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme> <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -25,15 +25,15 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme> <ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme> <ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme> <ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme> <ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme> <ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme> <ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme> <ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme> <ColorTheme color="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-900"><h6>Brand 900 Color</h6></ColorTheme>
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -43,16 +43,16 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme> <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme> <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
<ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme> <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
<ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme> <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
<ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme> <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
<ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme> <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
<ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme> <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
<ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme> <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
<ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme> <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
<ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme> <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
src/views/theme/Typography.vue
+59 -59
View File
@@ -1,13 +1,13 @@
<template> <template>
<div> <div>
<div class="c-card"> <div class="card">
<div class="c-card-header"> <div class="card-header">
Headings Headings
</div> </div>
<div class="c-card-body"> <div class="card-body">
<p>Documentation and examples for Bootstrap typography, <p>Documentation and examples for Bootstrap typography,
including global settings, headings, body text, lists, and more.</p> including global settings, headings, body text, lists, and more.</p>
<table class="c-table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th>Heading</th> <th>Heading</th>
@@ -18,131 +18,131 @@
<tr> <tr>
<td> <td>
<p> <p>
<code class="c-highlighter-rouge"> <code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt; &lt;h1&gt;&lt;/h1&gt;
</code> </code>
</p> </p>
</td> </td>
<td><span class="c-h1">h1. Bootstrap heading</span></td> <td><span class="h1">h1. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p> <p>
<code class="c-highlighter-rouge"> <code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt; &lt;h2&gt;&lt;/h2&gt;
</code> </code>
</p> </p>
</td> </td>
<td><span class="c-h2">h2. Bootstrap heading</span></td> <td><span class="h2">h2. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p> <p>
<code class="c-highlighter-rouge"> <code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt; &lt;h3&gt;&lt;/h3&gt;
</code> </code>
</p> </p>
</td> </td>
<td><span class="c-h3">h3. Bootstrap heading</span></td> <td><span class="h3">h3. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p> <p>
<code class="c-highlighter-rouge"> <code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt; &lt;h4&gt;&lt;/h4&gt;
</code> </code>
</p> </p>
</td> </td>
<td><span class="c-h4">h4. Bootstrap heading</span></td> <td><span class="h4">h4. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p> <p>
<code class="c-highlighter-rouge"> <code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt; &lt;h5&gt;&lt;/h5&gt;
</code> </code>
</p> </p>
</td> </td>
<td><span class="c-h5">h5. Bootstrap heading</span></td> <td><span class="h5">h5. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p> <p>
<code class="c-highlighter-rouge"> <code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt; &lt;h6&gt;&lt;/h6&gt;
</code> </code>
</p> </p>
</td> </td>
<td><span class="c-h6">h6. Bootstrap heading</span></td> <td><span class="h6">h6. Bootstrap heading</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="c-card"> <div class="card">
<div class="c-card-header"> <div class="card-header">
Headings Headings
</div> </div>
<div class="c-card-body"> <div class="card-body">
<p> <p>
<code class="c-highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h1</code> through
<code class="c-highlighter-rouge">.h6</code> <code class="highlighter-rouge">.h6</code>
classes are also available, for when you want to match the font classes are also available, for when you want to match the font
styling of a heading but cannot use the associated HTML element. styling of a heading but cannot use the associated HTML element.
</p> </p>
<div class="c-bd-example"> <div class="bd-example">
<p class="c-h1">h1. Bootstrap heading</p> <p class="h1">h1. Bootstrap heading</p>
<p class="c-h2">h2. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p>
<p class="c-h3">h3. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p>
<p class="c-h4">h4. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p>
<p class="c-h5">h5. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p>
<p class="c-h6">h6. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p>
</div> </div>
</div> </div>
</div> </div>
<div class="c-card"> <div class="card">
<div class="c-card-header"> <div class="card-header">
Display headings Display headings
</div> </div>
<div class="c-card-body"> <div class="card-body">
<p> <p>
Traditional heading elements are designed to work best in the meat Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out, of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger, consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style. slightly more opinionated heading style.
</p> </p>
<div class="c-bd-example c-bd-example-type"> <div class="bd-example bd-example-type">
<table class="c-table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<td><span class="c-display-1">Display 1</span></td> <td><span class="display-1">Display 1</span></td>
</tr> </tr>
<tr> <tr>
<td><span class="c-display-2">Display 2</span></td> <td><span class="display-2">Display 2</span></td>
</tr> </tr>
<tr> <tr>
<td><span class="c-display-3">Display 3</span></td> <td><span class="display-3">Display 3</span></td>
</tr> </tr>
<tr> <tr>
<td><span class="c-display-4">Display 4</span></td> <td><span class="display-4">Display 4</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div class="c-card"> <div class="card">
<div class="c-card-header"> <div class="card-header">
Inline text elements Inline text elements
</div> </div>
<div class="c-card-body"> <div class="card-body">
<p> <p>
Traditional heading elements are designed to work best in the meat Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out, of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger, consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style. slightly more opinionated heading style.
</p> </p>
<div class="c-bd-example"> <div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del> <p><del>
This line of text is meant to be treated as deleted text. This line of text is meant to be treated as deleted text.
@@ -162,46 +162,46 @@
</div> </div>
</div> </div>
</div> </div>
<div class="c-card"> <div class="card">
<div class="c-card-header"> <div class="card-header">
Description list alignment Description list alignment
</div> </div>
<div class="c-card-body"> <div class="card-body">
<p> <p>
Align terms and descriptions horizontally by using our grid system’s Align terms and descriptions horizontally by using our grid system’s
predefined classes (or semantic mixins). For longer terms, you can predefined classes (or semantic mixins). For longer terms, you can
optionally add a <code class="highlighter-rouge">.text-truncate</code> optionally add a <code class="highlighter-rouge">.text-truncate</code>
class to truncate the text with an ellipsis. class to truncate the text with an ellipsis.
</p> </p>
<div class="c-bd-example"> <div class="bd-example">
<dl class="c-row"> <dl class="row">
<dt class="c-col-sm-3">Description lists</dt> <dt class="col-sm-3">Description lists</dt>
<dd class="c-col-sm-9"> <dd class="col-sm-9">
A description list is perfect for defining terms. A description list is perfect for defining terms.
</dd> </dd>
<dt class="c-col-sm-3">Euismod</dt> <dt class="col-sm-3">Euismod</dt>
<dd class="c-col-sm-9"> <dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> <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> <p>Donec id elit non mi porta gravida at eget metus.</p>
</dd> </dd>
<dt class="c-col-sm-3">Malesuada porta</dt> <dt class="col-sm-3">Malesuada porta</dt>
<dd class="c-col-sm-9"> <dd class="col-sm-9">
Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod.
</dd> </dd>
<dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="c-col-sm-9"> <dd class="col-sm-9">
Fusce dapibus, tellus ac cursus commodo, tortor mauris Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. condimentum nibh, ut fermentum massa justo sit amet risus.
</dd> </dd>
<dt class="c-col-sm-3">Nesting</dt> <dt class="col-sm-3">Nesting</dt>
<dd class="c-col-sm-9"> <dd class="col-sm-9">
<dl class="c-row"> <dl class="row">
<dt class="c-col-sm-4">Nested definition list</dt> <dt class="col-sm-4">Nested definition list</dt>
<dd class="c-col-sm-8"> <dd class="col-sm-8">
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc. Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
</dd> </dd>
</dl> </dl>
src/views/users/Users.vue
+1 -1
View File
@@ -76,7 +76,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.c-card-body >>> table > tbody > tr > td { .card-body >>> table > tbody > tr > td {
cursor: pointer; cursor: pointer;
} }
</style> </style>
src/views/widgets/Widgets.vue
+14 -14
View File
@@ -10,13 +10,13 @@
<CProgress <CProgress
variant="success" variant="success"
:value="25" :value="25"
class="c-progress-xs c-my-3 c-mb-0" class="progress-xs my-3 mb-0"
/> />
<template #header> <template #header>
<div class="c-card-header-actions"> <div class="card-header-actions">
<a <a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 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" style="right:10px; top:10px"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
@@ -184,7 +184,7 @@
variant="primary" variant="primary"
no-icon-padding no-icon-padding
> >
<CIcon name="settings" class="c-mx-5 " width="24"/> <CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -194,7 +194,7 @@
variant="info" variant="info"
no-icon-padding no-icon-padding
> >
<CIcon name="laptop" class="c-mx-5 " width="24"/> <CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -204,15 +204,15 @@
variant="warning" variant="warning"
no-icon-padding no-icon-padding
> >
<CIcon name="moon" class="c-mx-5 " width="24"/> <CIcon name="moon" class="mx-5 " width="24"/>
<template #footer> <template #footer>
<CCardFooter class="c-card-footer c-px-3 c-py-2"> <CCardFooter class="card-footer px-3 py-2">
<CLink <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/" href="https://coreui.io/"
> >
View more View more
<CIcon name="arrowRight" class="c-float-right" width="16"/> <CIcon name="arrowRight" class="float-right" width="16"/>
</CLink> </CLink>
</CCardFooter> </CCardFooter>
</template> </template>
@@ -228,7 +228,7 @@
no-icon-padding no-icon-padding
link="#" link="#"
> >
<CIcon name="settings" class="c-mx-5 " width="24"/> <CIcon name="settings" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -239,7 +239,7 @@
no-icon-padding no-icon-padding
link="#" link="#"
> >
<CIcon name="laptop" class="c-mx-5 " width="24"/> <CIcon name="laptop" class="mx-5 " width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
<CCol col="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
@@ -250,13 +250,13 @@
no-icon-padding no-icon-padding
link="#" link="#"
> >
<CIcon name="moon" class="c-mx-5" width="24"/> <CIcon name="moon" class="mx-5" width="24"/>
</CWidgetIcon> </CWidgetIcon>
</CCol> </CCol>
</CRow> --> </CRow> -->
<WidgetsBrand noCharts/> <WidgetsBrand noCharts/>
<WidgetsBrand/> <WidgetsBrand/>
<CCardGroup class="c-mb-4"> <CCardGroup class="mb-4">
<CWidgetProgressIcon <CWidgetProgressIcon
header="87.500" header="87.500"
text="Visitors" text="Visitors"
@@ -292,7 +292,7 @@
<CIcon name="speedometer" height="36"/> <CIcon name="speedometer" height="36"/>
</CWidgetProgressIcon> </CWidgetProgressIcon>
</CCardGroup> </CCardGroup>
<CCardGroup class="c-mb-4"> <CCardGroup class="mb-4">
<CWidgetProgressIcon <CWidgetProgressIcon
header="87.500" header="87.500"
text="Visitors" text="Visitors"
src/views/widgets/WidgetsBrand.vue
+12 -12
View File
@@ -12,11 +12,11 @@
<CIcon <CIcon
name="socialFacebook" name="socialFacebook"
height="52" height="52"
class="c-my-4" class="my-4"
/> />
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
class="c-position-absolute" class="position-absolute"
background-color="rgba(255,255,255,.1)" background-color="rgba(255,255,255,.1)"
:data-points="[65, 59, 84, 84, 51, 55, 40]" :data-points="[65, 59, 84, 84, 51, 55, 40]"
label="Friends" label="Friends"
@@ -35,11 +35,11 @@
<CIcon <CIcon
name="socialTwitter" name="socialTwitter"
height="52" height="52"
class="c-my-4" class="my-4"
/> />
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
class="c-position-absolute" class="position-absolute"
background-color="rgba(255,255,255,.1)" background-color="rgba(255,255,255,.1)"
:data-points="[1, 13, 9, 17, 34, 41, 38]" :data-points="[1, 13, 9, 17, 34, 41, 38]"
label="Followers" label="Followers"
@@ -58,11 +58,11 @@
<CIcon <CIcon
name="socialLinkedin" name="socialLinkedin"
height="52" height="52"
class="c-my-4" class="my-4"
/> />
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
class="c-position-absolute" class="position-absolute"
background-color="rgba(255,255,255,.1)" background-color="rgba(255,255,255,.1)"
:data-points="[78, 81, 80, 45, 34, 12, 40]" :data-points="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts" label="Contracts"
@@ -81,11 +81,11 @@
<CIcon <CIcon
name="calendar" name="calendar"
height="52" height="52"
class="c-my-4" class="my-4"
/> />
<CChartLineSimple <CChartLineSimple
style="height:100px" style="height:100px"
class="c-position-absolute" class="position-absolute"
background-color="rgba(255,255,255,.1)" background-color="rgba(255,255,255,.1)"
:data-points="[35, 23, 56, 22, 97, 23, 64]" :data-points="[35, 23, 56, 22, 97, 23, 64]"
label="Followers" label="Followers"
@@ -106,7 +106,7 @@
<CIcon <CIcon
name="socialFacebook" name="socialFacebook"
height="56" height="56"
class="c-my-4" class="my-4"
/> />
</CWidgetBrand> </CWidgetBrand>
</CCol> </CCol>
@@ -121,7 +121,7 @@
<CIcon <CIcon
name="socialTwitter" name="socialTwitter"
height="56" height="56"
class="c-my-4" class="my-4"
/> />
</CWidgetBrand> </CWidgetBrand>
</CCol> </CCol>
@@ -136,7 +136,7 @@
<CIcon <CIcon
name="socialLinkedin" name="socialLinkedin"
height="56" height="56"
class="c-my-4" class="my-4"
/> />
</CWidgetBrand> </CWidgetBrand>
</CCol> </CCol>
@@ -151,7 +151,7 @@
<CIcon <CIcon
name="calendar" name="calendar"
height="56" height="56"
class="c-my-4" class="my-4"
/> />
</CWidgetBrand> </CWidgetBrand>
</CCol> </CCol>
src/views/widgets/WidgetsDropdown.vue
+10 -10
View File
@@ -4,8 +4,8 @@
<CWidgetDropdown variant="primary" header="9.823" text="Members online"> <CWidgetDropdown variant="primary" header="9.823" text="Members online">
<template #default> <template #default>
<CDropdown <CDropdown
class="c-float-right" class="float-right"
variant="transparent c-p-0" variant="transparent p-0"
placement="bottom-end" placement="bottom-end"
> >
<template #toggler-content> <template #toggler-content>
@@ -20,7 +20,7 @@
<template #footer> <template #footer>
<CChartLineSimple <CChartLineSimple
pointed pointed
class="c-px-3" class="px-3"
style="height:70px" style="height:70px"
:data-points="[65, 59, 84, 84, 51, 55, 40]" :data-points="[65, 59, 84, 84, 51, 55, 40]"
background-color="primary" background-color="primary"
@@ -34,8 +34,8 @@
<CWidgetDropdown variant="info" header="9.823" text="Members online"> <CWidgetDropdown variant="info" header="9.823" text="Members online">
<template #default> <template #default>
<CDropdown <CDropdown
class="c-float-right" class="float-right"
variant="transparent c-p-0" variant="transparent p-0"
placement="bottom-end" placement="bottom-end"
no-caret no-caret
buttonHtml="<i class='cui-location-pin'></i>" buttonHtml="<i class='cui-location-pin'></i>"
@@ -52,7 +52,7 @@
<template #footer> <template #footer>
<CChartLineSimple <CChartLineSimple
pointed pointed
class="c-px-3" class="px-3"
style="height:70px" style="height:70px"
:data-points="[1, 18, 9, 17, 34, 22, 11]" :data-points="[1, 18, 9, 17, 34, 22, 11]"
background-color="info" background-color="info"
@@ -71,8 +71,8 @@
> >
<template #default> <template #default>
<CDropdown <CDropdown
class="c-float-right" class="float-right"
variant="transparent c-p-0" variant="transparent p-0"
placement="bottom-end" placement="bottom-end"
> >
<template #toggler-content> <template #toggler-content>
@@ -105,8 +105,8 @@
> >
<template #default> <template #default>
<CDropdown <CDropdown
class="c-float-right" class="float-right"
variant="transparent c-p-0" variant="transparent p-0"
placement="bottom-end" placement="bottom-end"
> >
<template #toggler-content> <template #toggler-content>