sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: minor bug fixes and refactors

Browse Source
This commit is contained in:
woothu
2019-09-23 14:52:28 +02:00
parent 6a61d68c9f
commit e31a6c7542
36 changed files with 2256 additions and 2358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<script> <script>
export default { export default {
name: 'app' name: 'App'
} }
</script> </script>
src/containers/TheContainer.vue
+1 -1
View File
@@ -23,7 +23,7 @@ import TheHeader from './TheHeader'
import TheFooter from './TheFooter' import TheFooter from './TheFooter'
export default { export default {
name: 'full', name: 'TheContainer',
components: { components: {
TheSidebar, TheSidebar,
TheHeader, TheHeader,
src/containers/TheFooter.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<CFooter> <CFooter>
<div> <div>
<a href="https://coreui.io">CoreUI</a> <a href="https://coreui.io">CoreUI</a>
<span class="ml-1">&copy; 2018 creativeLabs.</span> <span class="ml-1">&copy; 2019 creativeLabs.</span>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
<span class="mr-1">Powered by</span> <span class="mr-1">Powered by</span>
src/containers/_nav.js
+2
View File
@@ -447,6 +447,7 @@ export default [
href: 'http://coreui.io/vue/', href: 'http://coreui.io/vue/',
icon: 'cui-cloud-download', icon: 'cui-cloud-download',
addLinkClasses: 'c-nav-link-success', addLinkClasses: 'c-nav-link-success',
target: '_blank'
}, },
attrs: { attrs: {
class: 'mt-auto', class: 'mt-auto',
@@ -461,6 +462,7 @@ export default [
href: 'http://coreui.io/pro/vue/', href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers', icon: 'cui-layers',
addLinkClasses: 'c-nav-link-danger', addLinkClasses: 'c-nav-link-danger',
target: '_blank'
} }
} }
] ]
src/router/index.js
+1 -1
View File
@@ -10,7 +10,7 @@ const Dashboard = () => import('@/views/Dashboard')
const Colors = () => import('@/views/theme/Colors') const Colors = () => import('@/views/theme/Colors')
const Typography = () => import('@/views/theme/Typography') const Typography = () => import('@/views/theme/Typography')
const Charts = () => import('@/views/Charts') const Charts = () => import('@/views/charts/Charts')
const Widgets = () => import('@/views/widgets/Widgets') const Widgets = () => import('@/views/widgets/Widgets')
// Views - Components // Views - Components
src/views/base/Breadcrumbs.vue
+25 -29
View File
@@ -1,37 +1,33 @@
<template> <template>
<div class="wrapper"> <CRow>
<div> <CCol col>
<CRow> <CCard>
<CCol col> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<CCardHeader> <div class="card-header-actions">
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong> <a
<div class="card-header-actions"> href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
<a class="card-header-action"
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" rel="noreferrer noopener"
class="card-header-action" target="_blank"
rel="noreferrer noopener" >
target="_blank" <small class="text-muted">docs</small>
> </a>
<small class="text-muted">docs</small> </div>
</a> </CCardHeader>
</div> <CCardBody>
</CCardHeader> <CBreadcrumb :items="items"/>
<CCardBody> <CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items"/> <CBreadcrumb :items="items3"/>
<CBreadcrumb :items="items2"/> </CCardBody>
<CBreadcrumb :items="items3"/> </CCard>
</CCardBody> </CCol>
</CCard> </CRow>
</CCol>
</CRow>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'breadcrumbs', name: 'Breadcrumbs',
data () { data () {
return { return {
items: [ items: [
src/views/base/Cards.vue
+3 -3
View File
@@ -233,11 +233,11 @@
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<transition name="fade"> <transition name="fade">
<CCard class="bg-secondary" v-if="show" > <CCard class="bg-secondary" v-if="show">
<CCardHeader> <CCardHeader>
Card with header actions Card with header actions
<div class="card-header-actions"> <div class="card-header-actions">
<CLink href="#" class="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="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed"> <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
@@ -263,7 +263,7 @@
<script> <script>
export default { export default {
name: 'cards', name: 'Cards',
data: function () { data: function () {
return { return {
show: true, show: true,
src/views/base/Carousels.vue
+43 -45
View File
@@ -1,52 +1,50 @@
<template> <template>
<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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank" >
> <small class="text-muted">docs</small>
<small class="text-muted">docs</small> </a>
</a> </div>
</div> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CCarousel
<CCarousel arrows
arrows indicators
indicators animate
animate height="400px"
height="400px" >
> <CCarouselItem
<CCarouselItem captionHeader="First Slide"
captionHeader="First Slide" image="https://lorempixel.com/1024/480/technics/2/"
image="https://lorempixel.com/1024/480/technics/2/" captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum." />
/> <CCarouselItem
<CCarouselItem captionHeader="Blank page"
captionHeader="Blank page" :image="{ blankColor: 'grey' }"
:image="{ blankColor: 'grey' }" captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum." />
/> <CCarouselItem
<CCarouselItem image="https://lorempixel.com/1024/480/technics/8/"
image="https://lorempixel.com/1024/480/technics/8/" />
/> </CCarousel>
</CCarousel> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> </CRow>
</CRow>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'carousels' name: 'Carousels'
} }
</script> </script>
src/views/base/Collapses.vue
+35 -39
View File
@@ -1,49 +1,45 @@
<template> <template>
<div class="wrapper"> <CRow>
<div> <CCol col="12" md="6">
<CRow> <CCard>
<CCol col="12" md="6"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i>
<CCardHeader> <strong> Bootstrap Collapse </strong>
<i class="fa fa-align-justify"></i> <div class="card-header-actions">
<strong> Bootstrap Collapse </strong> <a
<div class="card-header-actions"> href="https://coreui.io/vue/docs/3.0/components/Collapse"
<a class="card-header-action"
href="https://coreui.io/vue/docs/3.0/components/Collapse" rel="noreferrer noopener"
class="card-header-action" target="_blank"
rel="noreferrer noopener" >
target="_blank" <small class="text-muted">docs</small>
> </a>
<small class="text-muted">docs</small> </div>
</a> </CCardHeader>
</div> <CCardBody>
</CCardHeader> <CButton id="collapse1" variant="primary">
<CCardBody> Toggle Collapse
<CButton id="collapse1" variant="primary"> </CButton>
Toggle Collapse <CCollapse toggler="collapse1" class="mt-2">
<CCard body-wrapper>
<p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm" variant="secondary">
Toggle Inner Collapse
</CButton> </CButton>
<CCollapse toggler="collapse1" class="mt-2"> <CCollapse toggler="collapse2" class="mt-2">
<CCard body-wrapper> <CCard body-wrapper>Hello!</CCard>
<p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm" variant="secondary">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
</CCollapse> </CCollapse>
</CCardBody> </CCard>
</CCard> </CCollapse>
</CCol> </CCardBody>
</CRow> </CCard>
</div> </CCol>
</div> </CRow>
</template> </template>
<script> <script>
export default { export default {
name: 'collapses', name: 'Collapses',
data () { data () {
return { return {
showCollapse: true, showCollapse: true,
src/views/base/Forms.vue
+1 -1
View File
@@ -852,7 +852,7 @@
<script> <script>
export default { export default {
name: 'forms', name: 'Forms',
data () { data () {
return { return {
selected: [], // Must be an array reference! selected: [], // Must be an array reference!
src/views/base/Jumbotrons.vue
+78 -80
View File
@@ -1,89 +1,87 @@
<template> <template>
<div class="wrapper"> <div>
<div> <CRow>
<CRow> <CCol>
<CCol> <CCard>
<CCard> <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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<CButton variant="primary" href="#">More Info</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<CButton variant="primary" href="#">Do Something</CButton>
<CButton variant="success" href="#">Do Something Else</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CJumbotron
variant="info"
text-variant="white"
border-variant="dark"
header="Bootstrap 4"
> >
<p slot="lead" class="lead"> <small class="text-muted">docs</small>
This is a simple hero unit, a simple jumbotron-style component for </a>
calling extra attention to featured content or information. </div>
</p> </CCardHeader>
<hr class="my-4"> <CCardBody>
<p> <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
It uses utility classes for typography and spacing to space content <p>For more information visit website</p>
out within the larger container. <CButton variant="primary" href="#">More Info</CButton>
</p> </CJumbotron>
</CJumbotron> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> <CCol>
</CRow> <CCard>
</div> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<CButton variant="primary" href="#">Do Something</CButton>
<CButton variant="success" href="#">Do Something Else</CButton>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CJumbotron
variant="info"
text-variant="white"
border-variant="dark"
header="Bootstrap 4"
>
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'jumbotrons' name: 'Jumbotrons'
} }
</script> </script>
src/views/base/ListGroups.vue
+271 -273
View File
@@ -1,281 +1,279 @@
<template> <template>
<div class="wrapper"> <div>
<div> <CRow>
<CRow> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank" >
> <small class="text-muted">docs</small>
<small class="text-muted">docs</small> </a>
</a> </div>
</div> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> </CRow>
</CRow> <CRow>
<CRow> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> List group </strong>
<strong> List group </strong> <small>disabled items</small>
<small>disabled items</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem disabled>Cras justo odio</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem> <CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> List group </strong>
<strong> List group </strong> <small>actionable items</small>
<small>actionable items</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem> <CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem> <CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem> <CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> </CRow>
</CRow> <CRow>
<CRow> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> List group </strong>
<strong> List group </strong> <small>buttons</small>
<small>buttons</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">Button item</CListGroupItem> <CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem> <CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem> <CListGroupItem tag="button">This is a button too</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> List group </strong>
<strong> List group </strong> <small>with badges</small>
<small>with badges</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem
<CListGroupItem class="d-flex justify-content-between 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="d-flex justify-content-between 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="d-flex justify-content-between 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> </CListGroupItem>
</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> </CRow>
</CRow> <CRow>
<CRow> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> List group </strong>
<strong> List group </strong> <small>variants</small>
<small>variants</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem>This is a default list group item</CListGroupItem> <CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem> <CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem> <CListGroupItem variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem variant="success">This is a success list group item</CListGroupItem> <CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem> <CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem> <CListGroupItem variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem variant="info">This is a info list group item</CListGroupItem> <CListGroupItem variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="light">This is a light list group item</CListGroupItem> <CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> List group </strong>
<strong> List group </strong> <small>variants active</small>
<small>variants active</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#">This is a default list group item</CListGroupItem> <CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem> <CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem> <CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem> <CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem> <CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem> <CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem> <CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem> <CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem> </CListGroup>
</CListGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> </CRow>
</CRow> <CRow>
<CRow> <CCol col="12">
<CCol col="12"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> List group </strong>
<strong> List group </strong> <small>inside cards</small>
<small>inside cards</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CCardGroup deck>
<CCardGroup deck> <CCard headerHtml="<b>Card with list group</b>">
<CCard headerHtml="<b>Card with list group</b>"> <CListGroup>
<CListGroup> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <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="card-text 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 ad sit ipsum anim Lorem.
ad sit ipsum anim Lorem. </p>
</p> </CCard>
</CCard> <CCard header="<b>Card with flush list group</b>">
<CCard header="<b>Card with flush list group</b>"> <CListGroup flush>
<CListGroup flush> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <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> <CCardBody>
<CCardBody> 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 ad sit ipsum anim Lorem.
ad sit ipsum anim Lorem. </CCardBody>
</CCardBody> </CCard>
</CCard> </CCardGroup>
</CCardGroup> </CCardBody>
</CCardBody> </CCard>
</CCard> </CCol>
</CCol> </CRow>
</CRow> <CRow>
<CRow> <CCol md="6">
<CCol md="6"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CListGroup>
<CListGroup> <CListGroupItem
<CListGroupItem href="#"
href="#" active
active class="flex-column align-items-start"
class="flex-column align-items-start" >
> <div class="d-flex w-100 justify-content-between">
<div class="d-flex w-100 justify-content-between"> <h5 class="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="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="flex-column align-items-start">
<CListGroupItem href="#" class="flex-column align-items-start"> <div class="d-flex w-100 justify-content-between">
<div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5>
<h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small>
<small class="text-muted">3 days ago</small> </div>
</div> <p class="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="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="flex-column align-items-start">
<CListGroupItem href="#" disabled class="flex-column align-items-start"> <div class="d-flex w-100 justify-content-between">
<div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">Disabled List group item</h5>
<h5 class="mb-1">Disabled List group item</h5> <small class="text-muted">3 days ago</small>
<small class="text-muted">3 days ago</small> </div>
</div> <p class="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="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> </CCard>
</CCard> </CCol>
</CCol> </CRow>
</CRow>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'list-groups' name: 'ListGroups'
} }
</script> </script>
src/views/base/Navbars.vue
+162 -197
View File
@@ -1,212 +1,177 @@
<template> <template>
<div class="wrapper"> <div>
<div> <CCard>
<!-- <CCard> <CCardHeader>
<CNavbar toggleable="md" light variant="light"> <i class="fa fa-align-justify"></i>
<CNavbarToggle class="hehe" @click="test2 = !test2"/> <strong> Bootstrap Navbar </strong>
<CLink class="navbar-brand">NavBar</CLink> <div class="card-header-actions">
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" > <a
<CNavbarNav pills class="navbar-nav"> href="https://coreui.io/vue/docs/3.0/components/Navbar"
<CNavItem> class="card-header-action"
hehehe1 rel="noreferrer noopener"
</CNavItem> target="_blank"
<CNavItem class="nav-item">
hehehe1
</CNavItem>
<CNavItem class="nav-item">
hehehe2
</CNavItem>
<DefaultHeaderDropdownAccnt/>
</CNavbarNav>
<CNavbarNav class="ml-auto">
<CDropdown right class="nav-item " toggle-classes="nav-link">
<CDropdownItem><i class="cui-file" /> Projects
<CBadge variant="primary">32</CBadge>
</CDropdownItem>
<CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
<CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCard> -->
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Navbar"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CNavbar
toggleable="md"
variant="info"
> >
<CNavbarToggle @click="show=!show"/> <small class="text-muted">docs</small>
<CNavbarBrand href="#">NavBar</CNavbarBrand> </a>
<CCollapse :show="show" navbar> </div>
<CNavbarNav> </CCardHeader>
<CNavItem href="#">Link</CNavItem> <CCardBody>
<CNavItem href="#" disabled>Disabled</CNavItem> <CNavbar
</CNavbarNav> toggleable="md"
variant="info"
>
<CNavbarToggle @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
<CCollapse :show="show" navbar>
<CNavbarNav>
<CNavItem href="#">Link</CNavItem>
<CNavItem href="#" disabled>Disabled</CNavItem>
</CNavbarNav>
<!-- Right aligned nav items --> <!-- Right aligned nav items -->
<CNavbarNav class="ml-auto"> <CNavbarNav class="ml-auto">
<CForm inline> <CForm inline>
<CFormInput <CFormInput
class="mr-sm-2" class="mr-sm-2"
placeholder="Search" placeholder="Search"
size="sm" size="sm"
/> />
<CButton variant="light" size="sm" class="my-2 my-sm-0"> <CButton variant="light" size="sm" class="my-2 my-sm-0">
Search Search
</CButton> </CButton>
</CForm> </CForm>
<CDropdown <CDropdown
button-html="Lang" button-html="Lang"
nav nav
placement="bottom-end" placement="bottom-end"
> >
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
nav
buttonHtml="<em>User</em>"
placement="bottom-end"
>
<CDropdownItem>Profile</CDropdownItem>
<CDropdownItem>Signout</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small>
</CCardHeader>
<CCardBody>
<!-- Image and text -->
<CNavbar variant="faded" light>
<CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
CoreuiVue
</CNavbarBrand>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" light variant="light">
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbarBrand>CoreuiVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar>
<CNavbarNav>
<span class="navbar-text">Navbar text</span>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" variant="primary">
<CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar>
<CNavbarNav>
<CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown
button-html="Lang"
right
nav
>
<CDropdownItem>EN</CDropdownItem> <CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem> <CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem> <CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem> <CDropdownItem>FA</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown
button-html="User" <CDropdown
right nav
nav buttonHtml="<em>User</em>"
> placement="bottom-end"
<CDropdownItem>Account</CDropdownItem> >
<CDropdownItem>Settings</CDropdownItem> <CDropdownItem>Profile</CDropdownItem>
</CDropdown> <CDropdownItem>Signout</CDropdownItem>
</CNavbarNav> </CDropdown>
</CCollapse> </CNavbarNav>
</CNavbar> </CCollapse>
</CCardBody> </CNavbar>
</CCard> </CCardBody>
<CCard> </CCard>
<CCardHeader> <CCard>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <CCardHeader>
<small>form</small> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
</CCardHeader> <small>brand</small>
<CCardBody> </CCardHeader>
<CNavbar light variant="light"> <CCardBody>
<CForm inline> <!-- Image and text -->
<CFormInput <CNavbar variant="faded" light>
class="mr-sm-2" <CNavbarBrand href="#">
placeholder="Search" <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
size="sm" CoreuiVue
/> </CNavbarBrand>
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton> </CNavbar>
</CForm> </CCardBody>
</CNavbar> </CCard>
</CCardBody> <CCard>
</CCard> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<CCardHeader> <small>text</small>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> </CCardHeader>
<small>input group</small> <CCardBody>
</CCardHeader> <CNavbar toggleable="sm" light variant="light">
<CCardBody> <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbar light variant="light"> <CNavbarBrand>CoreuiVue</CNavbarBrand>
<CForm inline> <CCollapse :show="navbarText" navbar>
<CFormInput <CNavbarNav>
class="mr-sm-2" <span class="navbar-text">Navbar text</span>
placeholder="Username" </CNavbarNav>
/> </CCollapse>
</CForm> </CNavbar>
</CNavbar> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
</div> <CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="sm" variant="primary">
<CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar>
<CNavbarNav>
<CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown
button-html="Lang"
right
nav
>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
button-html="User"
right
nav
>
<CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small>
</CCardHeader>
<CCardBody>
<CNavbar light variant="light">
<CForm inline>
<CFormInput
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small>
</CCardHeader>
<CCardBody>
<CNavbar light variant="light">
<CForm inline>
<CFormInput
class="mr-sm-2"
placeholder="Username"
/>
</CForm>
</CNavbar>
</CCardBody>
</CCard>
</div> </div>
</template> </template>
<script> <script>
import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
export default { export default {
name: 'navbars', name: 'Navbars',
components: {
DefaultHeaderDropdownAccnt
},
data () { data () {
return { return {
show: false, show: false,
src/views/base/Navs.vue
+156 -158
View File
@@ -1,167 +1,165 @@
<template> <template>
<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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank" >
> <small class="text-muted">docs</small>
<small class="text-muted">docs</small> </a>
</a> </div>
</div> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CNav>
<CNav> <CNavItem active>Active</CNavItem>
<CNavItem active>Active</CNavItem> <CNavItem title="Link"/>
<CNavItem title="Link"/> <CNavItem>Another Link</CNavItem>
<CNavItem>Another Link</CNavItem> <CNavItem disabled>Disabled</CNavItem>
<CNavItem disabled>Disabled</CNavItem> </CNav>
</CNav> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Navs </strong>
<strong> Bootstrap Navs </strong> <small>icons</small>
<small>icons</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CNav>
<CNav> <CNavItem active>
<CNavItem active> <i class="cui-basket-loaded"></i>
<i class="cui-basket-loaded"></i> </CNavItem>
</CNavItem> <CNavItem>
<CNavItem> Link
Link </CNavItem>
</CNavItem> <CNavItem>
<CNavItem> Another Link
Another Link </CNavItem>
</CNavItem> <CNavItem disabled>Disabled</CNavItem>
<CNavItem disabled>Disabled</CNavItem> </CNav>
</CNav> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Navs </strong>
<strong> Bootstrap Navs </strong> <small>tab style</small>
<small>tab style</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CNav tabs>
<CNav tabs> <CNavItem active>
<CNavItem active> Active
Active </CNavItem>
</CNavItem> <CNavItem>
<CNavItem> Link
Link </CNavItem>
</CNavItem> <CNavItem>
<CNavItem> Another Link
Another Link </CNavItem>
</CNavItem> <CNavItem disabled>Disabled</CNavItem>
<CNavItem disabled>Disabled</CNavItem> </CNav>
</CNav> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader @click="item++">
<CCardHeader @click="item++"> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Navs </strong>
<strong> Bootstrap Navs </strong> <small>pill style</small>
<small>pill style</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CNav pills>
<CNav pills> <CNavItem active>Active</CNavItem>
<CNavItem active>Active</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Another Link</CNavItem>
<CNavItem>Another Link</CNavItem> <CNavItem disabled>Disabled</CNavItem>
<CNavItem disabled>Disabled</CNavItem> </CNav>
</CNav> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Navs </strong>
<strong> Bootstrap Navs </strong> <small>fill tabs</small>
<small>fill tabs</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CNav fill tabs>
<CNav fill tabs> <CNavItem active>Active</CNavItem>
<CNavItem active>Active</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link with a long name </CNavItem>
<CNavItem>Link with a long name </CNavItem> <CNavItem disabled>Disabled</CNavItem>
<CNavItem disabled>Disabled</CNavItem> </CNav>
</CNav> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Navs </strong>
<strong> Bootstrap Navs </strong> <small>justified tabs</small>
<small>justified tabs</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CNav justified tabs>
<CNav justified tabs> <CNavItem active>Active</CNavItem>
<CNavItem active>Active</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link with a long name </CNavItem>
<CNavItem>Link with a long name </CNavItem> <CNavItem disabled>Disabled</CNavItem>
<CNavItem disabled>Disabled</CNavItem> </CNav>
</CNav> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Navs </strong>
<strong> Bootstrap Navs </strong> <small>dropdown support</small>
<small>dropdown support</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CNav pills>
<CNav pills> <CNavItem active>Active</CNavItem>
<CNavItem active>Active</CNavItem> <CNavItem>Link</CNavItem>
<CNavItem>Link</CNavItem> <CDropdown
<CDropdown id="nav7_ddown"
id="nav7_ddown" nav
nav placement="bottom-end"
placement="bottom-end" button-content="Dropdown"
button-content="Dropdown" >
> <!-- <a class="nav-link 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/> <CDropdownItem>three</CDropdownItem>
<CDropdownItem>three</CDropdownItem> </CDropdown>
</CDropdown> </CNav>
</CNav> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Navs </strong>
<strong> Bootstrap Navs </strong> <small>vertical variation</small>
<small>vertical variation</small> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CRow>
<CRow> <CCol col="3" class="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> <CNavItem>Another Link</CNavItem>
<CNavItem>Another Link</CNavItem> <CNavItem disabled>Disabled</CNavItem>
<CNavItem disabled>Disabled</CNavItem> </CNav>
</CNav> </CCol>
</CCol> </CRow>
</CRow> </CCardBody>
</CCardBody> </CCard>
</CCard>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'navs', name: 'Navs',
data () { data () {
return { return {
item: 2 item: 2
src/views/base/Paginations.vue
+70 -72
View File
@@ -1,91 +1,89 @@
<template> <template>
<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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank" >
> <small class="text-muted">docs</small>
<small class="text-muted">docs</small> </a>
</a> </div>
</div> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <h6>Default</h6>
<h6>Default</h6> <CPagination
:active-page.sync="currentPage"
:pages="10"
responsive
/>
<br>
<h6>Small</h6>
<CPagination
size="sm"
:active-page.sync="currentPage"
:pages="10"/>
<br>
<div>
<h6>Large</h6>
<CPagination <CPagination
size="lg"
:active-page.sync="currentPage" :active-page.sync="currentPage"
:pages="10" :pages="10"
responsive responsive
/> />
<br> <br>
</div>
<h6>Small</h6> <div>currentPage: {{currentPage}}</div>
<CPagination </CCardBody>
size="sm" </CCard>
:active-page.sync="currentPage" <CCard>
:pages="10"/> <CCardHeader>
<br> <i class="fa fa-align-justify"></i>
<strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<div> <h6>Center alignment</h6>
<h6>Large</h6> <CPagination
<CPagination align="center"
size="lg" :pages="10"
:active-page.sync="currentPage" :active-page.sync="currentPage"
:pages="10" />
responsive <br>
/>
<br>
</div>
<div>currentPage: {{currentPage}}</div> <h6>Right (end) alignment</h6>
</CCardBody> <CPagination
</CCard> align="end"
<CCard> :active-page.sync="currentPage"
<CCardHeader> :pages="10"
<i class="fa fa-align-justify"></i> />
<strong> Pagination </strong> <br>
<small>alignment</small>
</CCardHeader>
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<h6>Center alignment</h6> <div>currentPage: {{currentPage}}</div>
<CPagination </CCardBody>
align="center" </CCard>
:pages="10"
:active-page.sync="currentPage"
/>
<br>
<h6>Right (end) alignment</h6>
<CPagination
align="end"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'paginations', name: 'Paginations',
data () { data () {
return { return {
currentPage: 3, currentPage: 3,
src/views/base/Popovers.vue
+83 -85
View File
@@ -1,101 +1,99 @@
<template> <template>
<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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank" >
> <small class="text-muted">docs</small>
<small class="text-muted">docs</small> </a>
</a> </div>
</div> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CRow>
<CRow> <CCol col="4">
<CCol col="4"> <div class="my-3 text-center">
<div class="my-3 text-center"> <CButton
<CButton variant="primary"
variant="primary" v-c-popover="{
v-c-popover="{ header: 'Popover header',
header: 'Popover header', content: 'I am popover content!'
content: 'I am popover content!' }"
}" >
> Hover Me
Hover Me </CButton>
</CButton> </div>
</div> </CCol>
</CCol> <CCol col="4">
<CCol col="4"> <div class="my-3 text-center">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover="{
header: 'Popover!',
content: 'I start <strong>open</strong>',
active: true
}"
textHtml="Hover me"
/>
</div>
</CCol>
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover.click="{
header: 'Popover!',
content: 'I am showing on click and hiding on click outside tooltip!',
placement: 'bottom'
}"
>
Click me
</CButton>
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<CCardBody class="my-3">
<CRow>
<CCol
md="4"
class="py-4 text-center"
v-for="placement in placements"
:key="placement"
>
<CButton <CButton
variant="primary" variant="primary"
v-c-popover="{ v-c-popover="{
header: 'Popover!', header: 'Popover!',
content: `Placement ${placement}`, content: 'I start <strong>open</strong>',
placement active: true
}"
textHtml="Hover me"
/>
</div>
</CCol>
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover.click="{
header: 'Popover!',
content: 'I am showing on click and hiding on click outside tooltip!',
placement: 'bottom'
}" }"
> >
{{ placement }} Click me
</CButton> </CButton>
</CCol> </div>
</CRow> </CCol>
</CCardBody> </CRow>
</CCard> </CCardBody>
</div> </CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<CCardBody class="my-3">
<CRow>
<CCol
md="4"
class="py-4 text-center"
v-for="placement in placements"
:key="placement"
>
<CButton
variant="primary"
v-c-popover="{
header: 'Popover!',
content: `Placement ${placement}`,
placement
}"
>
{{ placement }}
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'popovers', name: 'Popovers',
data () { data () {
return { return {
placements: [ placements: [
src/views/base/ProgressBars.vue
+201 -205
View File
@@ -1,214 +1,212 @@
<template> <template>
<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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
</CProgress>
<CButton
@click="clicked"
variant="secondary"
class="mt-4"
> >
Click me to animate progress bars <small class="text-muted">docs</small>
</CButton> </a>
</CCardBody> </div>
</CCard> </CCardHeader>
<CCard> <CCardBody>
<CCardHeader> <CProgress :value="counter" :max="max" show-progress animated></CProgress>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small> <CProgress class="mt-1" :max="max" show-value>
</CCardHeader> <CProgressBar :value="counter*(6/10)" variant="success"/>
<CCardBody> <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<h6>No label</h6> <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
<CProgress :value="value" :max="max2" class="mb-3"/> </CProgress>
<h6>Value label</h6> <CButton
<CProgress :value="value" :max="max2" show-value class="mb-3"/> @click="clicked"
<h6>Progress label</h6> variant="secondary"
<CProgress :value="value" :max="max2" show-progress class="mb-3"/> class="mt-4"
<h6>Value label with precision</h6> >
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/> Click me to animate progress bars
<h6>Progress label with precision</h6> </CButton>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
<i class="fa fa-align-justify"></i> </CCardHeader>
<strong> Progress </strong> <CCardBody>
<small>width</small> <h6>No label</h6>
</CCardHeader> <CProgress :value="value" :max="max2" class="mb-3"/>
<CCardBody> <h6>Value label</h6>
<h6>Default width</h6> <CProgress :value="value" :max="max2" show-value class="mb-3"/>
<CProgress :value="value3" class="mb-3"/> <h6>Progress label</h6>
<h6>Custom widths</h6> <CProgress :value="value" :max="max2" show-progress class="mb-3"/>
<CProgress :value="value3" class="w-75 mb-2"/> <h6>Value label with precision</h6>
<CProgress :value="value3" class="w-50 mb-2"/> <CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
<CProgress :value="value3" class="w-25"/> <h6>Progress label with precision</h6>
</CCardBody> <CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
</CCard> </CCardBody>
<CCard> </CCard>
<CCardHeader> <CCard>
<i class="fa fa-align-justify"></i> <CCardHeader>
<strong> Progress </strong> <i class="fa fa-align-justify"></i>
<small>height</small> <strong> Progress </strong>
</CCardHeader> <small>width</small>
<CCardBody> </CCardHeader>
<h6>Default height</h6> <CCardBody>
<CProgress :value="value3" show-progress class="mb-3"/> <h6>Default width</h6>
<h6>Custom heights</h6> <CProgress :value="value3" class="mb-3"/>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"/> <h6>Custom widths</h6>
<CProgress height="20px" :value="value3" show-progress class="mb-2"/> <CProgress :value="value3" class="w-75 mb-2"/>
<CProgress height="2px" :value="value3"/> <CProgress :value="value3" class="w-50 mb-2"/>
</CCardBody> <CProgress :value="value3" class="w-25"/>
</CCard> </CCardBody>
<CCard> </CCard>
<CCardHeader> <CCard>
<i class="fa fa-align-justify"></i> <CCardHeader>
<strong> Progress </strong> <i class="fa fa-align-justify"></i>
<small>variants</small> <strong> Progress </strong>
</CCardHeader> <small>height</small>
<CCardBody> </CCardHeader>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1"> <CCardBody>
<div class="col-sm-2">{{ bar.variant }}:</div> <h6>Default height</h6>
<div class="col-sm-10 pt-1"> <CProgress :value="value3" show-progress class="mb-3"/>
<CProgress <h6>Custom heights</h6>
:value="bar.value" <CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
:variant="bar.variant" <CProgress height="20px" :value="value3" show-progress class="mb-2"/>
:key="bar.variant" <CProgress height="2px" :value="value3"/>
/> </CCardBody>
</div> </CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
<CProgress
:value="bar.value"
:variant="bar.variant"
:key="bar.variant"
/>
</div> </div>
</CCardBody> </div>
</CCard> </CCardBody>
<CCard> </CCard>
<CCardHeader> <CCard>
<i class="fa fa-align-justify"></i> <CCardHeader>
<strong> Progress </strong> <i class="fa fa-align-justify"></i>
<small>striped</small> <strong> Progress </strong>
</CCardHeader> <small>striped</small>
<CCardBody> </CCardHeader>
<CProgress <CCardBody>
:value="25" <CProgress
variant="success" :value="25"
:striped="striped" variant="success"
class="mb-2" :striped="striped"
/> class="mb-2"
<CProgress />
:value="50" <CProgress
variant="info" :value="50"
:striped="striped" variant="info"
class="mb-2" :striped="striped"
/> class="mb-2"
<CProgress />
:value="75" <CProgress
variant="warning" :value="75"
:striped="striped" variant="warning"
class="mb-2" :striped="striped"
/> class="mb-2"
<CProgress />
:value="100" <CProgress
variant="danger" :value="100"
:striped="striped" variant="danger"
class="mb-2" :striped="striped"
/> class="mb-2"
<CButton variant="secondary" @click="striped = !striped"> />
{{ striped ? 'Remove' : 'Add'}} Striped <CButton variant="secondary" @click="striped = !striped">
</CButton> {{ striped ? 'Remove' : 'Add'}} Striped
</CCardBody> </CButton>
</CCard> </CCardBody>
<CCard> </CCard>
<CCardHeader> <CCard>
<i class="fa fa-align-justify"></i> <CCardHeader>
<strong> Progress </strong> <i class="fa fa-align-justify"></i>
<small>animated</small> <strong> Progress </strong>
</CCardHeader> <small>animated</small>
<CCardBody> </CCardHeader>
<CProgress <CCardBody>
:value="25" <CProgress
variant="success" :value="25"
striped variant="success"
:animated="animate" striped
class="mb-2" :animated="animate"
/> class="mb-2"
<CProgress />
:value="50" <CProgress
variant="info" :value="50"
striped variant="info"
:animated="animate" striped
class="mb-2" :animated="animate"
/> class="mb-2"
<CProgress />
:value="75" <CProgress
variant="warning" :value="75"
striped variant="warning"
:animated="animate" striped
class="mb-2" :animated="animate"
/> class="mb-2"
<CProgress />
:value="100" <CProgress
variant="danger" :value="100"
:animated="animate" variant="danger"
class="mb-3" :animated="animate"
/> class="mb-3"
<CButton variant="secondary" @click="animate = !animate"> />
{{ animate ? 'Stop' : 'Start'}} Animation <CButton variant="secondary" @click="animate = !animate">
</CButton> {{ animate ? 'Stop' : 'Start'}} Animation
</CCardBody> </CButton>
</CCard> </CCardBody>
<CCard> </CCard>
<CCardHeader> <CCard>
<i class="fa fa-align-justify"></i> <CCardHeader>
<strong> Progress </strong> <i class="fa fa-align-justify"></i>
<small>multiple bars</small> <strong> Progress </strong>
</CCardHeader> <small>multiple bars</small>
<CCardBody> </CCardHeader>
<CProgress :max="max3" class="mb-3"> <CCardBody>
<CProgressBar variant="primary" :value="values[0]"/> <CProgress :max="max3" class="mb-3">
<CProgressBar variant="success" :value="values[1]"/> <CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="info" :value="values[2]"/> <CProgressBar variant="success" :value="values[1]"/>
</CProgress> <CProgressBar variant="info" :value="values[2]"/>
<CProgress show-progress :max="max3" class="mb-3"> </CProgress>
<CProgressBar variant="primary" :value="values[0]"/> <CProgress show-progress :max="max3" class="mb-3">
<CProgressBar variant="success" :value="values[1]"/> <CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="info" :value="values[2]"/> <CProgressBar variant="success" :value="values[1]"/>
</CProgress> <CProgressBar variant="info" :value="values[2]"/>
<CProgress show-value striped :max="max3" class="mb-3"> </CProgress>
<CProgressBar variant="primary" :value="values[0]"/> <CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar variant="success" :value="values[1]"/> <CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="info" :value="values[2]"/> <CProgressBar variant="success" :value="values[1]"/>
</CProgress> <CProgressBar variant="info" :value="values[2]"/>
<CProgress :max="max3" class="mb-3"> </CProgress>
<CProgressBar variant="primary" :value="values[0]" show-progress/> <CProgress :max="max3" class="mb-3">
<CProgressBar variant="success" :value="values[1]" animated show-progress/> <CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/> <CProgressBar variant="success" :value="values[1]" animated show-progress/>
</CProgress> <CProgressBar variant="info" :value="values[2]" striped show-progress/>
</CCardBody> </CProgress>
</CCard> </CCardBody>
</div> </CCard>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'progress-bars', name: 'ProgressBars',
data () { data () {
return { return {
counter: 73, counter: 73,
@@ -235,8 +233,6 @@ export default {
methods: { methods: {
clicked () { clicked () {
this.counter = Math.random() * this.max this.counter = Math.random() * this.max
// console.log('Change progress to ' +
// Math.round(this.counter * 100) / 100)
} }
}, },
mounted () { mounted () {
src/views/base/Switches.vue
+21 -10
View File
@@ -526,21 +526,33 @@
<script> <script>
export default { export default {
name: 'switches', name: 'Switches',
data () { data () {
return { return {
variants:[ variants: [
'primary','secondary','warning','success','info','danger','light','dark' 'primary','secondary','warning','success','info','danger','light','dark'
], ],
fields: [ fields: [
{key: 'size'}, { key: 'size' },
{key: 'example'}, { key: 'example' },
{key: 'size_prop', label: 'Size prop'} { key: 'size_prop', label: 'Size prop' }
], ],
items: [ items: [
{size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'}, {
{size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'}, size: 'Large',
{size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'} example: { shape: '3d', variant: 'primary', size: 'lg', checked: true },
size_prop: 'Add following prop <code>size="lg"</code>'
},
{
size: 'Normal',
example: { shape: '3d', variant: 'primary', size: '', checked: true },
size_prop: '-'
},
{
size: 'Small',
example: {shape: '3d', variant: 'primary', size: 'sm', checked: true},
size_prop: 'Add following prop <code>size="sm"</code>'
}
], ],
checker: 'yes', checker: 'yes',
radio: 'primary', radio: 'primary',
@@ -551,8 +563,7 @@ export default {
labelTxt: { labelTxt: {
labelOn: 'yes', labelOn: 'yes',
labelOff: 'no' labelOff: 'no'
}, }
} }
} }
} }
src/views/base/Table.vue
+2 -2
View File
@@ -23,7 +23,7 @@
<script> <script>
export default { export default {
name: 'TableWrapper', name: 'Table',
props: { props: {
items: Array, items: Array,
fields: { fields: {
@@ -49,7 +49,7 @@ export default {
: status === 'Inactive' ? 'secondary' : status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning' : status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary' : status === 'Banned' ? 'danger' : 'primary'
}, }
} }
} }
</script> </script>
src/views/base/Tables.vue
+28 -33
View File
@@ -137,10 +137,7 @@
/> />
</CCol> </CCol>
</CRow> </CRow>
</div> </div>
</template> </template>
<script> <script>
@@ -154,42 +151,40 @@ 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: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}, { 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'}, { 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'}, { 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'}, { 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'}, { 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'}, { 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: 'table-success'}, { 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'}, { 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'}, { 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'}, { 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: 'table-info'}, { 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'}, { 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'}, { 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'}, { username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'}, { username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'}, { username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'}, { username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'}, { username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:2.3, username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'}, { username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'}, { 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'}, { 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'}, { 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: 'table-danger'}, { 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'}, { 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'} { username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
] ]
export default { export default {
name: 'tables', name: 'Tables',
components: { CTableWrapper }, components: { CTableWrapper },
data () { data () {
return { return {
items: items, items,
fields: fields, fields,
page: 1,
pages: null,
details: [], details: [],
} }
}, },
src/views/base/Tabs.vue
+5 -5
View File
@@ -25,7 +25,7 @@
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Profile" > <CTab title-html="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -57,7 +57,7 @@
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Profile" > <CTab title-html="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -116,7 +116,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<!-- <CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Tabs with icons Tabs with icons
@@ -156,7 +156,7 @@
</CTabs> </CTabs>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> --> </CCol>
<CCol xs="12" lg="6"> <CCol xs="12" lg="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
@@ -204,7 +204,7 @@
<script> <script>
export default { export default {
name: 'tabs', name: 'Tabs',
data () { data () {
return { return {
tabs: [ tabs: [
src/views/base/Tooltips.vue
+81 -83
View File
@@ -1,95 +1,93 @@
<template> <template>
<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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank" >
> <small class="text-muted">docs</small>
<small class="text-muted">docs</small> </a>
</a> </div>
</div> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <CRow>
<CCol col="4">
<div class="text-center my-3">
<CButton
variant="secondary"
v-c-tooltip.hover.click="'I am a tooltip!'"
>
Hover Me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="text-center my-3">
<CButton
v-c-tooltip="{content: 'I start open!', active:true }"
variant="secondary"
>
Hover me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="text-center my-3">
<CButton
variant="secondary"
v-c-tooltip.click="
'I am showing on click and hiding on click outside tooltip!'
"
>
Click me
</CButton>
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="my-3">
<CRow> <CRow>
<CCol col="4"> <CCol
<div class="text-center my-3"> md="4"
<CButton class="py-4 text-center"
variant="secondary" v-for="placement in placements"
v-c-tooltip.hover.click="'I am a tooltip!'" :key="placement"
> >
Hover Me <CButton
</CButton> variant="primary"
</div> v-c-tooltip.hover="{
</CCol> content: `Placement ${placement}`,
<CCol col="4"> placement
<div class="text-center my-3"> }"
<CButton >
v-c-tooltip="{content: 'I start open!', active:true }" {{ placement }}
variant="secondary" </CButton>
>
Hover me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="text-center my-3">
<CButton
variant="secondary"
v-c-tooltip.click="
'I am showing on click and hiding on click outside tooltip!'
"
>
Click me
</CButton>
</div>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </div>
</CCard> </CCardBody>
<CCard> </CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="my-3">
<CRow>
<CCol
md="4"
class="py-4 text-center"
v-for="placement in placements"
:key="placement"
>
<CButton
variant="primary"
v-c-tooltip.hover="{
content: `Placement ${placement}`,
placement
}"
>
{{ placement }}
</CButton>
</CCol>
</CRow>
</div>
</CCardBody>
</CCard>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'tooltips', name: 'Tooltips',
data () { data () {
return { return {
placements: [ placements: [
src/views/buttons/BrandButtons.vue
+174 -174
View File
@@ -1,183 +1,183 @@
<template> <template>
<div> <CRow>
<CRow> <CCol col="12">
<CCol col="12"> <CCard>
<CCard> <CCardHeader>
<CCardHeader> <strong>Brand Button</strong>
<strong>Brand Button</strong> <div class="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank" >
> <small class="text-muted">docs</small>
<small class="text-muted">docs</small> </a>
</a> </div>
</div> </CCardHeader>
</CCardHeader> <CCardBody>
<CCardBody> <small>Usage </small>
<small>Usage </small> <code>{{ $options.usage }}</code>
<code> <hr/>
&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt; <h6>
</code> Size Small
<hr/> <small>Add <code>size="sm"</code></small>
<h6> </h6>
Size Small <p>
<small>Add <code>size="sm"</code></small> <template v-for="(brandName, key) in $options.brands">
</h6> <CButton
<p> :name="brandName"
<template v-for="(brandName, key) in $options.brands"> size="sm"
<CButton :key="key"
:name="brandName" :variant="brandName"
size="sm" >
:key="key" <CIcon :name="brandName"/>
:variant="brandName" <span>{{brandName}}</span>
> </CButton>
<CIcon :name="brandName"/> </template>
<span>{{brandName}}</span> </p>
</CButton> <h6>Size Normal</h6>
</template> <p>
</p> <template v-for="(brandName, key) in $options.brands">
<h6>Size Normal</h6> <CButton
<p> :name="brandName"
<template v-for="(brandName, key) in $options.brands"> :key="key"
<CButton :variant="brandName"
:name="brandName" >
:key="key" <CIcon :name="brandName"/>
:variant="brandName" <span>{{brandName}}</span>
> </CButton>
<CIcon :name="brandName"/> </template>
<span>{{brandName}}</span> </p>
</CButton> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
</template> <p>
</p> <template v-for="(brandName, key) in $options.brands">
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> <CButton
<p> :name="brandName"
<template v-for="(brandName, key) in $options.brands"> size="lg"
<CButton :key="key"
:name="brandName" :variant="brandName"
size="lg" >
:key="key" <CIcon :name="brandName"/>
:variant="brandName" <span>{{brandName}}</span>
> </CButton>
<CIcon :name="brandName"/> </template>
<span>{{brandName}}</span> </p>
</CButton> </CCardBody>
</template> </CCard>
</p> </CCol>
</CCardBody> <CCol col="12">
</CCard> <CCard>
</CCol> <CCardHeader>
<CCol col="12"> <strong>Brand Button </strong> <small>Icons only</small>
<CCard> </CCardHeader>
<CCardHeader> <CCardBody>
<strong>Brand Button </strong> <small>Icons only</small> <small>Usage </small>
</CCardHeader> <code>{{ $options.iconsOnlyUsage }}</code>
<CCardBody> <hr/>
<small>Usage </small> <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<code> <p>
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }} <template v-for="(brandName, key) in $options.brands">
</code> <CButton
<hr/> :name="brandName"
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> size="sm"
<p> :key="key"
<template v-for="(brandName, key) in $options.brands"> :variant="brandName"
<CButton >
:name="brandName" <CIcon :name="brandName"/>
size="sm" </CButton>
:key="key" </template>
:variant="brandName" </p>
> <h6>Size Normal</h6>
<CIcon :name="brandName"/> <p>
</CButton> <template v-for="(brandName, key) in $options.brands">
</template> <CButton
</p> :name="brandName"
<h6>Size Normal</h6> :key="key"
<p> :variant="brandName"
<template v-for="(brandName, key) in $options.brands"> >
<CButton <CIcon :name="brandName"/>
:name="brandName" </CButton>
:key="key" </template>
:variant="brandName" </p>
> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<CIcon :name="brandName"/> <p>
</CButton> <template v-for="(brandName, key) in $options.brands">
</template> <CButton
</p> :name="brandName"
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> size="lg"
<p> :key="key"
<template v-for="(brandName, key) in $options.brands"> :variant="brandName"
<CButton >
:name="brandName" <CIcon :name="brandName"/>
size="lg" </CButton>
:key="key" </template>
:variant="brandName" </p>
> </CCardBody>
<CIcon :name="brandName"/> </CCard>
</CButton> </CCol>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol col="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Brand Button </strong> <small>Text only</small> <strong>Brand Button </strong> <small>Text only</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code> <small>Usage </small>
<hr/> <code>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> {{ $options.textOnlyUsage }}
<p> </code>
<template v-for="(brandName, key) in $options.brands"> <hr/>
<CButton <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
:name="brandName" <p>
size="sm" <template v-for="(brandName, key) in $options.brands">
:key="key" <CButton
:variant="brandName" :name="brandName"
> size="sm"
<span>{{brandName}}</span> :key="key"
</CButton> :variant="brandName"
</template> >
</p> <span>{{brandName}}</span>
<h6>Size Normal</h6> </CButton>
<p> </template>
<template v-for="(brandName, key) in $options.brands"> </p>
<CButton <h6>Size Normal</h6>
:name="brandName" <p>
:key="key" <template v-for="(brandName, key) in $options.brands">
:variant="brandName" <CButton
> :name="brandName"
<span>{{brandName}}</span> :key="key"
</CButton> :variant="brandName"
</template> >
</p> <span>{{brandName}}</span>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> </CButton>
<p> </template>
<template v-for="(brandName, key) in $options.brands"> </p>
<CButton <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
:name="brandName" <p>
size="lg" <template v-for="(brandName, key) in $options.brands">
:key="key" <CButton
:variant="brandName" :name="brandName"
> size="lg"
<span>{{brandName}}</span> :key="key"
</CButton> :variant="brandName"
</template> >
</p> <span>{{brandName}}</span>
</CCardBody> </CButton>
</CCard> </template>
</CCol> </p>
</CRow> </CCardBody>
</div> </CCard>
</CCol>
</CRow>
</template> </template>
<script> <script>
export default { export default {
name: 'brand-buttons', name: 'BrandButtons',
usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
brands: [ brands: [
'facebook', 'facebook',
'twitter', 'twitter',
src/views/buttons/ButtonGroups.vue
+203 -215
View File
@@ -1,221 +1,209 @@
<template> <template>
<div class="wrapper"> <CRow>
<div> <CCol col="12">
<CRow> <CCard>
<CCol col="12" > <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i>
<CCardHeader> <strong> Bootstrap button group</strong>
<i class="fa fa-align-justify"></i> <div class="card-header-actions">
<strong> Bootstrap button group</strong> <a
<div class="card-header-actions"> href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
<a class="card-header-action"
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" rel="noreferrer noopener"
class="card-header-action" target="_blank"
rel="noreferrer noopener" >
target="_blank" <small class="text-muted">docs</small>
> </a>
<small class="text-muted">docs</small> </div>
</a> </CCardHeader>
</div> <CCardBody>
</CCardHeader> <div>
<CCardBody> <CButtonGroup>
<div> <CButton variant="secondary">One</CButton>
<CButtonGroup> <CButton variant="secondary">Two</CButton>
<CButton variant="secondary">One</CButton> <CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Two</CButton> <CButton variant="secondary">Four</CButton>
<CButton variant="secondary">Three</CButton> <CButton variant="secondary" class="d-sm-down-none">Five</CButton>
<CButton variant="secondary">Four</CButton> </CButtonGroup>
<CButton variant="secondary" class="d-sm-down-none">Five</CButton> <br><br>
</CButtonGroup> <CButtonGroup>
<br><br> <CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButtonGroup> <CButton variant="info">Info</CButton>
<CButton class="d-sm-down-none" variant="success">Success</CButton> <CButton variant="warning">Warn</CButton>
<CButton variant="info">Info</CButton> <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="warning">Warn</CButton> <CButton variant="danger">Danger</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton> <CButton variant="link">Link</CButton>
<CButton variant="danger">Danger</CButton> </CButtonGroup>
<CButton variant="link">Link</CButton> </div>
</CButtonGroup> </CCardBody>
</div> </CCard>
</CCardBody> </CCol>
</CCard> <CCol col="12">
</CCol> <CCard>
<CCol col="12"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i>
<CCardHeader> <strong> Button group </strong>sizing
<i class="fa fa-align-justify"></i> </CCardHeader>
<strong> Button group </strong>sizing <CCardBody>
</CCardHeader> <div>
<CCardBody> <CButtonGroup>
<div> <CButton variant="secondary">Left</CButton>
<CButtonGroup> <CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Left</CButton> <CButton variant="secondary">Right</CButton>
<CButton variant="secondary">Middle</CButton> </CButtonGroup>
<CButton variant="secondary">Right</CButton> <br><br>
</CButtonGroup> <CButtonGroup size="sm">
<br><br> <CButton variant="secondary">Left</CButton>
<CButtonGroup size="sm"> <CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Left</CButton> <CButton variant="secondary">Right</CButton>
<CButton variant="secondary">Middle</CButton> </CButtonGroup>
<CButton variant="secondary">Right</CButton> <br><br>
</CButtonGroup> <CButtonGroup size="lg">
<br><br> <CButton variant="secondary">Left</CButton>
<CButtonGroup size="lg"> <CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Left</CButton> <CButton variant="secondary">Right</CButton>
<CButton variant="secondary">Middle</CButton> </CButtonGroup>
<CButton variant="secondary">Right</CButton> </div>
</CButtonGroup> </CCardBody>
</div> </CCard>
</CCardBody> </CCol>
</CCard> <CCol col="12">
</CCol> <CCard>
<CCol col="12"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
<CCardHeader> </CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support <CCardBody>
</CCardHeader> <div>
<CCardBody> <CButtonGroup>
<div> <CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
<CButtonGroup> <CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton> <CDropdown right text="Menu" variant="success">
<CButton variant="secondary" class="d-sm-down-none">Button 2</CButton> <CDropdownItem>Item 1</CDropdownItem>
<CDropdown right text="Menu" variant="success"> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 1</CDropdownItem> <CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 3</CDropdownItem>
<CDropdownDivider></CDropdownDivider> </CDropdown>
<CDropdownItem>Item 3</CDropdownItem> <CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
</CDropdown> <CDropdown right split text="Split Menu" variant="info">
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton> <CDropdownItem>Item 1</CDropdownItem>
<CDropdown right split text="Split Menu" variant="info"> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 1</CDropdownItem> <CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 2</CDropdownItem> <CDropdownItem>Item 3</CDropdownItem>
<CDropdownDivider></CDropdownDivider> </CDropdown>
<CDropdownItem>Item 3</CDropdownItem> </CButtonGroup>
</CDropdown> </div>
</CButtonGroup> </CCardBody>
</div> </CCard>
</CCardBody> </CCol>
</CCard> <CCol col="12">
</CCol> <CCard>
<CCol col="12"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i>
<CCardHeader> <strong> Button group </strong>vertical variation
<i class="fa fa-align-justify"></i> </CCardHeader>
<strong> Button group </strong>vertical variation <CCardBody>
</CCardHeader> <div>
<CCardBody> <CButtonGroup vertical>
<div> <CButton variant="secondary">Top</CButton>
<CButtonGroup vertical> <CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Top</CButton> <CButton variant="secondary">Bottom</CButton>
<CButton variant="secondary">Middle</CButton> </CButtonGroup>
<CButton variant="secondary">Bottom</CButton> </div>
</CButtonGroup> </CCardBody>
</div> </CCard>
</CCardBody> </CCol>
</CCard> <CCol col="12">
</CCol> <CCard>
<CCol col="12"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i>
<CCardHeader> <strong> Button toolbar </strong>
<i class="fa fa-align-justify"></i> <small>with button groups</small>
<strong> Button toolbar </strong> <!-- <div class="card-header-actions">
<small>with button groups</small> <a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<!-- <div class="card-header-actions"> <small class="text-muted">docs</small>
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank"> </a>
<small class="text-muted">docs</small> </div> -->
</a> </CCardHeader>
</div> --> <CCardBody>
</CCardHeader> <div>
<CCardBody> <CButtonToolbar aria-label="Toolbar with button groups">
<div> <CButtonGroup class="mx-1">
<CButtonToolbar aria-label="Toolbar with button groups"> <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButtonGroup class="mx-1"> <CButton variant="secondary">&lsaquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton> </CButtonGroup>
<CButton variant="secondary">&lsaquo;</CButton> <CButtonGroup class="mx-1">
</CButtonGroup> <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButtonGroup class="mx-1"> <CButton variant="secondary">Undo</CButton>
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton> <CButton variant="secondary">Redo</CButton>
<CButton variant="secondary">Undo</CButton> </CButtonGroup>
<CButton variant="secondary">Redo</CButton> <CButtonGroup class="mx-1">
</CButtonGroup> <CButton variant="secondary">&rsaquo;</CButton>
<CButtonGroup class="mx-1"> <CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
<CButton variant="secondary">&rsaquo;</CButton> </CButtonGroup>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton> </CButtonToolbar>
</CButtonGroup> </div>
</CButtonToolbar> <hr class="d-sm-down-none"/>
</div> <div>
<hr class="d-sm-down-none"/> <CButtonToolbar
<div> aria-label="Toolbar with button groups and input groups"
<CButtonToolbar class="d-sm-down-none"
aria-label="Toolbar with button groups and input groups" >
class="d-sm-down-none" <CButtonGroup size="sm" class="mx-1">
> <CButton variant="secondary">New</CButton>
<CButtonGroup size="sm" class="mx-1"> <CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">New</CButton> </CButtonGroup>
<CButton variant="secondary">Edit</CButton> <CFormInput
</CButtonGroup> class="mb-0 w-25 mx-1"
<CFormInput size="sm"
class="mb-0 w-25 mx-1" prepend-html="$"
size="sm" append-html=".00"
prepend-html="$" value="100"
append-html=".00" />
value="100" <CFormSelect
/> class="mb-0 w-25 mx-1"
<CFormSelect size="sm"
class="mb-0 w-25 mx-1" prepend-html="Size"
size="sm" value="Medium"
prepend-html="Size" :options="['Large','Medium','Small']"
value="Medium" custom
:options="['Large','Medium','Small']" />
custom <CButtonGroup size="sm" class="mx-1">
/> <CButton variant="secondary">Save</CButton>
<CButtonGroup size="sm" class="mx-1"> <CButton variant="secondary">Cancel</CButton>
<CButton variant="secondary">Save</CButton> </CButtonGroup>
<CButton variant="secondary">Cancel</CButton> </CButtonToolbar>
</CButtonGroup> </div>
</CButtonToolbar> <hr/>
</div> <div>
<hr/> <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<div> <CButtonGroup class="mx-1 d-sm-down-none">
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu"> <CButton variant="secondary">New</CButton>
<CButtonGroup class="mx-1 d-sm-down-none"> <CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">New</CButton> <CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Edit</CButton> </CButtonGroup>
<CButton variant="secondary">Undo</CButton> <CDropdown
</CButtonGroup> variant="secondary"
<CDropdown class="mx-1"
variant="secondary" placement="bottom-end"
class="mx-1" button-content="Menu"
placement="bottom-end" >
button-content="Menu" <CDropdownItem>Item 1</CDropdownItem>
> <CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 1</CDropdownItem> <CDropdownItem>Item 3</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem> </CDropdown>
<CDropdownItem>Item 3</CDropdownItem> <CButtonGroup class="mx-1">
</CDropdown> <CButton variant="secondary">Save</CButton>
<CButtonGroup class="mx-1"> <CButton variant="secondary">Cancel</CButton>
<CButton variant="secondary">Save</CButton> </CButtonGroup>
<CButton variant="secondary">Cancel</CButton> </CButtonToolbar>
</CButtonGroup> </div>
</CButtonToolbar> </CCardBody>
</div> </CCard>
</CCardBody> </CCol>
</CCard> </CRow>
</CCol>
</CRow>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'button-groups', name: 'ButtonGroups',
data () {
return {
myToggle: false,
myToggle2: false,
itemsCount: 33
}
}
} }
</script> </script>
src/views/buttons/Dropdowns.vue
+323 -325
View File
@@ -1,360 +1,358 @@
<template> <template>
<div class="wrapper"> <div>
<div> <CRow>
<CRow> <CCol col="12" md="6">
<CCol col="12" md="6"> <CCard>
<CCard> <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="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" rel="noreferrer noopener"
rel="noreferrer noopener" target="_blank"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown Button"
class="m-2"
variant="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</div>
<!-- <div>
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
</CDropdown>
</div> -->
<div>
<CDropdown
toggler-text="Dropdown with divider"
class="m-2"
variant="secondary"
>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
toggler-text="Dropdown with header"
class="m-2"
variant="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>positioning</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Left align"
variant="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
placement="bottom-end"
toggler-text="Right align"
variant="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
toggler-text="Drop-Up"
variant="info"
class="m-2"
placement="top-start"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
variant="secondary"
:offset="25"
toggler-text="Offset Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
variant="secondary"
split
toggler-text="Split Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>hidden caret</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
variant="link"
size="lg"
no-caret
>
<template #toggler-content>
&#x1f50d;<span class="sr-only">Search</span>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>sizing</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
variant="secondary"
size="lg"
toggler-text="Large"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
size="lg"
split
toggler-text="Large Split"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown
variant="secondary"
size="sm"
toggler-text="Small"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
size="sm"
split toggler-text="Small Split"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown ARIA" variant="primary"
class="m-2"
>
<div role="group">
<CDropdownHeader>Groups</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<div role="group">
<CDropdownHeader>Users</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>
Something <strong>not</strong> associated with user
</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small><code>variant</code></small>
</CCardHeader>
<CCardBody>
<CDropdown
size="sm"
toggler-text="Primary"
variant="primary"
class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <small class="text-muted">docs</small>
<CDropdownItem>Second Action</CDropdownItem> </a>
<CDropdownItem>Third Action</CDropdownItem> </div>
</CDropdown> </CCardHeader>
<CCardBody>
<div>
<CDropdown <CDropdown
size="sm" toggler-text="Dropdown Button"
toggler-text="Secondary" class="m-2"
variant="secondary" variant="secondary"
class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Third Action</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown> </CDropdown>
</div>
<!-- <div>
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
</CDropdown>
</div> -->
<div>
<CDropdown <CDropdown
size="sm" toggler-text="Dropdown with divider"
toggler-text="Success" class="m-2"
variant="success" variant="secondary"
class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Second item</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown> </CDropdown>
</div>
<div>
<CDropdown <CDropdown
size="sm" toggler-text="Dropdown with header"
toggler-text="Warning" class="m-2"
variant="warning" variant="secondary"
class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Second Item</CDropdownItem>
</CDropdown> </CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>positioning</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown <CDropdown
size="sm" toggler-text="Left align"
toggler-text="Danger" variant="primary"
variant="danger" class="m-2 d-inline-block"
class="m-0 d-inline-block"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
<CDropdown <CDropdown
size="sm" placement="bottom-end"
toggler-text="Info" toggler-text="Right align"
variant="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
toggler-text="Drop-Up"
variant="info" variant="info"
class="m-0 d-inline-block" class="m-2"
placement="top-start"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
</div>
<div>
<CDropdown <CDropdown
size="sm" variant="secondary"
toggler-text="Light" :offset="25"
variant="light" toggler-text="Offset Dropdown"
class="m-0 d-inline-block" class="m-2"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Something else here</CDropdownItem>
</CDropdown> </CDropdown>
</div>
<div>
<CDropdown <CDropdown
size="sm" variant="secondary"
toggler-text="Dark" split
variant="dark" toggler-text="Split Dropdown"
class="m-0 d-inline-block" class="m-2"
> >
<CDropdownItem>First Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem> <CDropdownItem>Something else here...</CDropdownItem>
</CDropdown> </CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>hidden caret</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown <CDropdown
size="sm"
toggler-text="Link"
variant="link" variant="link"
class="m-0 d-inline-block" size="lg"
no-caret
> >
<CDropdownItem>First Action</CDropdownItem> <template #toggler-content>
<CDropdownItem>Second Action</CDropdownItem> &#x1f50d;<span class="sr-only">Search</span>
<CDropdownItem>Third Action</CDropdownItem> </template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown> </CDropdown>
</CCardBody> </div>
</CCard> </CCardBody>
</CCol> </CCard>
</CRow> </CCol>
</div> <CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>sizing</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
variant="secondary"
size="lg"
toggler-text="Large"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
size="lg"
split
toggler-text="Large Split"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown
variant="secondary"
size="sm"
toggler-text="Small"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
size="sm"
split toggler-text="Small Split"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown ARIA" variant="primary"
class="m-2"
>
<div role="group">
<CDropdownHeader>Groups</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<div role="group">
<CDropdownHeader>Users</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>
Something <strong>not</strong> associated with user
</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small><code>variant</code></small>
</CCardHeader>
<CCardBody>
<CDropdown
size="sm"
toggler-text="Primary"
variant="primary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Secondary"
variant="secondary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Success"
variant="success"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Warning"
variant="warning"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Danger"
variant="danger"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Info"
variant="info"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Light"
variant="light"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Dark"
variant="dark"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Link"
variant="link"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div> </div>
</template> </template>
src/views/buttons/StandardButtons.vue
+10 -16
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<strong>Standard buttons</strong> <strong>Standard buttons</strong>
<div class="card-header-actions"> <div class="card-header-actions">
@@ -113,7 +113,7 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<strong>Outline Buttons</strong> <strong>Outline Buttons</strong>
</CCardHeader> </CCardHeader>
@@ -213,7 +213,7 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<strong>Ghost Buttons</strong> <strong>Ghost Buttons</strong>
</CCardHeader> </CCardHeader>
@@ -226,7 +226,7 @@
<CCol col="12" xl class="mb-3 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="mb-3 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="mb-3 mb-xl-0"> <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
@@ -314,7 +314,7 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<strong>Square Buttons</strong> <strong>Square Buttons</strong>
</CCardHeader> </CCardHeader>
@@ -421,7 +421,7 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<strong>Pill Buttons</strong> <strong>Pill Buttons</strong>
</CCardHeader> </CCardHeader>
@@ -528,7 +528,7 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<strong>Sizes</strong> <strong>Sizes</strong>
</CCardHeader> </CCardHeader>
@@ -562,7 +562,7 @@
<CButton variant="primary">Standard Button</CButton> <CButton variant="primary">Standard Button</CButton>
</CCol> </CCol>
<CCol col="2" class="mb-3 mb-xl-0 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="mb-3 mb-xl-0 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>
@@ -596,7 +596,7 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<strong>With Icons</strong> <strong>With Icons</strong>
</CCardHeader> </CCardHeader>
@@ -696,15 +696,9 @@
<script> <script>
export default { export default {
name: 'standard-buttons', name: 'StandardButtons',
data () { data () {
return { togglePress: false } return { togglePress: false }
} }
} }
</script> </script>
<style scoped>
.btn.disabled {
cursor: auto;
}
</style>
src/views/Charts.vue → src/views/charts/Charts.vue
+1 -1
View File
@@ -47,7 +47,7 @@
</div> </div>
</template> </template>
<script> <script>
import * as Charts from './charts/index.js' import * as Charts from './index.js'
export default { export default {
name: 'Charts', name: 'Charts',
src/views/icons/CoreUIIcons.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<CCard > <CCard>
<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>
@@ -18,7 +18,7 @@
<CCardBody> <CCardBody>
<!-- <CRow class="text-center 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="mt-4"/> <CIcon :name="name" width="24" class="mt-4"/>
<div>{{name}}</div> <div>{{name}}</div>
</CCol> </CCol>
src/views/icons/Flags.vue
+3 -1
View File
@@ -33,9 +33,11 @@
<script> <script>
import { iconSet } from '@coreui/icons/flags' import { iconSet } from '@coreui/icons/flags'
export default { export default {
name: 'flags', name: 'Flags',
iconSet, iconSet,
computed: { computed: {
// Avoid duplication caused by displaying 1x1 and 4x3 formats
// (adding Q to name makes icon quadratic)
displayedFlags () { displayedFlags () {
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q')) return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
} }
src/views/notifications/Alerts.vue
+175 -179
View File
@@ -1,190 +1,186 @@
<template> <template>
<div class="wrapper"> <CRow>
<div> <CCol col="12" md="6">
<CRow> <CCard>
<CCol col="12" md="6"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i>
<CCardHeader> <strong> Bootstrap Alert</strong>
<i class="fa fa-align-justify"></i> <div class="card-header-actions">
<strong> Bootstrap Alert</strong> <a
<div class="card-header-actions"> href="https://coreui.io/vue/docs/3.0/components/Alert"
<a class="card-header-action"
href="https://coreui.io/vue/docs/3.0/components/Alert" rel="noreferrer noopener"
class="card-header-action" target="_blank"
rel="noreferrer noopener" >
target="_blank" <small class="text-muted">docs</small>
> </a>
<small class="text-muted">docs</small> </div>
</a> </CCardHeader>
</div> <CCardBody>
</CCardHeader> <div>
<CCardBody> <p></p>
<div> <CAlert show variant="primary">Primary Alert</CAlert>
<p></p> <CAlert show variant="secondary">Secondary Alert</CAlert>
<CAlert show variant="primary">Primary Alert</CAlert> <CAlert show variant="success">Success Alert</CAlert>
<CAlert show variant="secondary">Secondary Alert</CAlert> <CAlert show variant="danger">Danger Alert</CAlert>
<CAlert show variant="success">Success Alert</CAlert> <CAlert show variant="warning">Warning Alert</CAlert>
<CAlert show variant="danger">Danger Alert</CAlert> <CAlert show variant="info">Info Alert</CAlert>
<CAlert show variant="warning">Warning Alert</CAlert> <CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="info">Info Alert</CAlert> <CAlert show variant="dark">Dark Alert</CAlert>
<CAlert show variant="light">Light Alert</CAlert> </div>
<CAlert show variant="dark">Dark Alert</CAlert> </CCardBody>
</div> </CCard>
</CCardBody> </CCol>
</CCard> <CCol col="12" md="6">
</CCol> <CCard>
<CCol col="12" md="6"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i> Alert
<CCardHeader> <small> use <code>.alert-link</code> to provide links</small>
<i class="fa fa-align-justify"></i> Alert </CCardHeader>
<small> use <code>.alert-link</code> to provide links</small> <CCardBody>
</CCardHeader> <div>
<CCardBody> <CAlert show variant="primary">
<div> Primary Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="primary"> </CAlert>
Primary Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="secondary">
</CAlert> Secondary Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="secondary"> </CAlert>
Secondary Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="success">
</CAlert> Success Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="success"> </CAlert>
Success Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="danger">
</CAlert> Danger Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="danger"> </CAlert>
Danger Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="warning">
</CAlert> Warning Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="warning"> </CAlert>
Warning Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="info">
</CAlert> Info Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="info"> </CAlert>
Info Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="light">
</CAlert> Light Alert with <a href="#" class="alert-link">an example link</a>.
<CAlert show variant="light"> </CAlert>
Light Alert with <a href="#" class="alert-link">an example link</a>. <CAlert show variant="dark">
</CAlert> Dark Alert with
<CAlert show variant="dark"> <CLink href="#" class="alert-link">an example link</CLink>
Dark Alert with .
<CLink href="#" class="alert-link">an example link</CLink> </CAlert>
. </div>
</CAlert> </CCardBody>
</div> </CCard>
</CCardBody> </CCol>
</CCard> <CCol col="12" md="6">
</CCol> <CCard>
<CCol col="12" md="6"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
<CCardHeader> </CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small> <CCardBody>
</CCardHeader> <CAlert show variant="success">
<CCardBody> <h4 class="alert-heading">Well done!</h4>
<CAlert show variant="success"> <p>
<h4 class="alert-heading">Well done!</h4> Aww yeah, you successfully read this important alert message.
<p> This example text is going to run a bit longer so that you can see
Aww yeah, you successfully read this important alert message. how spacing within an alert works with this kind of content.
This example text is going to run a bit longer so that you can see </p>
how spacing within an alert works with this kind of content. <hr>
</p> <p class="mb-0">
<hr> Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<p class="mb-0"> </p>
Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </CAlert>
</p> </CCardBody>
</CAlert> </CCard>
</CCardBody> </CCol>
</CCard> <CCol col="12" md="6">
</CCol> <CCard>
<CCol col="12" md="6"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i> Alerts
<CCardHeader> <small>dismissible</small>
<i class="fa fa-align-justify"></i> Alerts </CCardHeader>
<small>dismissible</small> <CCardBody>
</CCardHeader> <CAlert
<CCardBody> variant="secondary"
<CAlert closeButton
variant="secondary" :show.sync="dismissibleAlerts[0]"
closeButton >
:show.sync="dismissibleAlerts[0]" Dismissible Alert!
> </CAlert>
Dismissible Alert!
</CAlert>
<CAlert <CAlert
variant="secondary" variant="secondary"
closeButton closeButton
fade fade
:show.sync="dismissibleAlerts[1]" :show.sync="dismissibleAlerts[1]"
> >
Dismissible Alert with fade effect! Dismissible Alert with fade effect!
</CAlert> </CAlert>
<CAlert <CAlert
variant="secondary" variant="secondary"
:show.sync="dismissibleAlerts[2]" :show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}" v-slot="{dismiss}"
class="alert-dismissible" class="alert-dismissible"
> >
Dismissible Alert with custom button! Dismissible Alert with custom button!
<CButton <CButton
class="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>"
@click="dismiss" @click="dismiss"
/> />
</CAlert> </CAlert>
<CButton <CButton
@click="showDismissibleAlerts" @click="showDismissibleAlerts"
variant="info"
class="m-1"
>
Show dismissible alerts
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<small>auto dismissible</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="warning"
fade
>
Alert will dismiss after
<strong>{{dismissCountDown}}</strong> seconds...
</CAlert>
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="info"
>
Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress
variant="info" variant="info"
class="m-1" :max="dismissSecs"
> :value="dismissCountDown"
Show dismissible alerts height="4px"
</CButton> />
</CCardBody> </CAlert>
</CCard> <CButton @click="showAlert" variant="info" class="m-1">
<CCard> Show alert with timer
<CCardHeader> </CButton>
<i class="fa fa-align-justify"></i> Alerts </div>
<small>auto dismissible</small> </CCardBody>
</CCardHeader> </CCard>
<CCardBody> </CCol>
<div> </CRow>
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="warning"
fade
>
Alert will dismiss after
<strong>{{dismissCountDown}}</strong> seconds...
</CAlert>
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="info"
>
Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress
variant="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
/>
</CAlert>
<CButton @click="showAlert" variant="info" class="m-1">
Show alert with timer
</CButton>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'alerts', name: 'Alerts',
data () { data () {
return { return {
dismissSecs: 10, dismissSecs: 10,
src/views/notifications/Badges.vue
+84 -88
View File
@@ -1,95 +1,91 @@
<template functional> <template functional>
<div class="wrapper"> <CRow>
<div> <CCol col="12" md="6">
<CRow> <CCard>
<CCol col="12" md="6"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i>
<CCardHeader> <strong> Bootstrap Badge</strong>
<i class="fa fa-align-justify"></i> <div class="card-header-actions">
<strong> Bootstrap Badge</strong> <a
<div class="card-header-actions"> href="https://coreui.io/vue/docs/3.0/components/Badge"
<a class="card-header-action"
href="https://coreui.io/vue/docs/3.0/components/Badge" rel="noreferrer noopener"
class="card-header-action" target="_blank"
rel="noreferrer noopener" >
target="_blank" <small class="text-muted">docs</small>
> </a>
<small class="text-muted">docs</small> </div>
</a> </CCardHeader>
</div> <CCardBody>
</CCardHeader> <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
<CCardBody> <h3>Example heading <CBadge variant="primary">New</CBadge></h3>
<h2>Example heading <CBadge variant="primary">New</CBadge></h2> <h4>Example heading <CBadge variant="primary">New</CBadge></h4>
<h3>Example heading <CBadge variant="primary">New</CBadge></h3> <h5>Example heading <CBadge variant="primary">New</CBadge></h5>
<h4>Example heading <CBadge variant="primary">New</CBadge></h4> <h6>Example heading <CBadge variant="primary">New</CBadge></h6>
<h5>Example heading <CBadge variant="primary">New</CBadge></h5> </CCardBody>
<h6>Example heading <CBadge variant="primary">New</CBadge></h6> <CCardFooter>
</CCardBody> <CButton variant="primary">
<CCardFooter> Notifications
<CButton variant="primary"> <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
Notifications </CButton>
<CBadge variant="light" :style="{position: 'static'}">4</CBadge> </CCardFooter>
</CButton> </CCard>
</CCardFooter> </CCol>
</CCard> <CCol col="12" md="6">
</CCol> <CCard>
<CCol col="12" md="6"> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i> Badge
<CCardHeader> <small>contextual variations</small>
<i class="fa fa-align-justify"></i> Badge </CCardHeader>
<small>contextual variations</small> <CCardBody>
</CCardHeader> <CBadge variant="primary">Primary</CBadge>
<CCardBody> <CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="primary">Primary</CBadge> <CBadge variant="success">Success</CBadge>
<CBadge variant="secondary">Secondary</CBadge> <CBadge variant="danger">Danger</CBadge>
<CBadge variant="success">Success</CBadge> <CBadge variant="warning">Warning</CBadge>
<CBadge variant="danger">Danger</CBadge> <CBadge variant="info">Info</CBadge>
<CBadge variant="warning">Warning</CBadge> <CBadge variant="light">Light</CBadge>
<CBadge variant="info">Info</CBadge> <CBadge variant="dark">Dark</CBadge>
<CBadge variant="light">Light</CBadge> </CCardBody>
<CBadge variant="dark">Dark</CBadge> </CCard>
</CCardBody> <CCard>
</CCard> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i> Badge
<CCardHeader> <small>pills</small>
<i class="fa fa-align-justify"></i> Badge </CCardHeader>
<small>pills</small> <CCardBody>
</CCardHeader> <CBadge pill variant="primary">Primary</CBadge>
<CCardBody> <CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="primary">Primary</CBadge> <CBadge pill variant="success">Success</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge> <CBadge pill variant="danger">Danger</CBadge>
<CBadge pill variant="success">Success</CBadge> <CBadge pill variant="warning">Warning</CBadge>
<CBadge pill variant="danger">Danger</CBadge> <CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="warning">Warning</CBadge> <CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="info">Info</CBadge> <CBadge pill variant="dark">Dark</CBadge>
<CBadge pill variant="light">Light</CBadge> </CCardBody>
<CBadge pill variant="dark">Dark</CBadge> </CCard>
</CCardBody> <CCard>
</CCard> <CCardHeader>
<CCard> <i class="fa fa-align-justify"></i> Badge
<CCardHeader> <small>actionable</small>
<i class="fa fa-align-justify"></i> Badge </CCardHeader>
<small>actionable</small> <CCardBody>
</CCardHeader> <CBadge href="#" variant="primary">Primary</CBadge>
<CCardBody> <CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="primary">Primary</CBadge> <CBadge href="#" variant="success">Success</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge> <CBadge href="#" variant="danger">Danger</CBadge>
<CBadge href="#" variant="success">Success</CBadge> <CBadge href="#" variant="warning">Warning</CBadge>
<CBadge href="#" variant="danger">Danger</CBadge> <CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="warning">Warning</CBadge> <CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="info">Info</CBadge> <CBadge href="#" variant="dark">Dark</CBadge>
<CBadge href="#" variant="light">Light</CBadge> </CCardBody>
<CBadge href="#" variant="dark">Dark</CBadge> </CCard>
</CCardBody> </CCol>
</CCard> </CRow>
</CCol>
</CRow>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'badges' name: 'Badges'
} }
</script> </script>
src/views/notifications/Modals.vue
+1 -1
View File
@@ -176,7 +176,7 @@
<script> <script>
export default { export default {
name: 'modals', name: 'Modals',
data () { data () {
return { return {
myModal: false, myModal: false,
src/views/theme/ColorTheme.vue
+1 -4
View File
@@ -15,10 +15,7 @@ export default {
name: 'ColorTheme', name: 'ColorTheme',
components: { ColorView }, components: { ColorView },
props: { props: {
color: { color: String,
type: String,
default: 'bg-secondary'
}
} }
} }
</script> </script>
src/views/theme/Colors.vue
+2 -21
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<CCard > <CCard>
<CCardHeader> <CCardHeader>
<i class="cui-drop"></i> Theme colors <i class="cui-drop"></i> Theme colors
</CCardHeader> </CCardHeader>
@@ -37,32 +37,13 @@
</CRow> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard >
<CCardHeader>
<i class="cui-drop"></i> Additional colors
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
<ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
<ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
<ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
<ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
<ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
<ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
<ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
<ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
</CRow>
</CCardBody>
</CCard>
</div> </div>
</template> </template>
<script> <script>
import ColorTheme from './ColorTheme' import ColorTheme from './ColorTheme'
export default { export default {
name: 'colors', name: 'Colors',
components: { ColorTheme } components: { ColorTheme }
} }
</script> </script>
src/views/theme/Typography.vue
+1 -1
View File
@@ -215,6 +215,6 @@
<script> <script>
export default { export default {
name: 'typography' name: 'Typography'
} }
</script> </script>
src/views/users/UsersData.js
-1
View File
@@ -1,5 +1,4 @@
const usersData = [ const usersData = [
// {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'}, {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},