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