sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 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>
export default {
name: 'app'
name: 'App'
}
</script>
src/containers/TheContainer.vue
+1 -1
View File
@@ -23,7 +23,7 @@ import TheHeader from './TheHeader'
import TheFooter from './TheFooter'
export default {
name: 'full',
name: 'TheContainer',
components: {
TheSidebar,
TheHeader,
src/containers/TheFooter.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<CFooter>
<div>
<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 class="ml-auto">
<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/',
icon: 'cui-cloud-download',
addLinkClasses: 'c-nav-link-success',
target: '_blank'
},
attrs: {
class: 'mt-auto',
@@ -461,6 +462,7 @@ export default [
href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers',
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 Typography = () => import('@/views/theme/Typography')
const Charts = () => import('@/views/Charts')
const Charts = () => import('@/views/charts/Charts')
const Widgets = () => import('@/views/widgets/Widgets')
// Views - Components
src/views/base/Breadcrumbs.vue
+25 -29
View File
@@ -1,37 +1,33 @@
<template>
<div class="wrapper">
<div>
<CRow>
<CCol col>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<CRow>
<CCol col>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'breadcrumbs',
name: 'Breadcrumbs',
data () {
return {
items: [
src/views/base/Cards.vue
+3 -3
View File
@@ -233,11 +233,11 @@
</CCol>
<CCol sm="6" md="4">
<transition name="fade">
<CCard class="bg-secondary" v-if="show" >
<CCard class="bg-secondary" v-if="show">
<CCardHeader>
Card with 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>
</CLink>
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
@@ -263,7 +263,7 @@
<script>
export default {
name: 'cards',
name: 'Cards',
data: function () {
return {
show: true,
src/views/base/Carousels.vue
+43 -45
View File
@@ -1,52 +1,50 @@
<template>
<div class="wrapper">
<CRow>
<CCol md="12" lg="7">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Carousel"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CCarousel
arrows
indicators
animate
height="400px"
>
<CCarouselItem
captionHeader="First Slide"
image="https://lorempixel.com/1024/480/technics/2/"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
captionHeader="Blank page"
:image="{ blankColor: 'grey' }"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
image="https://lorempixel.com/1024/480/technics/8/"
/>
</CCarousel>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
<CRow>
<CCol md="12" lg="7">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Carousel"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CCarousel
arrows
indicators
animate
height="400px"
>
<CCarouselItem
captionHeader="First Slide"
image="https://lorempixel.com/1024/480/technics/2/"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
captionHeader="Blank page"
:image="{ blankColor: 'grey' }"
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
image="https://lorempixel.com/1024/480/technics/8/"
/>
</CCarousel>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'carousels'
name: 'Carousels'
}
</script>
src/views/base/Collapses.vue
+35 -39
View File
@@ -1,49 +1,45 @@
<template>
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Collapse"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CButton id="collapse1" variant="primary">
Toggle Collapse
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Collapse"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CButton id="collapse1" variant="primary">
Toggle Collapse
</CButton>
<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>
<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>
<CCollapse toggler="collapse2" class="mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
<CCollapse toggler="collapse2" class="mt-2">
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
</CCard>
</CCollapse>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'collapses',
name: 'Collapses',
data () {
return {
showCollapse: true,
src/views/base/Forms.vue
+1 -1
View File
@@ -852,7 +852,7 @@
<script>
export default {
name: 'forms',
name: 'Forms',
data () {
return {
selected: [], // Must be an array reference!
src/views/base/Jumbotrons.vue
+78 -80
View File
@@ -1,89 +1,87 @@
<template>
<div class="wrapper">
<div>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
class="card-header-action"
rel="noreferrer noopener"
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"
<div>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<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>
<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">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
</CJumbotron>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'jumbotrons'
name: 'Jumbotrons'
}
</script>
src/views/base/ListGroups.vue
+271 -273
View File
@@ -1,281 +1,279 @@
<template>
<div class="wrapper">
<div>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ListGroup"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<CBadge variant="primary" pill>14</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge variant="primary" pill>2</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge variant="primary" pill>1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>This is a default 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="success">This is a success 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="info">This is a info 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>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants active</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<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="secondary">This is a secondary 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="warning">This is a warning 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="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard headerHtml="<b>Card with list group</b>">
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="card-text mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</p>
</CCard>
<CCard header="<b>Card with flush list group</b>">
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<CCardBody>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</CCardBody>
</CCard>
</CCardGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
href="#"
active
class="flex-column align-items-start"
>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" disabled class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
<div>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ListGroup"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Cras justo odio
<CBadge variant="primary" pill>14</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Dapibus ac facilisis in
<CBadge variant="primary" pill>2</CBadge>
</CListGroupItem>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
>
Morbi leo risus
<CBadge variant="primary" pill>1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>This is a default 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="success">This is a success 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="info">This is a info 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>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants active</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<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="secondary">This is a secondary 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="warning">This is a warning 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="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard headerHtml="<b>Card with list group</b>">
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="card-text mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</p>
</CCard>
<CCard header="<b>Card with flush list group</b>">
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<CCardBody>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</CCardBody>
</CCard>
</CCardGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem
href="#"
active
class="flex-column align-items-start"
>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" disabled class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
export default {
name: 'list-groups'
name: 'ListGroups'
}
</script>
src/views/base/Navbars.vue
+162 -197
View File
@@ -1,212 +1,177 @@
<template>
<div class="wrapper">
<div>
<!-- <CCard>
<CNavbar toggleable="md" light variant="light">
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
<CLink class="navbar-brand">NavBar</CLink>
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
<CNavbarNav pills class="navbar-nav">
<CNavItem>
hehehe1
</CNavItem>
<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"
<div>
<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"
>
<CNavbarToggle @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
<CCollapse :show="show" navbar>
<CNavbarNav>
<CNavItem href="#">Link</CNavItem>
<CNavItem href="#" disabled>Disabled</CNavItem>
</CNavbarNav>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CNavbar
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 -->
<CNavbarNav class="ml-auto">
<CForm inline>
<CFormInput
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="light" size="sm" class="my-2 my-sm-0">
Search
</CButton>
</CForm>
<!-- Right aligned nav items -->
<CNavbarNav class="ml-auto">
<CForm inline>
<CFormInput
class="mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="light" size="sm" class="my-2 my-sm-0">
Search
</CButton>
</CForm>
<CDropdown
button-html="Lang"
nav
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
>
<CDropdown
button-html="Lang"
nav
placement="bottom-end"
>
<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>
</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>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>
</template>
<script>
import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
export default {
name: 'navbars',
components: {
DefaultHeaderDropdownAccnt
},
name: 'Navbars',
data () {
return {
show: false,
src/views/base/Navs.vue
+156 -158
View File
@@ -1,167 +1,165 @@
<template>
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Nav"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>Active</CNavItem>
<CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>
<i class="cui-basket-loaded"></i>
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<CCardBody>
<CNav tabs>
<CNavItem active>
Active
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<CCardBody>
<CNav fill tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<CCardBody>
<CNav justified tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown
id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
>
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="3" class="m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Nav"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>Active</CNavItem>
<CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>
<i class="cui-basket-loaded"></i>
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<CCardBody>
<CNav tabs>
<CNavItem active>
Active
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<CCardBody>
<CNav fill tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<CCardBody>
<CNav justified tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown
id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
>
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="3" class="m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'navs',
name: 'Navs',
data () {
return {
item: 2
src/views/base/Paginations.vue
+70 -72
View File
@@ -1,91 +1,89 @@
<template>
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Responsive bootstrap Pagination</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Pagination"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<h6>Default</h6>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Responsive bootstrap Pagination</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Pagination"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<h6>Default</h6>
<CPagination
:active-page.sync="currentPage"
:pages="10"
responsive
/>
<br>
<h6>Small</h6>
<CPagination
size="sm"
:active-page.sync="currentPage"
:pages="10"/>
<br>
<div>
<h6>Large</h6>
<CPagination
size="lg"
:active-page.sync="currentPage"
:pages="10"
responsive
/>
<br>
</div>
<h6>Small</h6>
<CPagination
size="sm"
:active-page.sync="currentPage"
:pages="10"/>
<br>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<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>Large</h6>
<CPagination
size="lg"
:active-page.sync="currentPage"
:pages="10"
responsive
/>
<br>
</div>
<h6>Center alignment</h6>
<CPagination
align="center"
:pages="10"
:active-page.sync="currentPage"
/>
<br>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<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>
<h6>Right (end) alignment</h6>
<CPagination
align="end"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<h6>Center alignment</h6>
<CPagination
align="center"
:pages="10"
:active-page.sync="currentPage"
/>
<br>
<h6>Right (end) alignment</h6>
<CPagination
align="end"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
</div>
<div>currentPage: {{currentPage}}</div>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'paginations',
name: 'Paginations',
data () {
return {
currentPage: 3,
src/views/base/Popovers.vue
+83 -85
View File
@@ -1,101 +1,99 @@
<template>
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Popover"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover="{
header: 'Popover header',
content: 'I am popover content!'
}"
>
Hover Me
</CButton>
</div>
</CCol>
<CCol col="4">
<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"
>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Popover"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover="{
header: 'Popover header',
content: 'I am popover content!'
}"
>
Hover Me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover="{
header: 'Popover!',
content: `Placement ${placement}`,
placement
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'
}"
>
{{ placement }}
Click me
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</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
variant="primary"
v-c-popover="{
header: 'Popover!',
content: `Placement ${placement}`,
placement
}"
>
{{ placement }}
</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'popovers',
name: 'Popovers',
data () {
return {
placements: [
src/views/base/ProgressBars.vue
+201 -205
View File
@@ -1,214 +1,212 @@
<template>
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Progress"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<CProgress :value="counter" :max="max" show-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"
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Progress"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
Click me to animate progress bars
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"/>
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-progress class="mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>width</small>
</CCardHeader>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="mb-3"/>
<h6>Custom widths</h6>
<CProgress :value="value3" class="w-75 mb-2"/>
<CProgress :value="value3" class="w-50 mb-2"/>
<CProgress :value="value3" class="w-25"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>height</small>
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
<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>
<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
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"/>
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-progress class="mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>width</small>
</CCardHeader>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="mb-3"/>
<h6>Custom widths</h6>
<CProgress :value="value3" class="w-75 mb-2"/>
<CProgress :value="value3" class="w-50 mb-2"/>
<CProgress :value="value3" class="w-25"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>height</small>
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
<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>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>striped</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
variant="success"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:striped="striped"
class="mb-2"
/>
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>animated</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
variant="success"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:animated="animate"
class="mb-3"
/>
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-progress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
</CProgress>
</CCardBody>
</CCard>
</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>striped</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
variant="success"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
:striped="striped"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:striped="striped"
class="mb-2"
/>
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>animated</small>
</CCardHeader>
<CCardBody>
<CProgress
:value="25"
variant="success"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
striped
:animated="animate"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:animated="animate"
class="mb-3"
/>
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-progress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
</CProgress>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'progress-bars',
name: 'ProgressBars',
data () {
return {
counter: 73,
@@ -235,8 +233,6 @@ export default {
methods: {
clicked () {
this.counter = Math.random() * this.max
// console.log('Change progress to ' +
// Math.round(this.counter * 100) / 100)
}
},
mounted () {
src/views/base/Switches.vue
+21 -10
View File
@@ -526,21 +526,33 @@
<script>
export default {
name: 'switches',
name: 'Switches',
data () {
return {
variants:[
variants: [
'primary','secondary','warning','success','info','danger','light','dark'
],
fields: [
{key: 'size'},
{key: 'example'},
{key: 'size_prop', label: 'Size prop'}
{ key: 'size' },
{ key: 'example' },
{ key: 'size_prop', label: 'Size prop' }
],
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: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
{
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: 'Small',
example: {shape: '3d', variant: 'primary', size: 'sm', checked: true},
size_prop: 'Add following prop <code>size="sm"</code>'
}
],
checker: 'yes',
radio: 'primary',
@@ -551,8 +563,7 @@ export default {
labelTxt: {
labelOn: 'yes',
labelOff: 'no'
},
}
}
}
}
src/views/base/Table.vue
+3 -3
View File
@@ -10,7 +10,7 @@
:fields="fields"
:per-page="small ? 10 : 5"
:dark="dark"
pagination
pagination
>
<template #status="{item}">
<td>
@@ -23,7 +23,7 @@
<script>
export default {
name: 'TableWrapper',
name: 'Table',
props: {
items: Array,
fields: {
@@ -49,7 +49,7 @@ export default {
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
}
}
}
</script>
src/views/base/Tables.vue
+28 -33
View File
@@ -137,10 +137,7 @@
/>
</CCol>
</CRow>
</div>
</template>
<script>
@@ -154,42 +151,40 @@ const fields = [
{ key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
]
const items = [
{number:11.1, username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, 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'},
{number:1.3, 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'},
{number:2.3, 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'},
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
{ username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
{ username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
{ username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
{ username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{ username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
]
export default {
name: 'tables',
name: 'Tables',
components: { CTableWrapper },
data () {
return {
items: items,
fields: fields,
page: 1,
pages: null,
items,
fields,
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
officia deserunt mollit anim id est laborum.
</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
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
@@ -57,7 +57,7 @@
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</CTab>
<CTab title-html="Profile" >
<CTab title-html="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -116,7 +116,7 @@
</CCardBody>
</CCard>
</CCol>
<!-- <CCol xs="12" lg="6">
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
Tabs with icons
@@ -156,7 +156,7 @@
</CTabs>
</CCardBody>
</CCard>
</CCol> -->
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader>
@@ -204,7 +204,7 @@
<script>
export default {
name: 'tabs',
name: 'Tabs',
data () {
return {
tabs: [
src/views/base/Tooltips.vue
+81 -83
View File
@@ -1,95 +1,93 @@
<template>
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Tooltip"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Tooltip"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<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>
<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
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>
</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>
</CCardBody>
</CCard>
</div>
</template>
<script>
export default {
name: 'tooltips',
name: 'Tooltips',
data () {
return {
placements: [
src/views/buttons/BrandButtons.vue
+174 -174
View File
@@ -1,183 +1,183 @@
<template>
<div>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>
&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
</code>
<hr/>
<h6>
Size Small
<small>Add <code>size="sm"</code></small>
</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>{{ $options.usage }}</code>
<hr/>
<h6>
Size Small
<small>Add <code>size="sm"</code></small>
</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>{{ $options.iconsOnlyUsage }}</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>
{{ $options.textOnlyUsage }}
</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
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: [
'facebook',
'twitter',
src/views/buttons/ButtonGroups.vue
+203 -215
View File
@@ -1,221 +1,209 @@
<template>
<div class="wrapper">
<div>
<CRow>
<CCol col="12" >
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">One</CButton>
<CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</CButton>
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton variant="secondary">Top</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button toolbar </strong>
<small>with button groups</small>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="d-sm-down-none"/>
<div>
<CButtonToolbar
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>
<CButton variant="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">One</CButton>
<CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</CButton>
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton variant="secondary">Top</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button toolbar </strong>
<small>with button groups</small>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="d-sm-down-none"/>
<div>
<CButtonToolbar
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>
<CButton variant="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'button-groups',
data () {
return {
myToggle: false,
myToggle2: false,
itemsCount: 33
}
}
name: 'ButtonGroups',
}
</script>
src/views/buttons/Dropdowns.vue
+326 -328
View File
@@ -1,360 +1,358 @@
<template>
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown Button"
class="m-2"
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"
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Secondary"
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown Button"
class="m-2"
variant="secondary"
class="m-0 d-inline-block"
>
<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>
<CDropdown
size="sm"
toggler-text="Success"
variant="success"
class="m-0 d-inline-block"
</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 Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Warning"
variant="warning"
class="m-0 d-inline-block"
</div>
<div>
<CDropdown
toggler-text="Dropdown with header"
class="m-2"
variant="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<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
size="sm"
toggler-text="Danger"
variant="danger"
class="m-0 d-inline-block"
toggler-text="Left align"
variant="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
size="sm"
toggler-text="Info"
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-0 d-inline-block"
class="m-2"
placement="top-start"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
size="sm"
toggler-text="Light"
variant="light"
class="m-0 d-inline-block"
variant="secondary"
:offset="25"
toggler-text="Offset Dropdown"
class="m-2"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown
size="sm"
toggler-text="Dark"
variant="dark"
class="m-0 d-inline-block"
variant="secondary"
split
toggler-text="Split Dropdown"
class="m-2"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<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
size="sm"
toggler-text="Link"
variant="link"
class="m-0 d-inline-block"
size="lg"
no-caret
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<template #toggler-content>
&#x1f50d;<span class="sr-only">Search</span>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</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>
<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>
</template>
src/views/buttons/StandardButtons.vue
+11 -17
View File
@@ -1,6 +1,6 @@
<template>
<div>
<CCard >
<CCard>
<CCardHeader>
<strong>Standard buttons</strong>
<div class="card-header-actions">
@@ -113,7 +113,7 @@
</CRow>
</CCardBody>
</CCard>
<CCard >
<CCard>
<CCardHeader>
<strong>Outline Buttons</strong>
</CCardHeader>
@@ -213,7 +213,7 @@
</CRow>
</CCardBody>
</CCard>
<CCard >
<CCard>
<CCardHeader>
<strong>Ghost Buttons</strong>
</CCardHeader>
@@ -226,7 +226,7 @@
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
@@ -314,7 +314,7 @@
</CRow>
</CCardBody>
</CCard>
<CCard >
<CCard>
<CCardHeader>
<strong>Square Buttons</strong>
</CCardHeader>
@@ -421,7 +421,7 @@
</CRow>
</CCardBody>
</CCard>
<CCard >
<CCard>
<CCardHeader>
<strong>Pill Buttons</strong>
</CCardHeader>
@@ -528,7 +528,7 @@
</CRow>
</CCardBody>
</CCard>
<CCard >
<CCard>
<CCardHeader>
<strong>Sizes</strong>
</CCardHeader>
@@ -562,7 +562,7 @@
<CButton variant="primary">Standard Button</CButton>
</CCol>
<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 col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success">Ghost Button</CButton>
@@ -596,7 +596,7 @@
</CRow>
</CCardBody>
</CCard>
<CCard >
<CCard>
<CCardHeader>
<strong>With Icons</strong>
</CCardHeader>
@@ -696,15 +696,9 @@
<script>
export default {
name: 'standard-buttons',
name: 'StandardButtons',
data () {
return { togglePress: false }
}
}
</script>
<style scoped>
.btn.disabled {
cursor: auto;
}
</style>
</script>
src/views/Charts.vue → src/views/charts/Charts.vue
+1 -1
View File
@@ -47,7 +47,7 @@
</div>
</template>
<script>
import * as Charts from './charts/index.js'
import * as Charts from './index.js'
export default {
name: 'Charts',
src/views/icons/CoreUIIcons.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div>
<CCard >
<CCard>
<CCardHeader>
<i class="cui-pencil"></i>CoreUI Icons
<CBadge variant="info">New</CBadge>
@@ -18,7 +18,7 @@
<CCardBody>
<!-- <CRow class="text-center mb-5">
<template v-for="(name, key) in $options.iconNames">
<CCol :key="key" col="6" sm="4" md="3" xl="2" >
<CCol :key="key" col="6" sm="4" md="3" xl="2">
<CIcon :name="name" width="24" class="mt-4"/>
<div>{{name}}</div>
</CCol>
src/views/icons/Flags.vue
+3 -1
View File
@@ -33,9 +33,11 @@
<script>
import { iconSet } from '@coreui/icons/flags'
export default {
name: 'flags',
name: 'Flags',
iconSet,
computed: {
// Avoid duplication caused by displaying 1x1 and 4x3 formats
// (adding Q to name makes icon quadratic)
displayedFlags () {
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>
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Alert"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<p></p>
<CAlert show variant="primary">Primary Alert</CAlert>
<CAlert show variant="secondary">Secondary Alert</CAlert>
<CAlert show variant="success">Success Alert</CAlert>
<CAlert show variant="danger">Danger Alert</CAlert>
<CAlert show variant="warning">Warning Alert</CAlert>
<CAlert show variant="info">Info Alert</CAlert>
<CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
Success Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
Info Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
Light Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
Dark Alert with
<CLink href="#" class="alert-link">an example link</CLink>
.
</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can see
how spacing within an alert works with this kind of content.
</p>
<hr>
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<small>dismissible</small>
</CCardHeader>
<CCardBody>
<CAlert
variant="secondary"
closeButton
:show.sync="dismissibleAlerts[0]"
>
Dismissible Alert!
</CAlert>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Alert"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<p></p>
<CAlert show variant="primary">Primary Alert</CAlert>
<CAlert show variant="secondary">Secondary Alert</CAlert>
<CAlert show variant="success">Success Alert</CAlert>
<CAlert show variant="danger">Danger Alert</CAlert>
<CAlert show variant="warning">Warning Alert</CAlert>
<CAlert show variant="info">Info Alert</CAlert>
<CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
Success Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
Info Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
Light Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
Dark Alert with
<CLink href="#" class="alert-link">an example link</CLink>
.
</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can see
how spacing within an alert works with this kind of content.
</p>
<hr>
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<small>dismissible</small>
</CCardHeader>
<CCardBody>
<CAlert
variant="secondary"
closeButton
:show.sync="dismissibleAlerts[0]"
>
Dismissible Alert!
</CAlert>
<CAlert
variant="secondary"
closeButton
fade
:show.sync="dismissibleAlerts[1]"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
variant="secondary"
closeButton
fade
:show.sync="dismissibleAlerts[1]"
>
Dismissible Alert with fade effect!
</CAlert>
<CAlert
variant="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="alert-dismissible"
>
Dismissible Alert with custom button!
<CButton
class="position-absolute"
variant="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>"
@click="dismiss"
/>
</CAlert>
<CButton
@click="showDismissibleAlerts"
<CAlert
variant="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="alert-dismissible"
>
Dismissible Alert with custom button!
<CButton
class="position-absolute"
variant="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>"
@click="dismiss"
/>
</CAlert>
<CButton
@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"
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"
: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>
: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>
</template>
<script>
export default {
name: 'alerts',
name: 'Alerts',
data () {
return {
dismissSecs: 10,
src/views/notifications/Badges.vue
+84 -88
View File
@@ -1,95 +1,91 @@
<template functional>
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Badge"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<h2>Example heading <CBadge variant="primary">New</CBadge></h2>
<h3>Example heading <CBadge variant="primary">New</CBadge></h3>
<h4>Example heading <CBadge variant="primary">New</CBadge></h4>
<h5>Example heading <CBadge variant="primary">New</CBadge></h5>
<h6>Example heading <CBadge variant="primary">New</CBadge></h6>
</CCardBody>
<CCardFooter>
<CButton variant="primary">
Notifications
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
<CBadge variant="danger">Danger</CBadge>
<CBadge variant="warning">Warning</CBadge>
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
<CBadge pill variant="danger">Danger</CBadge>
<CBadge pill variant="warning">Warning</CBadge>
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
<CBadge href="#" variant="danger">Danger</CBadge>
<CBadge href="#" variant="warning">Warning</CBadge>
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</div>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Badge"
class="card-header-action"
rel="noreferrer noopener"
target="_blank"
>
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<CCardBody>
<h2>Example heading <CBadge variant="primary">New</CBadge></h2>
<h3>Example heading <CBadge variant="primary">New</CBadge></h3>
<h4>Example heading <CBadge variant="primary">New</CBadge></h4>
<h5>Example heading <CBadge variant="primary">New</CBadge></h5>
<h6>Example heading <CBadge variant="primary">New</CBadge></h6>
</CCardBody>
<CCardFooter>
<CButton variant="primary">
Notifications
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
<CBadge variant="danger">Danger</CBadge>
<CBadge variant="warning">Warning</CBadge>
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
<CBadge pill variant="danger">Danger</CBadge>
<CBadge pill variant="warning">Warning</CBadge>
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
<CBadge href="#" variant="danger">Danger</CBadge>
<CBadge href="#" variant="warning">Warning</CBadge>
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: 'badges'
name: 'Badges'
}
</script>
src/views/notifications/Modals.vue
+1 -1
View File
@@ -176,7 +176,7 @@
<script>
export default {
name: 'modals',
name: 'Modals',
data () {
return {
myModal: false,
src/views/theme/ColorTheme.vue
+1 -4
View File
@@ -15,10 +15,7 @@ export default {
name: 'ColorTheme',
components: { ColorView },
props: {
color: {
type: String,
default: 'bg-secondary'
}
color: String,
}
}
</script>
src/views/theme/Colors.vue
+2 -21
View File
@@ -1,6 +1,6 @@
<template>
<div>
<CCard >
<CCard>
<CCardHeader>
<i class="cui-drop"></i> Theme colors
</CCardHeader>
@@ -37,32 +37,13 @@
</CRow>
</CCardBody>
</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>
</template>
<script>
import ColorTheme from './ColorTheme'
export default {
name: 'colors',
name: 'Colors',
components: { ColorTheme }
}
</script>
src/views/theme/Typography.vue
+1 -1
View File
@@ -215,6 +215,6 @@
<script>
export default {
name: 'typography'
name: 'Typography'
}
</script>
src/views/users/UsersData.js
-1
View File
@@ -1,5 +1,4 @@
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: 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'},