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