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

feat: change styles of base section to version 3

Browse Source
This commit is contained in:
woothu
2019-05-20 15:08:17 +02:00
parent e005cd1556
commit ebba81fa11
15 changed files with 493 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Breadcrumbs.vue
+6 -6
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col>
<CCard>
@@ -57,16 +57,16 @@ export default {
items3: [{
textHtml: 'Link',
to: '#2',
activeClass: 'bg-info p-1'
activeClass: 'c-bg-info c-p-1'
}, {
textHtml: 'Active',
to: '#3',
activeClass: 'bg-warning p-1',
addLinkClasses: 'bg-info p-1'
activeClass: 'c-bg-warning c-p-1',
addLinkClasses: 'c-bg-info c-p-1'
},{
textHtml: 'Classes',
to: '#4',
activeClass: 'bg-danger p-1',
activeClass: 'c-bg-danger c-p-1',
}]
}
}
src/views/base/Cards.vue
+32 -32
View File
@@ -1,5 +1,5 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CRow>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" :bodyHtml="loremIpsum"/>
@@ -18,7 +18,7 @@
<CCardHeader>
Card with switch
<CSwitch
class="float-right"
class="c-float-right"
size="sm"
shape="pill"
variant="info"
@@ -36,7 +36,7 @@
<CCard>
<CCardHeader>
Card with label
<CBadge variant="success" class="float-right">Success</CBadge>
<CBadge variant="success" class="c-float-right">Success</CBadge>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
@@ -47,7 +47,7 @@
<CCard>
<CCardHeader>
Card with label
<CBadge pill variant="danger" class="float-right">42</CBadge>
<CBadge pill variant="danger" class="c-float-right">42</CBadge>
</CCardHeader>
<CCardBody :bodyHtml="loremIpsum"/>
</CCard>
@@ -96,40 +96,40 @@
<CRow>
<CCol sm="6" md="4">
<CCard class="card-accent-primary" header="Card with primary accent" bodyWrapper>
<CCard class="c-card-accent-primary" header="Card with primary accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-secondary" header="Card with secondary accent" bodyWrapper>
<CCard class="c-card-accent-secondary" header="Card with secondary accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-success" header="Card with success accent" bodyWrapper>
<CCard class="c-card-accent-success" header="Card with success accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-info" header="Card with info accent" bodyWrapper>
<CCard class="c-card-accent-info" header="Card with info accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-warning" header="Card with warning accent" bodyWrapper>
<CCard class="c-card-accent-warning" header="Card with warning accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-danger" header="Card with danger accent" bodyWrapper>
<CCard class="c-card-accent-danger" header="Card with danger accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard class="bg-primary text-center" bodyWrapper>
<blockquote class="card-blockquote">
<CCard class="c-bg-primary c-text-center" bodyWrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -138,8 +138,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-success text-center" bodyWrapper>
<blockquote class="card-blockquote">
<CCard class="c-bg-success c-text-center" bodyWrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -148,8 +148,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-info text-center" bodyWrapper>
<blockquote class="card-blockquote">
<CCard class="c-bg-info c-text-center" bodyWrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -158,8 +158,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-warning text-center" bodyWrapper>
<blockquote class="card-blockquote">
<CCard class="c-bg-warning c-text-center" bodyWrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -168,8 +168,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-danger text-center" bodyWrapper>
<blockquote class="card-blockquote">
<CCard class="c-bg-danger c-text-center" bodyWrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -178,8 +178,8 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-secondary text-center" bodyWrapper>
<blockquote class="card-blockquote">
<CCard class="c-bg-secondary c-text-center" bodyWrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
<cite title="Source Title">Source Title</cite>
@@ -190,43 +190,43 @@
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" class="bg-primary" bodyWrapper>
<CCard headerHtml="Card title" class="c-bg-primary" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" class="bg-success" bodyWrapper>
<CCard headerHtml="Card title" class="c-bg-success" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" class="bg-info" bodyWrapper>
<CCard headerHtml="Card title" class="c-bg-info" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" class="bg-warning" bodyWrapper>
<CCard headerHtml="Card title" class="c-bg-warning" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" class="bg-danger" bodyWrapper>
<CCard headerHtml="Card title" class="c-bg-danger" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<transition name="fade">
<CCard class="bg-secondary" v-if="show" >
<CCard class="c-bg-secondary" v-if="show" >
<CCardHeader>
Card with header actions
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting" >
<div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action btn-setting" >
<i class="icon-settings"></i>
</CLink>
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
<i class="icon-close"></i>
</CLink>
</div>
src/views/base/Carousels.vue
+7 -3
View File
@@ -1,6 +1,6 @@
<template functional>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol md="12" lg="9" >
<CCard>
@@ -19,7 +19,11 @@
</div> -->
</CCardHeader>
<CCardBody>
<CCarousel>
<CCarousel
arrows
indicators
animate
>
<CCarouselItem
caption="First Slide"
imgSrc="https://lorempixel.com/1024/480/technics/2/"
src/views/base/Collapses.vue
+5 -5
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col="12" md="6">
<CCard>
@@ -17,13 +17,13 @@
<CButton id="collapse1" variant="primary">
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="mt-2">
<CCollapse toggler="collapse1" class="c-mt-2">
<CCard bodyWrapper>
<p class="card-text">Collapse contents Here</p>
<p class="c-card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="mt-2">
<CCollapse toggler="collapse2" class="c-mt-2">
<CCard bodyWrapper>Hello!</CCard>
</CCollapse>
</CCard>
src/views/base/Jumbotrons.vue
+13 -12
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol>
<CCard>
@@ -9,7 +9,7 @@
<strong> Bootstrap Jumbotron </strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
@@ -29,11 +29,11 @@
</CCardHeader>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
<p slot="lead" class="c-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">
<hr class="c-my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
@@ -53,16 +53,17 @@
<small>variants</small>
</CCardHeader>
<CCardBody>
<CJumbotron variant="info"
textVariant="white"
borderVariant="dark"
header="Bootstrap 4">
<p slot="lead" class="lead">
<CJumbotron
variant="info"
textVariant="white"
borderVariant="dark"
header="Bootstrap 4"
>
<p slot="lead" class="c-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">
<hr class="c-my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
src/views/base/ListGroups.vue
+35 -25
View File
@@ -1,15 +1,15 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
@@ -105,15 +105,21 @@
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center">
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
>
Cras justo odio
<CBadge variant="primary" pill>14</CBadge>
</CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
>
Dapibus ac facilisis in
<CBadge variant="primary" pill>2</CBadge>
</CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">
<CListGroupItem
class="c-d-flex c-justify-content-between c-align-items-center"
>
Morbi leo risus
<CBadge variant="primary" pill>1</CBadge>
</CListGroupItem>
@@ -184,7 +190,7 @@
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="card-text mt-2">
<p class="c-card-text c-mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
@@ -217,38 +223,42 @@
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#" active class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<CListGroupItem
href="#"
active
class="c-flex-column c-align-items-start"
>
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
<p class="c-mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
<CListGroupItem href="#" class="c-flex-column c-align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">List group item heading</h5>
<small class="c-text-muted">3 days ago</small>
</div>
<p class="mb-1">
<p class="c-mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
<small class="c-text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem href="#" disabled class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small>
<CListGroupItem href="#" disabled class="c-flex-column c-align-items-start">
<div class="c-d-flex c-w-100 c-justify-content-between">
<h5 class="c-mb-1">Disabled List group item</h5>
<small class="c-text-muted">3 days ago</small>
</div>
<p class="mb-1">
<p class="c-mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
<small class="c-text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
src/views/base/Navbars.vue
+13 -13
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<!-- <CCard>
<CNavbar toggleable="md" light variant="light">
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
@@ -34,9 +34,9 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
@@ -56,14 +56,14 @@
</CNavbarNav>
<!-- Right aligned nav items -->
<CNavbarNav class="ml-auto">
<CNavbarNav class="c-ml-auto">
<CForm inline>
<CFormInput
class="mr-sm-2"
class="c-mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
<CButton size="sm" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
</CForm>
<CDropdown
@@ -99,7 +99,7 @@
<!-- Image and text -->
<CNavbar variant="faded" light>
<CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
<img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="BV">
BootstrapVue
</CNavbarBrand>
</CNavbar>
@@ -116,7 +116,7 @@
<CNavbarBrand>BootstrapVue</CNavbarBrand>
<CCollapse :show="navbarText" navbar>
<CNavbarNav>
<span class="navbar-text">Navbar text</span>
<span class="c-navbar-text">Navbar text</span>
</CNavbarNav>
</CCollapse>
</CNavbar>
@@ -167,11 +167,11 @@
<CNavbar type="light" variant="light">
<CForm inline>
<CFormInput
class="mr-sm-2"
class="c-mr-sm-2"
placeholder="Search"
size="sm"
/>
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
<CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</CCardBody>
@@ -185,7 +185,7 @@
<CNavbar type="light" variant="light">
<CForm inline>
<CFormInput
class="mr-sm-2"
class="c-mr-sm-2"
placeholder="Username"
/>
</CForm>
src/views/base/Navs.vue
+7 -7
View File
@@ -1,15 +1,15 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<!-- <div class="card-header-actions">
<!-- <div class="c-card-header-actions">
<CLink
href="#"
class="card-header-action"
class="c-card-header-action"
>
<small class="text-muted">docs</small>
<small class="c-text-muted">docs</small>
</CLink>
</div> -->
</CCardHeader>
@@ -124,7 +124,7 @@
placement="bottom-end"
buttonContent="Dropdown"
>
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
<CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
@@ -141,7 +141,7 @@
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="3" class="m-0">
<CCol col="3" class="c-m-0">
<CNav vertical pills >
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
src/views/base/Paginations.vue
+6 -6
View File
@@ -1,13 +1,13 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Pagination</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
@@ -26,7 +26,7 @@
:pages="10"/>
<br>
<div class="d-sm-down-none">
<div class="c-d-sm-down-none">
<h6>Large</h6>
<CPagination
size="lg"
src/views/base/Popovers.vue
+10 -10
View File
@@ -1,20 +1,20 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="4">
<div class="my-3 text-center">
<div class="c-my-3 c-text-center">
<CButton
variant="primary"
v-c-popover="{
@@ -27,7 +27,7 @@
</div>
</CCol>
<CCol col="4">
<div class="my-3 text-center">
<div class="c-my-3 c-text-center">
<CButton
variant="primary"
v-c-popover="{
@@ -40,7 +40,7 @@
</div>
</CCol>
<CCol col="4">
<div class="my-3 text-center">
<div class="c-my-3 c-text-center">
<CButton
variant="primary"
v-c-popover.click="{
@@ -62,11 +62,11 @@
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<CCardBody class="my-3">
<CCardBody class="c-my-3">
<CRow>
<CCol
md="4"
class="py-4 text-center"
class="c-py-4 c-text-center"
v-for="placement in placements"
:key="placement"
>
src/views/base/ProgressBars.vue
+115 -59
View File
@@ -1,24 +1,24 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-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>
<CProgress class="c-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 class="mt-4" @click="clicked">Click me</CButton>
<CButton class="c-mt-4" @click="clicked">Click me</CButton>
</CCardBody>
</CCard>
<CCard>
@@ -27,68 +27,97 @@
</CCardHeader>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"></CProgress>
<CProgress :value="value" :max="max2" class="c-mb-3"/>
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="mb-3"></CProgress>
<CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-progress class="mb-3"></CProgress>
<CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
<CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>width</small>
</CCardHeader>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="mb-3"></CProgress>
<CProgress :value="value3" class="c-mb-3"/>
<h6>Custom widths</h6>
<CProgress :value="value3" class="w-75 mb-2"></CProgress>
<CProgress :value="value3" class="w-50 mb-2"></CProgress>
<CProgress :value="value3" class="w-25"></CProgress>
<CProgress :value="value3" class="c-w-75 c-mb-2"/>
<CProgress :value="value3" class="c-w-50 c-mb-2"/>
<CProgress :value="value3" class="c-w-25"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>height</small>
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"></CProgress>
<CProgress :value="value3" show-progress class="c-mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="2px" :value="value3"></CProgress>
<CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
<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"
></CProgress>
<div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
<div class="c-col-sm-2">{{ bar.variant }}:</div>
<div class="c-col-sm-10 c-pt-1">
<CProgress
:value="bar.value"
:variant="bar.variant"
:key="bar.variant"
/>
</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>striped</small>
</CCardHeader>
<CCardBody>
<CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="100" variant="danger" :striped="striped" class="mb-2"></CProgress>
<CProgress
:value="25"
variant="success"
:striped="striped"
class="c-mb-2"
/>
<CProgress
:value="50"
variant="info"
:striped="striped"
class="c-mb-2"
/>
<CProgress
:value="75"
variant="warning"
:striped="striped"
class="c-mb-2"
/>
<CProgress
:value="100"
variant="danger"
:striped="striped"
class="c-mb-2"
/>
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
@@ -96,13 +125,38 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>animated</small>
</CCardHeader>
<CCardBody>
<CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="100" variant="danger" :animated="animate" class="mb-3"></CProgress>
<CProgress
:value="25"
variant="success"
striped
:animated="animate"
class="c-mb-2"
/>
<CProgress
:value="50"
variant="info"
striped
:animated="animate"
class="c-mb-2"
/>
<CProgress
:value="75"
variant="warning"
striped
:animated="animate"
class="c-mb-2"
/>
<CProgress
:value="100"
variant="danger"
:animated="animate"
class="c-mb-3"
/>
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
@@ -110,28 +164,30 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
<i class="fa fa-align-justify"></i>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
<CProgress :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-progress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
<CProgress show-progress :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
<CProgress show-value striped :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress></CProgressBar>
<CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
<CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
<CProgress :max="max3" class="c-mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
</CProgress>
</CCardBody>
</CCard>
@@ -168,8 +224,8 @@ export default {
methods: {
clicked () {
this.counter = Math.random() * this.max
console.log('Change progress to ' +
Math.round(this.counter * 100) / 100)
// console.log('Change progress to ' +
// Math.round(this.counter * 100) / 100)
}
},
mounted () {
src/views/base/Switches.vue
+222 -221
View File
@@ -1,13 +1,13 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CRow>
<CCol xs="12" md="6">
<CCard v-if="true">
<CCardHeader>
<h5>
Radio switches
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<CBadge variant="danger" class="float-right">NEW</CBadge>
<CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
<CBadge variant="danger" class="c-float-right">NEW</CBadge>
</h5>
</CCardHeader>
<CCardBody>
@@ -19,9 +19,9 @@
name="lg"
required
/> -->
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
<!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
<CSwitch
class="mx-1"
class="c-mx-1"
:key="key"
:variant="variant"
shape="3d"
@@ -46,20 +46,21 @@
</CCardHeader>
<CCardBody>
<CSwitch
class="mx-1"
class="c-mx-1"
variant="primary"
name="switch1"
:checked.sync="checker"
trueValue="yes"
falseValue="no"
/>
<CSwitch class="mx-1"
:variant="variant"
checked
:key="key"
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
<CSwitch
class="c-mx-1"
:variant="variant"
checked
:key="key"
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
/>
<CSwitch class="mx-1" variant="primary" disabled />
<CSwitch class="c-mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -69,15 +70,15 @@
Switch pills
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
</CCardBody>
</CCard>
</CCol>
@@ -87,15 +88,15 @@
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="mx-1" variant="success" checked shape="3d" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" />
<CSwitch class="mx-1" variant="info" checked shape="3d" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" />
<CSwitch class="mx-1" variant="light" checked shape="3d" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -105,15 +106,15 @@
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -123,15 +124,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -141,15 +142,15 @@
3d Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -159,15 +160,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -177,15 +178,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -195,15 +196,15 @@
Switch <small><code>outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -213,15 +214,15 @@
Switch <small><code>outline shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -231,15 +232,15 @@
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -249,15 +250,15 @@
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -267,15 +268,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked />
<CSwitch class="mx-1" variant="secondary" checked />
<CSwitch class="mx-1" variant="success" checked />
<CSwitch class="mx-1" variant="warning" checked />
<CSwitch class="mx-1" variant="info" checked />
<CSwitch class="mx-1" variant="danger" checked />
<CSwitch class="mx-1" variant="light" checked />
<CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="mx-1" variant="primary" disabled />
<CSwitch class="c-mx-1" variant="primary" checked />
<CSwitch class="c-mx-1" variant="secondary" checked />
<CSwitch class="c-mx-1" variant="success" checked />
<CSwitch class="c-mx-1" variant="warning" checked />
<CSwitch class="c-mx-1" variant="info" checked />
<CSwitch class="c-mx-1" variant="danger" checked />
<CSwitch class="c-mx-1" variant="light" checked />
<CSwitch class="c-mx-1" variant="dark" checked />
<CSwitch class="c-mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -285,15 +286,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
<CSwitch class="mx-1" variant="info" checked shape="pill" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -303,15 +304,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
<CSwitch class="mx-1" variant="warning" checked outline />
<CSwitch class="mx-1" variant="info" checked outline />
<CSwitch class="mx-1" variant="danger" checked outline />
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline />
<CSwitch class="c-mx-1" variant="secondary" checked outline />
<CSwitch class="c-mx-1" variant="success" checked outline />
<CSwitch class="c-mx-1" variant="warning" checked outline />
<CSwitch class="c-mx-1" variant="info" checked outline />
<CSwitch class="c-mx-1" variant="danger" checked outline />
<CSwitch class="c-mx-1" variant="light" checked outline />
<CSwitch class="c-mx-1" variant="dark" checked outline />
<CSwitch class="c-mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
@@ -321,15 +322,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -339,15 +340,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
<CSwitch class="mx-1" variant="info" checked outline="alt" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -357,15 +358,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -376,15 +377,15 @@
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/>
<CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>shape
</CCol>
@@ -394,15 +395,15 @@
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -412,15 +413,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -430,15 +431,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -448,15 +449,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -466,15 +467,15 @@
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -484,11 +485,11 @@
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody class="p-0">
<CCardBody class="c-p-0">
<CTable
hover
striped
class="table-align-middle mb-0"
class="c-table-align-middle c-mb-0"
:items="items"
:fields="fields"
noSorting
src/views/base/Tables.vue
+7 -7
View File
@@ -1,5 +1,5 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CRow>
<CCol sm="12">
<CCard headerHtml="CTable power presentation" bodyWrapper>
@@ -22,10 +22,10 @@
<td
@click="toggleDetails(index)"
style="cursor:pointer"
class="text-center"
class="c-text-center"
>
<i
class="icons font-lg d-block cui-chevron-right"
class="c-icons c-font-lg c-d-block cui-chevron-right"
style="transition: transform 0.4s"
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
></i>
@@ -39,7 +39,7 @@
</td>
</template>
<template #show_details="{item, index}">
<td class="py-2">
<td class="c-py-2">
<CButton
variant="outline-primary"
square
@@ -173,11 +173,11 @@ const items = [
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'c-table-success'},
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'c-table-info'},
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
@@ -189,7 +189,7 @@ const items = [
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'c-table-danger'},
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
]
src/views/base/Tabs.vue
+5 -5
View File
@@ -1,5 +1,5 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CRow>
<CCol xs="12" lg="6">
<CCard>
@@ -7,7 +7,7 @@
Tabs
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="mt-1">
<CTabs addTabClasses="c-mt-1">
<CTab titleHtml="Home" active>
1. 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
@@ -41,7 +41,7 @@
<CCardBody>
<CTabs
pills
addNavClasses="mb-3"
addNavClasses="c-mb-3"
>
<CTab titleHtml="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -74,7 +74,7 @@
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="mt-1">
<CTabs addTabClasses="c-mt-1">
<CTab active>
<template slot="title">
<i class="icon-calculator"></i>
@@ -116,7 +116,7 @@
</CCardHeader>
<CCardBody>
<CTabs
addTabClasses="mt-1"
addTabClasses="c-mt-1"
card
>
<CTab active>
src/views/base/Tooltips.vue
+10 -10
View File
@@ -1,35 +1,35 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
<!-- <div class="c-card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
<small class="c-text-muted">docs</small>
</a>
</div> -->
</CCardHeader>
<CCardBody>
<CRow>
<CCol col="4">
<div class="text-center my-3">
<div class="c-text-center c-my-3">
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
Hover Me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="text-center my-3">
<div class="c-text-center c-my-3">
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
Hover me
</CButton>
</div>
</CCol>
<CCol col="4">
<div class="text-center my-3">
<div class="c-text-center c-my-3">
<CButton v-c-tooltip.click="
'I am showing on click and hiding on click outside tooltip!'
">
@@ -47,11 +47,11 @@
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="my-3">
<div class="c-my-3">
<CRow>
<CCol
md="4"
class="py-4 text-center"
class="c-py-4 c-text-center"
v-for="placement in placements"
:key="placement"
>