Chore: push dev to create v3.0.0-alpha version
This commit is contained in:
woothu
@@ -1,42 +1,34 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<CBreadcrumb :items="items"/>
|
||||
</CCardHeader>
|
||||
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
<!-- <Breadcrumb :list="items3"/> -->
|
||||
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CBreadcrumb from './CBreadcrumb'
|
||||
export default {
|
||||
name: 'breadcrumbs',
|
||||
// components: {
|
||||
// CBreadcrumb
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
items: [{
|
||||
text: 'Admin',
|
||||
text: '<b>Admin</b>',
|
||||
href: '#'
|
||||
}, {
|
||||
text: 'Manage',
|
||||
@@ -44,6 +36,8 @@ export default {
|
||||
}, {
|
||||
text: 'Library'
|
||||
}],
|
||||
|
||||
|
||||
items2: [{
|
||||
text: 'Go to dashboard',
|
||||
to: '/dashboard'
|
||||
@@ -56,19 +50,21 @@ export default {
|
||||
},{
|
||||
text: 'Current page'
|
||||
}],
|
||||
items3: ['sd', {
|
||||
|
||||
|
||||
items3: [{
|
||||
text: 'Link',
|
||||
to: '#2',
|
||||
activeClass: 'bg-info p-1'
|
||||
}, {
|
||||
text: 'Active',
|
||||
to: '#3',
|
||||
activeClass: 'bg-warning p-1'
|
||||
activeClass: 'bg-warning p-1',
|
||||
addLinkClasses: 'bg-info p-1'
|
||||
},{
|
||||
text: 'Classes',
|
||||
to: '#4',
|
||||
activeClass: 'bg-danger p-1',
|
||||
current: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
+226
-267
@@ -1,69 +1,238 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<!-- <CContainer fluid>
|
||||
<CRow>
|
||||
<CColumn lg md="7" :sm="{'order': 2, offset:'0', size:'4'}" class="hehe">
|
||||
hehe
|
||||
</CColumn>
|
||||
</CRow>
|
||||
</CContainer> -->
|
||||
<CNavbar toggleable="md" light variant="light">
|
||||
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
|
||||
<CLink class="navbar-brand">NavBar</CLink>
|
||||
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
|
||||
<CNavbarNav pills class="navbar-nav">
|
||||
<CNavItem>
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe2
|
||||
</CNavItem>
|
||||
<DefaultHeaderDropdownAccnt/>
|
||||
</CNavbarNav>
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
|
||||
<c-dropdown-item><i class="fa fa-file" /> Projects
|
||||
<c-badge variant="primary">32</c-badge>
|
||||
</c-dropdown-item>
|
||||
<c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
|
||||
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
<br>
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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>
|
||||
</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.
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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.
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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.
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard header="Card outline primary" border-variant="primary">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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="card-accent-primary" header="Card with primary accent">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="card-accent-warning" header="Card with warning accent">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="card-accent-danger" header="Card with danger accent">
|
||||
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">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-success text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-info text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-warning text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-danger text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard class="bg-secondary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow><!--/.row-->
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard header="Card title" class="bg-primary">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
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">
|
||||
<c-card class="bg-secondary" no-body v-if="show" >
|
||||
<CCard class="bg-secondary" no-body v-if="show" >
|
||||
<CCardHeader slot="header">
|
||||
Card with header actions
|
||||
<div class="card-header-actions">
|
||||
<c-link href="#" class="card-header-action btn-setting" >
|
||||
<CLink href="#" class="card-header-action btn-setting" >
|
||||
<i class="icon-settings"></i>
|
||||
</c-link>
|
||||
<c-link class="card-header-action btn-minimize" v-c-collapse:collapse1="test" @click="test = !test" data-duration="600">
|
||||
<i :class="`icon-arrow-${ !test ? 'up' : 'down'}`"></i>
|
||||
</c-link>
|
||||
<c-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||
</CLink>
|
||||
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||
<i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||
<i class="icon-close"></i>
|
||||
</c-link>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<c-card-body id="collapse1">
|
||||
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.
|
||||
</c-card-body>
|
||||
</c-card>
|
||||
<CCollapse slot="body" :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>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<c-card>
|
||||
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25" class="mb-2"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<!-- <CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard noWrapper>
|
||||
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
|
||||
<CCardHeader header="Card title"/>
|
||||
<CCardBody style="max-height:200px;overflow-y:auto">
|
||||
<CCardBody style="max-height:200px;overflow-y:auto">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
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.
|
||||
@@ -71,230 +240,20 @@
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</CCardBody>
|
||||
</c-card>
|
||||
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<c-card footer="Card footer"
|
||||
body="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."
|
||||
header="<i class='fa fa-check'></i> Card with icon"/>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<CCard footer="Card footer">
|
||||
<CCardHeader slot="header">
|
||||
<i class='fa fa-check'></i> Card with icon
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body"
|
||||
title="title"
|
||||
subtitle="subtitle"
|
||||
body="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>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
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>
|
||||
</div>
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge variant="success" class="float-right">Success</b-badge>
|
||||
</div>
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Card with label
|
||||
<b-badge pill variant="danger" class="float-right">42</b-badge>
|
||||
</div>
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline primary" border-variant="primary">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline secondary" border-variant="secondary">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline success" border-variant="success">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card 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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card 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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card outline danger" border-variant="danger">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-primary" header="Card with primary accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-secondary" header="Card with secondary accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-success" header="Card with success accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-info" header="Card with info accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-warning" header="Card with warning accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="card-accent-danger" header="Card with danger accent">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-primary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-success text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-info text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-warning text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-danger text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card class="bg-secondary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
<b-row>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-primary">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-success">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<b-card header="Card title" class="bg-danger">
|
||||
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.
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row><!--/.row-->
|
||||
</CCol>
|
||||
</CRow> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DefaultHeaderDropdownAccnt from'../../containers/DefaultHeaderDropdownAccnt'
|
||||
|
||||
export default {
|
||||
name: 'cards',
|
||||
components: {
|
||||
DefaultHeaderDropdownAccnt
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
show: true,
|
||||
showCollapse: true,
|
||||
test: true,
|
||||
test2: false,
|
||||
form: 1,
|
||||
smh: 'sdfsdf'
|
||||
isCollapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,97 +1,46 @@
|
||||
<template>
|
||||
<template functional>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col md="12" lg="9" >
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
|
||||
<CRow>
|
||||
<CCol md="12" lg="9" >
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Carousel</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<a
|
||||
href="https://bootstrap-vue.js.org/docs/components/carousel"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<b-carousel id="carousel1"
|
||||
style="text-shadow: 1px 1px 2px #333;"
|
||||
controls
|
||||
indicators
|
||||
background="#ababab"
|
||||
:interval="4000"
|
||||
img-width="1024"
|
||||
img-height="480"
|
||||
v-model="slide"
|
||||
@sliding-start="onSlideStart"
|
||||
@sliding-end="onSlideEnd"
|
||||
>
|
||||
|
||||
<!-- Text slides with image -->
|
||||
<b-carousel-slide caption="First slide"
|
||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
img-src="https://lorempixel.com/1024/480/technics/2/"
|
||||
></b-carousel-slide>
|
||||
|
||||
<!-- Slides with custom text -->
|
||||
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/4/">
|
||||
<h1>Hello world!</h1>
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with image only -->
|
||||
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slides with img slot -->
|
||||
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
|
||||
<b-carousel-slide>
|
||||
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
|
||||
src="https://lorempixel.com/1024/480/technics/5/" alt="image slot">
|
||||
</b-carousel-slide>
|
||||
|
||||
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
|
||||
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
||||
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
|
||||
ut lacus vel interdum.
|
||||
</p>
|
||||
</b-carousel-slide>
|
||||
|
||||
</b-carousel>
|
||||
|
||||
<p class="mt-4">
|
||||
Slide #: {{ slide }}<br>
|
||||
Sliding: {{ sliding }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'carousels',
|
||||
data () {
|
||||
return {
|
||||
slide: 0,
|
||||
sliding: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSlideStart (slide) {
|
||||
console.log('onSlideStart', slide)
|
||||
this.sliding = true
|
||||
},
|
||||
onSlideEnd (slide) {
|
||||
console.log('onSlideEnd', slide)
|
||||
this.sliding = false
|
||||
}
|
||||
}
|
||||
name: 'carousels'
|
||||
}
|
||||
</script>
|
||||
|
||||
+106
-119
@@ -1,176 +1,163 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
|
||||
<div class="card-header-actions">
|
||||
<div class="Fcard-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
|
||||
<b-collapse id="collapse1" class="mt-2">
|
||||
<b-card>
|
||||
<CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
|
||||
<CCollapse id="collapse1" class="mt-2">
|
||||
<CCard>
|
||||
<p class="card-text">Collapse contents Here</p>
|
||||
<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
|
||||
<b-collapse id=collapse1_inner class="mt-2">
|
||||
<b-card>Hello!</b-card>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
<CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
|
||||
<CCollapse id=collapse1_inner class="mt-2">
|
||||
<CCard>Hello!</CCard>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Using modifiers -->
|
||||
<b-btn v-b-toggle.collapse2 class="m-1">Toggle Collapse</b-btn>
|
||||
<CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
|
||||
|
||||
<!-- Using value -->
|
||||
<b-btn v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</b-btn>
|
||||
<CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
|
||||
|
||||
<!-- element to collapse -->
|
||||
<b-collapse id="collapse2">
|
||||
<b-card>
|
||||
<CCollapse id="collapse2">
|
||||
<CCard>
|
||||
I am collapsible content!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
|
||||
<b-collapse visible id="collapse3">
|
||||
<b-card>
|
||||
<CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
|
||||
<CCollapse visible id="collapse3">
|
||||
<CCard>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-btn @click="showCollapse = !showCollapse"
|
||||
<CButton @click="showCollapse = !showCollapse"
|
||||
:class="showCollapse ? 'collapsed' : null"
|
||||
aria-controls="collapse4"
|
||||
:aria-expanded="showCollapse ? 'true' : 'false'">
|
||||
Toggle Collapse
|
||||
</b-btn>
|
||||
<b-collapse class="mt-2" v-model="showCollapse" id="collapse4">
|
||||
<b-card>
|
||||
</CButton>
|
||||
<CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
|
||||
<CCard>
|
||||
I should start open!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Single button triggers two b-collapse components -->
|
||||
<b-btn v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</b-btn>
|
||||
<!-- Single button triggers two CCollapse components -->
|
||||
<CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
|
||||
|
||||
<!-- elements to collapse -->
|
||||
<b-collapse id="collapseA" class="mt-2">
|
||||
<b-card>
|
||||
<CCollapse id="collapseA" class="mt-2">
|
||||
<CCard>
|
||||
I am collapsable content A!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
<b-collapse id="collapseB" class="mt-2">
|
||||
<b-card>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
<CCollapse id="collapseB" class="mt-2">
|
||||
<CCard>
|
||||
I am collapsable content B!
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol cols="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div role="tablist">
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCardHeader slot="header" 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">
|
||||
<p class="card-text">
|
||||
I start opened because <code>visible</code> is <code>true</code>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCardHeader slot="header" 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">
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<b-card no-body class="mb-1">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
|
||||
<b-card-body>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard noWrapper class="mb-1">
|
||||
<CCardHeader slot="header" 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">
|
||||
<p class="card-text">
|
||||
{{ text }}
|
||||
</p>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+735
-1010
File diff suppressed because it is too large
Load Diff
@@ -1,38 +1,33 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||
<p>For more information visit website</p>
|
||||
<b-btn variant="primary" href="#">More Info</b-btn>
|
||||
</c-jumbotron>
|
||||
<CButton variant="primary" href="#">More Info</CButton>
|
||||
</CJumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||
<small>with slots</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-jumbotron header="Bootstrap 4" lead="">
|
||||
|
||||
<CJumbotron header="Bootstrap 4" lead="">
|
||||
<p slot="lead" class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
@@ -42,24 +37,22 @@
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<b-btn variant="primary" href="#">Do Something</b-btn>
|
||||
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
||||
</c-jumbotron>
|
||||
<CButton variant="primary" href="#">Do Something</CButton>
|
||||
<CButton variant="success" href="#">Do Something Else</CButton>
|
||||
</CJumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||
<small>variants</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-jumbotron variant="info"
|
||||
<CJumbotron variant="info"
|
||||
text-variant="white"
|
||||
border-variant="dark"
|
||||
header="Bootstrap 4">
|
||||
@@ -73,11 +66,11 @@
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</c-jumbotron>
|
||||
</CJumbotron>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+95
-111
@@ -1,31 +1,29 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<!-- <b-row>
|
||||
<b-col>
|
||||
<b-card>
|
||||
<!-- <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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row> -->
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow> -->
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
@@ -33,15 +31,13 @@
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||
@@ -49,17 +45,15 @@
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
@@ -67,72 +61,66 @@
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
|
||||
</div>
|
||||
</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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
</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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<b-badge variant="primary" pill>14</b-badge>
|
||||
<CBadge variant="primary" pill>14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<b-badge variant="primary" pill>2</b-badge>
|
||||
<CBadge variant="primary" pill>2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<b-badge variant="primary" pill>1</b-badge>
|
||||
<CBadge variant="primary" pill>1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
@@ -144,15 +132,15 @@
|
||||
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
|
||||
</div>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
@@ -164,19 +152,17 @@
|
||||
<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>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
<b-card-group deck>
|
||||
<b-card header="<b>Card with list group</b>">
|
||||
</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>
|
||||
@@ -188,32 +174,30 @@
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</p>
|
||||
</b-card>
|
||||
<b-card no-body header="<b>Card with flush list group</b>">
|
||||
</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>
|
||||
<b-card-body>
|
||||
<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.
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col md="6">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#" active class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
@@ -249,9 +233,9 @@
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+152
-131
@@ -1,176 +1,197 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<!-- <CCard>
|
||||
<CNavbar toggleable="md" light variant="light">
|
||||
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
|
||||
<CLink class="navbar-brand">NavBar</CLink>
|
||||
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
|
||||
<CNavbarNav pills class="navbar-nav">
|
||||
<CNavItem>
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe1
|
||||
</CNavItem>
|
||||
<CNavItem class="nav-item">
|
||||
hehehe2
|
||||
</CNavItem>
|
||||
<DefaultHeaderDropdownAccnt/>
|
||||
</CNavbarNav>
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
|
||||
<CDropdownItem><i class="fa fa-file" /> Projects
|
||||
<CBadge variant="primary">32</CBadge>
|
||||
</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
|
||||
<CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCard> -->
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-navbar toggleable="md" type="dark" variant="info">
|
||||
|
||||
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
|
||||
|
||||
<b-navbar-brand href="#">NavBar</b-navbar-brand>
|
||||
|
||||
<b-collapse is-nav id="nav_collapse">
|
||||
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<b-nav-item href="#" disabled>Disabled</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</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>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<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>
|
||||
|
||||
<b-nav-form>
|
||||
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
<CDropdown button-content="Lang"
|
||||
nav
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
|
||||
<!-- <c-nav-item-dropdown text="Lang">
|
||||
<template slot="button-content">
|
||||
<img
|
||||
src="img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com" />
|
||||
</template>
|
||||
<template slot="dropdown">
|
||||
<a href="#" class='dropdown-item'>EN</a>
|
||||
<a href="#" class='dropdown-item'>ES</a>
|
||||
<a href="#" class='dropdown-item'>RU</a>
|
||||
<a href="#" class='dropdown-item'>FA</a>
|
||||
</template>
|
||||
</c-nav-item-dropdown> -->
|
||||
|
||||
<b-nav-item-dropdown right>
|
||||
<!-- Using button-content slot -->
|
||||
<template slot="button-content">
|
||||
<em>User</em>
|
||||
</template>
|
||||
<b-dropdown-item href="#">Profile</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Signout</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CDropdown nav
|
||||
button-content="<em>User</em>"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>brand</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<!-- Image and text -->
|
||||
<b-navbar variant="faded" type="light">
|
||||
<b-navbar-brand tag="h1" href="#">
|
||||
<CNavbar variant="faded" light>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
|
||||
BootstrapVue
|
||||
</b-navbar-brand>
|
||||
</b-navbar>
|
||||
</CNavbarBrand>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>text</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar toggleable type="light" variant="light">
|
||||
<b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
|
||||
<b-navbar-brand>BootstrapVue</b-navbar-brand>
|
||||
<b-collapse is-nav id="nav_text_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-text>Navbar text</b-nav-text>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
<CNavbar toggleable="sm" light variant="light">
|
||||
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
|
||||
<CNavbarBrand>BootstrapVue</CNavbarBrand>
|
||||
<CCollapse :show="navbarText" navbar>
|
||||
<CNavbarNav>
|
||||
<span class="navbar-text">Navbar text</span>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>dropdown</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar type="dark" variant="primary" toggleable>
|
||||
<b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
|
||||
<b-collapse is-nav id="nav_dropdown_collapse">
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="#">Home</b-nav-item>
|
||||
<b-nav-item href="#">Link</b-nav-item>
|
||||
<CNavbar type="dark" variant="primary">
|
||||
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
|
||||
<CCollapse :show="navbarDropdown" navbar> -->
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Home</CNavItem>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<!-- Navbar dropdowns -->
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
<b-nav-item-dropdown text="User" right>
|
||||
<b-dropdown-item href="#">Account</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Settings</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
<CDropdown button-content="Lang" right nav>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown button-content="User" right nav>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
<!-- </CCollapse> -->
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>form</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
|
||||
<b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
<CNavbar type="light" variant="light">
|
||||
<CForm inline>
|
||||
<CFormInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||
<small>input group</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-navbar type="light" variant="light">
|
||||
<b-nav-form>
|
||||
<b-input-group left="@">
|
||||
<b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
|
||||
</b-input-group>
|
||||
</b-nav-form>
|
||||
</b-navbar>
|
||||
<CNavbar type="light" variant="light">
|
||||
<CForm inline>
|
||||
<CFormInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CNavItemDropdown from './CNavItemDropdown'
|
||||
|
||||
import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
|
||||
export default {
|
||||
name: 'navbars',
|
||||
// components:{
|
||||
// CNavItemDropdown
|
||||
// }
|
||||
components: {
|
||||
DefaultHeaderDropdownAccnt
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
navbarText: false,
|
||||
navbarDropdown: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+116
-127
@@ -1,164 +1,153 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Another Link</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
<CNav>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem title="Link"/>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CNav>
|
||||
<CNavItem active>
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav tabs v-model="item" tab-content>
|
||||
<!-- <c-nav-item index="hehe2">Active</c-nav-item> -->
|
||||
<c-nav-item id="hehe">
|
||||
<i class="icon-basket-loaded"></i> Active
|
||||
<div slot="tab">hehe</div>
|
||||
</c-nav-item>
|
||||
<c-nav-item>
|
||||
Link
|
||||
|
||||
</c-nav-item>
|
||||
<c-nav-item>
|
||||
Another Link
|
||||
<div slot="tab">hehe3</div>
|
||||
</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
|
||||
</c-nav>
|
||||
<!-- <CTab fade :activeItem="item">
|
||||
<CTabItem id="hehe2">text1</CTabItem>
|
||||
<CTabItem>text1</CTabItem>
|
||||
<CTabItem>text2</CTabItem>
|
||||
<CTabItem @click="smh = 1">text3</CTabItem>
|
||||
<CTabItem>text4</CTabItem>
|
||||
</CTab> -->
|
||||
<CNav tabs>
|
||||
<CNavItem active>
|
||||
Active
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
|
||||
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header" @click="item++">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header" @click="item++">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<CNav pills>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
<div @click="item--">
|
||||
<c-nav pills>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Another Link</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav fill tabs>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Link with a long name </c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
<CNav fill tabs>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav justified tabs>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Link with a long name </c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
|
||||
<CNav justified tabs>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>dropdown support</small>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-nav pills>
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-dropdown id="nav7_ddown" text="Dropdown" right>
|
||||
<a class="nav-link dropdown-toggle" slot="button">Dropdown</a>
|
||||
<c-dropdown-item>one</c-dropdown-item>
|
||||
<c-dropdown-item>two</c-dropdown-item>
|
||||
<c-dropdown-divider></c-dropdown-divider>
|
||||
<c-dropdown-item>three</c-dropdown-item>
|
||||
</c-dropdown>
|
||||
</c-nav>
|
||||
<CNav pills>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CDropdown id="nav7_ddown"
|
||||
nav
|
||||
placement="bottom-end"
|
||||
button-content="Dropdown"
|
||||
>
|
||||
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
|
||||
<CDropdownItem>one</CDropdownItem>
|
||||
<CDropdownItem>two</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>three</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNav>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
|
||||
</div>
|
||||
<div>
|
||||
<c-nav vertical class="w-25">
|
||||
<c-nav-item active>Active</c-nav-item>
|
||||
<c-nav-item>Link</c-nav-item>
|
||||
<c-nav-item>Another Link</c-nav-item>
|
||||
<c-nav-item disabled>Disabled</c-nav-item>
|
||||
</c-nav>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CNav from './CNav'
|
||||
// import CNavItem from './CNavItem'
|
||||
// import CTab from './CTab'
|
||||
// import CTabItem from './CTabItem'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'navs',
|
||||
data () {
|
||||
return {
|
||||
item: 2
|
||||
}
|
||||
},
|
||||
// components: {
|
||||
// CNav,
|
||||
// CNavItem,
|
||||
// CTab,
|
||||
// CTabItem
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,121 +1,70 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>CPagination</h6>
|
||||
<CPagination v-model="currentPage2"
|
||||
:itemsNumber="1111"
|
||||
@change="hehe"
|
||||
size="lg"
|
||||
align="center"
|
||||
:limit="6"
|
||||
:noDots="false"
|
||||
:noDoubleArrows="false"
|
||||
:noArrows="false"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Default</h6>
|
||||
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination size="sm" v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<div class="d-sm-down-none">
|
||||
<h6>Large</h6>
|
||||
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination size="lg" v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination align="center" :pages="10" v-model="currentPage"/>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||
</b-pagination>
|
||||
<CPagination align="end" v-model="currentPage" :pages="10"/>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
|
||||
<small>navigation</small>
|
||||
</div>
|
||||
<div>
|
||||
<h6>Default</h6>
|
||||
<b-pagination-nav base-url="#" :number-of-pages="10" v-model="currentPage"/>
|
||||
|
||||
<h6 class="mt-4">With link generator function</h6>
|
||||
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" v-model="currentPage"/>
|
||||
<br>
|
||||
|
||||
<div class="mt-4">currentPage: {{currentPage}}</div>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CPagination from './CPagination'
|
||||
|
||||
export default {
|
||||
name: 'paginations',
|
||||
// components: {
|
||||
// CPagination
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3,
|
||||
currentPage2: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkGen (pageNum) {
|
||||
return '#page/' + pageNum + '/foobar'
|
||||
},
|
||||
hehe (val) {
|
||||
// console.log(this.currentPage)
|
||||
}
|
||||
|
||||
}
|
||||
// methods: {
|
||||
// linkGen (pageNum) {
|
||||
// return '#page/' + pageNum + '/foobar'
|
||||
// },
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
+108
-107
@@ -1,178 +1,178 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
|
||||
<CButton
|
||||
v-c-popover.hover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Hover Me
|
||||
</b-btn>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
</CCol>
|
||||
<CCol cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn id="popoverButton-open" variant="primary">Button</b-btn>
|
||||
|
||||
<b-popover show target="popoverButton-open" title="Popover">
|
||||
I start <strong>open</strong>
|
||||
</b-popover>
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.hover.active="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>'
|
||||
}"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
|
||||
<small>placement</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="my-3">
|
||||
<b-row>
|
||||
<b-col md="4" class="py-4 text-center"
|
||||
v-for="placement in placements" :key="placement">
|
||||
<b-btn :id="'exPopover1-'+placement" variant="primary">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.hover.focus="{
|
||||
header: 'Popover!',
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</b-btn>
|
||||
<b-popover :target="'exPopover1-'+placement"
|
||||
:placement="placement"
|
||||
title="Popover!"
|
||||
triggers="hover focus"
|
||||
:content="`Placement ${placement}`">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card class="d-sm-down-none"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</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>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover2" variant="primary">Using properties</b-btn>
|
||||
</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>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover3" variant="primary">Using slots</b-btn>
|
||||
</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>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
|
||||
<small>show</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
|
||||
<CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong>
|
||||
<small>open/close events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
|
||||
<CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong>
|
||||
<small>enable/disable events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
|
||||
<CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onEnable">Enable</b-btn>
|
||||
<b-btn class="px-1" @click="onDisable">Disable</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard> -->
|
||||
<!-- <CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.top="'I am Top'"
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol md="3" class="py-3 text-center">
|
||||
<CButton v-b-popover.hover.top="'I am Top'"
|
||||
title="Popover!"
|
||||
variant="primary">Top</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.left="'I am Left'"
|
||||
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</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.right="'I am Right'"
|
||||
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</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.bottom="'I am Bottom'"
|
||||
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</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
variant="primary">Bottom</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -183,12 +183,13 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'topright', 'top', 'topleft',
|
||||
'bottomright', 'bottom', 'bottomleft',
|
||||
'righttop', 'right', 'lefttop',
|
||||
'rightbottom', 'left', 'leftbottom'
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
],
|
||||
show: false
|
||||
show: false,
|
||||
counter: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
+84
-100
@@ -1,155 +1,139 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<c-progress :value="counter" :max="max" show-progress animated></c-progress>
|
||||
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
|
||||
<CProgress class="mt-1" :max="max" show-value>
|
||||
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||
<CProgressBar :value="counter*(6/10)" variant="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
|
||||
</CProgress>
|
||||
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
|
||||
<CButton class="mt-4" @click="clicked">Click me</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>No label</h6>
|
||||
<b-progress :value="value" :max="max2" class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" class="mb-3"></CProgress>
|
||||
<h6>Value label</h6>
|
||||
<b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" show-value class="mb-3"></CProgress>
|
||||
<h6>Progress label</h6>
|
||||
<b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" show-progress class="mb-3"></CProgress>
|
||||
<h6>Value label with precision</h6>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
|
||||
<h6>Progress label with precision</h6>
|
||||
<b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>Default width</h6>
|
||||
<b-progress :value="value3" class="mb-3"></b-progress>
|
||||
<CProgress :value="value3" class="mb-3"></CProgress>
|
||||
<h6>Custom widths</h6>
|
||||
<b-progress :value="value3" class="w-75 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-50 mb-2"></b-progress>
|
||||
<b-progress :value="value3" class="w-25"></b-progress>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<h6>Default height</h6>
|
||||
<b-progress :value="value3" show-progress class="mb-3"></b-progress>
|
||||
<CProgress :value="value3" show-progress class="mb-3"></CProgress>
|
||||
<h6>Custom heights</h6>
|
||||
<b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
|
||||
<b-progress height="2px" :value="value3"></b-progress>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<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">
|
||||
<b-progress :value="bar.value"
|
||||
<CProgress :value="bar.value"
|
||||
:variant="bar.variant"
|
||||
:key="bar.variant"
|
||||
></b-progress>
|
||||
></CProgress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress>
|
||||
<b-button variant="secondary" @click="striped = !striped">
|
||||
<CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
|
||||
<CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
|
||||
<CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
|
||||
<CProgress :value="100" variant="danger" :striped="striped" class="mb-2"></CProgress>
|
||||
<CButton variant="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</b-button>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress>
|
||||
<b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress>
|
||||
<b-button variant="secondary" @click="animate = !animate">
|
||||
<CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
|
||||
<CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
|
||||
<CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
|
||||
<CProgress :value="100" variant="danger" :animated="animate" class="mb-3"></CProgress>
|
||||
<CButton variant="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</b-button>
|
||||
</CButton>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress show-value striped :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
|
||||
</b-progress>
|
||||
<b-progress :max="max3" class="mb-3">
|
||||
<b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
|
||||
<b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
|
||||
</b-progress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress show-progress :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress show-value striped :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar variant="primary" :value="values[0]" show-progress></CProgressBar>
|
||||
<CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
|
||||
<CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
|
||||
</CProgress>
|
||||
</div>
|
||||
</b-card>
|
||||
</CCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+397
-381
@@ -5,16 +5,16 @@
|
||||
<p>myFlag2: {{myFlag2}}</p>
|
||||
<CSwitch v-model="myFlag1"/>
|
||||
<CSwitch v-model="myFlag2" checked @change="test" /> -->
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card v-if="true">
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard v-if="true">
|
||||
<CCardHeader slot="header">
|
||||
<h5>
|
||||
Radio switches
|
||||
<b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge>
|
||||
<b-badge variant="danger" class="float-right">NEW</b-badge>
|
||||
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
|
||||
<CBadge variant="danger" class="float-right">NEW</CBadge>
|
||||
</h5>
|
||||
</div>
|
||||
</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"
|
||||
@@ -28,16 +28,16 @@
|
||||
:value="variant"
|
||||
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch default
|
||||
<b-badge variant="primary">{{checker}}</b-badge>
|
||||
</div>
|
||||
<CBadge variant="primary">{{checker}}</CBadge>
|
||||
</CCardHeader>
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
@@ -62,396 +62,412 @@
|
||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
|
||||
/>
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch pills
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="pill" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" disabled />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
3d Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline="alt"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>outline="alt" shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked />
|
||||
<c-switch class="mx-1" variant="secondary" checked />
|
||||
<c-switch class="mx-1" variant="success" checked />
|
||||
<c-switch class="mx-1" variant="warning" checked />
|
||||
<c-switch class="mx-1" variant="info" checked />
|
||||
<c-switch class="mx-1" variant="danger" checked />
|
||||
<c-switch class="mx-1" variant="light" checked />
|
||||
<c-switch class="mx-1" variant="dark" checked />
|
||||
<c-switch class="mx-1" variant="primary" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline />
|
||||
<c-switch class="mx-1" variant="success" checked outline />
|
||||
<c-switch class="mx-1" variant="warning" checked outline />
|
||||
<c-switch class="mx-1" variant="info" checked outline />
|
||||
<c-switch class="mx-1" variant="danger" checked outline />
|
||||
<c-switch class="mx-1" variant="light" checked outline />
|
||||
<c-switch class="mx-1" variant="dark" checked outline />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
||||
</b-card>
|
||||
</b-col>
|
||||
</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 />
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
|
||||
<c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
|
||||
</b-card>shape
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>shape
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" md="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Switch <small><code>label outline</code></small>
|
||||
</div>
|
||||
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||
</b-card>
|
||||
</b-col>
|
||||
</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" />
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<b-col md="12">
|
||||
<b-card no-body>
|
||||
<div slot="header">
|
||||
<CCol md="12">
|
||||
<CCard noWrapper>
|
||||
<CCardHeader slot="header">
|
||||
Sizes
|
||||
</div>
|
||||
<b-card-body class="p-0">
|
||||
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
|
||||
<template slot="example" slot-scope="data">
|
||||
<c-switch :variant="data.value.variant" :color="data.value.color" :size="data.value.size" :checked="data.value.checked"/>
|
||||
</CCardHeader>
|
||||
<CCardBody slot="body" class="p-0">
|
||||
<CTable
|
||||
hover
|
||||
striped
|
||||
class="table-align-middle mb-0"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
noSorting
|
||||
>
|
||||
<template #example="{item}">
|
||||
<td>
|
||||
<CSwitch
|
||||
:shape="item.example.shape"
|
||||
:variant="item.example.variant"
|
||||
:size="item.example.size"
|
||||
:checked="item.example.checked"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template slot="size_prop" slot-scope="data">
|
||||
<span v-html="data.item.size_prop"></span>
|
||||
<template #size_prop="{item}">
|
||||
<td>
|
||||
<span v-html="item.size_prop"></span>
|
||||
</td>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -476,9 +492,9 @@ export default {
|
||||
{key: 'size_prop', label: 'Size prop'}
|
||||
],
|
||||
items: [
|
||||
{size: 'Large', example: {variant: '3d', color: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
|
||||
{size: 'Normal', example: {variant: '3d', color: 'primary', size: '', checked: true}, size_prop: '-'},
|
||||
{size: 'Small', example: {variant: '3d', color: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
||||
{size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
|
||||
{size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
|
||||
{size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
||||
],
|
||||
checker: 'yes',
|
||||
radio: 'primary',
|
||||
|
||||
+34
-87
@@ -1,98 +1,48 @@
|
||||
<template>
|
||||
<b-card :header="caption">
|
||||
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
|
||||
<template slot="status" slot-scope="data">
|
||||
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
|
||||
<CCard :header="caption">
|
||||
<CTable
|
||||
:hover="hover"
|
||||
:striped="striped"
|
||||
:bordered="bordered"
|
||||
:small="small"
|
||||
:fixed="fixed"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:per-page="small ? 10 : 5"
|
||||
:dark="dark"
|
||||
noSorting
|
||||
>
|
||||
<template v-slot:status="{item}">
|
||||
<td>
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
</b-table>
|
||||
<nav>
|
||||
<b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
|
||||
</nav>
|
||||
</b-card>
|
||||
</CTable>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Randomize array element order in-place.
|
||||
* Using Durstenfeld shuffle algorithm.
|
||||
*/
|
||||
const shuffleArray = (array) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
}
|
||||
|
||||
import items from '../users/UsersData'
|
||||
export default {
|
||||
name: 'c-table',
|
||||
name: 'TableWrapper',
|
||||
props: {
|
||||
items: Array,
|
||||
fields: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['username', 'registered', 'role', 'status']
|
||||
}
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
striped: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
items: shuffleArray([
|
||||
{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]),
|
||||
fields: [
|
||||
{key: 'username'},
|
||||
{key: 'registered'},
|
||||
{key: 'role'},
|
||||
{key: 'status'}
|
||||
],
|
||||
currentPage: 1,
|
||||
perPage: 5,
|
||||
totalRows: 0
|
||||
}
|
||||
hover: Boolean,
|
||||
striped: Boolean,
|
||||
bordered: Boolean,
|
||||
small: Boolean,
|
||||
fixed: Boolean,
|
||||
dark: Boolean
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
@@ -101,9 +51,6 @@ export default {
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
getRowCount (items) {
|
||||
return items.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+114
-61
@@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<b-card header="test1 ">
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test1 ">
|
||||
|
||||
<!-- <CTable :items="items.slice(0)"
|
||||
noSorting
|
||||
striped
|
||||
/> -->
|
||||
|
||||
<CTable :items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:activePage="page"
|
||||
@@ -14,7 +20,7 @@
|
||||
smalls
|
||||
noPagination
|
||||
@row-clicked2="(item, index) => toggleDetails(index)"
|
||||
loading
|
||||
loadings
|
||||
hover
|
||||
striped
|
||||
optionsRow="onlyFilter2"
|
||||
@@ -39,20 +45,21 @@
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
<!-- <td slot="show_details" slot-scope="{item, index}">
|
||||
<td slot="show_details" slot-scope="{item, index}">
|
||||
<button class="btn btn-primary" @click="toggleDetails(index)">
|
||||
{{details.includes(index) ? 'Hide' : 'Show'}}
|
||||
</button>
|
||||
</td> -->
|
||||
<!-- <td slot="index-col"
|
||||
</td>
|
||||
<td slot="index-col"
|
||||
slot-scope="{index}"
|
||||
@click="toggleDetails(index)"
|
||||
style="cursor:pointer"
|
||||
class="text-center"
|
||||
>
|
||||
<i class="icons font-lg d-block cui-chevron-right"
|
||||
style="transition: transform 0.4s"
|
||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
|
||||
</td> -->
|
||||
</td>
|
||||
<CCollapse :show="details.includes(index)"
|
||||
slot="details"
|
||||
slot-scope="{item, index}">
|
||||
@@ -67,55 +74,94 @@
|
||||
align="center"
|
||||
size="lg"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<b-card header="test2">
|
||||
<CTable :items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:perPage="5"
|
||||
indexCol="onlyIndexes2"
|
||||
filterRow
|
||||
optionsRow="onlyFilter2"
|
||||
:paginationProps="{align:'center', size:'lg'}"
|
||||
noPagination
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CCard header="test2">
|
||||
<CTable
|
||||
:items="items.slice(0)"
|
||||
:fields="fields"
|
||||
:perPage="5"
|
||||
indexCol="onlyCleaner"
|
||||
filterRow
|
||||
optionsRow="onlyFilter"
|
||||
:paginationProps="{align:'center', size:'lg'}"
|
||||
>
|
||||
<td slot="status" slot-scope="{item}">
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</CTable>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<b-row @click="test">
|
||||
<b-col lg="6">
|
||||
<old-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
caption="<i class='fa fa-align-justify'></i> Simple Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<old-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
striped
|
||||
caption="<i class='fa fa-align-justify'></i> Striped Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col lg="6">
|
||||
<old-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
small
|
||||
caption="<i class='fa fa-align-justify'></i> Condensed Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
|
||||
<b-col lg="6">
|
||||
<old-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></old-table>
|
||||
</b-col><!--/.col-->
|
||||
</b-row><!--/.row-->
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
fixed
|
||||
bordered
|
||||
caption="<i class='fa fa-align-justify'></i> Bordered Table"
|
||||
/>
|
||||
</CCol><!--/.col-->
|
||||
</CRow><!--/.row-->
|
||||
|
||||
<b-row>
|
||||
<b-col sm="12">
|
||||
<old-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></old-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
caption="<i class='fa fa-align-justify'></i> Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getItems()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
dark
|
||||
caption="<i class='fa fa-align-justify'></i> Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -123,7 +169,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import oldTable from './Table.vue'
|
||||
import CTableWrapper from './Table.vue'
|
||||
|
||||
// const fields = ['username', 'registered', 'role']
|
||||
const fields = [
|
||||
@@ -134,17 +180,17 @@ const fields = [
|
||||
// { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
|
||||
]
|
||||
const items = [
|
||||
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', _classes: 'table-success2',_cellClasses: {role: 'table-success'}, role: 'Member', status: 'Active'},
|
||||
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
|
||||
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
|
||||
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
@@ -156,14 +202,14 @@ const items = [
|
||||
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
|
||||
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'tables',
|
||||
components: { oldTable },
|
||||
components: { CTableWrapper },
|
||||
data () {
|
||||
return {
|
||||
items: items,
|
||||
@@ -182,22 +228,29 @@ export default {
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
},
|
||||
test () {
|
||||
this.$refs.table.changeSort('username')
|
||||
this.$refs.table.filter = 't'
|
||||
// console.log(this.items)
|
||||
},
|
||||
test3 (item, index) {
|
||||
alert(index + ' - ' + item.username)
|
||||
// console.log()
|
||||
// test () {
|
||||
// this.$refs.table.changeSort('username')
|
||||
// this.$refs.table.filter = 't'
|
||||
// // console.log(this.items)
|
||||
// },
|
||||
shuffleArray (array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
},
|
||||
log(val) {
|
||||
console.log(val)
|
||||
},
|
||||
toggleDetails (index) {
|
||||
// console.log('hehe')
|
||||
const position = this.details.indexOf(index)
|
||||
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
|
||||
},
|
||||
getItems () {
|
||||
return this.shuffleArray(this.items.slice(0))
|
||||
}
|
||||
}
|
||||
// computed: {
|
||||
|
||||
+130
-91
@@ -1,122 +1,118 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<b-row>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Tabs
|
||||
</div>
|
||||
<b-tabs>
|
||||
<b-tab title="Home" active>
|
||||
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
</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.
|
||||
</b-tab>
|
||||
<b-tab title="Profile" >
|
||||
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
</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.
|
||||
</b-tab>
|
||||
<b-tab title="Disabled" disabled>
|
||||
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
</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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Tabs with icons
|
||||
</div>
|
||||
<b-tabs>
|
||||
<b-tab active>
|
||||
</CCardHeader>
|
||||
<CTabs addTabClasses="mt-1">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i>
|
||||
</template>
|
||||
<br> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i>
|
||||
</template>
|
||||
<br>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i>
|
||||
</template>
|
||||
<br>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
Tabs with icons
|
||||
</div>
|
||||
<b-tabs v-model="tabIndex[0]">
|
||||
<b-tab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
<br> 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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
<br>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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
<br>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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-col xs="12" lg="6">
|
||||
<b-card>
|
||||
<div slot="header">
|
||||
Tabs vertical
|
||||
</div>
|
||||
<b-card no-body>
|
||||
<b-tabs card pills vertical nav-wrapper-class="w-40" v-model="tabIndex[1]">
|
||||
<b-tab active>
|
||||
</CCardHeader>
|
||||
<CTabs
|
||||
addTabClasses="mt-1"
|
||||
card
|
||||
>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<i class="icon-calculator"></i> {{tabs[0]}}
|
||||
</template>
|
||||
@@ -125,8 +121,8 @@
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-basket-loaded"></i> {{tabs[1]}}
|
||||
</template>
|
||||
@@ -135,8 +131,8 @@
|
||||
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.
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<i class="icon-pie-chart"></i> {{tabs[2]}}
|
||||
</template>
|
||||
@@ -145,12 +141,55 @@
|
||||
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.
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
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>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
+104
-122
@@ -1,189 +1,171 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Tooltips </strong><small><code>v-b-tooltip</code> directive</small>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Tooltips </strong>
|
||||
<small><code>v-c-tooltip</code> directive</small>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn v-b-tooltip.hover title="I am a tooltip!">Hover Me</b-btn>
|
||||
<CButton v-c-tooltip.hover="'I am a tooltip!'">
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
</CCol>
|
||||
<CCol cols="6">
|
||||
<div class="text-center my-3">
|
||||
<b-btn id="tooltipButton-2" variant="primary">Button</b-btn>
|
||||
<b-tooltip show target="tooltipButton-2">
|
||||
I start open
|
||||
</b-tooltip>
|
||||
<CButton v-c-tooltip.hover.active="'I start open!'">
|
||||
Button
|
||||
</CButton>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>b-tooltip</code> component</small>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<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
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton1" variant="outline-success">Live chat</b-btn>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exButton2" variant="outline-success">Html chat</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</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>
|
||||
|
||||
<!-- Tooltip title specified via prop title -->
|
||||
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
|
||||
|
||||
<!-- HTML title specified via default slot -->
|
||||
<b-tooltip target="exButton2" placement="bottom">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="text-center">
|
||||
<b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
|
||||
<CButton id="tooltipButton-1" variant="primary">I have a tooltip</CButton>
|
||||
<br><br>
|
||||
<b-btn @click="show = !show">Toggle Tooltip</b-btn>
|
||||
<CButton @click="show = !show">Toggle Tooltip</CButton>
|
||||
|
||||
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
|
||||
<CButton id="tooltipButton-showEvent" variant="primary">I have a tooltip</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1 mr-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
<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>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer"
|
||||
id="boundary">
|
||||
<div slot="header">
|
||||
</CCard>
|
||||
<CCard id="boundary">
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
|
||||
<CButton id="tooltipButton-disable" variant="primary">I have a tooltip</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn @click="disabled = !disabled" class="mr-1">
|
||||
<CButton @click="disabled = !disabled" class="mr-1">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
|
||||
</b-btn>
|
||||
</CButton>
|
||||
|
||||
<b-btn @click="disableByRef">
|
||||
<CButton @click="disableByRef">
|
||||
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
|
||||
</b-btn>
|
||||
</CButton>
|
||||
|
||||
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
|
||||
Hello <strong>World!</strong>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<b-btn @click="test" id="refButton2">
|
||||
test
|
||||
</b-btn><br><br>
|
||||
<b-btn id="refButton" data-toggle="tooltip" class="px-1" >button</b-btn>
|
||||
<CTooltip targetId="refButton"
|
||||
:placement="placement"
|
||||
content="sas"
|
||||
ref="tooltip"
|
||||
:active="true"
|
||||
:popover="show"
|
||||
popoverHeader="smh"
|
||||
:delay="smh"
|
||||
:offset="smh"
|
||||
boundaries="boundary1"
|
||||
:appendToBody="false"
|
||||
/><br><br><br>
|
||||
<!-- :content="this is HTML <b>content!</b>" -->
|
||||
|
||||
<!-- :popover="true"
|
||||
popoverHeader="Something" -->
|
||||
<!-- title="<div class='card'><img src='https://picsum.photos/600/300/?image=25' class='card-img mb-2'><div class='card-header'><div>Card title</div></div><div class='card-body' style='max-height: 200px; overflow-y: auto;'>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div></div>" -->
|
||||
<!-- <div class="tooltip" id="hehe33">
|
||||
<div class="inner-tooltip">
|
||||
hfhsdasad
|
||||
</div>
|
||||
</div> -->
|
||||
</b-card>
|
||||
</CCard> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import CTooltip from './CTooltip'
|
||||
export default {
|
||||
name: 'tooltips',
|
||||
// components: {
|
||||
// CTooltip
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
show: true,
|
||||
disabled: false,
|
||||
smh: 0,
|
||||
placement: 'bottom-end'
|
||||
// show: true,
|
||||
// disabled: false,
|
||||
// smh: 0,
|
||||
// placement: 'bottom-end',
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'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
|
||||
}
|
||||
// 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