refactor: template changes to implement new CCard syntax
This commit is contained in:
woothu
@@ -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>
|
||||
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
<CCardBody>
|
||||
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
+69
-55
@@ -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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,20 +18,22 @@
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCarousel>
|
||||
<CCarouselItem
|
||||
caption="First Slide"
|
||||
imgSrc="https://lorempixel.com/1024/480/technics/2/"
|
||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
active
|
||||
imgSrc="https://lorempixel.com/1024/480/technics/4/"
|
||||
/>
|
||||
<CCarouselItem
|
||||
imgSrc="https://lorempixel.com/1024/480/technics/8/"
|
||||
/>
|
||||
</CCarousel>
|
||||
<CCardBody>
|
||||
<CCarousel>
|
||||
<CCarouselItem
|
||||
caption="First Slide"
|
||||
imgSrc="https://lorempixel.com/1024/480/technics/2/"
|
||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
active
|
||||
imgSrc="https://lorempixel.com/1024/480/technics/4/"
|
||||
/>
|
||||
<CCarouselItem
|
||||
imgSrc="https://lorempixel.com/1024/480/technics/8/"
|
||||
/>
|
||||
</CCarousel>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+636
-747
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
+177
-159
@@ -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,215 +12,245 @@
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader 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>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<CListGroup>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<CBadge variant="primary" pill>14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<CBadge variant="primary" pill>2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<CBadge variant="primary" pill>1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<CBadge variant="primary" pill>14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<CBadge variant="primary" pill>2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<CBadge variant="primary" pill>1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> List group </strong>
|
||||
<small>variants</small>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> List group </strong>
|
||||
<small>variants active</small>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol 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>
|
||||
<CCardGroup deck>
|
||||
<CCard header="<b>Card with list group</b>">
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<p class="card-text mt-2">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</p>
|
||||
</CCard>
|
||||
<CCard noWrapper 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">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
<CCardBody>
|
||||
<CCardGroup deck>
|
||||
<CCard header="<b>Card with list group</b>">
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<p class="card-text mt-2">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</p>
|
||||
</CCard>
|
||||
<CCard header="<b>Card with flush list group</b>">
|
||||
<CListGroup flush>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#" active class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">Disabled List group item</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#" active class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">Disabled List group item</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
+59
-57
@@ -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,55 +39,57 @@
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CNavbar toggleable="md" type="dark" variant="info">
|
||||
<CNavbarToggle @click="show=!show"/>
|
||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||
<CCollapse :show="show"
|
||||
navbar
|
||||
>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<CNavItem href="#" disabled>Disabled</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CCardBody>
|
||||
<CNavbar toggleable="md" type="dark" variant="info">
|
||||
<CNavbarToggle @click="show=!show"/>
|
||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||
<CCollapse :show="show"
|
||||
navbar
|
||||
>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<CNavItem href="#" disabled>Disabled</CNavItem>
|
||||
</CNavbarNav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CForm inline>
|
||||
<CFormInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
<!-- Right aligned nav items -->
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CForm inline>
|
||||
<CFormInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
|
||||
<CDropdown button-content="Lang"
|
||||
nav
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown buttonContent="Lang"
|
||||
nav
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown nav
|
||||
button-content="<em>User</em>"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
<CDropdown nav
|
||||
buttonContent="<em>User</em>"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</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>
|
||||
|
||||
+57
-42
@@ -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,24 +131,26 @@
|
||||
<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>
|
||||
<CRow>
|
||||
<CCol cols="3" class="m-0">
|
||||
<CNav vertical pills >
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol cols="3" class="m-0">
|
||||
<CNav vertical pills >
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+51
-173
@@ -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,56 +10,58 @@
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
text="Hover me"
|
||||
/>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.click="{
|
||||
header: 'Popover!',
|
||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
||||
placement: 'bottom',
|
||||
active: true
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
text="Hover me"
|
||||
/>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.click="{
|
||||
header: 'Popover!',
|
||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
||||
placement: 'bottom'
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader 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')
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
+323
-303
@@ -1,445 +1,490 @@
|
||||
<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>
|
||||
<!-- <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"
|
||||
:variant="variant"
|
||||
shape="3d"
|
||||
outline="alt"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
v-model="radio"
|
||||
:value="variant"
|
||||
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
|
||||
/>
|
||||
<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"
|
||||
:variant="variant"
|
||||
shape="3d"
|
||||
outline="alt"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
v-model="radio"
|
||||
: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>
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
v-model="checker"
|
||||
value="someValue"
|
||||
trueValue="yes"
|
||||
falseValue="no"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
ref="totest"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
:checked="true"
|
||||
value="someValue"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
:variant="variant"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
|
||||
/>
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
v-model="checker"
|
||||
value="someValue"
|
||||
trueValue="yes"
|
||||
falseValue="no"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
:checked="true"
|
||||
value="someValue"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
:variant="variant"
|
||||
checked
|
||||
:key="key"
|
||||
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>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline />
|
||||
<CSwitch class="mx-1" variant="success" checked outline />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline />
|
||||
<CSwitch class="mx-1" variant="info" checked outline />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline />
|
||||
<CSwitch class="mx-1" variant="light" checked outline />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline />
|
||||
<CSwitch class="mx-1" variant="primary" outline disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline />
|
||||
<CSwitch class="mx-1" variant="success" checked outline />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline />
|
||||
<CSwitch class="mx-1" variant="info" checked outline />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline />
|
||||
<CSwitch class="mx-1" variant="light" checked outline />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline />
|
||||
<CSwitch class="mx-1" variant="primary" outline disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>outline shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>outline="alt"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>outline="alt" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked />
|
||||
<CSwitch class="mx-1" variant="secondary" checked />
|
||||
<CSwitch class="mx-1" variant="success" checked />
|
||||
<CSwitch class="mx-1" variant="warning" checked />
|
||||
<CSwitch class="mx-1" variant="info" checked />
|
||||
<CSwitch class="mx-1" variant="danger" checked />
|
||||
<CSwitch class="mx-1" variant="light" checked />
|
||||
<CSwitch class="mx-1" variant="dark" checked />
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked />
|
||||
<CSwitch class="mx-1" variant="secondary" checked />
|
||||
<CSwitch class="mx-1" variant="success" checked />
|
||||
<CSwitch class="mx-1" variant="warning" checked />
|
||||
<CSwitch class="mx-1" variant="info" checked />
|
||||
<CSwitch class="mx-1" variant="danger" checked />
|
||||
<CSwitch class="mx-1" variant="light" checked />
|
||||
<CSwitch class="mx-1" variant="dark" checked />
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline />
|
||||
<CSwitch class="mx-1" variant="success" checked outline />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline />
|
||||
<CSwitch class="mx-1" variant="info" checked outline />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline />
|
||||
<CSwitch class="mx-1" variant="light" checked outline />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline />
|
||||
<CSwitch class="mx-1" variant="primary" outline disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline />
|
||||
<CSwitch class="mx-1" variant="success" checked outline />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline />
|
||||
<CSwitch class="mx-1" variant="info" checked outline />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline />
|
||||
<CSwitch class="mx-1" variant="light" checked outline />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline />
|
||||
<CSwitch class="mx-1" variant="primary" outline disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<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" />
|
||||
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
|
||||
<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" />
|
||||
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>shape
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Switch <small><code>label outline</code></small>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||
</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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<CCard :header="caption">
|
||||
<CCard :header="caption" bodyWrapper>
|
||||
<CTable
|
||||
:hover="hover"
|
||||
:striped="striped"
|
||||
|
||||
@@ -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"
|
||||
|
||||
+168
-158
@@ -3,190 +3,200 @@
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
</CCardHeader>
|
||||
<CTabs addTabClasses="mt-1">
|
||||
<CTab title="Home" active>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile" >
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
<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
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile" >
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
</CCardHeader>
|
||||
<CTabs
|
||||
pills
|
||||
addNavClasses="mb-3"
|
||||
>
|
||||
<CTab title="Home" active>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile" >
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
<CCardBody>
|
||||
<CTabs
|
||||
pills
|
||||
addNavClasses="mb-3"
|
||||
>
|
||||
<CTab title="Home" active>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile" >
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
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>
|
||||
<CTabs addTabClasses="mt-1">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i>
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
<CCardBody>
|
||||
<CTabs addTabClasses="mt-1">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i>
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
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>
|
||||
<CTabs
|
||||
addTabClasses="mt-1"
|
||||
card
|
||||
>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
<CCardBody>
|
||||
<CTabs
|
||||
addTabClasses="mt-1"
|
||||
card
|
||||
>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
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>
|
||||
<CTabs
|
||||
card
|
||||
pills
|
||||
vertical="4"
|
||||
v-model="tabIndex[1]"
|
||||
>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
<CCardBody>
|
||||
<CTabs
|
||||
card
|
||||
pills
|
||||
vertical="4"
|
||||
v-model="tabIndex[1]"
|
||||
>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
+49
-135
@@ -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,129 +12,63 @@
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
|
||||
Hover me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip.click="
|
||||
'I am showing on click and hiding on click outside tooltip!'
|
||||
">
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
|
||||
Hover me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="text-center my-3">
|
||||
<CButton v-c-tooltip.click="
|
||||
'I am showing on click and hiding on click outside tooltip!'
|
||||
">
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Tooltips </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<div class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-tooltip.hover="{
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
<CCardBody>
|
||||
<div class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</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>
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-tooltip.hover="{
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</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>
|
||||
</CCardBody>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user