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

refactor: template changes to implement new CCard syntax

Browse Source
This commit is contained in:
woothu
2019-03-05 11:19:23 +01:00
parent 7e3646e438
commit 403122ddfb
36 changed files with 2725 additions and 2895 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Charts.vue
+9 -9
View File
@@ -1,34 +1,34 @@
<template>
<div class="animated fadeIn">
<CCardGroup columns class="card-columns">
<CCard header="Line Chart">
<CCard header="Line Chart" bodyWrapper>
<LineExample/>
</CCard>
<CCard header="Bar Chart">
<CCard header="Bar Chart" bodyWrapper>
<BarExample/>
</CCard>
<CCard header="Doughnut Chart">
<CCard header="Doughnut Chart" bodyWrapper>
<DoughnutExample/>
</CCard>
<CCard header="Radar Chart">
<CCard header="Radar Chart" bodyWrapper>
<RadarExample/>
</CCard>
<CCard header="Pie Chart">
<CCard header="Pie Chart" bodyWrapper>
<PieExample/>
</CCard>
<CCard header="Polar Area Chart">
<CCard header="Polar Area Chart" bodyWrapper>
<PolarAreaExample/>
</CCard>
<CCard header="Simple line chart">
<CCard header="Simple line chart" bodyWrapper>
<CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='success'/>
</CCard>
<CCard header="Simple pointed chart">
<CCard header="Simple pointed chart" bodyWrapper>
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
</CCard>
<CCard header="Simple bar chart">
<CCard header="Simple bar chart" bodyWrapper>
<CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/>
</CCard>
src/views/Dashboard.vue
+11 -9
View File
@@ -7,10 +7,10 @@
<CDropdown class="float-right"
variant="transparent p-0"
right
button-content="<i class='icon-settings'></i>"
buttonContent="<i class='icon-settings'></i>"
tag="div"
>
<!-- <template slot="button-content">
<!-- <template slot="buttonContent">
</template> -->
<CDropdownItem>Action</CDropdownItem>
@@ -31,10 +31,10 @@
variant="transparent p-0"
right
no-caret
button-content="<i class='icon-location-pin'></i>"
buttonContent="<i class='icon-location-pin'></i>"
tag="div"
>
<!-- <i slot="button-content"
<!-- <i slot="buttonContent"
class="icon-location-pin"
></i> -->
<CDropdownItem>Action</CDropdownItem>
@@ -58,7 +58,7 @@
<CDropdown class="float-right"
variant="transparent p-0"
right
button-content="<i class='icon-settings'></i>"
buttonContent="<i class='icon-settings'></i>"
tag="div"
>
@@ -80,9 +80,9 @@
<CDropdown class="float-right"
variant="transparent p-0"
right
button-content="<i class='icon-settings'></i>"
buttonContent="<i class='icon-settings'></i>"
>
<!-- <template slot="button-content">
<!-- <template slot="buttonContent">
<i class="icon-settings"></i>
</template> -->
<CDropdownItem>Action</CDropdownItem>
@@ -98,6 +98,7 @@
</CRow>
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
@@ -119,7 +120,8 @@
</CCol>
</CRow>
<MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CRow class="text-center">
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Visits</div>
@@ -181,7 +183,7 @@
</CRow><!--/.row-->
<CRow>
<CCol md="12">
<CCard header="Traffic &amp; Sales">
<CCard header="Traffic &amp; Sales" bodyWrapper>
<CRow>
<CCol sm="12" lg="6">
<CRow>
src/views/Widgets.vue
+4 -4
View File
@@ -204,7 +204,7 @@
<CWidget06 header="9.823" text="Members online">
<template slot='dropdown'>
<CDropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<template slot="buttonContent">
<i class="icon-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
@@ -221,7 +221,7 @@
<CCol sm="6" lg="3">
<CWidget06 variant="info" header="9.823" text="Members online">
<CDropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="button-content"
<i slot="buttonContent"
class="icon-location-pin"
></i>
<CDropdownItem>Action</CDropdownItem>
@@ -243,7 +243,7 @@
<CWidget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'>
<CDropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<template slot="buttonContent">
<i class="icon-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
@@ -262,7 +262,7 @@
<CWidget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown">
<CDropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<template slot="buttonContent">
<i class="icon-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
src/views/base/Breadcrumbs.vue
+3 -1
View File
@@ -4,7 +4,7 @@
<CRow>
<CCol cols>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,9 +12,11 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Cards.vue
+67 -53
View File
@@ -2,80 +2,93 @@
<div class="animated fadeIn">
<CRow>
<CCol sm="6" md="4">
<CCard header="Card title">
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 header="Card title" :body="loremIpsum"/>
</CCol>
<CCol sm="6" md="4">
<CCard footer="Card Footer">
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 footer="Card Footer" :body="loremIpsum" />
</CCol>
<CCol sm="6" md="4">
<CCard header="<i class='fa fa-check'></i> Card with icon">
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
header="<i class='fa fa-check'></i> Card with icon"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Card with switch
<label class="switch switch-sm switch-text switch-info float-right mb-0">
<input type="checkbox" class="switch-input">
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
<CSwitch
class="float-right"
size="sm"
shape="pill"
variant="info"
dataOn="On"
dataOff="Off"
:checked="true"
/>
</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.
</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Card with label
<CBadge variant="success" class="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.
</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Card with label
<CBadge pill variant="danger" class="float-right">42</CBadge>
</CCardHeader>
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.
<CCardBody :body="loremIpsum"/>
</CCard>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol sm="6" md="4">
<CCard header="Card outline primary" border-variant="primary">
<CCard
header="Card outline primary"
borderVariant="primary"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
borderVariant="secondary"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
borderVariant="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 header="Card outline secondary" border-variant="secondary">
<CCard header="Card outline info" borderVariant="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 header="Card outline success" border-variant="success">
<CCard header="Card outline warning" borderVariant="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 header="Card outline info" border-variant="info">
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 header="Card outline warning" border-variant="warning">
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 header="Card outline danger" border-variant="danger">
<CCard header="Card outline danger" borderVariant="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>
@@ -83,22 +96,22 @@
<CRow>
<CCol sm="6" md="4">
<CCard class="card-accent-primary" header="Card with primary accent">
<CCard class="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">
<CCard class="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">
<CCard class="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">
<CCard class="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>
@@ -108,14 +121,14 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-danger" header="Card with danger accent">
<CCard class="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><!--/.row-->
<CRow>
<CCol sm="6" md="4">
<CCard class="bg-primary text-center">
<CCard class="bg-primary text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -125,7 +138,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-success text-center">
<CCard class="bg-success text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -135,7 +148,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-info text-center">
<CCard class="bg-info text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -145,7 +158,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-warning text-center">
<CCard class="bg-warning text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -155,7 +168,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-danger text-center">
<CCard class="bg-danger text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -165,7 +178,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-secondary text-center">
<CCard class="bg-secondary text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -177,34 +190,34 @@
</CRow><!--/.row-->
<CRow>
<CCol sm="6" md="4">
<CCard header="Card title" class="bg-primary">
<CCard header="Card title" class="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 header="Card title" class="bg-success">
<CCard header="Card title" class="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 header="Card title" class="bg-info">
<CCard header="Card title" class="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 header="Card title" class="bg-warning">
<CCard header="Card title" class="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 header="Card title" class="bg-danger">
<CCard header="Card title" class="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" no-body v-if="show" >
<CCardHeader slot="header">
<CCard class="bg-secondary" v-if="show" >
<CCardHeader>
Card with header actions
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting" >
@@ -218,7 +231,7 @@
</CLink>
</div>
</CCardHeader>
<CCollapse slot="body" :show="isCollapsed" :duration="400">
<CCollapse :show="isCollapsed" :duration="400">
<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.
</CCardBody>
@@ -229,7 +242,7 @@
</CRow>
<!-- <CRow>
<CCol sm="6" md="4">
<CCard noWrapper>
<CCard >
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
<CCardHeader header="Card title"/>
<CCardBody style="max-height:200px;overflow-y:auto">
@@ -253,7 +266,8 @@ export default {
data: function () {
return {
show: true,
isCollapsed: true
isCollapsed: true,
loremIpsum: '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.'
}
}
}
src/views/base/Carousels.vue
+3 -1
View File
@@ -4,7 +4,7 @@
<CRow>
<CCol md="12" lg="9" >
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
@@ -18,6 +18,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<CCarousel>
<CCarouselItem
caption="First Slide"
@@ -32,6 +33,7 @@
imgSrc="https://lorempixel.com/1024/480/technics/8/"
/>
</CCarousel>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Collapses.vue
+20 -19
View File
@@ -4,20 +4,21 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
<div class="Fcard-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<CLink class="card-header-action">
<small class="text-muted">docs</small>
</a>
</CLink>
</div>
</CCardHeader>
<div>
<CCardBody>
<CButton id="collapse1" variant="primary">
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="mt-2">
<CCard>
<CCard bodyWrapper>
<p class="card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm">
Toggle Inner Collapse
@@ -27,12 +28,12 @@
</CCollapse>
</CCard>
</CCollapse>
</div>
</CCardBody>
</CCard>
</CCol>
<!-- <CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
</CCardHeader>
<div>
@@ -52,7 +53,7 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
</CCardHeader>
<div>
@@ -67,7 +68,7 @@
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
</CCardHeader>
<div>
@@ -89,7 +90,7 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
</CCardHeader>
<div>
@@ -110,16 +111,16 @@
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
</CCardHeader>
<div role="tablist">
<CCard class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
</CCardHeader>
<CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
<CCardBody slot="body">
<CCardBody>
<p class="card-text">
I start opened because <code>visible</code> is <code>true</code>
</p>
@@ -130,11 +131,11 @@
</CCollapse>
</CCard>
<CCard class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
</CCardHeader>
<CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
<CCardBody slot="body">
<CCardBody>
<p class="card-text">
{{ text }}
</p>
@@ -142,11 +143,11 @@
</CCollapse>
</CCard>
<CCard class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
</CCardHeader>
<CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
<CCardBody slot="body">
<CCardBody>
<p class="card-text">
{{ text }}
</p>
src/views/base/Forms.vue
+88 -199
View File
@@ -3,9 +3,10 @@
<CRow>
<CCol sm="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Credit Card </strong> <small>Form</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12">
<CFormInput
@@ -42,13 +43,15 @@
/>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
<CCol sm="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Company </strong><small>Form</small>
</CCardHeader>
<CCardBody>
<CFormInput
label="Company"
placeholder="Enter your company name"
@@ -79,15 +82,17 @@
label="Country"
placeholder="Country name"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Basic Form</strong> Elements
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
description="Let us know your full name."
@@ -199,16 +204,18 @@
multiple
/>
</CForm>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Inline</strong> Form
</CCardHeader>
<CCardBody>
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline>
<CFormInput
@@ -222,7 +229,8 @@
autocomplete="email"
/>
</CForm>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
@@ -230,9 +238,10 @@
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Horizontal</strong> Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
type="email"
@@ -250,17 +259,19 @@
horizontal
placeholder="Enter Password..."
/>
<CCardFooter slot="footer">
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Normal</strong> Form
</CCardHeader>
<CForm novalidate>
<CCardBody>
<CFormInput
type="email"
description="Please enter your email."
@@ -268,7 +279,7 @@
label="Email"
placeholder="Enter Email..."
required
was-validated
wasValidated
/>
<CFormInput
type="password"
@@ -277,18 +288,20 @@
label="Password"
placeholder="Enter Password..."
required
was-validated
wasValidated
/>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
<CCard :no-block="true">
<CCardHeader slot="header">
<CCard>
<CCardHeader>
Input <strong>Grid</strong>
</CCardHeader>
<CCardBody>
<CRow class="form-group">
<CCol sm="3">
<CFormInput class="mb-0" placeholder=".col-sm-3"/>
@@ -339,15 +352,17 @@
<CFormInput class="mb-0" placeholder=".col-sm-12"/>
</CCol>
</CRow>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Input <strong>Sizes</strong>
</CCardHeader>
<CCardBody>
<CFormInput
label="Small input"
size="sm"
@@ -365,7 +380,8 @@
horizontal
placeholder="size='lg'"
/>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
@@ -375,11 +391,11 @@
<CRow>
<CCol sm="12" md="6">
<CCard noWrapper :no-block="true">
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<strong>Basic Validation</strong> Form
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CForm validated novalidate>
<CFormInput
label="Input is valid"
@@ -396,7 +412,11 @@
</CCard>
</CCol>
<CCol sm="12" md="6">
<CCard header="<strong>Custom Validation</strong> Form">
<CCard>
<CCardHeader>
<strong>Custom Validation</strong> Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
label="Input is valid"
@@ -412,15 +432,17 @@
:isValid="validator"
/>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Icon/Text</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput
placeholder="Username"
prepend="<i class='fa fa-user'></i>"
@@ -436,14 +458,19 @@
placeholder="ex. $1.000.000"
append=".00"
/>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol sm="4">
<CCard header="<strong>Buttons</strong> Groups">
<CCard>
<CCardHeader>
<strong>Buttons</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput placeholder="Username">
<template #prepend>
<CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
@@ -470,18 +497,23 @@
<CButton variant="primary"><i class="fa fa-twitter"></i></CButton>
</template>
</CFormInput>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol sm="4">
<CCard header="<strong>Dropdowns</strong> Groups">
<CCard>
<CCardHeader>
<strong>Dropdowns</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput placeholder="Username">
<template #prepend>
<CDropdown
button-content="Action"
buttonContent="Action"
variant="primary"
>
<CDropdownItem>Action</CDropdownItem>
@@ -498,7 +530,7 @@
>
<template #append>
<CDropdown
button-content="Action"
buttonContent="Action"
variant="primary"
right
>
@@ -513,7 +545,7 @@
<template #prepend>
<CDropdown
button-content="Split"
buttonContent="Split"
variant="primary"
split
>
@@ -526,7 +558,7 @@
<template #append>
<CDropdown
button-content="Action"
buttonContent="Action"
variant="primary"
right
>
@@ -538,9 +570,8 @@
</template>
</CFormInput>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
@@ -550,9 +581,10 @@
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
@@ -565,7 +597,8 @@
<CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
</CCol>
</CRow>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
@@ -576,9 +609,10 @@
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Input Grid for small devices! <small> <code>.col-*</code></small>
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
@@ -591,7 +625,8 @@
<CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol>
</CRow>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
@@ -604,9 +639,10 @@
<CRow>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
prepend="Username"
@@ -628,13 +664,15 @@
<CButton type="submit" size="sm" variant="primary">Submit</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
placeholder="Username"
@@ -656,13 +694,15 @@
<CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
placeholder="Username"
@@ -684,17 +724,15 @@
<CButton type="submit" size="sm" variant="success">Submit</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol lg="12">
<transition name="fade">
<CCard
v-if="show"
no-wrapper
>
<CCardHeader slot="header">
<CCard v-if="show">
<CCardHeader>
<i class="fa fa-edit"></i> Form Elements
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
@@ -702,19 +740,16 @@
</CLink>
<CLink
class="card-header-action btn-minimize"
@click="formElements=!formElements"
@click="formCollapsed=!formCollapsed"
>
<i :class="`icon-arrow-${formElements ? 'down' : 'up'}`"></i>
<i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="icon-close"></i>
</CLink>
</div>
</CCardHeader>
<CCollapse
slot="body"
:show="formElements"
>
<CCollapse :show="formCollapsed">
<CCardBody>
<CFormInput
label="Prepended text"
@@ -738,7 +773,7 @@
label="Append with button"
description="Here's some help text"
>
<template v-slot:append>
<template #append>
<CButton variant="primary">Go!</CButton>
</template>
</CFormInput>
@@ -756,152 +791,6 @@
</CCollapse>
</CCard>
</transition>
<CCard>
<!-- <CForm :id="id">
<input type="text" :value="cInput"/>
<CFormInput type="email"
label="CFormInput"
placeholder="Email input"
description="input description"
size="lg"
:readonly="false"
:plaintext="false"
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
append=".00"
prepend="$"
required
:tooltipFeedbacks="true"
:isValid="validator"
:was-validateds="true"
addInputClasses="hehe"
addLabelClasses="heh2"
addWrapperClasses="heh2"
v-model="cInput"
lazys
/>
<CFormTextarea label="Input label"
placeholder="Placeholder for textarea"
descriptiond="input description"
size="lg"
:readonly="false"
:plaintext="false"
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
append=".00"
prepends="$"
required
value="wsewrwed"
:tooltipFeedbacks="true"
:isValids="true"
:was-validated="true"
addInputClasses="fsad"
addLabelClassesa="heh2"
:rows="20"
:cols="12"
v-model="cInput"
>
<CButton slot="prepend" class="btn btn-success">asd</CButton>
</CFormTextarea>
<br>
<CFormSelect label="Input label"
:options="['first', true,3,{value:'fourth', text:'Another text', disabled:'disabled'},
{value:null, text:'boolean value'}]"
placeholder="Placeholder test"
description="input description"
size="lg"
customs
plaintexts
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
disableds="disabled"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
appenda=".00"
prepends="$"
required
:tooltipFeedback="true"
:isValidf="true"
:was-validated="true"
addInputClassess="form-control-plaintext"
addLabelClasses="heh2"
addWrapperClasses="hehe22"
v-model="selected"
>
<CButton slot="prepends" class="btn btn-success">dssdf</CButton>
</CFormSelect>
{{String(selected)}}
<CFormFile label="Input label"
description="input description"
size="lg"
:horizontals="{input: 'col-sm-8', label: 'col-sm-4'}"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
required
:tooltipFeedback="true"
:isValid="true"
:was-validateds="true"
addInputClassesa="hehe"
addLabelClassesa="heh2"
custom
multiple
accept="image/*"
/>
<div class="my-radio-group row">
<div class="col-sm-4">
My radio group
</div>
<div class="col-sm-8" >
<CFormCheckbox type="radio"
:label="String(value)"
descriptions="input description"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
required
:tooltipFeedbacks="true"
:was-validateds="true"
addLabelClassesa="heh2"
custom
name="someName"
:value="value"
v-model="checks[1]"
:key="key"
inline
v-for="(value, key) in ['first', null, 3, false]"
/>
<CFormCheckbox label="Input label"
descriptions="input description"
sizes="lg"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
required
:tooltipFeedback="true"
:was-validated="true"
addInputClassesa="hehe"
addLabelClassesa="heh2"
:isValidss="true"
value="hehes"
custom="radio"
v-model="checks[0]"
/>
</div>
</div>
</CForm>
<CSpinner variant="success"/>
<CSpinner grow/>
<CSpinner small />
<CSpinner small grow/>
<CSpinner grow tag="span"/> -->
</CCard>
</CCol>
</CRow>
</div>
@@ -925,7 +814,7 @@ export default {
testkkk: 2,
horizontal: { label:'col-3', input:'col-9' },
options: ['Option 1', 'Option 2', 'Option 3'],
formElements: true,
formCollapsed: true,
checkboxNames: ['Radios', 'Inline Radios',
'Checkboxes', 'Inline Checkboxes',
'Radios - custom', 'Inline Radios - custom',
src/views/base/Jumbotrons.vue
+11 -11
View File
@@ -4,7 +4,7 @@
<CRow>
<CCol>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <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">
@@ -12,21 +12,21 @@
</a>
</div>
</CCardHeader>
<div>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<CButton variant="primary" href="#">More Info</CButton>
</CJumbotron>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<div>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
@@ -40,21 +40,21 @@
<CButton variant="primary" href="#">Do Something</CButton>
<CButton variant="success" href="#">Do Something Else</CButton>
</CJumbotron>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small>
</CCardHeader>
<div>
<CCardBody>
<CJumbotron variant="info"
text-variant="white"
border-variant="dark"
textVariant="white"
borderVariant="dark"
header="Bootstrap 4">
<p slot="lead" class="lead">
@@ -67,7 +67,7 @@
out within the larger container.
</p>
</CJumbotron>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/ListGroups.vue
+47 -29
View File
@@ -1,22 +1,10 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<!-- <CRow>
<CCol>
<CCard>
<CMedia asideClasses="m-5 align-self-end" asideRight>
<img slot="aside" src="img/avatars/6.jpg">
<div class="text-center">
ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
</div>
</CMedia>
</CCard>
</CCol>
</CRow> -->
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<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">
@@ -24,6 +12,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -31,13 +20,15 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
@@ -45,15 +36,19 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -61,41 +56,53 @@
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Cras justo odio
@@ -110,17 +117,19 @@
<CBadge variant="primary" pill>1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
@@ -132,15 +141,17 @@
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants active</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
@@ -152,15 +163,19 @@
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard header="<b>Card with list group</b>">
<CListGroup>
@@ -175,13 +190,13 @@
ad sit ipsum anim Lorem.
</p>
</CCard>
<CCard noWrapper header="<b>Card with flush list group</b>">
<CCard header="<b>Card with flush list group</b>">
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<CCardBody slot="body">
<CCardBody>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
@@ -189,15 +204,17 @@
</CCardBody>
</CCard>
</CCardGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#" active class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
@@ -233,6 +250,7 @@
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Navbars.vue
+22 -20
View File
@@ -31,7 +31,7 @@
</CNavbar>
</CCard> -->
<CCard>
<CCardHeader slot="header">
<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">
@@ -39,6 +39,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<CNavbar toggleable="md" type="dark" variant="info">
<CNavbarToggle @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
@@ -61,7 +62,7 @@
<CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
<CDropdown button-content="Lang"
<CDropdown buttonContent="Lang"
nav
placement="bottom-end"
>
@@ -72,7 +73,7 @@
</CDropdown>
<CDropdown nav
button-content="<em>User</em>"
buttonContent="<em>User</em>"
placement="bottom-end"
>
<CDropdownItem>Profile</CDropdownItem>
@@ -81,13 +82,14 @@
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small>
</CCardHeader>
<div>
<CCardBody>
<!-- Image and text -->
<CNavbar variant="faded" light>
<CNavbarBrand href="#">
@@ -95,14 +97,14 @@
BootstrapVue
</CNavbarBrand>
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar toggleable="sm" light variant="light">
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbarBrand>BootstrapVue</CNavbarBrand>
@@ -112,14 +114,14 @@
</CNavbarNav>
</CCollapse>
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar type="dark" variant="primary">
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar> -->
@@ -127,27 +129,27 @@
<CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown button-content="Lang" right nav>
<CDropdown buttonContent="Lang" right nav>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown button-content="User" right nav>
<CDropdown buttonContent="User" right nav>
<CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem>
</CDropdown>
</CNavbarNav>
<!-- </CCollapse> -->
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar type="light" variant="light">
<CForm inline>
<CFormInput
@@ -158,14 +160,14 @@
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar type="light" variant="light">
<CForm inline>
<CFormInput
@@ -174,7 +176,7 @@
/>
</CForm>
</CNavbar>
</div>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Navs.vue
+47 -32
View File
@@ -2,28 +2,33 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
<!-- <div class="card-header-actions">
<CLink
href="#"
class="card-header-action"
>
<small class="text-muted">docs</small>
</a>
</div>
</CLink>
</div> -->
</CCardHeader>
<div>
<CCardBody>
<CNav>
<CNavItem active>Active</CNavItem>
<CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<div>
<CCardBody>
<CNav>
<CNavItem active>
<i class="icon-basket-loaded"></i>
@@ -36,13 +41,15 @@
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<div>
<CCardBody>
<CNav tabs>
<CNavItem active>
Active
@@ -55,61 +62,67 @@
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header" @click="item++">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<div>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<div>
<CCardBody>
<CNav fill tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<div>
<CCardBody>
<CNav justified tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<div>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
buttonContent="Dropdown"
>
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
@@ -118,14 +131,15 @@
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol cols="3" class="m-0">
<CNav vertical pills >
@@ -136,6 +150,7 @@
</CNav>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Paginations.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<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">
@@ -10,7 +10,7 @@
</a>
</div>
</CCardHeader>
<div>
<CCardBody>
<h6>Default</h6>
<CPagination v-model="currentPage" :pages="10"/>
<br>
@@ -26,14 +26,14 @@
</div>
<div>currentPage: {{currentPage}}</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination v-model="currentPage" :pages="10"/>
<br>
@@ -47,7 +47,7 @@
<br>
<div>currentPage: {{currentPage}}</div>
</div>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Popovers.vue
+10 -132
View File
@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<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">
@@ -10,6 +10,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol cols="4">
<div class="my-3 text-center">
@@ -44,8 +45,7 @@
v-c-popover.click="{
header: 'Popover!',
content: 'I am showing on click and hiding on click outside tooltip!',
placement: 'bottom',
active: true
placement: 'bottom'
}"
>
Click me
@@ -53,13 +53,15 @@
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<div class="my-3">
<CCardBody class="my-3">
<CRow>
<CCol
md="4"
@@ -79,116 +81,8 @@
</CButton>
</CCol>
</CRow>
</div>
</CCardBody>
</CCard>
<!-- <CCard class="d-sm-down-none">
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>via properties or slots</small>
</CCardHeader>
<CRow>
<CCol md="6" class="py-4 text-center">
<CButton id="exPopover2" variant="primary">Using properties</CButton>
<b-popover target="exPopover2"
title="Prop Examples"
triggers="hover focus"
content="Embedding content using properties is easy">
</b-popover>
</CCol>
<CCol md="6" class="py-4 text-center">
<CButton id="exPopover3" variant="primary">Using slots</CButton>
<b-popover target="exPopover3" triggers="hover focus">
<template slot="title">Content via Slots</template>
Embedding content <span class="text-danger">using slots</span>
affords you <em>greater <strong>control.</strong></em> and
basic HTML support.
</b-popover>
</CCol>
</CRow>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>show</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="show = !show">Toggle Popover</CButton>
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>open/close events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="onOpen">Open</CButton>
<CButton class="px-1" @click="onClose">Close</CButton>
</div>
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>enable/disable events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="onEnable">Enable</CButton>
<CButton class="px-1" @click="onDisable">Disable</CButton>
</div>
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</CCard> -->
<!-- <CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
</CCardHeader>
<CRow>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.top="'I am Top'"
title="Popover!"
variant="primary">Top</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.left="'I am Left'"
title="Popover!"
variant="primary">Left</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.right="'I am Right'"
title="Popover!"
variant="primary">Right</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.bottom="'I am Bottom'"
title="Popover!"
variant="primary">Bottom</CButton>
</CCol>
</CRow>
</CCard> -->
</div>
</div>
</template>
@@ -203,23 +97,7 @@ export default {
'bottom-start', 'bottom', 'bottom-end',
'right-start', 'right', 'right-end',
'left-start', 'left', 'left-end'
],
show: false,
counter: 0
}
},
methods: {
onOpen () {
this.$refs.popover1.$emit('open')
},
onClose () {
this.$refs.popover1.$emit('close')
},
onEnable () {
this.$refs.popover2.$emit('enable')
},
onDisable () {
this.$refs.popover2.$emit('disable')
]
}
}
}
src/views/base/ProgressBars.vue
+24 -24
View File
@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<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">
@@ -10,7 +10,7 @@
</a>
</div>
</CCardHeader>
<div>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
@@ -18,13 +18,13 @@
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
</CProgress>
<CButton class="mt-4" @click="clicked">Click me</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<div>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"></CProgress>
<h6>Value label</h6>
@@ -35,39 +35,39 @@
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="mb-3"></CProgress>
<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>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"></CProgress>
<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>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
</CCardHeader>
<div>
<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">
@@ -77,13 +77,13 @@
></CProgress>
</div>
</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
</CCardHeader>
<div>
<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>
@@ -91,13 +91,13 @@
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
</CCardHeader>
<div>
<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>
@@ -105,13 +105,13 @@
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
</CCardHeader>
<div>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
@@ -132,7 +132,7 @@
<CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
<CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
</CProgress>
</div>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Switches.vue
+80 -60
View File
@@ -1,20 +1,17 @@
<template>
<div class="animated fadeIn">
<!-- <p>myFlag1: {{radio}}</p>
<p>myFlag1: {{myFlag1}}</p>
<p>myFlag2: {{myFlag2}}</p>
<CSwitch v-model="myFlag1"/>
<CSwitch v-model="myFlag2" checked @change="test" /> -->
<CRow>
<CCol xs="12" md="6">
<CCard v-if="true">
<CCardHeader slot="header">
<CCardHeader>
<h5>
Radio switches
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<CBadge variant="danger" class="float-right">NEW</CBadge>
</h5>
</CCardHeader>
<CCardBody>
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
<CSwitch class="mx-1"
:key="key"
@@ -28,16 +25,18 @@
:value="variant"
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch default
<CBadge variant="primary">{{checker}}</CBadge>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1"
variant="primary"
checked
@@ -48,7 +47,6 @@
falseValue="no"
/>
<CSwitch class="mx-1"
ref="totest"
variant="primary"
checked
name="switch1"
@@ -62,13 +60,15 @@
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
/>
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -78,13 +78,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -94,13 +96,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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 />
@@ -110,13 +114,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -126,13 +132,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -142,13 +150,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -158,13 +168,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -174,13 +186,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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 />
@@ -190,13 +204,15 @@
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -206,13 +222,15 @@
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -222,13 +240,15 @@
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -238,13 +258,15 @@
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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 />
@@ -254,13 +276,15 @@
<CSwitch class="mx-1" variant="light" checked />
<CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -270,13 +294,15 @@
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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 />
@@ -286,13 +312,15 @@
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -302,13 +330,15 @@
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -318,13 +348,15 @@
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -334,14 +366,16 @@
<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 />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
@@ -351,13 +385,15 @@
<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" />
</CCardBody>
</CCard>shape
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -367,13 +403,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -383,13 +421,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -399,13 +439,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -415,13 +457,15 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
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" />
@@ -431,15 +475,16 @@
<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" />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<CCard noWrapper>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody slot="body" class="p-0">
<CCardBody class="p-0">
<CTable
hover
striped
@@ -472,19 +517,9 @@
</template>
<script>
// import CSwitch from './CSwitch'
export default {
name: 'switches',
computed: {
icon (icon) {
return icon
}
},
// components: {
// CSwitch
// },
data: () => {
data () {
return {
fields: [
{key: 'size'},
@@ -498,10 +533,6 @@ export default {
],
checker: 'yes',
radio: 'primary',
radio2: 'warning',
myFlag1: true,
myFlag2: false,
picker: '',
labelIcon: {
dataOn: '\u2713',
dataOff: '\u2715'
@@ -511,17 +542,6 @@ export default {
dataOff: 'no'
}
}
},
methods: {
test (a, event) {
console.log(a)
console.log(typeof a)
console.log(event)
},
test2 () {
console.log(this.$refs.totest)
this.$refs.totest.$forceUpdate()
}
}
}
</script>
src/views/base/Table.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<CCard :header="caption">
<CCard :header="caption" bodyWrapper>
<CTable
:hover="hover"
:striped="striped"
src/views/base/Tables.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="animated fadeIn">
<CRow>
<CCol sm="12">
<CCard header="CTable power presentation">
<CCard header="CTable power presentation" bodyWrapper>
<CTable :items="items.slice(0)"
:fields="fields"
:perPage="6"
src/views/base/Tabs.vue
+15 -5
View File
@@ -3,9 +3,10 @@
<CRow>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="mt-1">
<CTab title="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -29,13 +30,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs
</CCardHeader>
<CCardBody>
<CTabs
pills
addNavClasses="mb-3"
@@ -62,13 +65,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="mt-1">
<CTab active>
<template slot="title">
@@ -101,13 +106,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs
addTabClasses="mt-1"
card
@@ -143,13 +150,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs vertical
</CCardHeader>
<CCardBody>
<CTabs
card
pills
@@ -187,6 +196,7 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Tooltips.vue
+6 -92
View File
@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
@@ -12,6 +12,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol cols="4">
<div class="text-center my-3">
@@ -37,13 +38,15 @@
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="my-3">
<CRow>
<CCol
@@ -64,77 +67,8 @@
</CCol>
</CRow>
</div>
</CCardBody>
</CCard>
<!-- <CRow>
<CCol md="6" class="py-4 text-center">
<CButton id="exButton1" variant="outline-success">Live chat</CButton>
</CCol>
<CCol md="6" class="py-4 text-center">
<CButton id="exButton2" variant="outline-success">Html chat</CButton>
</CCol>
</CRow>
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
<b-tooltip target="exButton2" placement="bottom">
Hello <strong>World!</strong>
</b-tooltip>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
</CCardHeader>
<div class="text-center">
<CButton id="tooltipButton-1" variant="primary">I have a tooltip</CButton>
<br><br>
<CButton @click="show = !show">Toggle Tooltip</CButton>
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="tooltipButton-showEvent" variant="primary">I have a tooltip</CButton>
</div>
<div class="p-2">
<CButton class="px-1 mr-1" @click="onOpen">Open</CButton>
<CButton class="px-1" @click="onClose">Close</CButton>
</div>
<b-tooltip ref="tooltip" target="tooltipButton-showEvent">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</CCard>
<CCard id="boundary">
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="tooltipButton-disable" variant="primary">I have a tooltip</CButton>
</div>
<div class="p-2">
<CButton @click="disabled = !disabled" class="mr-1">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
</CButton>
<CButton @click="disableByRef">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
</CButton>
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</div>
</CCard> -->
</div>
</div>
</template>
@@ -151,26 +85,6 @@ export default {
'left-start', 'left', 'left-end'
]
}
},
methods: {
// onOpen () {
// this.$refs.tooltip.$emit('open')
// },
// onClose () {
// this.$refs.tooltip.$emit('close')
// },
// disableByRef () {
// if (this.disabled) {
// this.$refs.tooltip2.$emit('enable')
// } else {
// this.$refs.tooltip2.$emit('disable')
// }
// },
// test () {
// this.show = !this.show
// this.placement = 'right'
// this.smh = 200
// }
}
}
</script>
src/views/buttons/BrandButtons.vue
+9 -3
View File
@@ -3,9 +3,10 @@
<CRow>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Brand Button</strong>
</CCardHeader>
<CCardBody>
<small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
@@ -92,13 +93,15 @@
<CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
</p>
</CCardBody>
</CCard>
</CCol><!--/.col-->
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
@@ -185,14 +188,16 @@
<CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
</p>
</CCardBody>
</CCard>
</CCol><!--/.col-->
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
@@ -279,6 +284,7 @@
<CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
</p>
</CCardBody>
</CCard>
</CCol><!--/.col-->
</CRow><!--/.row-->
src/views/buttons/ButtonGroups.vue
+16 -6
View File
@@ -4,7 +4,7 @@
<CRow>
<CCol cols="12" >
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,6 +12,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton>One</CButton>
@@ -30,13 +31,15 @@
<CButton variant="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton>Left</CButton>
@@ -56,13 +59,15 @@
<CButton>Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton class="d-sm-down-none">Button 1</CButton>
@@ -82,13 +87,15 @@
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton>Top</CButton>
@@ -96,11 +103,12 @@
<CButton>Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -108,6 +116,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CButtonToolbar key-nav aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
@@ -164,7 +173,7 @@
<CDropdown
class="mx-1"
placement="bottom-end"
button-content="Menu"
buttonContent="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
@@ -176,6 +185,7 @@
</CButtonGroup>
</CButtonToolbar>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/buttons/Dropdowns.vue
+47 -45
View File
@@ -4,7 +4,7 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,8 +12,9 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown1" button-content="Dropdown Button" class="m-2">
<CDropdown id="ddown1" buttonContent="Dropdown Button" class="m-2">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
@@ -23,7 +24,7 @@
</CDropdown>
</div>
<!-- <div>
<CDropdown id="ddown-buttons" button-content="Dropdown using buttons as menu items" class="m-2">
<CDropdown id="ddown-buttons" buttonContent="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -31,7 +32,7 @@
</CDropdown>
</div> -->
<div>
<CDropdown id="ddown-divider" button-content="Dropdown with divider" class="m-2">
<CDropdown id="ddown-divider" buttonContent="Dropdown with divider" class="m-2">
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
@@ -39,30 +40,30 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-header" button-content="Dropdown with header" class="m-2">
<CDropdown id="ddown-header" buttonContent="Dropdown with header" class="m-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
<CDropdown id="ddown-left" buttonContent="Left align" variant="primary" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-right"
placement="bottom-end"
button-content="Right align"
buttonContent="Right align"
variant="primary"
class="m-2"
>
@@ -73,7 +74,7 @@
</div>
<div>
<CDropdown id="ddown-dropup"
button-content="Drop-Up"
buttonContent="Drop-Up"
variant="info"
class="m-2"
dropup
@@ -86,7 +87,7 @@
<div>
<CDropdown id="ddown-offset"
:offset="25"
button-content="Offset Dropdown"
buttonContent="Offset Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -95,27 +96,27 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-split" split button-content="Split Dropdown" class="m-2">
<CDropdown id="ddown-split" split buttonContent="Split Dropdown" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown variant="link"
size="lg"
button-content="&#x1f50d;<span class='sr-only'>Search</span>"
buttonContent="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
>
<CDropdownItem>Action</CDropdownItem>
@@ -123,51 +124,51 @@
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-lg" size="lg" button-content="Large" class="m-2">
<CDropdown id="ddown-lg" size="lg" buttonContent="Large" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-lg-split" size="lg" split button-content="Large Split" class="m-2">
<CDropdown id="ddown-lg-split" size="lg" split buttonContent="Large Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown id="ddown-sm" size="sm" button-content="Small" class="m-2">
<CDropdown id="ddown-sm" size="sm" buttonContent="Small" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-sm-split" size="sm" split button-content="Small Split" class="m-2">
<CDropdown id="ddown-sm-split" size="sm" split buttonContent="Small Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-aria" button-content="Dropdown ARIA" variant="primary" class="m-2">
<CDropdown id="ddown-aria" buttonContent="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1">
<CDropdownHeader id="header1">Groups</CDropdownHeader>
<CDropdownItem aria-describedby="header1">Add</CDropdownItem>
@@ -182,60 +183,61 @@
<CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
</CCardHeader>
<CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
<CCardBody>
<CDropdown size="sm" id="ddown_primary" buttonContent="Primary" variant="primary" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
<CDropdown size="sm" id="ddown_secondary" buttonContent="Secondary" variant="secondary" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
<CDropdown size="sm" id="ddown_success" buttonContent="Success" variant="success" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
<CDropdown size="sm" id="ddown_warning" buttonContent="Warning" variant="warning" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
<CDropdown size="sm" id="ddown_danger" buttonContent="Danger" variant="danger" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
<CDropdown size="sm" id="ddown_info" buttonContent="Info" variant="info" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
<CDropdown size="sm" id="ddown_light" buttonContent="Light" variant="light" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
<CDropdown size="sm" id="ddown_dark" buttonContent="Dark" variant="dark" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
<CDropdown size="sm" id="ddown_link" buttonContent="Link" variant="link" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/buttons/StandardButtons.vue
+31 -25
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Standard buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0">
Normal
@@ -103,11 +103,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Outline Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use <code>variant="outline-*"</code> prop
</p>
@@ -203,11 +203,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Ghost Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use
<code>ghost</code> prop for ghost buttons.
@@ -304,11 +304,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Square Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use
<code>square</code> prop for square buttons.
@@ -411,11 +411,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Pill Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use
<code>pill</code> prop for pill buttons.
@@ -518,11 +518,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Sizes</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<CRow class="align-items-center">
<CCol cols="2" xl class="mb-3 mb-xl-0">
@@ -586,12 +586,12 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>With Icons</strong>
</CCardHeader>
<CCardBody slot="body">
<CRow class="align-items-center mt-3">
<CCardBody>
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary">
<i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
@@ -621,9 +621,10 @@
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Toggle pressed state</strong>
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
@@ -644,13 +645,15 @@
<CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CRow>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" variant="secondary" block>Block level button</CButton>
<CButton size="lg" variant="primary" block>Block level button</CButton>
<CButton size="lg" variant="success" block>Block level button</CButton>
@@ -658,13 +661,15 @@
<CButton size="lg" variant="warning" block>Block level button</CButton>
<CButton size="lg" variant="danger" block>Block level button</CButton>
<CButton size="lg" variant="link" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" variant="outline-secondary" block>Block level button</CButton>
<CButton size="lg" variant="outline-primary" block>Block level button</CButton>
<CButton size="lg" variant="outline-success" block>Block level button</CButton>
@@ -672,6 +677,7 @@
<CButton size="lg" variant="outline-warning" block>Block level button</CButton>
<CButton size="lg" variant="outline-danger" block>Block level button</CButton>
<CButton size="lg" ghost variant="info" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/icons/CoreUIIcons.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
<div class="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
@@ -9,7 +9,7 @@
</a>
</div>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-account-logout icons font-2xl d-block mt-4"></i>
src/views/icons/Flags.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper id="new47">
<CCardHeader slot="header">
<CCard id="new47">
<CCardHeader>
<i class="fa fa-font-awesome"></i> Flags
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol class="mb-5" cols="12">
For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
src/views/icons/FontAwesome.vue
+51 -51
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper id="new47">
<CCardHeader slot="header">
<CCard id="new47">
<CCardHeader>
<i class="fa fa-font-awesome"></i> 50 New Icons in 4.7
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
<i class="fa fa-address-book fa-lg mt-4"></i><br/>address-book
@@ -174,9 +174,9 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper id="new">
<CCardHeader slot="header">20 New Icons in 4.5</CCardHeader>
<CCardBody slot="body">
<CCard id="new">
<CCardHeader>20 New Icons in 4.5</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -245,9 +245,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="web-application">
<CCardHeader slot="header">Web Application Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="web-application">
<CCardHeader>Web Application Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1432,9 +1432,9 @@
</CCard>
<CCard noWrapper id="hand">
<CCardHeader slot="header">Hand Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="hand">
<CCardHeader>Hand Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1494,9 +1494,9 @@
</CCard>
<CCard noWrapper id="transportation">
<CCardHeader slot="header">Transportation Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="transportation">
<CCardHeader>Transportation Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1555,9 +1555,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="gender">
<CCardHeader slot="header">Gender Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="gender">
<CCardHeader>Gender Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1607,9 +1607,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="file-type">
<CCardHeader slot="header">File Type Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="file-type">
<CCardHeader>File Type Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1671,9 +1671,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="spinner">
<CCardHeader slot="header">Spinner Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="spinner">
<CCardHeader>Spinner Icons</CCardHeader>
<CCardBody>
<div class="alert alert-success">
<ul class="fa-ul">
<li>
@@ -1704,9 +1704,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="form-control">
<CCardHeader slot="header">Form Control Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="form-control">
<CCardHeader>Form Control Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1747,9 +1747,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="payment">
<CCardHeader slot="header">Payment Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="payment">
<CCardHeader>Payment Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1793,9 +1793,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="chart">
<CCardHeader slot="header">Chart Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="chart">
<CCardHeader>Chart Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1818,9 +1818,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="currency">
<CCardHeader slot="header">Currency Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="currency">
<CCardHeader>Currency Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1906,9 +1906,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="text-editor">
<CCardHeader slot="header">Text Editor Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="text-editor">
<CCardHeader>Text Editor Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -2063,9 +2063,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="directional">
<CCardHeader slot="header">Directional Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="directional">
<CCardHeader>Directional Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -2232,9 +2232,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="video-player">
<CCardHeader slot="header">Video Player Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="video-player">
<CCardHeader>Video Player Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -2305,9 +2305,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="brand">
<CCardHeader slot="header">Brand Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="brand">
<CCardHeader>Brand Icons</CCardHeader>
<CCardBody>
<div class="alert alert-warning">
<h4><i class="fa fa-warning"></i> Warning!</h4>
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
@@ -2796,9 +2796,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="medical">
<CCardHeader slot="header">Medical Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="medical">
<CCardHeader>Medical Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
src/views/icons/SimpleLineIcons.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper class="card-default">
<CCardHeader slot="header">
<CCard class="card-default">
<CCardHeader>
<i class="fa fa-picture-o"></i> Simple Line Icons
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3">
src/views/notifications/Alerts.vue
+15 -5
View File
@@ -4,7 +4,7 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
@@ -12,6 +12,7 @@
</a>
</div>
</CCardHeader>
<CCardBody>
<div>
<p></p>
<CAlert show variant="primary">Primary Alert</CAlert>
@@ -23,14 +24,16 @@
<CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
@@ -59,13 +62,15 @@
.
</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="alert-heading">Well done!</h4>
<p>
@@ -78,13 +83,15 @@
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert :show="true" dismissible disabled>
Dismissible Alert!
@@ -115,11 +122,13 @@
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert :show="dismissCountDown"
dismissible
@@ -145,6 +154,7 @@
Show alert with timer
</CButton>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/notifications/Badges.vue
+29 -20
View File
@@ -1,25 +1,26 @@
<template>
<template functional>
<div class="wrapper">
<div class="animated fadeIn">
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</CCardHeader>
<div>
<CCardBody>
<h2>Example heading <CBadge>New</CBadge></h2>
<h3>Example heading <CBadge>New</CBadge></h3>
<h4>Example heading <CBadge>New</CBadge></h4>
<h5>Example heading <CBadge>New</CBadge></h5>
<h6>Example heading <CBadge>New</CBadge></h6>
</div>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton variant="primary">
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton>
@@ -27,8 +28,12 @@
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
@@ -37,10 +42,14 @@
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
@@ -49,10 +58,14 @@
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
@@ -61,7 +74,7 @@
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
@@ -71,10 +84,6 @@
<script>
export default {
name: 'badges',
data () {
return {
}
}
name: 'badges'
}
</script>
src/views/notifications/Modals.vue
+33 -10
View File
@@ -3,17 +3,40 @@
<div class="animated fadeIn">
<CRow>
<CCol cols="12">
<CCard header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
<CButton variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</CButton>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</CButton>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals
</CCardHeader>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">Launch success modal</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">Launch info modal</CButton>
<CButton variant="dark" @click="darkModal = !darkModal" class="mr-1">Launch dark modal</CButton>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
</CCard>
</CCol><!--/.col-->
</CRow><!--/.row-->
src/views/pages/Login.vue
+3 -2
View File
@@ -4,8 +4,8 @@
<CRow class="justify-content-center">
<CCol md="8">
<CCardGroup>
<CCard noWrapper class="p-4">
<CCardBody slot="body">
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
@@ -34,6 +34,7 @@
<CCard
class="text-white text-center bg-primary py-5 d-md-down-none"
style="width:44%"
bodyWrapper
>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
src/views/pages/Register.vue
-4
View File
@@ -4,7 +4,6 @@
<CRow class="justify-content-center">
<CCol md="6" sm="8">
<CCard class="mx-4">
<template #body>
<CCardBody class="p-4">
<CForm>
<h1>Register</h1>
@@ -35,8 +34,6 @@
<CButton variant="success" block>Create Account</CButton>
</CForm>
</CCardBody>
</template>
<template #footer>
<CCardFooter class="p-4">
<CRow>
<CCol cols="6">
@@ -47,7 +44,6 @@
</CCol>
</CRow>
</CCardFooter>
</template>
</CCard>
</CCol>
</CRow>
src/views/theme/Colors.vue
+6 -6
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard >
<CCardHeader slot="header">
<CCardHeader>
<i class="icon-drop"></i> Theme colors
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow>
<ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6>
@@ -20,10 +20,10 @@
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="icon-drop"></i> Grays
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow>
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
@@ -38,10 +38,10 @@
</CCardBody>
</CCard>
<CCard >
<CCardHeader slot="header">
<CCardHeader>
<i class="icon-drop"></i> Additional colors
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow>
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
src/views/users/User.vue
+8 -8
View File
@@ -1,21 +1,21 @@
<template>
<CRow>
<CCol cols="12"
lg="6"
>
<CCard no-header>
<template slot="header">
<CCol cols="12" lg="6">
<CCard>
<CCardHeader>
User id: {{ $route.params.id }}
</template>
</CCardHeader>
<CCardBody>
<CTable striped
small
fixed
:items="items($route.params.id)"
:fields="$options.fields"
/>
<template slot="footer">
</CCardBody>
<CCardFooter>
<CButton @click="goBack">Back</CButton>
</template>
</CCardFooter>
</CCard>
</CCol>
</CRow>
src/views/users/Users.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<CRow>
<CCol cols="12" xl="8">
<transition name="slide">
<CCard header="users">
<CCard header="users" bodyWrapper>
<CTable hover
striped
:items="items"