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

feat: Bootstrap Vue components changed to Coreui-Vue components

Browse Source
This commit is contained in:
woothu
2019-02-18 17:27:13 +01:00
parent 6433e8ac1e
commit 2057ba6b5c
47 changed files with 7751 additions and 8387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+3 -3
View File
@@ -17,9 +17,9 @@
"@coreui/coreui": "^2.1.6", "@coreui/coreui": "^2.1.6",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0", "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/icons": "0.3.0", "@coreui/icons": "0.3.0",
"@coreui/vue": "../coreui-vue",
"bootstrap": "^4.1.3", "bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11", "bootstrap-vue": "^2.0.0-rc.11",
"@coreui/vue": "../coreui-vue",
"chart.js": "^2.7.3", "chart.js": "^2.7.3",
"core-js": "^2.5.7", "core-js": "^2.5.7",
"css-vars-ponyfill": "^1.11.1", "css-vars-ponyfill": "^1.11.1",
@@ -29,7 +29,7 @@
"perfect-scrollbar": "^1.4.0", "perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1", "simple-line-icons": "^2.4.1",
"tooltip.js": "^1.3.1", "tooltip.js": "^1.3.1",
"vue": "^2.5.17", "vue": "^2.6.6",
"vue-chartjs": "^3.4.0", "vue-chartjs": "^3.4.0",
"vue-perfect-scrollbar": "^0.1.0", "vue-perfect-scrollbar": "^0.1.0",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
@@ -47,7 +47,7 @@
"https-proxy-agent": "^2.2.1", "https-proxy-agent": "^2.2.1",
"node-sass": "^4.9.4", "node-sass": "^4.9.4",
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17" "vue-template-compiler": "^2.6.6"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
src/containers/DefaultAside.vue
+37 -41
View File
@@ -1,14 +1,14 @@
<template> <template>
<b-tabs> <CTabs>
<b-tab> <CTab active>
<template slot="title"> <template slot="title">
<i class='icon-list'></i> <i class="icon-list"></i>
</template> </template>
<b-list-group class="list-group-accent"> <CListGroup class="list-group-accent">
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"> <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
Today Today
</b-list-group-item> </CListGroupItem>
<b-list-group-item href="#" class="list-group-item-accent-warning list-group-item-divider"> <CListGroupItem href="#" class="list-group-item-accent-warning list-group-item-divider">
<div class="avatar float-right"> <div class="avatar float-right">
<img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com"> <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
</div> </div>
@@ -21,8 +21,8 @@
<small class="text-muted"> <small class="text-muted">
<i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
</small> </small>
</b-list-group-item> </CListGroupItem>
<b-list-group-item href="#" class="list-group-item-accent-info"> <CListGroupItem href="#" class="list-group-item-accent-info">
<div class="avatar float-right"> <div class="avatar float-right">
<img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com"> <img class="img-avatar" src="img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
</div> </div>
@@ -30,12 +30,12 @@
</div> </div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm</small> <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm</small>
<small class="text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small> <small class="text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
</b-list-group-item> </CListGroupItem>
<hr class="transparent mx-3 my-0"> <hr class="transparent mx-3 my-0">
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small"> <CListGroupItem class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
Tomorrow Tomorrow
</b-list-group-item> </CListGroupItem>
<b-list-group-item href="#" class="list-group-item-accent-danger list-group-item-divider"> <CListGroupItem href="#" class="list-group-item-accent-danger list-group-item-divider">
<div>New UI Project - <strong>deadline</strong> <div>New UI Project - <strong>deadline</strong>
</div> </div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small> <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
@@ -57,13 +57,13 @@
<img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com"> <img class="img-avatar" src="img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
</div> </div>
</div> </div>
</b-list-group-item> </CListGroupItem>
<b-list-group-item href="#" class="list-group-item-accent-success list-group-item-divider"> <CListGroupItem href="#" class="list-group-item-accent-success list-group-item-divider">
<div><strong>#10 Startups.Garden</strong> Meetup</div> <div><strong>#10 Startups.Garden</strong> Meetup</div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small> <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small> <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
</b-list-group-item> </CListGroupItem>
<b-list-group-item href="#" class="list-group-item-accent-primary list-group-item-divider"> <CListGroupItem href="#" class="list-group-item-accent-primary list-group-item-divider">
<div><strong>Team meeting</strong></div> <div><strong>Team meeting</strong></div>
<small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small> <small class="text-muted mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
<small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small> <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
@@ -90,10 +90,10 @@
<img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
</div> </div>
</div> </div>
</b-list-group-item> </CListGroupItem>
</b-list-group> </CListGroup>
</b-tab> </CTab>
<b-tab> <CTab>
<template slot="title"> <template slot="title">
<i class='icon-speech'></i> <i class='icon-speech'></i>
</template> </template>
@@ -117,7 +117,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<c-badge variant="danger" class="avatar-status"></c-badge> <CBadge variant="danger" class="avatar-status"></CBadge>
</div> </div>
</div> </div>
<div> <div>
@@ -132,7 +132,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<c-badge variant="info" class="avatar-status"></c-badge> <CBadge variant="info" class="avatar-status"></CBadge>
</div> </div>
</div> </div>
<div> <div>
@@ -147,7 +147,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<c-badge variant="warning" class="avatar-status"></c-badge> <CBadge variant="warning" class="avatar-status"></CBadge>
</div> </div>
</div> </div>
<div> <div>
@@ -162,7 +162,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<c-badge variant="dark" class="avatar-status"></c-badge> <CBadge variant="dark" class="avatar-status"></CBadge>
</div> </div>
</div> </div>
<div> <div>
@@ -173,8 +173,8 @@
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small> <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
</div> </div>
</div> </div>
</b-tab> </CTab>
<b-tab> <CTab>
<template slot="title"> <template slot="title">
<i class='icon-settings'></i> <i class='icon-settings'></i>
</template> </template>
@@ -183,7 +183,7 @@
<div class="aside-options"> <div class="aside-options">
<div class="clearfix mt-4"> <div class="clearfix mt-4">
<small><b>Option 1</b></small> <small><b>Option 1</b></small>
<c-switch color="success" label variant="pill" size="sm" class="float-right" checked /> <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
</div> </div>
<div> <div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small> <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
@@ -192,7 +192,7 @@
<div class="aside-options"> <div class="aside-options">
<div class="clearfix mt-3"> <div class="clearfix mt-3">
<small><b>Option 2</b></small> <small><b>Option 2</b></small>
<c-switch color="success" label variant="pill" size="sm" class="float-right" /> <CSwitch variant="success" label shape="pill" size="sm" class="float-right" />
</div> </div>
<div> <div>
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small> <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
@@ -201,7 +201,7 @@
<div class="aside-options"> <div class="aside-options">
<div class="clearfix mt-3"> <div class="clearfix mt-3">
<small><b>Option 3</b></small> <small><b>Option 3</b></small>
<c-switch color="success" label variant="pill" size="sm" class="float-right" disabled defaultChecked/> <CSwitch variant="success" label shape="pill" size="sm" class="float-right" disabled defaultChecked/>
</div> </div>
<div> <div>
<small class="text-muted">Disabled option.</small> <small class="text-muted">Disabled option.</small>
@@ -210,7 +210,7 @@
<div class="aside-options"> <div class="aside-options">
<div class="clearfix mt-3"> <div class="clearfix mt-3">
<small><b>Option 4</b></small> <small><b>Option 4</b></small>
<c-switch color="success" label variant="pill" size="sm" class="float-right" checked /> <CSwitch variant="success" label shape="pill" size="sm" class="float-right" checked />
</div> </div>
</div> </div>
<hr> <hr>
@@ -218,34 +218,30 @@
<div class="text-uppercase mb-1 mt-4"> <div class="text-uppercase mb-1 mt-4">
<small><b>CPU Usage</b></small> <small><b>CPU Usage</b></small>
</div> </div>
<b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress> <CProgress class="progress-xs" variant="info" :value="25"></CProgress>
<small class="text-muted">348 Processes. 1/4 Cores.</small> <small class="text-muted">348 Processes. 1/4 Cores.</small>
<div class="text-uppercase mb-1 mt-2"> <div class="text-uppercase mb-1 mt-2">
<small><b>Memory Usage</b></small> <small><b>Memory Usage</b></small>
</div> </div>
<b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress> <CProgress class="progress-xs" variant="warning" :value="70"></CProgress>
<small class="text-muted">11444GB/16384MB</small> <small class="text-muted">11444GB/16384MB</small>
<div class="text-uppercase mb-1 mt-2"> <div class="text-uppercase mb-1 mt-2">
<small><b>SSD 1 Usage</b></small> <small><b>SSD 1 Usage</b></small>
</div> </div>
<b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress> <CProgress class="progress-xs" variant="danger" :value="95"></CProgress>
<small class="text-muted">243GB/256GB</small> <small class="text-muted">243GB/256GB</small>
<div class="text-uppercase mb-1 mt-2"> <div class="text-uppercase mb-1 mt-2">
<small><b>SSD 2 Usage</b></small> <small><b>SSD 2 Usage</b></small>
</div> </div>
<b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress> <CProgress class="progress-xs" variant="success" :value="10"></CProgress>
<small class="text-muted">25GB/256GB</small> <small class="text-muted">25GB/256GB</small>
</div> </div>
</b-tab> </CTab>
</b-tabs> </CTabs>
</template> </template>
<script> <script>
import { Switch as cSwitch } from '@coreui/vue'
export default { export default {
name: 'DefaultAside', name: 'DefaultAside',
components: {
cSwitch
}
} }
</script> </script>
src/containers/DefaultContainer.vue
+32 -44
View File
@@ -1,53 +1,53 @@
<template> <template>
<div class="app"> <div class="app">
<AppHeader fixed> <CHeader fixed>
<SidebarToggler class="d-lg-none" display="md" mobile /> <CSidebarToggler class="d-lg-none" display="md" mobile />
<b-link class="navbar-brand" to="#"> <CLink class="navbar-brand" to="#">
<img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo"> <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
<img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo"> <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
</b-link> </CLink>
<SidebarToggler class="d-md-down-none" display="lg" /> <CSidebarToggler class="d-md-down-none" display="lg" />
<b-navbar-nav class="d-md-down-none"> <CNavbarNav class="d-md-down-none">
<b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item> <CNavItem class="px-3" to="/dashboard">Dashboard</CNavItem>
<b-nav-item class="px-3" to="/users" exact>Users</b-nav-item> <CNavItem class="px-3" to="/users" exact>Users</CNavItem>
<b-nav-item class="px-3">Settings</b-nav-item> <CNavItem class="px-3">Settings</CNavItem>
</b-navbar-nav> </CNavbarNav>
<b-navbar-nav class="ml-auto"> <CNavbarNav class="ml-auto">
<b-nav-item class="d-md-down-none"> <CNavItem class="d-md-down-none">
<i class="icon-bell"></i> <i class="icon-bell"></i>
<b-badge pill variant="danger">5</b-badge> <CBadge pill variant="danger">5</CBadge>
</b-nav-item> </CNavItem>
<b-nav-item class="d-md-down-none"> <CNavItem class="d-md-down-none">
<i class="icon-list"></i> <i class="icon-list"></i>
</b-nav-item> </CNavItem>
<b-nav-item class="d-md-down-none"> <CNavItem class="d-md-down-none">
<i class="icon-location-pin"></i> <i class="icon-location-pin"></i>
</b-nav-item> </CNavItem>
<DefaultHeaderDropdownAccnt/> <DefaultHeaderDropdownAccnt/>
</b-navbar-nav> </CNavbarNav>
<AsideToggler class="d-none d-lg-block" /> <CAsideToggler class="d-none d-lg-block" />
<!--<AsideToggler class="d-lg-none" mobile />--> <!--<AsideToggler class="d-lg-none" mobile />-->
</AppHeader> </CHeader>
<div class="app-body"> <div class="app-body">
<AppSidebar fixed> <CSidebar fixed>
<SidebarHeader/> <CSidebarHeader/>
<SidebarForm/> <CSidebarForm/>
<SidebarNav :navItems="computedNav"></SidebarNav> <CSidebarNav :navItems="computedNav"></CSidebarNav>
<SidebarFooter/> <CSidebarFooter/>
<SidebarMinimizer/> <CSidebarMinimizer/>
</AppSidebar> </CSidebar>
<main class="main"> <main class="main">
<CBreadcrumbRouter/> <CBreadcrumbRouter/>
<div class="container-fluid"> <div class="container-fluid">
<router-view></router-view> <router-view></router-view>
</div> </div>
</main> </main>
<AppAside fixed> <CAside fixed>
<!--aside--> <!--aside-->
<DefaultAside/> <DefaultAside/>
</AppAside> </CAside>
</div> </div>
<TheFooter> <CFooter>
<!--footer--> <!--footer-->
<div> <div>
<a href="https://coreui.io">CoreUI</a> <a href="https://coreui.io">CoreUI</a>
@@ -57,32 +57,20 @@
<span class="mr-1">Powered by</span> <span class="mr-1">Powered by</span>
<a href="https://coreui.io">CoreUI for Vue</a> <a href="https://coreui.io">CoreUI for Vue</a>
</div> </div>
</TheFooter> </CFooter>
</div> </div>
</template> </template>
<script> <script>
import nav from '@/_nav' import nav from '@/_nav'
import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter,SidebarNav, SidebarForm, SidebarHeader, SidebarMinimizer, Aside as AppAside, AsideToggler, Footer as TheFooter } from '@coreui/vue'
import DefaultAside from './DefaultAside' import DefaultAside from './DefaultAside'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt' import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
export default { export default {
name: 'full', name: 'full',
components: { components: {
AsideToggler,
AppHeader,
AppSidebar,
AppAside,
TheFooter,
DefaultAside, DefaultAside,
DefaultHeaderDropdownAccnt, DefaultHeaderDropdownAccnt,
SidebarForm,
SidebarFooter,
SidebarToggler,
SidebarHeader,
SidebarNav,
SidebarMinimizer
}, },
data () { data () {
return { return {
src/containers/DefaultHeaderDropdownAccnt.vue
+32 -40
View File
@@ -1,58 +1,50 @@
<template> <template>
<CDropdown right class="nav-item" toggleClasses="nav-link" menuClasses="hehe"> <CDropdown right
<img slot="button" nav
no-caret
no-popper
addMenuClasses="dropdown-menu-right"
>
<img slot="buttonContent"
src="img/avatars/6.jpg" src="img/avatars/6.jpg"
class="img-avatar" class="img-avatar"
alt="admin@bootstrapmaster.com" alt="admin@bootstrapmaster.com"
/> />
<CDropdownHeader tag="div" class="text-center"><strong>Account</strong></CDropdownHeader>
<c-dropdown-header tag="div" class="text-center"><strong>Account</strong></c-dropdown-header> <CDropdownItem><i class="fa fa-bell-o" /> Updates
<c-dropdown-item><i class="fa fa-bell-o" /> Updates <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge> </CDropdownItem>
</c-dropdown-item> <CDropdownItem><i class="fa fa-envelope-o" /> Messages
<c-dropdown-item><i class="fa fa-envelope-o" /> Messages <CBadge variant="success">{{ itemsCount }}</CBadge>
<c-badge variant="success">{{ itemsCount }}</c-badge> </CDropdownItem>
</c-dropdown-item> <CDropdownItem><i class="fa fa-tasks" /> Tasks
<c-dropdown-item><i class="fa fa-tasks" /> Tasks <CBadge variant="danger">{{ itemsCount }}</CBadge>
<c-badge variant="danger">{{ itemsCount }}</c-badge> </CDropdownItem>
</c-dropdown-item> <CDropdownItem><i class="fa fa-comments" /> Comments
<c-dropdown-item><i class="fa fa-comments" /> Comments <CBadge variant="warning">{{ itemsCount }}</CBadge>
<c-badge variant="warning">{{ itemsCount }}</c-badge> </CDropdownItem>
</c-dropdown-item> <CDropdownHeader
<c-dropdown-header
tag="div" tag="div"
class="text-center"> class="text-center">
<strong>Settings</strong> <strong>Settings</strong>
</c-dropdown-header> </CDropdownHeader>
<c-dropdown-item><i class="fa fa-user" /> Profile</c-dropdown-item> <CDropdownItem><i class="fa fa-user" /> Profile</CDropdownItem>
<c-dropdown-item><i class="fa fa-wrench" /> Settings</c-dropdown-item> <CDropdownItem><i class="fa fa-wrench" /> Settings</CDropdownItem>
<c-dropdown-item><i class="fa fa-usd" /> Payments <CDropdownItem><i class="fa fa-usd" /> Payments
<c-badge variant="secondary">{{ itemsCount }}</c-badge> <CBadge variant="secondary">{{ itemsCount }}</CBadge>
</c-dropdown-item> </CDropdownItem>
<c-dropdown-item><i class="fa fa-file" /> Projects <CDropdownItem><i class="fa fa-file" /> Projects
<c-badge variant="primary">{{ itemsCount }}</c-badge> <CBadge variant="primary">{{ itemsCount }}</CBadge>
</c-dropdown-item> </CDropdownItem>
<CDropdownDivider/> <CDropdownDivider/>
<c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item> <CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item> <CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
</CDropdown> </CDropdown>
</template> </template>
<script> <script>
// import CDropdown from './CDropdown'
// import CDropdownHeader from './CDropdownHeader'
// import CDropdownDivider from './CDropdownDivider'
// import CDropdownItem from './CDropdownItem'
export default { export default {
name: 'DefaultHeaderDropdownAccnt', name: 'DefaultHeaderDropdownAccnt',
// components: {
// CDropdown,
// CDropdownHeader,
// CDropdownDivider,
// CDropdownItem
// },
data: () => { data: () => {
return { itemsCount: 42 } return { itemsCount: 42 }
}, },
src/views/Charts.vue
+29 -29
View File
@@ -1,38 +1,38 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card-group columns class="card-columns"> <CCardGroup columns class="card-columns">
<b-card header="Line Chart"> <CCard header="Line Chart">
<line-example/> <LineExample/>
</b-card> </CCard>
<b-card header="Bar Chart"> <CCard header="Bar Chart">
<bar-example/> <BarExample/>
</b-card> </CCard>
<b-card header="Doughnut Chart"> <CCard header="Doughnut Chart">
<doughnut-example/> <DoughnutExample/>
</b-card> </CCard>
<b-card header="Radar Chart"> <CCard header="Radar Chart">
<radar-example/> <RadarExample/>
</b-card> </CCard>
<b-card header="Pie Chart"> <CCard header="Pie Chart">
<pie-example/> <PieExample/>
</b-card> </CCard>
<b-card header="Polar Area Chart"> <CCard header="Polar Area Chart">
<polar-area-example/> <PolarAreaExample/>
</b-card> </CCard>
<b-card header="Simple line chart"> <CCard header="Simple line chart">
<c-simple-line-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='success'/> label='Sales' borderColor='success'/>
</b-card> </CCard>
<b-card header="Simple pointed chart"> <CCard header="Simple pointed chart">
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]' <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/> style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
</b-card> </CCard>
<b-card header="Simple bar chart"> <CCard header="Simple bar chart">
<c-simple-bar-chart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/> label='Sales' color='danger'/>
</b-card> </CCard>
</b-card-group> </CCardGroup>
</div> </div>
</template> </template>
<script> <script>
src/views/Dashboard.vue
+252 -211
View File
@@ -1,187 +1,210 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 header="9.823" text="Members online"> <CWidget06 header="9.823" text="Members online">
<template slot='dropdown'> <template slot="dropdown">
<b-dropdown class="float-right" variant="transparent p-0" right> <CDropdown class="float-right"
<template slot="button-content"> variant="transparent p-0"
<i class="icon-settings"></i> right
button-content="<i class='icon-settings'></i>"
tag="div"
>
<!-- <template slot="button-content">
</template> -->
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template> </template>
<b-dropdown-item>Action</b-dropdown-item> <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</template>
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members' pointHoverColor='primary'/> style='height:70px' label='Members' pointHoverColor='primary'/>
</c-widget06> </CWidget06>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 variant="info" header="9.823" text="Members online"> <CWidget06 variant="info" header="9.823" text="Members online">
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret> <CDropdown slot="dropdown"
<i slot="button-content" class="float-right"
variant="transparent p-0"
right
no-caret
button-content="<i class='icon-location-pin'></i>"
tag="div"
>
<!-- <i slot="button-content"
class="icon-location-pin" class="icon-location-pin"
></i> ></i> -->
<b-dropdown-item>Action</b-dropdown-item> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item>Another action</b-dropdown-item> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item>Something else here...</b-dropdown-item> <CDropdownItem>Something else here...</CDropdownItem>
<b-dropdown-item disabled>Disabled action</b-dropdown-item> <CDropdownItem disabled>Disabled action</CDropdownItem>
</b-dropdown> </CDropdown>
<CSimplePointedChart class="px-3" <CSimplePointedChart class="px-3"
:data="[1, 18, 9, 17, 34, 22, 11]" :data="[1, 18, 9, 17, 34, 22, 11]"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style="height:70px" style="height:70px"
label="Members" label="Members"
:options="{elements: {line: {tension: 0.00001}}}" :options="{ elements: { line: { tension: 0.00001 }}}"
pointHoverColor="info" pointHoverColor="info"
/> />
</c-widget06> </CWidget06>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 variant="warning" header="9.823" text="Members online"> <CWidget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'> <template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right> <CDropdown class="float-right"
<template slot="button-content"> variant="transparent p-0"
<i class="icon-settings"></i> right
button-content="<i class='icon-settings'></i>"
tag="div"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template> </template>
<b-dropdown-item>Action</b-dropdown-item> <CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</template>
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' color ='rgba(255,255,255,.2)' label='Members' style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/> :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
</c-widget06> </CWidget06>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 variant="danger" header="9.823" text="Members online"> <CWidget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown"> <template slot="dropdown">
<b-dropdown class="float-right" variant="transparent p-0" right> <CDropdown class="float-right"
<template slot="button-content"> variant="transparent p-0"
right
button-content="<i class='icon-settings'></i>"
>
<!-- <template slot="button-content">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> -->
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</template> </template>
<b-dropdown-item>Action</b-dropdown-item> <CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</template>
<c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Members' color='rgb(250, 152, 152)' style='height:70px' /> label='Members' color='rgb(250, 152, 152)' style='height:70px' />
</c-widget06> </CWidget06>
</b-col> </CCol>
</b-row> </CRow>
<b-card> <CCard>
<b-row> <CRow>
<b-col sm="5"> <CCol sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4> <h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2017</div> <div class="small text-muted">November 2017</div>
</b-col> </CCol>
<b-col sm="7" class="d-none d-md-block"> <CCol sm="7" class="d-none d-md-block">
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button> <CButton variant="primary" class="float-right"><i class="icon-cloud-download"></i></CButton>
<b-button-toolbar class="float-right" aria-label="Toolbar with buttons group"> <CButtonGroup class="float-right mr-3">
<b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn"> <CButton variant="outline-secondary"
<b-form-radio class="mx-0" value="Day">Day</b-form-radio> v-for="(value, key) in ['Day', 'Month', 'Year']"
<b-form-radio class="mx-0" value="Month">Month</b-form-radio> :key="key"
<b-form-radio class="mx-0" value="Year">Year</b-form-radio> class="mx-0"
</b-form-radio-group> :pressed="value === selected ? true : false"
</b-button-toolbar> @click="selected = value"
</b-col> >
</b-row> {{value}}
<main-chart-example style="height:300px;margin-top:40px;" height="300"></main-chart-example> </CButton>
<div slot="footer"> </CButtonGroup>
<b-row class="text-center"> </CCol>
<b-col class="mb-sm-2 mb-0"> </CRow>
<MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
<CCardFooter slot="footer">
<CRow class="text-center">
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Visits</div> <div class="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong> <strong>29.703 Users (40%)</strong>
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress> <CProgress class="progress-xs mt-2" :precision="1" variant="success" :value="40"></CProgress>
</b-col> </CCol>
<b-col class="mb-sm-2 mb-0 d-md-down-none"> <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-muted">Unique</div> <div class="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong> <strong>24.093 Users (20%)</strong>
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress> <CProgress class="progress-xs mt-2" :precision="1" variant="info" :value="20"></CProgress>
</b-col> </CCol>
<b-col class="mb-sm-2 mb-0"> <CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Pageviews</div> <div class="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong> <strong>78.706 Views (60%)</strong>
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress> <CProgress class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></CProgress>
</b-col> </CCol>
<b-col class="mb-sm-2 mb-0"> <CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">New Users</div> <div class="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong> <strong>22.123 Users (80%)</strong>
<b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress> <CProgress class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></CProgress>
</b-col> </CCol>
<b-col class="mb-sm-2 mb-0 d-md-down-none"> <CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-muted">Bounce Rate</div> <div class="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong> <strong>Average Rate (40.15%)</strong>
<b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress> <CProgress class="progress-xs mt-2" :precision="1" :value="40"></CProgress>
</b-col> </CCol>
</b-row> </CRow>
</div> </CCardFooter>
</b-card> </CCard>
<b-row> <CRow>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"> <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
<c-simple-line-chart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends' <CSimpleLineChart :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/> style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"> <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
<c-simple-line-chart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers' <CSimpleLineChart :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/> style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"> <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
<c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts' <CSimpleLineChart :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/> style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'> <CWidget04 variant='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
<c-simple-line-chart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers' <CSimpleLineChart :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/> style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col md="12"> <CCol md="12">
<b-card header="Traffic &amp; Sales"> <CCard header="Traffic &amp; Sales">
<b-row> <CRow>
<b-col sm="12" lg="6"> <CCol sm="12" lg="6">
<b-row> <CRow>
<b-col sm="6"> <CCol sm="6">
<Callout variant="info"> <Callout variant="info">
<small class="text-muted">New Clients</small><br> <small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong> <strong class="h4">9,123</strong>
<div :style="{ top: '-10px'}"> <div :style="{ top: '-10px'}">
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />--> <!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" /> <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
</div> </div>
</Callout> </Callout>
</b-col> </CCol>
<b-col sm="6"> <CCol sm="6">
<Callout variant="danger"> <Callout variant="danger">
<small class="text-muted">Recurring Clients</small><br> <small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong> <strong class="h4">22,643</strong>
<div :style="{ top: '-10px'}"> <div :style="{ top: '-10px'}">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" /> <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
</div> </div>
</Callout> </Callout>
</b-col> </CCol>
</b-row> </CRow>
<hr class="mt-0"> <hr class="mt-0">
<div class="progress-group mb-4"> <div class="progress-group mb-4">
<div class="progress-group-prepend"> <div class="progress-group-prepend">
@@ -190,8 +213,8 @@
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress class="progress-xs" variant="info" :value="34" height={} /> <CProgress class="progress-xs" variant="info" :value="34" />
<b-progress class="progress-xs" variant="danger" :value="78" height={} /> <CProgress class="progress-xs" variant="danger" :value="78" />
</div> </div>
</div> </div>
<div class="progress-group mb-4"> <div class="progress-group mb-4">
@@ -201,8 +224,8 @@
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="56" variant="info"></b-progress> <CProgress class="progress-xs" :value="56" variant="info"></CProgress>
<b-progress height={} class="progress-xs" :value="94" variant="danger"></b-progress> <CProgress class="progress-xs" :value="94" variant="danger"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group mb-4"> <div class="progress-group mb-4">
@@ -212,8 +235,8 @@
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="12" variant="info"></b-progress> <CProgress class="progress-xs" :value="12" variant="info"></CProgress>
<b-progress height={} class="progress-xs" :value="67" variant="danger"></b-progress> <CProgress class="progress-xs" :value="67" variant="danger"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group mb-4"> <div class="progress-group mb-4">
@@ -223,8 +246,8 @@
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="43" variant="info"></b-progress> <CProgress class="progress-xs" :value="43" variant="info"></CProgress>
<b-progress height={} class="progress-xs" :value="91" variant="danger"></b-progress> <CProgress class="progress-xs" :value="91" variant="danger"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group mb-4"> <div class="progress-group mb-4">
@@ -234,8 +257,8 @@
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="22" variant="info"></b-progress> <CProgress class="progress-xs" :value="22" variant="info"></CProgress>
<b-progress height={} class="progress-xs" :value="73" variant="danger"></b-progress> <CProgress class="progress-xs" :value="73" variant="danger"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group mb-4"> <div class="progress-group mb-4">
@@ -245,8 +268,8 @@
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="53" variant="info"></b-progress> <CProgress class="progress-xs" :value="53" variant="info"></CProgress>
<b-progress height={} class="progress-xs" :value="82" variant="danger"></b-progress> <CProgress class="progress-xs" :value="82" variant="danger"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group mb-4"> <div class="progress-group mb-4">
@@ -256,41 +279,41 @@
</span> </span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="9" variant="info"></b-progress> <CProgress class="progress-xs" :value="9" variant="info"></CProgress>
<b-progress height={} class="progress-xs" :value="69" variant="danger"></b-progress> <CProgress class="progress-xs" :value="69" variant="danger"></CProgress>
</div> </div>
</div> </div>
<div class="legend text-center"> <div class="legend text-center">
<small> <small>
<sup><b-badge pill variant="info">&nbsp;</b-badge></sup> <sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
New clients New clients
&nbsp;&nbsp; &nbsp;&nbsp;
<sup><b-badge pill variant="danger">&nbsp;</b-badge></sup> <sup><CBadge pill variant="danger">&nbsp;</CBadge></sup>
Recurring clients Recurring clients
</small> </small>
</div> </div>
</b-col> </CCol>
<b-col sm="12" lg="6"> <CCol sm="12" lg="6">
<b-row> <CRow>
<b-col sm="6"> <CCol sm="6">
<Callout variant="warning"> <Callout variant="warning">
<small class="text-muted">Pageviews</small><br> <small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong> <strong class="h4">78,623</strong>
<div :style="{ top: '-10px'}"> <div :style="{ top: '-10px'}">
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/> <CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
</div> </div>
</Callout> </Callout>
</b-col> </CCol>
<b-col sm="6"> <CCol sm="6">
<Callout variant="success"> <Callout variant="success">
<small class="text-muted">Organic</small><br> <small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong> <strong class="h4">49,123</strong>
<div :style="{ top: '-10px'}"> <div :style="{ top: '-10px'}">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" /> <CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
</div> </div>
</Callout> </Callout>
</b-col> </CCol>
</b-row> </CRow>
<hr class="mt-0"> <hr class="mt-0">
<ul class="horizontal-bars type-2"> <ul class="horizontal-bars type-2">
<div class="progress-group"> <div class="progress-group">
@@ -300,7 +323,7 @@
<span class="ml-auto font-weight-bold">43%</span> <span class="ml-auto font-weight-bold">43%</span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="43" variant="warning"></b-progress> <CProgress class="progress-xs" :value="43" variant="warning"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group mb-5"> <div class="progress-group mb-5">
@@ -310,7 +333,7 @@
<span class="ml-auto font-weight-bold">37%</span> <span class="ml-auto font-weight-bold">37%</span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="37" variant="warning"></b-progress> <CProgress class="progress-xs" :value="37" variant="warning"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group">
@@ -320,7 +343,7 @@
<span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span> <span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="56" variant="success"></b-progress> <CProgress class="progress-xs" :value="56" variant="success"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group">
@@ -330,7 +353,7 @@
<span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span> <span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="15" variant="success"></b-progress> <CProgress class="progress-xs" :value="15" variant="success"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group">
@@ -340,7 +363,7 @@
<span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span> <span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="11" variant="success"></b-progress> <CProgress class="progress-xs" :value="11" variant="success"></CProgress>
</div> </div>
</div> </div>
<div class="progress-group"> <div class="progress-group">
@@ -350,52 +373,85 @@
<span class="ml-auto font-weight-bold">27,319 <span class="text-muted small">&nbsp;(8%)</span></span> <span class="ml-auto font-weight-bold">27,319 <span class="text-muted small">&nbsp;(8%)</span></span>
</div> </div>
<div class="progress-group-bars"> <div class="progress-group-bars">
<b-progress height={} class="progress-xs" :value="8" variant="success"></b-progress> <CProgress class="progress-xs" :value="8" variant="success"></CProgress>
</div> </div>
</div> </div>
<div class="divider text-center"> <div class="divider text-center">
<b-button variant="link" size="sm" class="text-muted"><i class="icon-options"></i></b-button> <CButton variant="link" size="sm" class="text-muted"><i class="icon-options"></i></CButton>
</div> </div>
</ul> </ul>
</b-col> </CCol>
</b-row> </CRow>
<br/> <br/>
<b-table class="mb-0 table-outline" responsive="sm" hover :items="tableItems" :fields="tableFields" head-variant="light"> <CTable class="mb-0 table-outline"
<div slot="avatar" class="avatar" slot-scope="item"> hover
<img :src="item.value.url" class="img-avatar" alt=""> :items="tableItems"
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span> :fields="tableFields"
head-variant="light"
noSorting
>
<!-- <div slot="activity-header">
A tu nic
</div> -->
<td slot="avatar" class="text-center" slot-scope="{item}">
<div class="avatar">
<img :src="item.avatar.url" class="img-avatar" alt="">
<span class="avatar-status"
:class="item.avatar.status ?
`bg-${item.avatar.status}` :
'bg-secondary'"
></span>
</div> </div>
<div slot="user" slot-scope="item"> </td>
<div>{{item.value.name}}</div> <td slot="user" slot-scope="{item}">
<div>{{item.user.name}}</div>
<div class="small text-muted"> <div class="small text-muted">
<span> <span>
<template v-if="item.value.new">New</template> <template v-if="item.user.new">New</template>
<template v-else>Recurring</template> <template v-else>Recurring</template>
</span> | Registered: {{item.value.registered}} </span> | Registered: {{item.user.registered}}
</div> </div>
</div> </td>
<i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i> <td slot="country"
<i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i> slot-scope="{item}"
<div slot="usage" slot-scope="item"> class="text-center"
>
<i class="h4 mb-0"
:class="flag(item.country.flag)"
:title="item.country.flag"
:id="item.country.flag"
></i>
</td>
<!-- <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i> -->
<td slot="usage" slot-scope="{item}">
<div class="clearfix"> <div class="clearfix">
<div class="float-left"> <div class="float-left">
<strong>{{item.value.value}}%</strong> <strong>{{item.usage.value}}%</strong>
</div> </div>
<div class="float-right"> <div class="float-right">
<small class="text-muted">{{item.value.period}}</small> <small class="text-muted">{{item.usage.period}}</small>
</div> </div>
</div> </div>
<b-progress height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress> <CProgress class="progress-xs" v-model="item.usage.value"
</div>
<i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i> :variant="variant(item.usage.value)"></CProgress>
<div slot="activity" slot-scope="item"> </td>
<td slot="payment"
slot-scope="{item}"
class="text-center"
>
<i :class="item.payment.icon"
style="font-size:24px"
></i>
</td>
<td slot="activity" slot-scope="{item}">
<div class="small text-muted">Last login</div> <div class="small text-muted">Last login</div>
<strong>{{item.value}}</strong> <strong>{{item.activity}}</strong>
</div> </td>
</b-table> </CTable>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</template> </template>
@@ -464,29 +520,14 @@ export default {
activity: 'Last week' activity: 'Last week'
} }
], ],
tableFields: { tableFields: [
avatar: { { key: 'avatar', label: '<i class="icon-people"></i>',},
label: '<i class="icon-people"></i>', { key: 'user' },
class: 'text-center' { key: 'country' },
}, { key: 'usage' },
user: { { key: 'payment', label: 'Payment method' },
label: 'User' { key: 'activity' },
}, ]
country: {
label: 'Country',
class: 'text-center'
},
usage: {
label: 'Usage'
},
payment: {
label: 'Payment method',
class: 'text-center'
},
activity: {
label: 'Activity'
}
}
} }
}, },
methods: { methods: {
src/views/Widgets.vue
+276 -280
View File
@@ -1,234 +1,234 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."> <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
<CProgress color="success" :value="25" class="progress-xs my-3 mb-0"/> <CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
</c-widget01> </CWidget01>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="info" :value="25"/> variant="info" :value="25"/>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" :value="25"/> variant="warning" :value="25"/>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" :value="25"/> variant="danger" :value="25"/>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="success" inverse :value="25"/> variant="success" inverse :value="25"/>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="info" inverse :value="25"/> variant="info" inverse :value="25"/>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="warning" inverse :value="25"/> variant="warning" inverse :value="25"/>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" inverse :value="25"/> variant="danger" inverse :value="25"/>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/> <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/> <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/> <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/> <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="3"> <CCol cols="12" sm="6" lg="3">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/> <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col cols="12" sm="6" lg="4"> <CCol cols="12" sm="6" lg="4">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/> <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="4"> <CCol cols="12" sm="6" lg="4">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/> <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
</b-col> </CCol>
<b-col cols="12" sm="6" lg="4"> <CCol cols="12" sm="6" lg="4">
<c-widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/> <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/> <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/> <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/> <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
</b-col> </CCol>
<b-col md="3" sm="6" class="codeContainer"> <CCol md="3" sm="6" class="codeContainer">
<c-widget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'> <CWidget04 variant='warning' rightHeader='0:57' rightFooter='time' leftHeader='17' leftFooter='percentage'>
<i slot="icon" class="fa fa-battery-1"></i> <i slot="icon" class="fa fa-battery-1"></i>
</c-widget04> </CWidget04>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-row> <CRow>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"> <CWidget04 variant="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
<c-simple-line-chart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends' <CSimpleLineChart chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/> style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"> <CWidget04 variant="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
<c-simple-line-chart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers' <CSimpleLineChart chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/> style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"> <CWidget04 variant="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
<c-simple-line-chart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts' <CSimpleLineChart chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' color='rgba(255,255,255,.1)'/> style='height:100px' color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
<b-col md="3" sm="6"> <CCol md="3" sm="6">
<c-widget04 variant='google-plus' <CWidget04 variant='google-plus'
rightHeader='894' rightHeader='894'
rightFooter='followers' rightFooter='followers'
leftHeader='92' leftFooter='circles'> leftHeader='92' leftFooter='circles'>
<c-simple-line-chart chartId="google-plus" <CSimpleLineChart chartId="google-plus"
:data='[35, 23, 56, 22, 97, 23, 64]' :data='[35, 23, 56, 22, 97, 23, 64]'
label='Followers' label='Followers'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:100px' style='height:100px'
color='rgba(255,255,255,.1)'/> color='rgba(255,255,255,.1)'/>
</c-widget04> </CWidget04>
</b-col> </CCol>
</b-row><!--/.row--> </CRow><!--/.row-->
<b-card-group class="mb-4"> <CCardGroup class="mb-4">
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/> <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/> <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/> <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/> <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/> <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
</b-card-group> </CCardGroup>
<b-card-group class="mb-4"> <CCardGroup class="mb-4">
<c-widget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/> <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/> <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/> <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
<c-widget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/> <CWidget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/> <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
</b-card-group> </CCardGroup>
<b-row> <CRow>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/> <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/> <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/> <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/> <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" > <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
<CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/> <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
</c-widget05> </CWidget05>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/> <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/> <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/> <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/> <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/> <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/> <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
</b-col> </CCol>
<b-col sm="6" md="2"> <CCol sm="6" md="2">
<c-widget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/> <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 header="9.823" text="Members online"> <CWidget06 header="9.823" text="Members online">
<template slot='dropdown'> <template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right> <CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> </template>
<b-dropdown-item>Action</b-dropdown-item> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item>Another action</b-dropdown-item> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item>Something else here...</b-dropdown-item> <CDropdownItem>Something else here...</CDropdownItem>
<b-dropdown-item disabled>Disabled action</b-dropdown-item> <CDropdownItem disabled>Disabled action</CDropdownItem>
</b-dropdown> </CDropdown>
</template> </template>
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]' <CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members' pointHoverColor='primary'/> style='height:70px' label='Members' pointHoverColor='primary'/>
</c-widget06> </CWidget06>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 variant="info" header="9.823" text="Members online"> <CWidget06 variant="info" header="9.823" text="Members online">
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret> <CDropdownslot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="button-content" <i slot="button-content"
class="icon-location-pin" class="icon-location-pin"
></i> ></i>
<b-dropdown-item>Action</b-dropdown-item> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item>Another action</b-dropdown-item> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item>Something else here...</b-dropdown-item> <CDropdownItem>Something else here...</CDropdownItem>
<b-dropdown-item disabled>Disabled action</b-dropdown-item> <CDropdownItem disabled>Disabled action</CDropdownItem>
</b-dropdown> </CDropdown>
<CSimplePointedChart class="px-3" <CSimplePointedChart class="px-3"
:data="[1, 18, 9, 17, 34, 22, 11]" :data="[1, 18, 9, 17, 34, 22, 11]"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
@@ -237,124 +237,120 @@
:options="{elements: {line: {tension: 0.00001}}}" :options="{elements: {line: {tension: 0.00001}}}"
pointHoverColor="info" pointHoverColor="info"
/> />
</c-widget06> </CWidget06>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 variant="warning" header="9.823" text="Members online"> <CWidget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'> <template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right> <CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> </template>
<b-dropdown-item>Action</b-dropdown-item> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item>Another action</b-dropdown-item> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item>Something else here...</b-dropdown-item> <CDropdownItem>Something else here...</CDropdownItem>
<b-dropdown-item disabled>Disabled action</b-dropdown-item> <CDropdownItem disabled>Disabled action</CDropdownItem>
</b-dropdown> </CDropdown>
</template> </template>
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]' <CSimpleLineChart chartId="CWidget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']" :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' color ='rgba(255,255,255,.2)' label='Members' style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/> :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
</c-widget06> </CWidget06>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget06 variant="danger" header="9.823" text="Members online"> <CWidget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown"> <template slot="dropdown">
<b-dropdown class="float-right" variant="transparent p-0" right> <CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
<i class="icon-settings"></i> <i class="icon-settings"></i>
</template> </template>
<b-dropdown-item>Action</b-dropdown-item> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item>Another action</b-dropdown-item> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item>Something else here...</b-dropdown-item> <CDropdownItem>Something else here...</CDropdownItem>
<b-dropdown-item disabled>Disabled action</b-dropdown-item> <CDropdownItem disabled>Disabled action</CDropdownItem>
</b-dropdown> </CDropdown>
</template> </template>
<c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Members' color='rgb(250, 152, 152)' style='height:70px' /> label='Members' color='rgb(250, 152, 152)' style='height:70px' />
</c-widget06> </CWidget06>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'> <CWidget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<CSimpleBarChart style="height:40px" <CSimpleBarChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]" :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales" label="Sales"
/> />
</c-widget07> </CWidget07>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'> <CWidget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleBarChart style="height:40px" chartId="CWidget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07> </CWidget07>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'> <CWidget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleBarChart style="height:40px" chartId="CWidget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07> </CWidget07>
</b-col> </CCol>
<b-col sm="6" lg="3"> <CCol sm="6" lg="3">
<c-widget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'> <CWidget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleLineChart style="height:40px" chartId="CWidget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/> <CSimpleBarChart style="height:40px" chartId="CWidget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07> </CWidget07>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col sm="4" lg="2"> <CCol sm="4" lg="2">
<c-widget08 header='title' text='1,123'> <CWidget08 header='title' text='1,123'>
<c-simple-line-chart style="height:40px" chartId="c-widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleLineChart style="height:40px" chartId="CWidget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='danger'/> label='Sales' borderColor='danger'/>
</c-widget08> </CWidget08>
</b-col> </CCol>
<b-col sm="4" lg="2"> <CCol sm="4" lg="2">
<c-widget08 header='title' text='1,123'> <CWidget08 header='title' text='1,123'>
<c-simple-line-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='primary'/> label='Sales' borderColor='primary'/>
</c-widget08> </CWidget08>
</b-col> </CCol>
<b-col sm="4" lg="2"> <CCol sm="4" lg="2">
<c-widget08 header='title' text='1,123'> <CWidget08 header='title' text='1,123'>
<CSimpleLineChart style="height:40px" <CSimpleLineChart style="height:40px"
:data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]" :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
label="Sales" label="Sales"
borderColor="success" borderColor="success"
/> />
</c-widget08> </CWidget08>
</b-col> </CCol>
<b-col sm="4" lg="2"> <CCol sm="4" lg="2">
<c-widget08 header='title' text='1,123'> <CWidget08 header='title' text='1,123'>
<c-simple-bar-chart style="height:40px" chartId="c-widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:40px" chartId="CWidget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/> label='Sales' color='danger'/>
</c-widget08> </CWidget08>
</b-col> </CCol>
<b-col sm="4" lg="2"> <CCol sm="4" lg="2">
<c-widget08 header='title' text='1,123'> <CWidget08 header='title' text='1,123'>
<c-simple-bar-chart style="height:40px" chartId="c-widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:40px" chartId="CWidget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='primary'/> label='Sales' color='primary'/>
</c-widget08> </CWidget08>
</b-col> </CCol>
<b-col sm="4" lg="2"> <CCol sm="4" lg="2">
<c-widget08 header='title' text='1,123'> <CWidget08 header='title' text='1,123'>
<c-simple-bar-chart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' <CSimpleBarChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='success'/> label='Sales' color='success'/>
</c-widget08> </CWidget08>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</template> </template>
<script> <script>
// import CWidget06 from './CWidget06'
export default { export default {
name: 'Widgets', name: 'Widgets',
// components: {
// CWidget06
// }
} }
</script> </script>
src/views/base/Breadcrumbs.vue
+17 -21
View File
@@ -1,42 +1,34 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12"> <CCol cols>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank"> <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> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<CBreadcrumb :items="items"/> <CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
<CBreadcrumb :items="items2"/> <CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/> <CBreadcrumb :items="items3"/>
<!-- <Breadcrumb :list="items3"/> --> </CCard>
</CCol>
</b-card> </CRow>
</b-col>
</b-row>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import CBreadcrumb from './CBreadcrumb'
export default { export default {
name: 'breadcrumbs', name: 'breadcrumbs',
// components: {
// CBreadcrumb
// },
data () { data () {
return { return {
items: [{ items: [{
text: 'Admin', text: '<b>Admin</b>',
href: '#' href: '#'
}, { }, {
text: 'Manage', text: 'Manage',
@@ -44,6 +36,8 @@ export default {
}, { }, {
text: 'Library' text: 'Library'
}], }],
items2: [{ items2: [{
text: 'Go to dashboard', text: 'Go to dashboard',
to: '/dashboard' to: '/dashboard'
@@ -56,19 +50,21 @@ export default {
},{ },{
text: 'Current page' text: 'Current page'
}], }],
items3: ['sd', {
items3: [{
text: 'Link', text: 'Link',
to: '#2', to: '#2',
activeClass: 'bg-info p-1' activeClass: 'bg-info p-1'
}, { }, {
text: 'Active', text: 'Active',
to: '#3', to: '#3',
activeClass: 'bg-warning p-1' activeClass: 'bg-warning p-1',
addLinkClasses: 'bg-info p-1'
},{ },{
text: 'Classes', text: 'Classes',
to: '#4', to: '#4',
activeClass: 'bg-danger p-1', activeClass: 'bg-danger p-1',
current: false
}] }]
} }
} }
src/views/base/Cards.vue
+223 -264
View File
@@ -1,67 +1,236 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<!-- <CContainer fluid>
<CRow> <CRow>
<CColumn lg md="7" :sm="{'order': 2, offset:'0', size:'4'}" class="hehe"> <CCol sm="6" md="4">
hehe <CCard header="Card title">
</CColumn> 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.
</CRow> </CCard>
</CContainer> --> </CCol>
<CNavbar toggleable="md" light variant="light"> <CCol sm="6" md="4">
<CNavbarToggle class="hehe" @click="test2 = !test2"/> <CCard footer="Card Footer">
<CLink class="navbar-brand">NavBar</CLink> 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.
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" > </CCard>
<CNavbarNav pills class="navbar-nav"> </CCol>
<CNavItem> <CCol sm="6" md="4">
hehehe1 <CCard header="<i class='fa fa-check'></i> Card with icon">
</CNavItem> 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.
<CNavItem class="nav-item"> </CCard>
hehehe1 </CCol>
</CNavItem> <CCol sm="6" md="4">
<CNavItem class="nav-item"> <CCard>
hehehe2 <CCardHeader slot="header">
</CNavItem> Card with switch
<DefaultHeaderDropdownAccnt/> <label class="switch switch-sm switch-text switch-info float-right mb-0">
</CNavbarNav> <input type="checkbox" class="switch-input">
<CNavbarNav class="ml-auto"> <span class="switch-label" data-on="On" data-off="Off"></span>
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link"> <span class="switch-handle"></span>
<c-dropdown-item><i class="fa fa-file" /> Projects </label>
<c-badge variant="primary">32</c-badge> </CCardHeader>
</c-dropdown-item> 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-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item> </CCard>
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item> </CCol>
</CDropdown> <CCol sm="6" md="4">
</CNavbarNav> <CCard>
</CCollapse> <CCardHeader slot="header">
</CNavbar> Card with label
<br> <CBadge variant="success" class="float-right">Success</CBadge>
<b-row> </CCardHeader>
<b-col sm="6" md="4"> 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"> <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"> <CCardHeader slot="header">
Card with header actions Card with header actions
<div class="card-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> <i class="icon-settings"></i>
</c-link> </CLink>
<c-link class="card-header-action btn-minimize" v-c-collapse:collapse1="test" @click="test = !test" data-duration="600"> <CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<i :class="`icon-arrow-${ !test ? 'up' : 'down'}`"></i> <i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
</c-link> </CLink>
<c-link href="#" class="card-header-action btn-close" v-on:click="show = !show"> <CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
<i class="icon-close"></i> <i class="icon-close"></i>
</c-link> </CLink>
</div> </div>
</CCardHeader> </CCardHeader>
<c-card-body id="collapse1"> <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. 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> </CCardBody>
</c-card> </CCollapse>
</CCard>
</transition> </transition>
</b-col> </CCol>
<b-col sm="6" md="4"> </CRow>
<c-card> <!-- <CRow>
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25" class="mb-2"/> <CCol sm="6" md="4">
<CCard noWrapper>
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
<CCardHeader header="Card title"/> <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.
@@ -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.
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> </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> </CCard>
</b-col> </CCol>
<b-col sm="6" md="4"> </CRow> -->
<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-->
</div> </div>
</template> </template>
<script> <script>
import DefaultHeaderDropdownAccnt from'../../containers/DefaultHeaderDropdownAccnt'
export default { export default {
name: 'cards', name: 'cards',
components: {
DefaultHeaderDropdownAccnt
},
data: function () { data: function () {
return { return {
show: true, show: true,
showCollapse: true, isCollapsed: true
test: true,
test2: false,
form: 1,
smh: 'sdfsdf'
} }
} }
} }
src/views/base/Carousels.vue
+11 -11
View File
@@ -1,26 +1,26 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col md="12" lg="9" > <CCol md="12" lg="9" >
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
<div class="card-header-actions"> <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> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <div>
<CCarousel/>
<br>
<b-carousel id="carousel1" <b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;" style="text-shadow: 1px 1px 2px #333;"
controls controls
indicators indicators
background="#ababab" background="#ababab"
:interval="4000" :interval="400000"
img-width="1024" img-width="1024"
img-height="480" img-height="480"
v-model="slide" v-model="slide"
@@ -67,9 +67,9 @@
</p> </p>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</div> </div>
</template> </template>
src/views/base/Collapses.vue
+106 -119
View File
@@ -1,176 +1,163 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong> <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"> <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> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <div>
<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn> <CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
<b-collapse id="collapse1" class="mt-2"> <CCollapse id="collapse1" class="mt-2">
<b-card> <CCard>
<p class="card-text">Collapse contents Here</p> <p class="card-text">Collapse contents Here</p>
<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn> <CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
<b-collapse id=collapse1_inner class="mt-2"> <CCollapse id=collapse1_inner class="mt-2">
<b-card>Hello!</b-card> <CCard>Hello!</CCard>
</b-collapse> </CCollapse>
</b-card> </CCard>
</b-collapse> </CCollapse>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
</div> </CCardHeader>
<div> <div>
<!-- Using modifiers --> <!-- 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 --> <!-- 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 --> <!-- element to collapse -->
<b-collapse id="collapse2"> <CCollapse id="collapse2">
<b-card> <CCard>
I am collapsible content! I am collapsible content!
</b-card> </CCard>
</b-collapse> </CCollapse>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
</div> </CCardHeader>
<div> <div>
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn> <CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
<b-collapse visible id="collapse3"> <CCollapse visible id="collapse3">
<b-card> <CCard>
I should start open! I should start open!
</b-card> </CCard>
</b-collapse> </CCollapse>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
</div> </CCardHeader>
<div> <div>
<b-btn @click="showCollapse = !showCollapse" <CButton @click="showCollapse = !showCollapse"
:class="showCollapse ? 'collapsed' : null" :class="showCollapse ? 'collapsed' : null"
aria-controls="collapse4" aria-controls="collapse4"
:aria-expanded="showCollapse ? 'true' : 'false'"> :aria-expanded="showCollapse ? 'true' : 'false'">
Toggle Collapse Toggle Collapse
</b-btn> </CButton>
<b-collapse class="mt-2" v-model="showCollapse" id="collapse4"> <CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
<b-card> <CCard>
I should start open! I should start open!
</b-card> </CCard>
</b-collapse> </CCollapse>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
</div> </CCardHeader>
<div> <div>
<!-- Single button triggers two b-collapse components --> <!-- Single button triggers two CCollapse components -->
<b-btn v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</b-btn> <CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
<!-- elements to collapse --> <!-- elements to collapse -->
<b-collapse id="collapseA" class="mt-2"> <CCollapse id="collapseA" class="mt-2">
<b-card> <CCard>
I am collapsable content A! I am collapsable content A!
</b-card> </CCard>
</b-collapse> </CCollapse>
<b-collapse id="collapseB" class="mt-2"> <CCollapse id="collapseB" class="mt-2">
<b-card> <CCard>
I am collapsable content B! I am collapsable content B!
</b-card> </CCard>
</b-collapse> </CCollapse>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
</div> </CCardHeader>
<div role="tablist"> <div role="tablist">
<b-card no-body class="mb-1"> <CCard noWrapper class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab"> <CCardHeader slot="header" class="p-1" role="tab">
<b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn> <CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
</b-card-header> </CCardHeader>
<b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel"> <CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
<b-card-body> <CCardBody slot="body">
<p class="card-text"> <p class="card-text">
I start opened because <code>visible</code> is <code>true</code> I start opened because <code>visible</code> is <code>true</code>
</p> </p>
<p class="card-text"> <p class="card-text">
{{ text }} {{ text }}
</p> </p>
</b-card-body> </CCardBody>
</b-collapse> </CCollapse>
</b-card> </CCard>
<b-card no-body class="mb-1"> <CCard noWrapper class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab"> <CCardHeader slot="header" class="p-1" role="tab">
<b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn> <CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
</b-card-header> </CCardHeader>
<b-collapse id="accordion2" accordion="my-accordion" role="tabpanel"> <CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
<b-card-body> <CCardBody slot="body">
<p class="card-text"> <p class="card-text">
{{ text }} {{ text }}
</p> </p>
</b-card-body> </CCardBody>
</b-collapse> </CCollapse>
</b-card> </CCard>
<b-card no-body class="mb-1"> <CCard noWrapper class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab"> <CCardHeader slot="header" class="p-1" role="tab">
<b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn> <CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
</b-card-header> </CCardHeader>
<b-collapse id="accordion3" accordion="my-accordion" role="tabpanel"> <CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
<b-card-body> <CCardBody slot="body">
<p class="card-text"> <p class="card-text">
{{ text }} {{ text }}
</p> </p>
</b-card-body> </CCardBody>
</b-collapse> </CCollapse>
</b-card> </CCard>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</CRow>
</b-row>
</div> </div>
</div> </div>
</template> </template>
src/views/base/Forms.vue
+724 -999
View File
File diff suppressed because it is too large Load Diff
src/views/base/Jumbotrons.vue
+31 -38
View File
@@ -1,38 +1,33 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col> <CCol>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong> <i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <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> <p>For more information visit website</p>
<b-btn variant="primary" href="#">More Info</b-btn> <CButton variant="primary" href="#">More Info</CButton>
</c-jumbotron> </CJumbotron>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col> <CCol>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong> <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small> <small>with slots</small>
</div> </CCardHeader>
<div> <div>
<c-jumbotron header="Bootstrap 4" lead=""> <CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead"> <p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information. calling extra attention to featured content or information.
@@ -42,24 +37,22 @@
It uses utility classes for typography and spacing to space content It uses utility classes for typography and spacing to space content
out within the larger container. out within the larger container.
</p> </p>
<b-btn variant="primary" href="#">Do Something</b-btn> <CButton variant="primary" href="#">Do Something</CButton>
<b-btn variant="success" href="#">Do Something Else</b-btn> <CButton variant="success" href="#">Do Something Else</CButton>
</c-jumbotron> </CJumbotron>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col> <CCol>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong> <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small> <small>variants</small>
</div> </CCardHeader>
<div> <div>
<c-jumbotron variant="info" <CJumbotron variant="info"
text-variant="white" text-variant="white"
border-variant="dark" border-variant="dark"
header="Bootstrap 4"> header="Bootstrap 4">
@@ -73,11 +66,11 @@
It uses utility classes for typography and spacing to space content It uses utility classes for typography and spacing to space content
out within the larger container. out within the larger container.
</p> </p>
</c-jumbotron> </CJumbotron>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</div> </div>
</template> </template>
src/views/base/ListGroups.vue
+95 -111
View File
@@ -1,31 +1,29 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<!-- <b-row> <!-- <CRow>
<b-col> <CCol>
<b-card> <CCard>
<CMedia asideClasses="m-5 align-self-end" asideRight> <CMedia asideClasses="m-5 align-self-end" asideRight>
<img slot="aside" src="img/avatars/6.jpg"> <img slot="aside" src="img/avatars/6.jpg">
<div class="text-center"> <div class="text-center">
ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
</div> </div>
</CMedia> </CMedia>
</b-card> </CCard>
</b-col> </CCol>
</b-row> --> </CRow> -->
<b-row> <CRow>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong> <i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
<div class="card-header-actions"> <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"> <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> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -33,15 +31,13 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
@@ -49,17 +45,15 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem> <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem> <CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem> <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -67,72 +61,66 @@
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem> <CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem> <CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem> <CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem> <CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem> <CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem> <CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem> <CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem> <CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem> <CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem> <CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center"> <CListGroupItem class="d-flex justify-content-between align-items-center">
Cras justo odio Cras justo odio
<b-badge variant="primary" pill>14</b-badge> <CBadge variant="primary" pill>14</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center"> <CListGroupItem class="d-flex justify-content-between align-items-center">
Dapibus ac facilisis in Dapibus ac facilisis in
<b-badge variant="primary" pill>2</b-badge> <CBadge variant="primary" pill>2</CBadge>
</CListGroupItem> </CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center"> <CListGroupItem class="d-flex justify-content-between align-items-center">
Morbi leo risus Morbi leo risus
<b-badge variant="primary" pill>1</b-badge> <CBadge variant="primary" pill>1</CBadge>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer"> <i class="fa fa-align-justify"></i>
<div slot="header"> <strong> List group </strong>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small> <small>variants</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem> <CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary 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="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem> <CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer"> <i class="fa fa-align-justify"></i>
<div slot="header"> <strong> List group </strong>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small> <small>variants active</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem> <CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem> <CListGroupItem href="#" variant="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="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem> <CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col cols="12"> <CCol cols="12">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
</div> </CCardHeader>
<b-card-group deck> <CCardGroup deck>
<b-card header="<b>Card with list group</b>"> <CCard header="<b>Card with list group</b>">
<CListGroup> <CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
@@ -188,32 +174,30 @@
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem. ad sit ipsum anim Lorem.
</p> </p>
</b-card> </CCard>
<b-card no-body header="<b>Card with flush list group</b>"> <CCard noWrapper header="<b>Card with flush list group</b>">
<CListGroup flush> <CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem> <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
<b-card-body> <CCardBody slot="body">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem. ad sit ipsum anim Lorem.
</b-card-body> </CCardBody>
</b-card> </CCard>
</b-card-group> </CCardGroup>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col md="6"> <CCol md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small> <i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</div> </CCardHeader>
<CListGroup> <CListGroup>
<CListGroupItem href="#" active class="flex-column align-items-start"> <CListGroupItem href="#" active class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">
@@ -249,9 +233,9 @@
<small class="text-muted">Donec id elit non mi porta.</small> <small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</div> </div>
</template> </template>
src/views/base/Navbars.vue
+152 -131
View File
@@ -1,176 +1,197 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card <!-- <CCard>
header-tag="header" <CNavbar toggleable="md" light variant="light">
footer-tag="footer"> <CNavbarToggle class="hehe" @click="test2 = !test2"/>
<div slot="header"> <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> <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<b-navbar toggleable="md" type="dark" variant="info"> <CNavbar toggleable="md" type="dark" variant="info">
<CNavbarToggle @click="show=!show"/>
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle> <CNavbarBrand href="#">NavBar</CNavbarBrand>
<CCollapse :show="show"
<b-navbar-brand href="#">NavBar</b-navbar-brand> navbar
>
<b-collapse is-nav id="nav_collapse"> <CNavbarNav>
<CNavItem href="#">Link</CNavItem>
<b-navbar-nav> <CNavItem href="#" disabled>Disabled</CNavItem>
<b-nav-item href="#">Link</b-nav-item> </CNavbarNav>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items --> <!-- 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> <CDropdown button-content="Lang"
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/> nav
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button> placement="bottom-end"
</b-nav-form> >
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<!-- <c-nav-item-dropdown text="Lang"> <CDropdown nav
<template slot="button-content"> button-content="<em>User</em>"
<img placement="bottom-end"
src="img/avatars/6.jpg" >
class="img-avatar" <CDropdownItem>Profile</CDropdownItem>
alt="admin@bootstrapmaster.com" /> <CDropdownItem>Signout</CDropdownItem>
</template> </CDropdown>
<template slot="dropdown"> </CNavbarNav>
<a href="#" class='dropdown-item'>EN</a> </CCollapse>
<a href="#" class='dropdown-item'>ES</a> </CNavbar>
<a href="#" class='dropdown-item'>RU</a> </CCard>
<a href="#" class='dropdown-item'>FA</a> <CCard>
</template> <CCardHeader slot="header">
</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">
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small> <small>brand</small>
</div> </CCardHeader>
<div> <div>
<!-- Image and text --> <!-- Image and text -->
<b-navbar variant="faded" type="light"> <CNavbar variant="faded" light>
<b-navbar-brand tag="h1" href="#"> <CNavbarBrand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
BootstrapVue BootstrapVue
</b-navbar-brand> </CNavbarBrand>
</b-navbar> </CNavbar>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small> <small>text</small>
</div> </CCardHeader>
<div> <div>
<b-navbar toggleable type="light" variant="light"> <CNavbar toggleable="sm" light variant="light">
<b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle> <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<b-navbar-brand>BootstrapVue</b-navbar-brand> <CNavbarBrand>BootstrapVue</CNavbarBrand>
<b-collapse is-nav id="nav_text_collapse"> <CCollapse :show="navbarText" navbar>
<b-navbar-nav> <CNavbarNav>
<b-nav-text>Navbar text</b-nav-text> <span class="navbar-text">Navbar text</span>
</b-navbar-nav> </CNavbarNav>
</b-collapse> </CCollapse>
</b-navbar> </CNavbar>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small> <small>dropdown</small>
</div> </CCardHeader>
<div> <div>
<b-navbar type="dark" variant="primary" toggleable> <CNavbar type="dark" variant="primary">
<b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle> <!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<b-collapse is-nav id="nav_dropdown_collapse"> <CCollapse :show="navbarDropdown" navbar> -->
<b-navbar-nav> <CNavbarNav>
<b-nav-item href="#">Home</b-nav-item> <CNavItem href="#">Home</CNavItem>
<b-nav-item href="#">Link</b-nav-item> <CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns --> <!-- Navbar dropdowns -->
<b-nav-item-dropdown text="Lang" right> <CDropdown button-content="Lang" right nav>
<b-dropdown-item href="#">EN</b-dropdown-item> <CDropdownItem>EN</CDropdownItem>
<b-dropdown-item href="#">ES</b-dropdown-item> <CDropdownItem>ES</CDropdownItem>
<b-dropdown-item href="#">RU</b-dropdown-item> <CDropdownItem>RU</CDropdownItem>
<b-dropdown-item href="#">FA</b-dropdown-item> <CDropdownItem>FA</CDropdownItem>
</b-nav-item-dropdown> </CDropdown>
<b-nav-item-dropdown text="User" right> <CDropdown button-content="User" right nav>
<b-dropdown-item href="#">Account</b-dropdown-item> <CDropdownItem>Account</CDropdownItem>
<b-dropdown-item href="#">Settings</b-dropdown-item> <CDropdownItem>Settings</CDropdownItem>
</b-nav-item-dropdown> </CDropdown>
</b-navbar-nav> </CNavbarNav>
</b-collapse> <!-- </CCollapse> -->
</b-navbar> </CNavbar>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small> <small>form</small>
</div> </CCardHeader>
<div> <div>
<b-navbar type="light" variant="light"> <CNavbar type="light" variant="light">
<b-nav-form> <CForm inline>
<b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input> <CFormInput
<b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button> class="mr-sm-2"
</b-nav-form> placeholder="Search"
</b-navbar> size="sm"
/>
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Navbar </strong> <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small> <small>input group</small>
</div> </CCardHeader>
<div> <div>
<b-navbar type="light" variant="light"> <CNavbar type="light" variant="light">
<b-nav-form> <CForm inline>
<b-input-group left="@"> <CFormInput
<b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input> class="mr-sm-2"
</b-input-group> placeholder="Username"
</b-nav-form> />
</b-navbar> </CForm>
</CNavbar>
</div> </div>
</b-card> </CCard>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import CNavItemDropdown from './CNavItemDropdown' import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
export default { export default {
name: 'navbars', name: 'navbars',
// components:{ components: {
// CNavItemDropdown DefaultHeaderDropdownAccnt
// } },
data () {
return {
show: false,
navbarText: false,
navbarDropdown: false,
}
}
} }
</script> </script>
src/views/base/Navs.vue
+115 -126
View File
@@ -1,164 +1,153 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank"> <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> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <div>
<c-nav> <CNav>
<c-nav-item active>Active</c-nav-item> <CNavItem active>Active</CNavItem>
<c-nav-item>Link</c-nav-item> <CNavItem title="Link"/>
<c-nav-item>Another Link</c-nav-item> <CNavItem>Another Link</CNavItem>
<c-nav-item disabled>Disabled</c-nav-item> <CNavItem disabled>Disabled</CNavItem>
</c-nav> </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>tab style</small>
</div> </div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
</CCardHeader>
<div> <div>
<c-nav tabs v-model="item" tab-content> <CNav>
<!-- <c-nav-item index="hehe2">Active</c-nav-item> --> <CNavItem active>
<c-nav-item id="hehe"> <i class="icon-basket-loaded"></i>
<i class="icon-basket-loaded"></i> Active </CNavItem>
<div slot="tab">hehe</div> <CNavItem>
</c-nav-item>
<c-nav-item>
Link Link
</CNavItem>
</c-nav-item> <CNavItem>
<c-nav-item>
Another Link Another Link
<div slot="tab">hehe3</div> </CNavItem>
</c-nav-item> <CNavItem disabled>Disabled</CNavItem>
<c-nav-item disabled>Disabled</c-nav-item> </CNav>
</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> -->
</div> </div>
</CCard>
<CCard>
</b-card> <CCardHeader slot="header">
<b-card <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
header-tag="header" </CCardHeader>
footer-tag="footer"> <div>
<div slot="header" @click="item++"> <CNav tabs>
<CNavItem active>
Active
</CNavItem>
<CNavItem>
Link
</CNavItem>
<CNavItem>
Another Link
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCard>
<CCard>
<CCardHeader slot="header" @click="item++">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small> <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>
<div @click="item--"> </CCard>
<c-nav pills> <CCard>
<c-nav-item active>Active</c-nav-item> <CCardHeader slot="header">
<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">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small> <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
</div> </CCardHeader>
<div> <div>
<c-nav fill tabs> <CNav fill tabs>
<c-nav-item active>Active</c-nav-item> <CNavItem active>Active</CNavItem>
<c-nav-item>Link</c-nav-item> <CNavItem>Link</CNavItem>
<c-nav-item>Link with a long name </c-nav-item> <CNavItem>Link with a long name </CNavItem>
<c-nav-item disabled>Disabled</c-nav-item> <CNavItem disabled>Disabled</CNavItem>
</c-nav> </CNav>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small> <i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
</div> </CCardHeader>
<div> <div>
<c-nav justified tabs> <CNav justified tabs>
<c-nav-item active>Active</c-nav-item> <CNavItem active>Active</CNavItem>
<c-nav-item>Link</c-nav-item> <CNavItem>Link</CNavItem>
<c-nav-item>Link with a long name </c-nav-item> <CNavItem>Link with a long name </CNavItem>
<c-nav-item disabled>Disabled</c-nav-item> <CNavItem disabled>Disabled</CNavItem>
</c-nav> </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>dropdown support</small>
</div> </div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<div> <div>
<c-nav pills> <CNav pills>
<c-nav-item active>Active</c-nav-item> <CNavItem active>Active</CNavItem>
<c-nav-item>Link</c-nav-item> <CNavItem>Link</CNavItem>
<c-dropdown id="nav7_ddown" text="Dropdown" right> <CDropdown id="nav7_ddown"
<a class="nav-link dropdown-toggle" slot="button">Dropdown</a> nav
<c-dropdown-item>one</c-dropdown-item> placement="bottom-end"
<c-dropdown-item>two</c-dropdown-item> button-content="Dropdown"
<c-dropdown-divider></c-dropdown-divider> >
<c-dropdown-item>three</c-dropdown-item> <!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
</c-dropdown> <CDropdownItem>one</CDropdownItem>
</c-nav> <CDropdownItem>two</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer"> <i class="fa fa-align-justify"></i>
<div slot="header"> <strong> Bootstrap Navs </strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small> <small>vertical variation</small>
</div> </CCardHeader>
<div> <CRow>
<c-nav vertical class="w-25"> <CCol cols="3" class="m-0">
<c-nav-item active>Active</c-nav-item> <CNav vertical pills >
<c-nav-item>Link</c-nav-item> <CNavItem active>Active</CNavItem>
<c-nav-item>Another Link</c-nav-item> <CNavItem>Link</CNavItem>
<c-nav-item disabled>Disabled</c-nav-item> <CNavItem>Another Link</CNavItem>
</c-nav> <CNavItem disabled>Disabled</CNavItem>
</div> </CNav>
</b-card> </CCol>
</CRow>
</CCard>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import CNav from './CNav'
// import CNavItem from './CNavItem'
// import CTab from './CTab'
// import CTabItem from './CTabItem'
export default { export default {
name: 'navs', name: 'navs',
data () { data () {
return { return {
item: 2 item: 2
} }
}, }
// components: {
// CNav,
// CNavItem,
// CTab,
// CTabItem
// }
} }
</script> </script>
src/views/base/Paginations.vue
+19 -70
View File
@@ -1,121 +1,70 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <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> <h6>Default</h6>
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10"> <CPagination v-model="currentPage" :pages="10"/>
</b-pagination>
<br> <br>
<h6>Small</h6> <h6>Small</h6>
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10"> <CPagination size="sm" v-model="currentPage" :pages="10"/>
</b-pagination>
<br> <br>
<div class="d-sm-down-none"> <div class="d-sm-down-none">
<h6>Large</h6> <h6>Large</h6>
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10"> <CPagination size="lg" v-model="currentPage" :pages="10"/>
</b-pagination>
<br> <br>
</div> </div>
<div>currentPage: {{currentPage}}</div> <div>currentPage: {{currentPage}}</div>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Pagination </strong> <i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>alignment</small> <small>alignment</small>
</div> </CCardHeader>
<div> <div>
<h6>Left alignment (default)</h6> <h6>Left alignment (default)</h6>
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10"> <CPagination v-model="currentPage" :pages="10"/>
</b-pagination>
<br> <br>
<h6>Center alignment</h6> <h6>Center alignment</h6>
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10"> <CPagination align="center" :pages="10" v-model="currentPage"/>
</b-pagination>
<br> <br>
<h6>Right (end) alignment</h6> <h6>Right (end) alignment</h6>
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10"> <CPagination align="end" v-model="currentPage" :pages="10"/>
</b-pagination>
<br> <br>
<div>currentPage: {{currentPage}}</div> <div>currentPage: {{currentPage}}</div>
</div> </div>
</b-card> </CCard>
<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>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import CPagination from './CPagination'
export default { export default {
name: 'paginations', name: 'paginations',
// components: {
// CPagination
// },
data () { data () {
return { return {
currentPage: 3, currentPage: 3,
currentPage2: 3
} }
}, },
methods: { // methods: {
linkGen (pageNum) { // linkGen (pageNum) {
return '#page/' + pageNum + '/foobar' // return '#page/' + pageNum + '/foobar'
}, // },
hehe (val) { // }
// console.log(this.currentPage)
}
}
} }
</script> </script>
src/views/base/Popovers.vue
+108 -107
View File
@@ -1,178 +1,178 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<b-row> <CRow>
<b-col cols="6"> <CCol cols="6">
<div class="my-3 text-center"> <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 Hover Me
</b-btn> </CButton>
</div> </div>
</b-col> </CCol>
<b-col cols="6"> <CCol cols="6">
<div class="my-3 text-center"> <div class="my-3 text-center">
<b-btn id="popoverButton-open" variant="primary">Button</b-btn> <CButton
variant="primary"
<b-popover show target="popoverButton-open" title="Popover"> v-c-popover.hover.active="{
I start <strong>open</strong> header: 'Popover!',
</b-popover> content: 'I start <strong>open</strong>'
}"
>
Button
</CButton>
</div> </div>
</b-col> </CCol>
</b-row> </CRow>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong> <i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>placement</small> <small>placement</small>
</div> </CCardHeader>
<div class="my-3"> <div class="my-3">
<b-row> <CRow>
<b-col md="4" class="py-4 text-center" <CCol
v-for="placement in placements" :key="placement"> md="4"
<b-btn :id="'exPopover1-'+placement" variant="primary"> 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 }} {{ placement }}
</b-btn> </CButton>
<b-popover :target="'exPopover1-'+placement" </CCol>
:placement="placement" </CRow>
title="Popover!"
triggers="hover focus"
:content="`Placement ${placement}`">
</b-popover>
</b-col>
</b-row>
</div> </div>
</b-card> </CCard>
<b-card class="d-sm-down-none" <!-- <CCard class="d-sm-down-none">
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong> <i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>via properties or slots</small> <small>via properties or slots</small>
</div> </CCardHeader>
<b-row> <CRow>
<b-col md="6" class="py-4 text-center"> <CCol md="6" class="py-4 text-center">
<b-btn id="exPopover2" variant="primary">Using properties</b-btn> <CButton id="exPopover2" variant="primary">Using properties</CButton>
<b-popover target="exPopover2" <b-popover target="exPopover2"
title="Prop Examples" title="Prop Examples"
triggers="hover focus" triggers="hover focus"
content="Embedding content using properties is easy"> content="Embedding content using properties is easy">
</b-popover> </b-popover>
</b-col> </CCol>
<b-col md="6" class="py-4 text-center"> <CCol md="6" class="py-4 text-center">
<b-btn id="exPopover3" variant="primary">Using slots</b-btn> <CButton id="exPopover3" variant="primary">Using slots</CButton>
<b-popover target="exPopover3" triggers="hover focus"> <b-popover target="exPopover3" triggers="hover focus">
<template slot="title">Content via Slots</template> <template slot="title">Content via Slots</template>
Embedding content <span class="text-danger">using slots</span> Embedding content <span class="text-danger">using slots</span>
affords you <em>greater <strong>control.</strong></em> and affords you <em>greater <strong>control.</strong></em> and
basic HTML support. basic HTML support.
</b-popover> </b-popover>
</b-col> </CCol>
</b-row> </CRow>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong> <i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>show</small> <small>show</small>
</div> </CCardHeader>
<div class="d-flex flex-column text-md-center"> <div class="d-flex flex-column text-md-center">
<div class="p-2"> <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>
<div class="p-2"> <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"> <b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
Hello <strong>World!</strong> Hello <strong>World!</strong>
</b-popover> </b-popover>
</div> </div>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong> <i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>open/close events</small> <small>open/close events</small>
</div> </CCardHeader>
<div class="d-flex flex-column text-md-center"> <div class="d-flex flex-column text-md-center">
<div class="p-2"> <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>
<div class="p-2"> <div class="p-2">
<b-btn class="px-1" @click="onOpen">Open</b-btn> <CButton class="px-1" @click="onOpen">Open</CButton>
<b-btn class="px-1" @click="onClose">Close</b-btn> <CButton class="px-1" @click="onClose">Close</CButton>
</div> </div>
<b-popover ref="popover1" target="popoverButton-event" title="Popover"> <b-popover ref="popover1" target="popoverButton-event" title="Popover">
Hello <strong>World!</strong> Hello <strong>World!</strong>
</b-popover> </b-popover>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong> <i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>enable/disable events</small> <small>enable/disable events</small>
</div> </CCardHeader>
<div class="d-flex flex-column text-md-center"> <div class="d-flex flex-column text-md-center">
<div class="p-2"> <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>
<div class="p-2"> <div class="p-2">
<b-btn class="px-1" @click="onEnable">Enable</b-btn> <CButton class="px-1" @click="onEnable">Enable</CButton>
<b-btn class="px-1" @click="onDisable">Disable</b-btn> <CButton class="px-1" @click="onDisable">Disable</CButton>
</div> </div>
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover"> <b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
Hello <strong>World!</strong> Hello <strong>World!</strong>
</b-popover> </b-popover>
</div> </div>
</b-card> </CCard> -->
<b-card <!-- <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small> <i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
</div> </CCardHeader>
<b-row> <CRow>
<b-col md="3" class="py-3 text-center"> <CCol md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.top="'I am Top'" <CButton v-b-popover.hover.top="'I am Top'"
title="Popover!" title="Popover!"
variant="primary">Top</b-btn> variant="primary">Top</CButton>
</b-col> </CCol>
<b-col md="3" class="py-3 text-center"> <CCol md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.left="'I am Left'" <CButton v-b-popover.hover.left="'I am Left'"
title="Popover!" title="Popover!"
variant="primary">Left</b-btn> variant="primary">Left</CButton>
</b-col> </CCol>
<b-col md="3" class="py-3 text-center"> <CCol md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.right="'I am Right'" <CButton v-b-popover.hover.right="'I am Right'"
title="Popover!" title="Popover!"
variant="primary">Right</b-btn> variant="primary">Right</CButton>
</b-col> </CCol>
<b-col md="3" class="py-3 text-center"> <CCol md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.bottom="'I am Bottom'" <CButton v-b-popover.hover.bottom="'I am Bottom'"
title="Popover!" title="Popover!"
variant="primary">Bottom</b-btn> variant="primary">Bottom</CButton>
</b-col> </CCol>
</b-row> </CRow>
</b-card> </CCard> -->
</div> </div>
</div> </div>
</template> </template>
@@ -183,12 +183,13 @@ export default {
data () { data () {
return { return {
placements: [ placements: [
'topright', 'top', 'topleft', 'top-start', 'top', 'top-end',
'bottomright', 'bottom', 'bottomleft', 'bottom-start', 'bottom', 'bottom-end',
'righttop', 'right', 'lefttop', 'right-start', 'right', 'right-end',
'rightbottom', 'left', 'leftbottom' 'left-start', 'left', 'left-end'
], ],
show: false show: false,
counter: 0
} }
}, },
methods: { methods: {
src/views/base/ProgressBars.vue
+84 -100
View File
@@ -1,155 +1,139 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <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> <CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" color="success"/> <CProgressBar :value="counter*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" color="warning"/> <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<CProgressBar :value="counter*(1.5/10)" color="danger"/> <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
</CProgress> </CProgress>
<b-btn class="mt-4" @click="clicked">Click me</b-btn> <CButton class="mt-4" @click="clicked">Click me</CButton>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small> <i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</div> </CCardHeader>
<div> <div>
<h6>No label</h6> <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> <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> <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> <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> <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> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
</div> </CCardHeader>
<div> <div>
<h6>Default width</h6> <h6>Default width</h6>
<b-progress :value="value3" class="mb-3"></b-progress> <CProgress :value="value3" class="mb-3"></CProgress>
<h6>Custom widths</h6> <h6>Custom widths</h6>
<b-progress :value="value3" class="w-75 mb-2"></b-progress> <CProgress :value="value3" class="w-75 mb-2"></CProgress>
<b-progress :value="value3" class="w-50 mb-2"></b-progress> <CProgress :value="value3" class="w-50 mb-2"></CProgress>
<b-progress :value="value3" class="w-25"></b-progress> <CProgress :value="value3" class="w-25"></CProgress>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
</div> </CCardHeader>
<div> <div>
<h6>Default height</h6> <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> <h6>Custom heights</h6>
<b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress> <CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
<b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress> <CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
<b-progress height="2px" :value="value3"></b-progress> <CProgress height="2px" :value="value3"></CProgress>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
</div> </CCardHeader>
<div> <div>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1"> <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-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1"> <div class="col-sm-10 pt-1">
<b-progress :value="bar.value" <CProgress :value="bar.value"
:variant="bar.variant" :variant="bar.variant"
:key="bar.variant" :key="bar.variant"
></b-progress> ></CProgress>
</div> </div>
</div> </div>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
</div> </CCardHeader>
<div> <div>
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress> <CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
<b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress> <CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
<b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress> <CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
<b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress> <CProgress :value="100" variant="danger" :striped="striped" class="mb-2"></CProgress>
<b-button variant="secondary" @click="striped = !striped"> <CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped {{ striped ? 'Remove' : 'Add'}} Striped
</b-button> </CButton>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
</div> </CCardHeader>
<div> <div>
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress> <CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
<b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress> <CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
<b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress> <CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
<b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress> <CProgress :value="100" variant="danger" :animated="animate" class="mb-3"></CProgress>
<b-button variant="secondary" @click="animate = !animate"> <CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation {{ animate ? 'Stop' : 'Start'}} Animation
</b-button> </CButton>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small> <i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
</div> </CCardHeader>
<div> <div>
<b-progress :max="max3" class="mb-3"> <CProgress :max="max3" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar> <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar> <CProgressBar variant="success" :value="values[1]"></CProgressBar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar> <CProgressBar variant="info" :value="values[2]"></CProgressBar>
</b-progress> </CProgress>
<b-progress show-progress :max="max3" class="mb-3"> <CProgress show-progress :max="max3" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar> <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar> <CProgressBar variant="success" :value="values[1]"></CProgressBar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar> <CProgressBar variant="info" :value="values[2]"></CProgressBar>
</b-progress> </CProgress>
<b-progress show-value striped :max="max3" class="mb-3"> <CProgress show-value striped :max="max3" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar> <CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar> <CProgressBar variant="success" :value="values[1]"></CProgressBar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar> <CProgressBar variant="info" :value="values[2]"></CProgressBar>
</b-progress> </CProgress>
<b-progress :max="max3" class="mb-3"> <CProgress :max="max3" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar> <CProgressBar variant="primary" :value="values[0]" show-progress></CProgressBar>
<b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar> <CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
<b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar> <CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
</b-progress> </CProgress>
</div> </div>
</b-card> </CCard>
</div> </div>
</div> </div>
</template> </template>
src/views/base/Switches.vue
+397 -381
View File
@@ -5,16 +5,16 @@
<p>myFlag2: {{myFlag2}}</p> <p>myFlag2: {{myFlag2}}</p>
<CSwitch v-model="myFlag1"/> <CSwitch v-model="myFlag1"/>
<CSwitch v-model="myFlag2" checked @change="test" /> --> <CSwitch v-model="myFlag2" checked @change="test" /> -->
<b-row> <CRow>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card v-if="true"> <CCard v-if="true">
<div slot="header"> <CCardHeader slot="header">
<h5> <h5>
Radio switches Radio switches
<b-badge :variant="radio" class="mr-auto">{{radio}}</b-badge> <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<b-badge variant="danger" class="float-right">NEW</b-badge> <CBadge variant="danger" class="float-right">NEW</CBadge>
</h5> </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" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
<CSwitch class="mx-1" <CSwitch class="mx-1"
:key="key" :key="key"
@@ -28,16 +28,16 @@
:value="variant" :value="variant"
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']" v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
/> />
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch default Switch default
<b-badge variant="primary">{{checker}}</b-badge> <CBadge variant="primary">{{checker}}</CBadge>
</div> </CCardHeader>
<CSwitch class="mx-1" <CSwitch class="mx-1"
variant="primary" variant="primary"
checked checked
@@ -62,396 +62,412 @@
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']" v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
/> />
<CSwitch class="mx-1" variant="primary" disabled /> <CSwitch class="mx-1" variant="primary" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch pills Switch pills
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="pill"/> <CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<c-switch class="mx-1" variant="secondary" checked shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<c-switch class="mx-1" variant="success" checked shape="pill" /> <CSwitch class="mx-1" variant="success" checked shape="pill" />
<c-switch class="mx-1" variant="warning" checked shape="pill" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" />
<c-switch class="mx-1" variant="info" checked shape="pill" /> <CSwitch class="mx-1" variant="info" checked shape="pill" />
<c-switch class="mx-1" variant="danger" checked shape="pill" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" />
<c-switch class="mx-1" variant="light" checked shape="pill" /> <CSwitch class="mx-1" variant="light" checked shape="pill" />
<c-switch class="mx-1" variant="dark" checked shape="pill" /> <CSwitch class="mx-1" variant="dark" checked shape="pill" />
<c-switch class="mx-1" variant="primary" disabled shape="pill" /> <CSwitch class="mx-1" variant="primary" disabled shape="pill" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
3d Switch 3d Switch
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="3d" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" />
<c-switch class="mx-1" variant="secondary" checked shape="3d" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<c-switch class="mx-1" variant="success" checked shape="3d" /> <CSwitch class="mx-1" variant="success" checked shape="3d" />
<c-switch class="mx-1" variant="warning" checked shape="3d" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" />
<c-switch class="mx-1" variant="info" checked shape="3d" /> <CSwitch class="mx-1" variant="info" checked shape="3d" />
<c-switch class="mx-1" variant="danger" checked shape="3d" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" />
<c-switch class="mx-1" variant="light" checked shape="3d" /> <CSwitch class="mx-1" variant="light" checked shape="3d" />
<c-switch class="mx-1" variant="dark" checked shape="3d" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" />
<c-switch class="mx-1" variant="primary" disabled shape="3d" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
3d Switch <small><code>disabled</code></small> 3d Switch <small><code>disabled</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<c-switch class="mx-1" variant="secondary" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<c-switch class="mx-1" variant="success" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
<c-switch class="mx-1" variant="warning" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
<c-switch class="mx-1" variant="info" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
<c-switch class="mx-1" variant="danger" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
<c-switch class="mx-1" variant="light" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<c-switch class="mx-1" variant="dark" checked shape="3d" disabled /> <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<c-switch class="mx-1" variant="primary" disabled shape="3d" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
3d Switch <small><code>label</code></small> 3d Switch <small><code>label</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/> <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<c-switch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<c-switch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
<c-switch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
<c-switch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
<c-switch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
<c-switch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<c-switch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<c-switch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
3d Switch <small><code>outline="alt"</code></small> 3d Switch <small><code>outline="alt"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="secondary" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="success" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="warning" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="info" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="danger" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="light" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="dark" checked shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<c-switch class="mx-1" variant="primary" disabled shape="3d" outline="alt" /> <CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>outline</code></small> Switch <small><code>outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline /> <CSwitch class="mx-1" variant="primary" checked outline />
<c-switch class="mx-1" variant="secondary" checked outline /> <CSwitch class="mx-1" variant="secondary" checked outline />
<c-switch class="mx-1" variant="success" checked outline /> <CSwitch class="mx-1" variant="success" checked outline />
<c-switch class="mx-1" variant="warning" checked outline /> <CSwitch class="mx-1" variant="warning" checked outline />
<c-switch class="mx-1" variant="info" checked outline /> <CSwitch class="mx-1" variant="info" checked outline />
<c-switch class="mx-1" variant="danger" checked outline /> <CSwitch class="mx-1" variant="danger" checked outline />
<c-switch class="mx-1" variant="light" checked outline /> <CSwitch class="mx-1" variant="light" checked outline />
<c-switch class="mx-1" variant="dark" checked outline /> <CSwitch class="mx-1" variant="dark" checked outline />
<c-switch class="mx-1" variant="primary" outline disabled /> <CSwitch class="mx-1" variant="primary" outline disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>outline shape="pill"</code></small> Switch <small><code>outline shape="pill"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline shape="pill"/> <CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<c-switch class="mx-1" variant="success" checked outline shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<c-switch class="mx-1" variant="warning" checked outline shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<c-switch class="mx-1" variant="info" checked outline shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<c-switch class="mx-1" variant="danger" checked outline shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<c-switch class="mx-1" variant="light" checked outline shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<c-switch class="mx-1" variant="dark" checked outline shape="pill" /> <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled /> <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>outline="alt"</code></small> Switch <small><code>outline="alt"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline="alt" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" />
<c-switch class="mx-1" variant="secondary" checked outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<c-switch class="mx-1" variant="success" checked outline="alt" /> <CSwitch class="mx-1" variant="success" checked outline="alt" />
<c-switch class="mx-1" variant="warning" checked outline="alt" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" />
<c-switch class="mx-1" variant="info" checked outline="alt" /> <CSwitch class="mx-1" variant="info" checked outline="alt" />
<c-switch class="mx-1" variant="danger" checked outline="alt" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" />
<c-switch class="mx-1" variant="light" checked outline="alt" /> <CSwitch class="mx-1" variant="light" checked outline="alt" />
<c-switch class="mx-1" variant="dark" checked outline="alt" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" />
<c-switch class="mx-1" variant="primary" outline="alt" disabled /> <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>outline="alt" shape="pill"</code></small> Switch <small><code>outline="alt" shape="pill"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill"/> <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled /> <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label</code></small> Switch <small><code>label</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked /> <CSwitch class="mx-1" variant="primary" checked />
<c-switch class="mx-1" variant="secondary" checked /> <CSwitch class="mx-1" variant="secondary" checked />
<c-switch class="mx-1" variant="success" checked /> <CSwitch class="mx-1" variant="success" checked />
<c-switch class="mx-1" variant="warning" checked /> <CSwitch class="mx-1" variant="warning" checked />
<c-switch class="mx-1" variant="info" checked /> <CSwitch class="mx-1" variant="info" checked />
<c-switch class="mx-1" variant="danger" checked /> <CSwitch class="mx-1" variant="danger" checked />
<c-switch class="mx-1" variant="light" checked /> <CSwitch class="mx-1" variant="light" checked />
<c-switch class="mx-1" variant="dark" checked /> <CSwitch class="mx-1" variant="dark" checked />
<c-switch class="mx-1" variant="primary" disabled /> <CSwitch class="mx-1" variant="primary" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label shape="pill"</code></small> Switch <small><code>label shape="pill"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="pill" /> <CSwitch class="mx-1" variant="primary" checked shape="pill" />
<c-switch class="mx-1" variant="secondary" checked shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<c-switch class="mx-1" variant="success" checked shape="pill" /> <CSwitch class="mx-1" variant="success" checked shape="pill" />
<c-switch class="mx-1" variant="warning" checked shape="pill" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" />
<c-switch class="mx-1" variant="info" checked shape="pill" /> <CSwitch class="mx-1" variant="info" checked shape="pill" />
<c-switch class="mx-1" variant="danger" checked shape="pill" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" />
<c-switch class="mx-1" variant="light" checked shape="pill" /> <CSwitch class="mx-1" variant="light" checked shape="pill" />
<c-switch class="mx-1" variant="dark" checked shape="pill" /> <CSwitch class="mx-1" variant="dark" checked shape="pill" />
<c-switch class="mx-1" variant="primary" shape="pill" disabled /> <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline /> <CSwitch class="mx-1" variant="primary" checked outline />
<c-switch class="mx-1" variant="secondary" checked outline /> <CSwitch class="mx-1" variant="secondary" checked outline />
<c-switch class="mx-1" variant="success" checked outline /> <CSwitch class="mx-1" variant="success" checked outline />
<c-switch class="mx-1" variant="warning" checked outline /> <CSwitch class="mx-1" variant="warning" checked outline />
<c-switch class="mx-1" variant="info" checked outline /> <CSwitch class="mx-1" variant="info" checked outline />
<c-switch class="mx-1" variant="danger" checked outline /> <CSwitch class="mx-1" variant="danger" checked outline />
<c-switch class="mx-1" variant="light" checked outline /> <CSwitch class="mx-1" variant="light" checked outline />
<c-switch class="mx-1" variant="dark" checked outline /> <CSwitch class="mx-1" variant="dark" checked outline />
<c-switch class="mx-1" variant="primary" outline disabled /> <CSwitch class="mx-1" variant="primary" outline disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<c-switch class="mx-1" variant="secondary" checked outline shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<c-switch class="mx-1" variant="success" checked outline shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
<c-switch class="mx-1" variant="warning" checked outline shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
<c-switch class="mx-1" variant="info" checked outline shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
<c-switch class="mx-1" variant="danger" checked outline shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
<c-switch class="mx-1" variant="light" checked outline shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<c-switch class="mx-1" variant="dark" checked outline shape="pill" /> <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<c-switch class="mx-1" variant="primary" outline shape="pill" disabled /> <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline="alt" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" />
<c-switch class="mx-1" variant="secondary" checked outline="alt" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<c-switch class="mx-1" variant="success" checked outline="alt" /> <CSwitch class="mx-1" variant="success" checked outline="alt" />
<c-switch class="mx-1" variant="warning" checked outline="alt" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" />
<c-switch class="mx-1" variant="info" checked outline="alt" /> <CSwitch class="mx-1" variant="info" checked outline="alt" />
<c-switch class="mx-1" variant="danger" checked outline="alt" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" />
<c-switch class="mx-1" variant="light" checked outline="alt" /> <CSwitch class="mx-1" variant="light" checked outline="alt" />
<c-switch class="mx-1" variant="dark" checked outline="alt" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" />
<c-switch class="mx-1" variant="primary" outline="alt" disabled /> <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="secondary" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="success" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="warning" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="info" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="danger" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="light" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="dark" checked outline="alt" shape="pill" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<c-switch class="mx-1" variant="primary" outline="alt" shape="pill" disabled /> <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label</code></small> Switch <small><code>label</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked dataOn="" dataOff=""/> <CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
<c-switch class="mx-1" variant="secondary" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<c-switch class="mx-1" variant="success" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
<c-switch class="mx-1" variant="warning" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
<c-switch class="mx-1" variant="info" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
<c-switch class="mx-1" variant="danger" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
<c-switch class="mx-1" variant="light" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<c-switch class="mx-1" variant="dark" checked v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
<c-switch class="mx-1" variant="primary" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
</b-card>shape </CCard>shape
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label shape="pill"</code></small> Switch <small><code>label shape="pill"</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<c-switch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="success" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="warning" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="info" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="danger" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="light" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="dark" checked outline v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
<c-switch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" /> <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<c-switch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" /> <CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" md="6"> <CCol xs="12" md="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Switch <small><code>label outline</code></small> Switch <small><code>label outline</code></small>
</div> </CCardHeader>
<c-switch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch 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" /> <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</b-card> </CCard>
</b-col> </CCol>
<b-col md="12"> <CCol md="12">
<b-card no-body> <CCard noWrapper>
<div slot="header"> <CCardHeader slot="header">
Sizes Sizes
</div> </CCardHeader>
<b-card-body class="p-0"> <CCardBody slot="body" class="p-0">
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields"> <CTable
<template slot="example" slot-scope="data"> hover
<c-switch :variant="data.value.variant" :color="data.value.color" :size="data.value.size" :checked="data.value.checked"/> 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>
<template slot="size_prop" slot-scope="data"> <template #size_prop="{item}">
<span v-html="data.item.size_prop"></span> <td>
<span v-html="item.size_prop"></span>
</td>
</template> </template>
</b-table> </CTable>
</b-card-body> </CCardBody>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</template> </template>
@@ -476,9 +492,9 @@ export default {
{key: 'size_prop', label: 'Size prop'} {key: 'size_prop', label: 'Size prop'}
], ],
items: [ items: [
{size: 'Large', example: {variant: '3d', color: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'}, {size: 'Large', example: {shape: '3d', variant: '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: 'Normal', example: {shape: '3d', variant: '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: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
], ],
checker: 'yes', checker: 'yes',
radio: 'primary', radio: 'primary',
src/views/base/Table.vue
+34 -87
View File
@@ -1,98 +1,48 @@
<template> <template>
<b-card :header="caption"> <CCard :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"> <CTable
<template slot="status" slot-scope="data"> :hover="hover"
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge> :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> </template>
</b-table> </CTable>
<nav> </CCard>
<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>
</template> </template>
<script> <script>
/** import items from '../users/UsersData'
* 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
}
export default { export default {
name: 'c-table', name: 'TableWrapper',
props: { props: {
items: Array,
fields: {
type: Array,
default () {
return ['username', 'registered', 'role', 'status']
}
},
caption: { caption: {
type: String, type: String,
default: 'Table' default: 'Table'
}, },
hover: { hover: Boolean,
type: Boolean, striped: Boolean,
default: false bordered: Boolean,
}, small: Boolean,
striped: { fixed: Boolean,
type: Boolean, dark: 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
}
}, },
methods: { methods: {
getBadge (status) { getBadge (status) {
@@ -101,9 +51,6 @@ export default {
: status === 'Pending' ? 'warning' : status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary' : status === 'Banned' ? 'danger' : 'primary'
}, },
getRowCount (items) {
return items.length
}
} }
} }
</script> </script>
src/views/base/Tables.vue
+110 -57
View File
@@ -1,8 +1,14 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col sm="12"> <CCol sm="12">
<b-card header="test1 "> <CCard header="test1 ">
<!-- <CTable :items="items.slice(0)"
noSorting
striped
/> -->
<CTable :items="items.slice(0)" <CTable :items="items.slice(0)"
:fields="fields" :fields="fields"
:activePage="page" :activePage="page"
@@ -14,7 +20,7 @@
smalls smalls
noPagination noPagination
@row-clicked2="(item, index) => toggleDetails(index)" @row-clicked2="(item, index) => toggleDetails(index)"
loading loadings
hover hover
striped striped
optionsRow="onlyFilter2" optionsRow="onlyFilter2"
@@ -39,20 +45,21 @@
<td slot="status" slot-scope="{item}"> <td slot="status" slot-scope="{item}">
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge> <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
</td> </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)"> <button class="btn btn-primary" @click="toggleDetails(index)">
{{details.includes(index) ? 'Hide' : 'Show'}} {{details.includes(index) ? 'Hide' : 'Show'}}
</button> </button>
</td> --> </td>
<!-- <td slot="index-col" <td slot="index-col"
slot-scope="{index}" slot-scope="{index}"
@click="toggleDetails(index)" @click="toggleDetails(index)"
style="cursor:pointer" style="cursor:pointer"
class="text-center"
> >
<i class="icons font-lg d-block cui-chevron-right" <i class="icons font-lg d-block cui-chevron-right"
style="transition: transform 0.4s" style="transition: transform 0.4s"
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i> :style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
</td> --> </td>
<CCollapse :show="details.includes(index)" <CCollapse :show="details.includes(index)"
slot="details" slot="details"
slot-scope="{item, index}"> slot-scope="{item, index}">
@@ -67,55 +74,94 @@
align="center" align="center"
size="lg" size="lg"
/> />
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col sm="12"> <CCol sm="12">
<b-card header="test2"> <CCard header="test2">
<CTable :items="items.slice(0)" <CTable
:items="items.slice(0)"
:fields="fields" :fields="fields"
:perPage="5" :perPage="5"
indexCol="onlyIndexes2" indexCol="onlyCleaner"
filterRow filterRow
optionsRow="onlyFilter2" optionsRow="onlyFilter"
:paginationProps="{align:'center', size:'lg'}" :paginationProps="{align:'center', size:'lg'}"
noPagination
> >
<td slot="status" slot-scope="{item}"> <td slot="status" slot-scope="{item}">
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge> <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
</td> </td>
</CTable> </CTable>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row @click="test"> <CRow>
<b-col lg="6"> <CCol 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> <CTableWrapper
</b-col><!--/.col--> :items="getItems()"
caption="<i class='fa fa-align-justify'></i> Simple Table"
/>
</CCol><!--/.col-->
<b-col lg="6"> <CCol lg="6">
<old-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></old-table> <CTableWrapper
</b-col><!--/.col--> :items="getItems()"
</b-row><!--/.row--> striped
caption="<i class='fa fa-align-justify'></i> Striped Table"
/>
</CCol><!--/.col-->
</CRow><!--/.row-->
<b-row> <CRow>
<b-col lg="6"> <CCol lg="6">
<old-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></old-table> <CTableWrapper
</b-col><!--/.col--> :items="getItems()"
small
caption="<i class='fa fa-align-justify'></i> Condensed Table"
/>
</CCol><!--/.col-->
<b-col lg="6"> <CCol lg="6">
<old-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></old-table> <CTableWrapper
</b-col><!--/.col--> :items="getItems()"
</b-row><!--/.row--> fixed
bordered
caption="<i class='fa fa-align-justify'></i> Bordered Table"
/>
</CCol><!--/.col-->
</CRow><!--/.row-->
<b-row> <CRow>
<b-col sm="12"> <CCol sm="12">
<old-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></old-table> <CTableWrapper
</b-col> :items="getItems()"
</b-row> 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> </div>
@@ -123,7 +169,7 @@
</template> </template>
<script> <script>
import oldTable from './Table.vue' import CTableWrapper from './Table.vue'
// const fields = ['username', 'registered', 'role'] // const fields = ['username', 'registered', 'role']
const fields = [ const fields = [
@@ -134,17 +180,17 @@ const fields = [
// { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true }, // { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
] ]
const items = [ 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: '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: '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: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'}, {number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'}, {number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'}, {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: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'}, {number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'}, {number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'}, {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: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'}, {number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'}, {number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
@@ -156,14 +202,14 @@ const items = [
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'}, {number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'}, {number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'}, {number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'}, {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: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'} {number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
] ]
export default { export default {
name: 'tables', name: 'tables',
components: { oldTable }, components: { CTableWrapper },
data () { data () {
return { return {
items: items, items: items,
@@ -182,22 +228,29 @@ export default {
: status === 'Pending' ? 'warning' : status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary' : status === 'Banned' ? 'danger' : 'primary'
}, },
test () { // test () {
this.$refs.table.changeSort('username') // this.$refs.table.changeSort('username')
this.$refs.table.filter = 't' // this.$refs.table.filter = 't'
// console.log(this.items) // // console.log(this.items)
}, // },
test3 (item, index) { shuffleArray (array) {
alert(index + ' - ' + item.username) for (let i = array.length - 1; i > 0; i--) {
// console.log() let j = Math.floor(Math.random() * (i + 1))
let temp = array[i]
array[i] = array[j]
array[j] = temp
}
return array
}, },
log(val) { log(val) {
console.log(val) console.log(val)
}, },
toggleDetails (index) { toggleDetails (index) {
// console.log('hehe')
const position = this.details.indexOf(index) const position = this.details.indexOf(index)
position !== -1 ? this.details.splice(position, 1) : this.details.push(index) position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
},
getItems () {
return this.shuffleArray(this.items.slice(0))
} }
} }
// computed: { // computed: {
src/views/base/Tabs.vue
+130 -91
View File
@@ -1,122 +1,118 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col xs="12" lg="6"> <CCol xs="12" lg="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Tabs Tabs
</div> </CCardHeader>
<b-tabs> <CTabs addTabClasses="mt-1">
<b-tab title="Home" active> <CTab title="Home" active>
<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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
<b-tab title="Profile" > <CTab title="Profile" >
<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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
<b-tab title="Disabled" disabled> <CTab title="Disabled" disabled>
<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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
</b-tabs> </CTabs>
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" lg="6"> <CCol xs="12" lg="6">
<b-card> <CCard>
<div slot="header"> <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 Tabs with icons
</div> </CCardHeader>
<b-tabs> <CTabs addTabClasses="mt-1">
<b-tab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="icon-calculator"></i> <i class="icon-calculator"></i>
</template> </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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
<b-tab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-basket-loaded"></i> <i class="icon-basket-loaded"></i>
</template> </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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
<b-tab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-pie-chart"></i> <i class="icon-pie-chart"></i>
</template> </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 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 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
</b-tabs> </CTabs>
</b-card> </CCard>
</b-col> </CCol>
<b-col xs="12" lg="6"> <CCol xs="12" lg="6">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
Tabs with icons Tabs with icons
</div> </CCardHeader>
<b-tabs v-model="tabIndex[0]"> <CTabs
<b-tab active> addTabClasses="mt-1"
<template slot="title"> card
<i class="icon-calculator"></i> {{tabs[0]}} >
</template> <CTab active>
<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>
<template slot="title"> <template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}} <i class="icon-calculator"></i> {{tabs[0]}}
</template> </template>
@@ -125,8 +121,8 @@
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
<b-tab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}} <i class="icon-basket-loaded"></i> {{tabs[1]}}
</template> </template>
@@ -135,8 +131,8 @@
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
<b-tab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-pie-chart"></i> {{tabs[2]}} <i class="icon-pie-chart"></i> {{tabs[2]}}
</template> </template>
@@ -145,12 +141,55 @@
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</b-tab> </CTab>
</b-tabs> </CTabs>
</b-card> </CCard>
</b-card> </CCol>
</b-col> <CCol xs="12" lg="6">
</b-row> <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> </div>
</template> </template>
src/views/base/Tooltips.vue
+104 -122
View File
@@ -1,189 +1,171 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer"> <i class="fa fa-align-justify"></i>
<div slot="header"> <strong> Bootstrap Tooltips </strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Tooltips </strong><small><code>v-b-tooltip</code> directive</small> <small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<b-row> <CRow>
<b-col cols="6"> <CCol cols="6">
<div class="text-center my-3"> <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> </div>
</b-col> </CCol>
<b-col cols="6"> <CCol cols="6">
<div class="text-center my-3"> <div class="text-center my-3">
<b-btn id="tooltipButton-2" variant="primary">Button</b-btn> <CButton v-c-tooltip.hover.active="'I start open!'">
<b-tooltip show target="tooltipButton-2"> Button
I start open </CButton>
</b-tooltip>
</div> </div>
</b-col> </CCol>
</b-row> </CRow>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer"> <i class="fa fa-align-justify"></i>
<div slot="header"> <strong> Tooltips </strong>
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>b-tooltip</code> component</small> <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> </div>
<b-row> </CCard>
<b-col md="6" class="py-4 text-center"> <!-- <CRow>
<b-btn id="exButton1" variant="outline-success">Live chat</b-btn> <CCol md="6" class="py-4 text-center">
</b-col> <CButton id="exButton1" variant="outline-success">Live chat</CButton>
<b-col md="6" class="py-4 text-center"> </CCol>
<b-btn id="exButton2" variant="outline-success">Html chat</b-btn> <CCol md="6" class="py-4 text-center">
</b-col> <CButton id="exButton2" variant="outline-success">Html chat</CButton>
</b-row> </CCol>
</CRow>
<!-- Tooltip title specified via prop title -->
<b-tooltip target="exButton1" title="Online!"></b-tooltip> <b-tooltip target="exButton1" title="Online!"></b-tooltip>
<!-- HTML title specified via default slot -->
<b-tooltip target="exButton2" placement="bottom"> <b-tooltip target="exButton2" placement="bottom">
Hello <strong>World!</strong> Hello <strong>World!</strong>
</b-tooltip> </b-tooltip>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small> <i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
</div> </CCardHeader>
<div class="text-center"> <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> <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"> <b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
Hello <strong>World!</strong> Hello <strong>World!</strong>
</b-tooltip> </b-tooltip>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small> <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="d-flex flex-column text-md-center">
<div class="p-2"> <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>
<div class="p-2"> <div class="p-2">
<b-btn class="px-1 mr-1" @click="onOpen">Open</b-btn> <CButton class="px-1 mr-1" @click="onOpen">Open</CButton>
<b-btn class="px-1" @click="onClose">Close</b-btn> <CButton class="px-1" @click="onClose">Close</CButton>
</div> </div>
<b-tooltip ref="tooltip" target="tooltipButton-showEvent"> <b-tooltip ref="tooltip" target="tooltipButton-showEvent">
Hello <strong>World!</strong> Hello <strong>World!</strong>
</b-tooltip> </b-tooltip>
</div> </div>
</b-card> </CCard>
<b-card <CCard id="boundary">
header-tag="header" <CCardHeader slot="header">
footer-tag="footer"
id="boundary">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small> <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="d-flex flex-column text-md-center">
<div class="p-2"> <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>
<div class="p-2"> <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 {{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
</b-btn> </CButton>
<b-btn @click="disableByRef"> <CButton @click="disableByRef">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event {{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
</b-btn> </CButton>
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable"> <b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
Hello <strong>World!</strong> Hello <strong>World!</strong>
</b-tooltip> </b-tooltip>
</div> </div>
</div> </div>
<b-btn @click="test" id="refButton2"> </CCard> -->
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>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import CTooltip from './CTooltip'
export default { export default {
name: 'tooltips', name: 'tooltips',
// components: {
// CTooltip
// },
data () { data () {
return { return {
show: true, // show: true,
disabled: false, // disabled: false,
smh: 0, // smh: 0,
placement: 'bottom-end' // 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: { methods: {
onOpen () { // onOpen () {
this.$refs.tooltip.$emit('open') // this.$refs.tooltip.$emit('open')
}, // },
onClose () { // onClose () {
this.$refs.tooltip.$emit('close') // this.$refs.tooltip.$emit('close')
}, // },
disableByRef () { // disableByRef () {
if (this.disabled) { // if (this.disabled) {
this.$refs.tooltip2.$emit('enable') // this.$refs.tooltip2.$emit('enable')
} else { // } else {
this.$refs.tooltip2.$emit('disable') // this.$refs.tooltip2.$emit('disable')
} // }
}, // },
test () { // test () {
this.show = !this.show // this.show = !this.show
this.placement = 'right' // this.placement = 'right'
this.smh = 200 // this.smh = 200
} // }
} }
} }
</script> </script>
src/views/buttons/BrandButtons.vue
+248 -248
View File
@@ -1,287 +1,287 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12"> <CCol cols="12">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
<strong>Brand Button</strong> <strong>Brand Button</strong>
</div> </CCardHeader>
<small>Usage </small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code> <small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/> <hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p> <p>
<b-button size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button> <CButton size="sm" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<b-button size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></b-button> <CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<b-button size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button> <CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<b-button size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button> <CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<b-button size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button> <CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<b-button size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button> <CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<b-button size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button> <CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<b-button size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button> <CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<b-button size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button> <CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<b-button size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button> <CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<b-button size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button> <CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<b-button size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button> <CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<b-button size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button> <CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<b-button size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button> <CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<b-button size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button> <CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<b-button size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button> <CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<b-button size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button> <CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<b-button size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button> <CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<b-button size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button> <CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<b-button size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button> <CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<b-button size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button> <CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<b-button size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button> <CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<b-button size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button> <CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<b-button size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button> <CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<b-button size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button> <CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<b-button variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button> <CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<b-button variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button> <CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<b-button variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button> <CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<b-button variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button> <CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<b-button variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button> <CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<b-button variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button> <CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<b-button variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button> <CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<b-button variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button> <CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<b-button variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button> <CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<b-button variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button> <CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<b-button variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button> <CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<b-button variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button> <CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<b-button variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button> <CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<b-button variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button> <CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<b-button variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button> <CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<b-button variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button> <CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<b-button variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button> <CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<b-button variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button> <CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<b-button variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button> <CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<b-button variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button> <CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<b-button variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button> <CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<b-button variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button> <CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<b-button variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button> <CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<b-button variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button> <CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<b-button variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button> <CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
</p> </p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p> <p>
<b-button size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button> <CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<b-button size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button> <CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<b-button size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></b-button> <CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<b-button size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></b-button> <CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<b-button size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></b-button> <CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<b-button size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></b-button> <CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<b-button size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></b-button> <CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<b-button size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></b-button> <CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<b-button size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></b-button> <CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<b-button size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></b-button> <CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<b-button size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></b-button> <CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<b-button size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></b-button> <CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<b-button size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></b-button> <CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<b-button size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></b-button> <CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<b-button size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></b-button> <CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<b-button size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></b-button> <CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<b-button size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></b-button> <CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<b-button size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></b-button> <CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<b-button size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></b-button> <CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<b-button size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></b-button> <CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<b-button size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></b-button> <CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<b-button size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></b-button> <CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<b-button size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></b-button> <CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<b-button size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button> <CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<b-button size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button> <CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
</p> </p>
</b-card> </CCard>
</b-col><!--/.col--> </CCol><!--/.col-->
<b-col cols="12"> <CCol cols="12">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
<strong>Brand Button </strong> <small>Icons only</small> <strong>Brand Button </strong> <small>Icons only</small>
</div> </CCardHeader>
<small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code> <small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/> <hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p> <p>
<b-button size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button> <CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<b-button size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button> <CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<b-button size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button> <CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<b-button size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button> <CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<b-button size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button> <CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<b-button size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button> <CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<b-button size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button> <CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<b-button size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button> <CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<b-button size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button> <CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<b-button size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button> <CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<b-button size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button> <CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<b-button size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button> <CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<b-button size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button> <CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<b-button size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button> <CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<b-button size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button> <CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<b-button size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button> <CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<b-button size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button> <CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<b-button size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button> <CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<b-button size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button> <CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<b-button size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button> <CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<b-button size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button> <CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<b-button size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button> <CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<b-button size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button> <CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<b-button size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button> <CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<b-button size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button> <CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<b-button variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button> <CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<b-button variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button> <CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<b-button variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button> <CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<b-button variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button> <CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<b-button variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button> <CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<b-button variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button> <CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<b-button variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button> <CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<b-button variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button> <CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<b-button variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button> <CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<b-button variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button> <CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<b-button variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button> <CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<b-button variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button> <CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<b-button variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button> <CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<b-button variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button> <CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<b-button variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button> <CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<b-button variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button> <CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<b-button variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button> <CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<b-button variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button> <CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<b-button variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button> <CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<b-button variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button> <CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<b-button variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button> <CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<b-button variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button> <CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<b-button variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button> <CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<b-button variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button> <CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<b-button variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button> <CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
</p> </p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p> <p>
<b-button size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></b-button> <CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<b-button size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></b-button> <CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<b-button size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></b-button> <CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<b-button size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></b-button> <CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<b-button size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></b-button> <CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<b-button size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></b-button> <CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<b-button size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></b-button> <CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<b-button size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></b-button> <CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<b-button size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></b-button> <CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<b-button size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></b-button> <CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<b-button size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></b-button> <CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<b-button size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></b-button> <CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<b-button size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></b-button> <CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<b-button size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></b-button> <CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<b-button size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></b-button> <CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<b-button size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></b-button> <CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<b-button size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></b-button> <CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<b-button size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></b-button> <CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<b-button size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></b-button> <CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<b-button size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></b-button> <CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<b-button size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></b-button> <CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<b-button size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></b-button> <CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<b-button size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></b-button> <CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<b-button size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></b-button> <CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<b-button size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></b-button> <CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
</p> </p>
</b-card> </CCard>
</b-col><!--/.col--> </CCol><!--/.col-->
<b-col cols="12"> <CCol cols="12">
<b-card> <CCard>
<div slot="header"> <CCardHeader slot="header">
<strong>Brand Button </strong> <small>Text only</small> <strong>Brand Button </strong> <small>Text only</small>
</div> </CCardHeader>
<small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code> <small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/> <hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6> <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p> <p>
<b-button size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button> <CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<b-button size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button> <CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<b-button size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button> <CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<b-button size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button> <CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<b-button size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button> <CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<b-button size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button> <CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<b-button size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button> <CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<b-button size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button> <CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<b-button size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button> <CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<b-button size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button> <CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<b-button size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button> <CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<b-button size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button> <CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<b-button size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button> <CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<b-button size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button> <CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<b-button size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button> <CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<b-button size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button> <CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<b-button size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button> <CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<b-button size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button> <CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<b-button size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button> <CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<b-button size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button> <CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<b-button size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button> <CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<b-button size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button> <CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<b-button size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button> <CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<b-button size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button> <CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<b-button size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button> <CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
</p> </p>
<h6>Size Normal</h6> <h6>Size Normal</h6>
<p> <p>
<b-button variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button> <CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<b-button variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button> <CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<b-button variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button> <CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<b-button variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button> <CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<b-button variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button> <CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<b-button variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button> <CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<b-button variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button> <CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<b-button variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button> <CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<b-button variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button> <CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<b-button variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button> <CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<b-button variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button> <CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<b-button variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button> <CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<b-button variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button> <CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<b-button variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button> <CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<b-button variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button> <CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<b-button variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button> <CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<b-button variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button> <CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<b-button variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button> <CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<b-button variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button> <CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<b-button variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button> <CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<b-button variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button> <CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<b-button variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button> <CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<b-button variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button> <CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<b-button variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button> <CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<b-button variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button> <CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
</p> </p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6> <h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p> <p>
<b-button size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></b-button> <CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<b-button size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></b-button> <CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<b-button size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></b-button> <CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<b-button size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></b-button> <CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<b-button size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></b-button> <CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<b-button size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></b-button> <CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<b-button size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></b-button> <CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<b-button size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></b-button> <CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<b-button size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></b-button> <CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<b-button size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></b-button> <CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<b-button size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></b-button> <CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<b-button size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></b-button> <CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<b-button size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></b-button> <CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<b-button size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></b-button> <CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<b-button size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></b-button> <CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<b-button size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></b-button> <CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<b-button size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></b-button> <CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<b-button size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></b-button> <CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<b-button size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></b-button> <CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<b-button size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></b-button> <CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<b-button size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></b-button> <CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<b-button size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></b-button> <CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<b-button size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></b-button> <CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<b-button size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></b-button> <CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<b-button size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></b-button> <CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
</p> </p>
</b-card> </CCard>
</b-col><!--/.col--> </CCol><!--/.col-->
</b-row><!--/.row--> </CRow><!--/.row-->
</div> </div>
</template> </template>
src/views/buttons/ButtonGroups.vue
+144 -260
View File
@@ -1,306 +1,190 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12" > <CCol cols="12" >
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <div>
<CButton variant="success" to="/dashboard" disabled>sdjk</CButton> <CButtonGroup>
<CButton variant="success" to="/dashboard" role="smh">sdjk</CButton> <CButton>One</CButton>
<CButton>Two</CButton>
<CButton variant="success" :pressed.sync="myToggle">sdjk</CButton> <CButton>Three</CButton>
<CButton variant="success" :pressed.sync="myToggle2">sdjk</CButton> <CButton>Four</CButton>
<CButton class="d-sm-down-none">Five</CButton>
<CButton variant="outline-success" pressed>sdjk</CButton> </CButtonGroup>
<CButton square block ghost>sdjk</CButton>
</br></br>
<CButton pill ghost>sdjk</CButton>
<CButton block size="sm" variant="success" pill square :pressed="false" disabled>sdjk</CButton>
<CButton block size="sm" variant="success" pill square to="/dashboard" disabled>sdjk</CButton>
<CButton block size="lg" variant="info" square >sdjk</CButton>
</br></br>
<CEmbed
tag="p"
aspect="16by9"
src="https://www.youtube.com/embed/axTSc3e6wu8"
frameborder="0"
allow="accelerometer;autoplay; encrypted-media; gyroscope; picture-in-picture"
>
</CEmbed>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<!-- <c-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
</c-nav-item-dropdown> -->
</b-nav>
<CButtonToolbar role="smh">
<c-button-group>
<b-button>One</b-button>
<b-button>Two</b-button>
<b-button>Three</b-button>
<b-button>Four</b-button>
<b-button class="d-sm-down-none">Five</b-button>
</c-button-group>
<c-button-group>
<b-button>One</b-button>
<b-button>Two</b-button>
<b-button>Three</b-button>
<b-button>Four</b-button>
<b-button class="d-sm-down-none">Five</b-button>
</c-button-group>
</CButtonToolbar>
<br><br> <br><br>
<b-button-group> <CButtonGroup>
<b-button class="d-sm-down-none" variant="success">Success</b-button> <CButton class="d-sm-down-none" variant="success">Success</CButton>
<b-button variant="info">Info</b-button> <CButton variant="info">Info</CButton>
<b-button variant="warning">Warn</b-button> <CButton variant="warning">Warn</CButton>
<b-button class="d-sm-down-none" variant="primary">Primary</b-button> <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<b-button variant="danger">Danger</b-button> <CButton variant="danger">Danger</CButton>
<b-button variant="link">Link</b-button> <CButton variant="link">Link</CButton>
</b-button-group> </CButtonGroup>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<CDropdown no-caret show> <CCol cols="12">
<img slot="button-content" <CCard>
src="img/avatars/6.jpg" <CCardHeader slot="header">
class="img-avatar"
alt="admin@bootstrapmaster.com"
/>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
<c-badge variant="success">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
<c-badge variant="danger">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
<c-badge variant="warning">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-header
tag="div"
class="text-center">
<strong>Settings</strong>
</b-dropdown-header>
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
<c-badge variant="primary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-divider ></b-dropdown-divider >
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</CDropdown>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
</div> </CCardHeader>
<div> <div>
<b-button-group> <CButtonGroup>
<b-button>Left</b-button> <CButton>Left</CButton>
<b-button>Middle</b-button> <CButton>Middle</CButton>
<b-button>Right</b-button> <CButton>Right</CButton>
</b-button-group> </CButtonGroup>
<br><br> <br><br>
<b-button-group size="sm"> <CButtonGroup size="sm">
<b-button>Left</b-button> <CButton>Left</CButton>
<b-button>Middle</b-button> <CButton>Middle</CButton>
<b-button>Right</b-button> <CButton>Right</CButton>
</b-button-group> </CButtonGroup>
<br><br> <br><br>
<b-button-group size="lg"> <CButtonGroup size="lg">
<b-button>Left</b-button> <CButton>Left</CButton>
<b-button>Middle</b-button> <CButton>Middle</CButton>
<b-button>Right</b-button> <CButton>Right</CButton>
</b-button-group> </CButtonGroup>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12"> <CCol cols="12">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</div> </CCardHeader>
<div> <div>
<b-button-group> <CButtonGroup>
<b-button class="d-sm-down-none">Button 1</b-button> <CButton class="d-sm-down-none">Button 1</CButton>
<b-button class="d-sm-down-none">Button 2</b-button> <CButton class="d-sm-down-none">Button 2</CButton>
<b-dropdown right text="Menu" variant="success"> <CDropdown right text="Menu" variant="success">
<b-dropdown-item>Item 1</b-dropdown-item> <CDropdownItem>Item 1</CDropdownItem>
<b-dropdown-item>Item 2</b-dropdown-item> <CDropdownItem>Item 2</CDropdownItem>
<b-dropdown-divider></b-dropdown-divider> <CDropdownDivider></CDropdownDivider>
<b-dropdown-item>Item 3</b-dropdown-item> <CDropdownItem>Item 3</CDropdownItem>
</b-dropdown> </CDropdown>
<b-button class="d-sm-down-none">Button 3</b-button> <CButton class="d-sm-down-none">Button 3</CButton>
<b-dropdown right split text="Split Menu" variant="info"> <CDropdown right split text="Split Menu" variant="info">
<b-dropdown-item>Item 1</b-dropdown-item> <CDropdownItem>Item 1</CDropdownItem>
<b-dropdown-item>Item 2</b-dropdown-item> <CDropdownItem>Item 2</CDropdownItem>
<b-dropdown-divider></b-dropdown-divider> <CDropdownDivider></CDropdownDivider>
<b-dropdown-item>Item 3</b-dropdown-item> <CDropdownItem>Item 3</CDropdownItem>
</b-dropdown> </CDropdown>
</b-button-group> </CButtonGroup>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12"> <CCol cols="12">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
</div> </CCardHeader>
<div> <div>
<b-button-group vertical> <CButtonGroup vertical>
<b-button>Top</b-button> <CButton>Top</CButton>
<b-button>Middle</b-button> <CButton>Middle</CButton>
<b-button>Bottom</b-button> <CButton>Bottom</CButton>
</b-button-group> </CButtonGroup>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12"> <CCol cols="12">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small> <i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <div>
<b-button-toolbar key-nav aria-label="Toolbar with button groups"> <CButtonToolbar key-nav aria-label="Toolbar with button groups">
<b-button-group class="mx-1"> <CButtonGroup class="mx-1">
<b-btn class="d-sm-down-none">&laquo;</b-btn> <CButton class="d-sm-down-none">&laquo;</CButton>
<b-btn>&lsaquo;</b-btn> <CButton>&lsaquo;</CButton>
</b-button-group> </CButtonGroup>
<b-button-group class="mx-1"> <CButtonGroup class="mx-1">
<b-btn class="d-sm-down-none">Edit</b-btn> <CButton class="d-sm-down-none">Edit</CButton>
<b-btn>Undo</b-btn> <CButton>Undo</CButton>
<b-btn>Redo</b-btn> <CButton>Redo</CButton>
</b-button-group> </CButtonGroup>
<b-button-group class="mx-1"> <CButtonGroup class="mx-1">
<b-btn>&rsaquo;</b-btn> <CButton>&rsaquo;</CButton>
<b-btn class="d-sm-down-none">&raquo;</b-btn> <CButton class="d-sm-down-none">&raquo;</CButton>
</b-button-group> </CButtonGroup>
</b-button-toolbar> </CButtonToolbar>
</div> </div>
<hr class="d-sm-down-none"/> <hr class="d-sm-down-none"/>
<div> <div>
<b-button-toolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none"> <CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
<b-button-group size="sm" class="mx-1"> <CButtonGroup size="sm" class="mx-1">
<b-btn>New</b-btn> <CButton>New</CButton>
<b-btn>Edit</b-btn> <CButton>Edit</CButton>
</b-button-group> </CButtonGroup>
<b-input-group size="sm" class="w-25 mx-1"> <CFormInput
<b-input-group-prepend> class="mb-0 w-25 mx-1"
<b-input-group-text>$</b-input-group-text> size="sm"
</b-input-group-prepend> prepend="$"
<b-form-input value="100" class="text-right"></b-form-input> append=".00"
<b-input-group-append> value="100"
<b-input-group-text>.00</b-input-group-text> />
</b-input-group-append> <CFormSelect
</b-input-group> class="mb-0 w-25 mx-1"
<b-input-group size="sm" class="w-25 mx-1"> size="sm"
<b-input-group-prepend> prepend="Size"
<b-input-group-text>Size</b-input-group-text> value="Medium"
</b-input-group-prepend> :options="['Large','Medium','Small']"
<b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select> custom
</b-input-group> />
<b-button-group size="sm" class="mx-1"> <CButtonGroup size="sm" class="mx-1">
<b-btn>Save</b-btn> <CButton>Save</CButton>
<b-btn>Cancel</b-btn> <CButton>Cancel</CButton>
</b-button-group> </CButtonGroup>
</b-button-toolbar> </CButtonToolbar>
</div> </div>
<hr/> <hr/>
<div> <div>
<b-button-toolbar aria-label="Toolbar with button groups and dropdown menu"> <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<b-button-group class="mx-1 d-sm-down-none"> <CButtonGroup class="mx-1 d-sm-down-none">
<b-btn>New</b-btn> <CButton>New</CButton>
<b-btn>Edit</b-btn> <CButton>Edit</CButton>
<b-btn>Undo</b-btn> <CButton>Undo</CButton>
</b-button-group> </CButtonGroup>
<b-dropdown class="mx-1" right text="menu"> <CDropdown
<b-dropdown-item>Item 1</b-dropdown-item> class="mx-1"
<b-dropdown-item>Item 2</b-dropdown-item> placement="bottom-end"
<b-dropdown-item>Item 3</b-dropdown-item> button-content="Menu"
</b-dropdown> >
<b-button-group class="mx-1"> <CDropdownItem>Item 1</CDropdownItem>
<b-btn>Save</b-btn> <CDropdownItem>Item 2</CDropdownItem>
<b-btn>Cancel</b-btn> <CDropdownItem>Item 3</CDropdownItem>
</b-button-group> </CDropdown>
</b-button-toolbar> <CButtonGroup class="mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import CButton from './CButton'
// import CButtonGroup from './CButtonGroup'
// import CButtonToolbar from './CButtonToolbar'
// import CEmbed from './CEmbed'
// import CDropdown from '../../containers/CDropdown'
export default { export default {
name: 'button-groups', name: 'button-groups',
// components: {
// CButtonGroup,
// CButtonToolbar,
// CButton
// },
// components: {
// CEmbed,
// CDropdown
// },
data () { data () {
return { return {
myToggle: false, myToggle: false,
src/views/buttons/Dropdowns.vue
+215 -203
View File
@@ -1,232 +1,244 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</CCardHeader>
<div>
<CDropdown id="ddown1" button-content="Dropdown Button" class="m-2">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something else here...</CDropdownItem>
<CDropdownItem disabled>Disabled action</CDropdownItem>
</CDropdown>
</div>
<!-- <div>
<CDropdown id="ddown-buttons" button-content="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
</CDropdown>
</div> -->
<div>
<CDropdown id="ddown-divider" button-content="Dropdown with divider" class="m-2">
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Separated Item</CDropdownItem>
</CDropdown>
</div> </div>
<div> <div>
<b-dropdown id="ddown1" text="Dropdown Button" class="m-2"> <CDropdown id="ddown-header" button-content="Dropdown with header" class="m-2">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownHeader>Dropdown header</CDropdownHeader>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>First item</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Second Item</CDropdownItem>
<b-dropdown-divider></b-dropdown-divider> </CDropdown>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</div> </div>
<div> </CCard>
<b-dropdown id="ddown-buttons" text="Dropdown using buttons as menu items" class="m-2"> </CCol>
<b-dropdown-item-button>I'm a button</b-dropdown-item-button> <CCol cols="12" md="6">
<b-dropdown-item-button>I'm also a button</b-dropdown-item-button> <CCard
<b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
<b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-divider" text="Dropdown with divider" class="m-2">
<b-dropdown-item-button>First item</b-dropdown-item-button>
<b-dropdown-item-button>Second item</b-dropdown-item-button>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button>Separated Item</b-dropdown-item-button>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-header" text="Dropdown with header" class="m-2">
<b-dropdown-header>Dropdown header</b-dropdown-header>
<b-dropdown-item-button>First item</b-dropdown-item-button>
<b-dropdown-item-button>Second Item</b-dropdown-item-button>
</b-dropdown>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
</div>
<div>
<b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
<b-dropdown id="ddown-right" right text="Right align" variant="primary" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="info" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-offset" offset="25" text="Offset Dropdown" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-split" split text="Split Dropdown" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
</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">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
</div>
<div>
<b-dropdown variant="link" size="lg" no-caret>
<template slot="button-content">
&#x1f50d;<span class="sr-only">Search</span>
</template>
<b-dropdown-item href="#">Action</b-dropdown-item> >
<b-dropdown-item href="#">Another action</b-dropdown-item> <CCardHeader slot="header">
<b-dropdown-item href="#">Something else here...</b-dropdown-item> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
</b-dropdown> </CCardHeader>
<div>
<CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-right"
placement="bottom-end"
button-content="Right align"
variant="primary"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div> </div>
</b-card> <div>
</b-col> <CDropdown id="ddown-dropup"
<b-col cols="12" md="6"> button-content="Drop-Up"
<b-card variant="info"
header-tag="header" class="m-2"
footer-tag="footer"> dropup
<div slot="header"> >
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown id="ddown-offset"
:offset="25"
button-content="Offset Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
</div>
<div>
<CDropdown id="ddown-split" split button-content="Split Dropdown" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
</CCardHeader>
<div>
<CDropdown variant="link"
size="lg"
button-content="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
</div> </CCardHeader>
<div> <div>
<b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2"> <CDropdown id="ddown-lg" size="lg" button-content="Large" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item-button>Another action</b-dropdown-item-button> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item-button>Something else here</b-dropdown-item-button> <CDropdownItem>Something else here</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown id="ddown-lg-split" size="lg" split text="Large Split" class="m-2"> <CDropdown id="ddown-lg-split" size="lg" split button-content="Large Split" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item-button>Another action</b-dropdown-item-button> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button> <CDropdownItem>Something else here...</CDropdownItem>
</b-dropdown> </CDropdown>
<br> <br>
<b-dropdown id="ddown-sm" size="sm" text="Small" class="m-2"> <CDropdown id="ddown-sm" size="sm" button-content="Small" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item-button>Another action</b-dropdown-item-button> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button> <CDropdownItem>Something else here...</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown id="ddown-sm-split" size="sm" split text="Small Split" class="m-2"> <CDropdown id="ddown-sm-split" size="sm" split button-content="Small Split" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button> <CDropdownItem>Action</CDropdownItem>
<b-dropdown-item-button>Another action</b-dropdown-item-button> <CDropdownItem>Another action</CDropdownItem>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button> <CDropdownItem>Something else here...</CDropdownItem>
</b-dropdown> </CDropdown>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
<b-row> <CRow>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard
header-tag="header"
footer-tag="footer"> >
<div slot="header"> <CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
</div> </CCardHeader>
<div> <div>
<b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2"> <CDropdown id="ddown-aria" button-content="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1"> <div role="group" aria-lableledby="header1">
<b-dropdown-header id="header1">Groups</b-dropdown-header> <CDropdownHeader id="header1">Groups</CDropdownHeader>
<b-dropdown-item-button aria-describedby="header1">Add</b-dropdown-item-button> <CDropdownItem aria-describedby="header1">Add</CDropdownItem>
<b-dropdown-item-button aria-describedby="header1">Delete</b-dropdown-item-button> <CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
</div> </div>
<div role="group" aria-lableledby="header2"> <div role="group" aria-lableledby="header2">
<b-dropdown-header id="header2">Users</b-dropdown-header> <CDropdownHeader id="header2">Users</CDropdownHeader>
<b-dropdown-item-button aria-describedby="header2">Add</b-dropdown-item-button> <CDropdownItem aria-describedby="header2">Add</CDropdownItem>
<b-dropdown-item-button aria-describedby="header2">Delete</b-dropdown-item-button> <CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
</div> </div>
<b-dropdown-divider></b-dropdown-divider> <CDropdownDivider></CDropdownDivider>
<b-dropdown-item-button>Something <strong>not</strong> associated with user</b-dropdown-item-button> <CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
</b-dropdown> </CDropdown>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard
header-tag="header"
footer-tag="footer"> >
<div slot="header"> <CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
</div> </CCardHeader>
<b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0"> <CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_secondary" text="Secondary" variant="secondary" class="m-0"> <CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_success" text="Success" variant="success" class="m-0"> <CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_warning" text="Warning" variant="warning" class="m-0"> <CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_danger" text="Danger" variant="danger" class="m-0"> <CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_info" text="Info" variant="info" class="m-0"> <CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_light" text="Light" variant="light" class="m-0"> <CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_dark" text="Dark" variant="dark" class="m-0"> <CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
<b-dropdown size="sm" id="ddown_link" text="Link" variant="link" class="m-0"> <CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item> <CDropdownItem>First Action</CDropdownItem>
<b-dropdown-item>Second Action</b-dropdown-item> <CDropdownItem>Second Action</CDropdownItem>
<b-dropdown-item>Third Action</b-dropdown-item> <CDropdownItem>Third Action</CDropdownItem>
</b-dropdown> </CDropdown>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</div> </div>
</template> </template>
src/views/buttons/StandardButtons.vue
+632 -632
View File
File diff suppressed because it is too large Load Diff
src/views/charts/BarExample.vue
+1 -1
View File
@@ -3,7 +3,7 @@ import { Bar } from '@coreui/vue/src/extends/BaseCharts'
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips' import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
export default { export default {
// name: 'BarExample', name: 'BarExample',
extends: Bar, extends: Bar,
mounted () { mounted () {
// Overwriting base render method with actual data. // Overwriting base render method with actual data.
src/views/icons/CoreUIIcons.vue
+209 -209
View File
@@ -1,419 +1,419 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card no-body> <CCard noWrapper>
<b-card-header> <CCardHeader slot="header">
<i class="fa fa-picture-o"></i>CoreUI Icons <b-badge variant="info">New</b-badge> <i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action"> <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
<small class="text-muted">Github</small> <small class="text-muted">Github</small>
</a> </a>
</div> </div>
</b-card-header> </CCardHeader>
<b-card-body> <CCardBody slot="body">
<b-row class="text-center"> <CRow class="text-center">
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-account-logout icons font-2xl d-block mt-4"></i> <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
<div>account-logout</div> <div>account-logout</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-action-redo icons font-2xl d-block mt-4"></i> <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
<div>action-redo</div> <div>action-redo</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-action-undo icons font-2xl d-block mt-4"></i> <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
<div>action-undo</div> <div>action-undo</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-align-center icons font-2xl d-block mt-4"></i> <i class="cui-align-center icons font-2xl d-block mt-4"></i>
<div>align-center</div> <div>align-center</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-align-left icons font-2xl d-block mt-4"></i> <i class="cui-align-left icons font-2xl d-block mt-4"></i>
<div>align-left</div> <div>align-left</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-align-right icons font-2xl d-block mt-4"></i> <i class="cui-align-right icons font-2xl d-block mt-4"></i>
<div>align-right</div> <div>align-right</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i> <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
<div>arrow-bottom</div> <div>arrow-bottom</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i> <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
<div>arrow-left</div> <div>arrow-left</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i> <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
<div>arrow-right</div> <div>arrow-right</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i> <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
<div>arrow-top</div> <div>arrow-top</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-ban icons font-2xl d-block mt-4"></i> <i class="cui-ban icons font-2xl d-block mt-4"></i>
<div>ban</div> <div>ban</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i> <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
<div>basket-loaded</div> <div>basket-loaded</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-bell icons font-2xl d-block mt-4"></i> <i class="cui-bell icons font-2xl d-block mt-4"></i>
<div>bell</div> <div>bell</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-bold icons font-2xl d-block mt-4"></i> <i class="cui-bold icons font-2xl d-block mt-4"></i>
<div>bold</div> <div>bold</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-bookmark icons font-2xl d-block mt-4"></i> <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
<div>bookmark</div> <div>bookmark</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-briefcase icons font-2xl d-block mt-4"></i> <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
<div>briefcase</div> <div>briefcase</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-british-pound icons font-2xl d-block mt-4"></i> <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
<div>british-pound</div> <div>british-pound</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-brush icons font-2xl d-block mt-4"></i> <i class="cui-brush icons font-2xl d-block mt-4"></i>
<div>brush</div> <div>brush</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-calculator icons font-2xl d-block mt-4"></i> <i class="cui-calculator icons font-2xl d-block mt-4"></i>
<div>calculator</div> <div>calculator</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-calendar icons font-2xl d-block mt-4"></i> <i class="cui-calendar icons font-2xl d-block mt-4"></i>
<div>calendar</div> <div>calendar</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-cart icons font-2xl d-block mt-4"></i> <i class="cui-cart icons font-2xl d-block mt-4"></i>
<div>cart</div> <div>cart</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-chart icons font-2xl d-block mt-4"></i> <i class="cui-chart icons font-2xl d-block mt-4"></i>
<div>chart</div> <div>chart</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-check icons font-2xl d-block mt-4"></i> <i class="cui-check icons font-2xl d-block mt-4"></i>
<div>check</div> <div>check</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i> <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
<div>chevron-bottom</div> <div>chevron-bottom</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i> <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
<div>chevron-left</div> <div>chevron-left</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i> <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
<div>chevron-right</div> <div>chevron-right</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i> <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
<div>chevron-top</div> <div>chevron-top</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-circle-check icons font-2xl d-block mt-4"></i> <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
<div>circle-check</div> <div>circle-check</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-circle-x icons font-2xl d-block mt-4"></i> <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
<div>circle-x</div> <div>circle-x</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-cloud icons font-2xl d-block mt-4"></i> <i class="cui-cloud icons font-2xl d-block mt-4"></i>
<div>cloud</div> <div>cloud</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i> <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
<div>cloud-download</div> <div>cloud-download</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i> <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
<div>cloud-upload</div> <div>cloud-upload</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-code icons font-2xl d-block mt-4"></i> <i class="cui-code icons font-2xl d-block mt-4"></i>
<div>code</div> <div>code</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-cog icons font-2xl d-block mt-4"></i> <i class="cui-cog icons font-2xl d-block mt-4"></i>
<div>cog</div> <div>cog</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-comment-square icons font-2xl d-block mt-4"></i> <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
<div>comment-square</div> <div>comment-square</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-credit-card icons font-2xl d-block mt-4"></i> <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
<div>credit-card</div> <div>credit-card</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-cursor icons font-2xl d-block mt-4"></i> <i class="cui-cursor icons font-2xl d-block mt-4"></i>
<div>cursor</div> <div>cursor</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-dashboard icons font-2xl d-block mt-4"></i> <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
<div>dashboard</div> <div>dashboard</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-delete icons font-2xl d-block mt-4"></i> <i class="cui-delete icons font-2xl d-block mt-4"></i>
<div>delete</div> <div>delete</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-dollar icons font-2xl d-block mt-4"></i> <i class="cui-dollar icons font-2xl d-block mt-4"></i>
<div>dollar</div> <div>dollar</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-drop icons font-2xl d-block mt-4"></i> <i class="cui-drop icons font-2xl d-block mt-4"></i>
<div>drop</div> <div>drop</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i> <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
<div>envelope-closed</div> <div>envelope-closed</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i> <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
<div>envelope-letter</div> <div>envelope-letter</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i> <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
<div>envelope-open</div> <div>envelope-open</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-euro icons font-2xl d-block mt-4"></i> <i class="cui-euro icons font-2xl d-block mt-4"></i>
<div>euro</div> <div>euro</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-file icons font-2xl d-block mt-4"></i> <i class="cui-file icons font-2xl d-block mt-4"></i>
<div>file</div> <div>file</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-globe icons font-2xl d-block mt-4"></i> <i class="cui-globe icons font-2xl d-block mt-4"></i>
<div>globe</div> <div>globe</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-graph icons font-2xl d-block mt-4"></i> <i class="cui-graph icons font-2xl d-block mt-4"></i>
<div>graph</div> <div>graph</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-home icons font-2xl d-block mt-4"></i> <i class="cui-home icons font-2xl d-block mt-4"></i>
<div>home</div> <div>home</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-inbox icons font-2xl d-block mt-4"></i> <i class="cui-inbox icons font-2xl d-block mt-4"></i>
<div>inbox</div> <div>inbox</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-info icons font-2xl d-block mt-4"></i> <i class="cui-info icons font-2xl d-block mt-4"></i>
<div>info</div> <div>info</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-italic icons font-2xl d-block mt-4"></i> <i class="cui-italic icons font-2xl d-block mt-4"></i>
<div>italic</div> <div>italic</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-justify-center icons font-2xl d-block mt-4"></i> <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
<div>justify-center</div> <div>justify-center</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-justify-left icons font-2xl d-block mt-4"></i> <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
<div>justify-left</div> <div>justify-left</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-justify-right icons font-2xl d-block mt-4"></i> <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
<div>justify-right</div> <div>justify-right</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-laptop icons font-2xl d-block mt-4"></i> <i class="cui-laptop icons font-2xl d-block mt-4"></i>
<div>laptop</div> <div>laptop</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-layers icons font-2xl d-block mt-4"></i> <i class="cui-layers icons font-2xl d-block mt-4"></i>
<div>layers</div> <div>layers</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i> <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
<div>lightbulb</div> <div>lightbulb</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-list icons font-2xl d-block mt-4"></i> <i class="cui-list icons font-2xl d-block mt-4"></i>
<div>list</div> <div>list</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-location-pin icons font-2xl d-block mt-4"></i> <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
<div>location-pin</div> <div>location-pin</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i> <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
<div>lock-locked</div> <div>lock-locked</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i> <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
<div>lock-unlocked</div> <div>lock-unlocked</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i> <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
<div>magnifying-glass</div> <div>magnifying-glass</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-map icons font-2xl d-block mt-4"></i> <i class="cui-map icons font-2xl d-block mt-4"></i>
<div>map</div> <div>map</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-monitor icons font-2xl d-block mt-4"></i> <i class="cui-monitor icons font-2xl d-block mt-4"></i>
<div>monitor</div> <div>monitor</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-moon icons font-2xl d-block mt-4"></i> <i class="cui-moon icons font-2xl d-block mt-4"></i>
<div>moon</div> <div>moon</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-note icons font-2xl d-block mt-4"></i> <i class="cui-note icons font-2xl d-block mt-4"></i>
<div>note</div> <div>note</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-options icons font-2xl d-block mt-4"></i> <i class="cui-options icons font-2xl d-block mt-4"></i>
<div>options</div> <div>options</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-paperclip icons font-2xl d-block mt-4"></i> <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
<div>paperclip</div> <div>paperclip</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-pencil icons font-2xl d-block mt-4"></i> <i class="cui-pencil icons font-2xl d-block mt-4"></i>
<div>pencil</div> <div>pencil</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-people icons font-2xl d-block mt-4"></i> <i class="cui-people icons font-2xl d-block mt-4"></i>
<div>people</div> <div>people</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-phone icons font-2xl d-block mt-4"></i> <i class="cui-phone icons font-2xl d-block mt-4"></i>
<div>phone</div> <div>phone</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i> <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
<div>pie-chart</div> <div>pie-chart</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-print icons font-2xl d-block mt-4"></i> <i class="cui-print icons font-2xl d-block mt-4"></i>
<div>print</div> <div>print</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-puzzle icons font-2xl d-block mt-4"></i> <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
<div>puzzle</div> <div>puzzle</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-rss icons font-2xl d-block mt-4"></i> <i class="cui-rss icons font-2xl d-block mt-4"></i>
<div>rss</div> <div>rss</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i> <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
<div>screen-desktop</div> <div>screen-desktop</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i> <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
<div>screen-smartphone</div> <div>screen-smartphone</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-settings icons font-2xl d-block mt-4"></i> <i class="cui-settings icons font-2xl d-block mt-4"></i>
<div>settings</div> <div>settings</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-share icons font-2xl d-block mt-4"></i> <i class="cui-share icons font-2xl d-block mt-4"></i>
<div>share</div> <div>share</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-shield icons font-2xl d-block mt-4"></i> <i class="cui-shield icons font-2xl d-block mt-4"></i>
<div>shield</div> <div>shield</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i> <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
<div>sort-ascending</div> <div>sort-ascending</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i> <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
<div>sort-descending</div> <div>sort-descending</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-speech icons font-2xl d-block mt-4"></i> <i class="cui-speech icons font-2xl d-block mt-4"></i>
<div>speech</div> <div>speech</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-speedometer icons font-2xl d-block mt-4"></i> <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
<div>speedometer</div> <div>speedometer</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-star icons font-2xl d-block mt-4"></i> <i class="cui-star icons font-2xl d-block mt-4"></i>
<div>star</div> <div>star</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-sun icons font-2xl d-block mt-4"></i> <i class="cui-sun icons font-2xl d-block mt-4"></i>
<div>sun</div> <div>sun</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-tablet icons font-2xl d-block mt-4"></i> <i class="cui-tablet icons font-2xl d-block mt-4"></i>
<div>tablet</div> <div>tablet</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-tags icons font-2xl d-block mt-4"></i> <i class="cui-tags icons font-2xl d-block mt-4"></i>
<div>tags</div> <div>tags</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-task icons font-2xl d-block mt-4"></i> <i class="cui-task icons font-2xl d-block mt-4"></i>
<div>task</div> <div>task</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i> <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
<div>thumb-down</div> <div>thumb-down</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i> <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
<div>thumb-up</div> <div>thumb-up</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-trash icons font-2xl d-block mt-4"></i> <i class="cui-trash icons font-2xl d-block mt-4"></i>
<div>trash</div> <div>trash</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-underline icons font-2xl d-block mt-4"></i> <i class="cui-underline icons font-2xl d-block mt-4"></i>
<div>underline</div> <div>underline</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-user icons font-2xl d-block mt-4"></i> <i class="cui-user icons font-2xl d-block mt-4"></i>
<div>user</div> <div>user</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-user-female icons font-2xl d-block mt-4"></i> <i class="cui-user-female icons font-2xl d-block mt-4"></i>
<div>user-female</div> <div>user-female</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-user-follow icons font-2xl d-block mt-4"></i> <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
<div>user-follow</div> <div>user-follow</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i> <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
<div>user-unfollow</div> <div>user-unfollow</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-wrench icons font-2xl d-block mt-4"></i> <i class="cui-wrench icons font-2xl d-block mt-4"></i>
<div>wrench</div> <div>wrench</div>
</b-col> </CCol>
<b-col cols="6" sm="4" md="3" xl="2"> <CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-yen icons font-2xl d-block mt-4"></i> <i class="cui-yen icons font-2xl d-block mt-4"></i>
<div>yen</div> <div>yen</div>
</b-col> </CCol>
</b-row> </CRow>
</b-card-body> </CCardBody>
</b-card> </CCard>
</div> </div>
</template> </template>
<script> <script>
src/views/icons/Flags.vue
+508 -508
View File
File diff suppressed because it is too large Load Diff
src/views/icons/FontAwesome.vue
+1884 -1884
View File
File diff suppressed because it is too large Load Diff
src/views/icons/SimpleLineIcons.vue
+374 -374
View File
File diff suppressed because it is too large Load Diff
src/views/notifications/Alerts.vue
+37 -53
View File
@@ -1,19 +1,17 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <div>
<p></p> <p></p>
<CAlert show variant="primary">Primary Alert</CAlert> <CAlert show variant="primary">Primary Alert</CAlert>
@@ -25,16 +23,14 @@
<CAlert show variant="light">Light Alert</CAlert> <CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert> <CAlert show variant="dark">Dark Alert</CAlert>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> Alert <i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small> <small> use <code>.alert-link</code> to provide links</small>
</div> </CCardHeader>
<div> <div>
<CAlert show variant="primary"> <CAlert show variant="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>. Primary Alert with <a href="#" class="alert-link">an example link</a>.
@@ -59,19 +55,17 @@
</CAlert> </CAlert>
<CAlert show variant="dark"> <CAlert show variant="dark">
Dark Alert with Dark Alert with
<b-link href="#" class="alert-link">an example link</b-link> <CLink href="#" class="alert-link">an example link</CLink>
. .
</CAlert> </CAlert>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small> <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</div> </CCardHeader>
<CAlert show variant="success"> <CAlert show variant="success">
<h4 class="alert-heading">Well done!</h4> <h4 class="alert-heading">Well done!</h4>
<p> <p>
@@ -84,15 +78,13 @@
Whenever you need to, be sure to use margin utilities to keep things nice and tidy. Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p> </p>
</CAlert> </CAlert>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small> <i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
</div> </CCardHeader>
<div> <div>
<CAlert :show="true" dismissible disabled> <CAlert :show="true" dismissible disabled>
Dismissible Alert! Dismissible Alert!
@@ -119,17 +111,15 @@
> >
Dismissible Alert! Dismissible Alert!
</CAlert> </CAlert>
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1"> <CButton @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}}) Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</b-btn> </CButton>
</div> </div>
</b-card> </CCard>
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small> <i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
</div> </CCardHeader>
<div> <div>
<CAlert :show="dismissCountDown" <CAlert :show="dismissCountDown"
dismissible dismissible
@@ -145,32 +135,26 @@
@dismissed="dismissCountdown=0" @dismissed="dismissCountdown=0"
@dismiss-count-down="countDownChanged"> @dismiss-count-down="countDownChanged">
Alert will dismiss after {{dismissCountDown}} seconds... Alert will dismiss after {{dismissCountDown}} seconds...
<b-progress variant="info" <CProgress variant="info"
:max="dismissSecs" :max="dismissSecs"
:value="dismissCountDown" :value="dismissCountDown"
height="4px"> height="4px">
</b-progress> </CProgress>
</CAlert> </CAlert>
<b-btn @click="showAlert" variant="info" class="m-1"> <CButton @click="showAlert" variant="info" class="m-1">
Show alert with timer Show alert with timer
</b-btn> </CButton>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import CAlert from './CAlert'
// import CButtonClose from './CButtonClose'
export default { export default {
name: 'alerts', name: 'alerts',
// components: {
// CAlert,
// CButtonClose
// },
data () { data () {
return { return {
dismissSecs: 10, dismissSecs: 10,
src/views/notifications/Badges.vue
+50 -60
View File
@@ -1,82 +1,72 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card <CCard>
header-tag="header" <CCardHeader slot="header">
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
<div class="card-header-actions"> <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank"> <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small> <small class="text-muted">docs</small>
</a> </a>
</div> </div>
</div> </CCardHeader>
<div> <div>
<h2>Example heading <b-badge>New</b-badge></h2> <h2>Example heading <CBadge>New</CBadge></h2>
<h3>Example heading <b-badge>New</b-badge></h3> <h3>Example heading <CBadge>New</CBadge></h3>
<h4>Example heading <b-badge>New</b-badge></h4> <h4>Example heading <CBadge>New</CBadge></h4>
<h5>Example heading <b-badge>New</b-badge></h5> <h5>Example heading <CBadge>New</CBadge></h5>
<h6>Example heading <b-badge>New</b-badge></h6> <h6>Example heading <CBadge>New</CBadge></h6>
</div> </div>
<div slot="footer"> <CCardFooter slot="footer">
<b-button variant="primary"> <CButton variant="primary">
Notifications <b-badge variant="light" :style="{position: 'static'}">4</b-badge> Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</b-button> </CButton>
</div> </CCardFooter>
</b-card> </CCard>
</b-col> </CCol>
<b-col cols="12" md="6"> <CCol cols="12" md="6">
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>" <CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
header-tag="header"
footer-tag="footer">
<div> <div>
<b-badge variant="primary">Primary</b-badge> <CBadge variant="primary">Primary</CBadge>
<b-badge variant="secondary">Secondary</b-badge> <CBadge variant="secondary">Secondary</CBadge>
<b-badge variant="success">Success</b-badge> <CBadge variant="success">Success</CBadge>
<b-badge variant="danger">Danger</b-badge> <CBadge variant="danger">Danger</CBadge>
<b-badge variant="warning">Warning</b-badge> <CBadge variant="warning">Warning</CBadge>
<b-badge variant="info">Info</b-badge> <CBadge variant="info">Info</CBadge>
<b-badge variant="light">Light</b-badge> <CBadge variant="light">Light</CBadge>
<b-badge variant="dark">Dark</b-badge> <CBadge variant="dark">Dark</CBadge>
</div> </div>
</b-card> </CCard>
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>" <CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
header-tag="header"
footer-tag="footer">
<div> <div>
<b-badge pill variant="primary">Primary</b-badge> <CBadge pill variant="primary">Primary</CBadge>
<b-badge pill variant="secondary">Secondary</b-badge> <CBadge pill variant="secondary">Secondary</CBadge>
<b-badge pill variant="success">Success</b-badge> <CBadge pill variant="success">Success</CBadge>
<b-badge pill variant="danger">Danger</b-badge> <CBadge pill variant="danger">Danger</CBadge>
<b-badge pill variant="warning">Warning</b-badge> <CBadge pill variant="warning">Warning</CBadge>
<b-badge pill variant="info">Info</b-badge> <CBadge pill variant="info">Info</CBadge>
<b-badge pill variant="light">Light</b-badge> <CBadge pill variant="light">Light</CBadge>
<b-badge pill variant="dark">Dark</b-badge> <CBadge pill variant="dark">Dark</CBadge>
</div> </div>
</b-card> </CCard>
<b-card header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>" <CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
header-tag="header"
footer-tag="footer">
<div> <div>
<b-badge href="#" variant="primary">Primary</b-badge> <CBadge href="#" variant="primary">Primary</CBadge>
<b-badge href="#" variant="secondary">Secondary</b-badge> <CBadge href="#" variant="secondary">Secondary</CBadge>
<b-badge href="#" variant="success">Success</b-badge> <CBadge href="#" variant="success">Success</CBadge>
<b-badge href="#" variant="danger">Danger</b-badge> <CBadge href="#" variant="danger">Danger</CBadge>
<b-badge href="#" variant="warning">Warning</b-badge> <CBadge href="#" variant="warning">Warning</CBadge>
<b-badge href="#" variant="info">Info</b-badge> <CBadge href="#" variant="info">Info</CBadge>
<b-badge href="#" variant="light">Light</b-badge> <CBadge href="#" variant="light">Light</CBadge>
<b-badge href="#" variant="dark">Dark</b-badge> <CBadge href="#" variant="dark">Dark</CBadge>
</div> </div>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
src/views/notifications/CAlert.js
-120
View File
@@ -1,120 +0,0 @@
import CButtonClose from './CButtonClose'
export default {
name: 'CAlert',
components: {CButtonClose},
render (h) {
if (!this.localShow) {
// If not showing, render placeholder
return h(false)
}
let dismissBtn = h(false)
if (this.dismissible) {
dismissBtn = this.$scopedSlots.default ?
this.$scopedSlots.default({dismiss: this.dismiss}) :
h(
'CButtonClose',
{ on: { click: this.dismiss }},
[ this.$slots.dismiss ]
)
}
const alert = h(
'div',
{class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
[dismissBtn, this.$slots.default]
)
return !this.fade ? alert : h(
'transition',
{ props: { name: 'fade', appear: true } },
[ alert ]
)
},
model: {
prop: 'show',
event: 'input'
},
data () {
return {
countDownTimerId: null,
dismissed: false
}
},
computed: {
classObject () {
return ['alert', `alert-${this.variant}`, this.dismissible ? 'alert-dismissible' : '']
},
localShow () {
return !this.dismissed && (this.countDownTimerId || this.show)
}
},
props: {
variant: {
type: String,
default: 'info'
},
dismissible: {
type: [Boolean, Object],
default: false
},
show: {
type: [Boolean, Number],
default: false
},
fade: {
type: Boolean,
default: false
}
},
watch: {
show () {
this.showChanged()
}
},
mounted () {
this.showChanged()
},
destroyed /* istanbul ignore next */ () {
this.clearCounter()
},
methods: {
dismiss () {
this.clearCounter()
this.dismissed = true
this.$emit('dismissed')
this.$emit('input', false)
if (typeof this.show === 'number') {
this.$emit('dismiss-count-down', 0)
this.$emit('input', 0)
} else {
this.$emit('input', false)
}
},
clearCounter () {
if (this.countDownTimerId) {
clearInterval(this.countDownTimerId)
this.countDownTimerId = null
}
},
showChanged () {
// Reset counter status
this.clearCounter()
// Reset dismiss status
this.dismissed = false
// No timer for boolean values
if (this.show === true || this.show === false || this.show === null || this.show === 0) {
return
}
// Start counter (ensure we have an integer value)
let dismissCountDown = parseInt(this.show, 10) || 1
this.countDownTimerId = setInterval(() => {
if (dismissCountDown < 1) {
this.dismiss()
return
}
dismissCountDown--
this.$emit('dismiss-count-down', dismissCountDown)
this.$emit('input', dismissCountDown)
}, 1000)
}
}
}
src/views/notifications/CButtonClose.js
-17
View File
@@ -1,17 +0,0 @@
import { mergeData } from 'vue-functional-data-merge'
export default {
name: 'CButtonClose',
functional: true,
render (h, { data, props, slots }) {
const componentData = {
staticClass: 'close',
attrs: {
type: props.type || 'button',
'aria-label': props.ariaLabel || 'Close'
}
}
if (!slots().default)
componentData.domProps = { innerHTML: '&times;' }
return h('button', mergeData(data, componentData), slots().default)
}
}
src/views/notifications/Modals.vue
+128 -115
View File
@@ -1,106 +1,27 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-row> <CRow>
<b-col cols="12"> <CCol cols="12">
<b-card header="<i class='fa fa-align-justify'></i> Bootstrap Modals"> <CCard header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
<b-button type="button" variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</b-button> <CButton variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</CButton>
<b-button type="button" variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</b-button> <CButton variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</CButton>
<b-button type="button" variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</b-button> <CButton variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</CButton>
<hr> <hr>
<b-button type="button" variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</b-button> <CButton variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</CButton>
<b-button type="button" variant="success" @click="successModal = true" class="mr-1">Launch success modal</b-button> <CButton variant="success" @click="successModal = true" class="mr-1">Launch success modal</CButton>
<b-button type="button" variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</b-button> <CButton variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</CButton>
<b-button type="button" variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</b-button> <CButton variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</CButton>
<b-button type="button" variant="info" @click="infoModal = true" class="mr-1">Launch info modal</b-button> <CButton variant="info" @click="infoModal = true" class="mr-1">Launch info modal</CButton>
<b-button type="button" variant="info" @click="cmodal = !cmodal" class="mr-1">CModal</b-button> <CButton variant="dark" @click="darkModal = !darkModal" class="mr-1">Launch dark modal</CButton>
</CCard>
</b-card> </CCol><!--/.col-->
</b-col><!--/.col--> </CRow><!--/.row-->
</b-row><!--/.row-->
</div> </div>
<!-- Modal Component --> <!-- Modal Component -->
<b-modal title="Modal title" v-model="myModal" @ok="myModal = false"> <CModal title="Modal title"
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod :visible="myModal"
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, @hide="myModal = false"
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-modal>
<b-modal title="Modal title" size="lg" v-model="largeModal" @ok="largeModal = false">
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-modal>
<b-modal title="Modal title" size="sm" v-model="smallModal" @ok="smallModal = false">
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-modal>
<b-modal title="Modal title" class="modal-primary" v-model="primaryModal" @ok="primaryModal = false">
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-modal>
<b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success">
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-modal>
<b-modal title="Modal title" class="modal-warning" v-model="warningModal" @ok="warningModal = false" ok-variant="warning">
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-modal>
<b-modal title="Modal title" class="modal-danger" v-model="dangerModal" @ok="dangerModal = false" ok-variant="danger">
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-modal>
<b-modal title="Modal title" class="modal-info" v-model="infoModal" @ok="infoModal = false" ok-variant="info">
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-modal>
<CModal v-model="cmodal"
:noBackdrop="false"
:noCloseOnBackdrop="false"
:noFade="false"
:centered="true"
title="Modal title 2"
size="lg"
variant="success"
borderVariant="danger2"
addModalClasses="hehe1"
addDialogClasses="hehe2"
addContentClasses="hehe3"
:noHeader="true"
:noBody="false"
:noFooter="true"
> >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -108,31 +29,123 @@
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!-- <div slot="header" class="modal-header"> </CModal>
<h5 class="modal-title" id="exampleModalLabel">new header</h5> <CModal title="Modal title"
<button type="button" class="close closeModal" data-dismiss="modal" aria-label="Close"> size="lg"
<span aria-hidden="true">&times;</span> v-model="largeModal"
</button> >
</div> --> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<div slot="body" class="modal-body"> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</div> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
<div class="modal-footer" slot="footer"> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
<button type="button" class="btn btn-secondary closeModal">Close2</button> proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<button type="button" class="btn btn-primary closeModal">OK2</button> </CModal>
</div> <CModal title="Modal title"
size="sm"
v-model="smallModal"
>
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.
</CModal>
<CModal title="Modal title"
class="modal-primary"
v-model="primaryModal"
>
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.
</CModal>
<CModal title="Modal title"
class="modal-success"
v-model="successModal"
>
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.
</CModal>
<CModal title="Modal title"
class="modal-warning"
v-model="warningModal"
>
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.
</CModal>
<CModal title="Modal title"
class="modal-danger"
v-model="dangerModal"
>
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.
</CModal>
<CModal title="Modal title"
class="modal-info"
v-model="infoModal"
>
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.
</CModal>
<CModal v-model="darkModal"
:noBackdrop="false"
:noCloseOnBackdrop="false"
:noFade="false"
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
borderVariant="danger2"
addModalClasses="hehe1"
addDialogClasses="hehe2"
addContentClasses="hehe3"
:noHeader="false"
:noBody="false"
:noFooter="false"
>
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.
<template v-slot:header="{hide}">
<h5 class="modal-title">Custom modal title</h5>
<CButtonClose @click="hide()" class="text-white"/>
</template>
<template v-slot:footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton>
<CButton @click="hide()" variant="success">Accept</CButton>
</template>
</CModal> </CModal>
</div> </div>
</template> </template>
<script> <script>
// import CModal from './CModal'
export default { export default {
name: 'modals', name: 'modals',
// components: {
// CModal
// },
data () { data () {
return { return {
myModal: false, myModal: false,
@@ -143,7 +156,7 @@ export default {
warningModal: false, warningModal: false,
dangerModal: false, dangerModal: false,
infoModal: false, infoModal: false,
cmodal: false darkModal: false
} }
} }
} }
src/views/pages/Login.vue
+42 -35
View File
@@ -1,45 +1,52 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<b-row class="justify-content-center"> <CRow class="justify-content-center">
<b-col md="8"> <CCol md="8">
<b-card-group> <CCardGroup>
<b-card no-body class="p-4"> <CCard noWrapper class="p-4">
<b-card-body> <CCardBody slot="body">
<b-form> <CForm>
<h1>Login</h1> <h1>Login</h1>
<p class="text-muted">Sign In to your account</p> <p class="text-muted">Sign In to your account</p>
<b-input-group class="mb-3"> <CFormInput
<b-input-group-prepend><b-input-group-text><i class="icon-user"></i></b-input-group-text></b-input-group-prepend> prepend="<i class='icon-user'></i>"
<b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username email" /> placeholder="Username"
</b-input-group> autocomplete="username email"
<b-input-group class="mb-4"> />
<b-input-group-prepend><b-input-group-text><i class="icon-lock"></i></b-input-group-text></b-input-group-prepend> <CFormInput
<b-form-input type="password" class="form-control" placeholder="Password" autocomplete="current-password" /> prepend="<i class='icon-lock'></i>"
</b-input-group> placeholder="Password"
<b-row> type="password"
<b-col cols="6"> autocomplete="curent-password"
<b-button variant="primary" class="px-4">Login</b-button> />
</b-col> <CRow>
<b-col cols="6" class="text-right"> <CCol cols="6">
<b-button variant="link" class="px-0">Forgot password?</b-button> <CButton variant="primary" class="px-4">Login</CButton>
</b-col> </CCol>
</b-row> <CCol cols="6" class="text-right">
</b-form> <CButton variant="link" class="px-0">Forgot password?</CButton>
</b-card-body> </CCol>
</b-card> </CRow>
<b-card no-body class="text-white bg-primary py-5 d-md-down-none" style="width:44%"> </CForm>
<b-card-body class="text-center"> </CCardBody>
<div> </CCard>
<CCard
class="text-white text-center bg-primary py-5 d-md-down-none"
style="width:44%"
>
<h2>Sign up</h2> <h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<b-button variant="primary" class="active mt-3">Register Now!</b-button> <CButton
</div> variant="primary"
</b-card-body> class="active mt-3"
</b-card> >
</b-card-group> Register Now!
</b-col> </CButton>
</b-row> </CCard>
</CCardGroup>
</CCol>
</CRow>
</div> </div>
</div> </div>
</template> </template>
src/views/pages/Page404.vue
+13 -15
View File
@@ -1,26 +1,24 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<b-row class="justify-content-center"> <CRow class="justify-content-center">
<b-col md="6"> <CCol md="6">
<div class="clearfix"> <div class="clearfix">
<h1 class="float-left display-3 mr-4">404</h1> <h1 class="float-left display-3 mr-4">404</h1>
<h4 class="pt-3">Oops! You're lost.</h4> <h4 class="pt-3">Oops! You're lost.</h4>
<p class="text-muted">The page you are looking for was not found.</p> <p class="text-muted">The page you are looking for was not found.</p>
</div> </div>
<b-input-group> <CFormInput
<b-input-group-prepend> class="mb-0"
<b-input-group-text> prepend="<i class='fa fa-search'></i>"
<i class="fa fa-search"></i> placeholder="What are you looking for?"
</b-input-group-text> >
</b-input-group-prepend> <template #append>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?"> <CButton variant="info">Search</CButton>
<b-input-group-append> </template>
<b-button variant="info">Search</b-button> </CFormInput>
</b-input-group-append> </CCol>
</b-input-group> </CRow>
</b-col>
</b-row>
</div> </div>
</div> </div>
</template> </template>
src/views/pages/Page500.vue
+13 -15
View File
@@ -1,26 +1,24 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<b-row class="justify-content-center"> <CRow class="justify-content-center">
<b-col md="6"> <CCol md="6">
<div class="clearfix"> <div class="clearfix">
<h1 class="float-left display-3 mr-4">500</h1> <h1 class="float-left display-3 mr-4">500</h1>
<h4 class="pt-3">Houston, we have a problem!</h4> <h4 class="pt-3">Houston, we have a problem!</h4>
<p class="text-muted">The page you are looking for is temporarily unavailable.</p> <p class="text-muted">The page you are looking for is temporarily unavailable.</p>
</div> </div>
<b-input-group> <CFormInput
<b-input-group-prepend> class="mb-0"
<b-input-group-text> prepend="<i class='fa fa-search'></i>"
<i class="fa fa-search"></i> placeholder="What are you looking for?"
</b-input-group-text> >
</b-input-group-prepend> <template #append>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?"> <CButton variant="info">Search</CButton>
<b-input-group-append> </template>
<b-button variant="info">Search</b-button> </CFormInput>
</b-input-group-append> </CCol>
</b-input-group> </CRow>
</b-col>
</b-row>
</div> </div>
</div> </div>
</template> </template>
src/views/pages/Register.vue
+48 -49
View File
@@ -1,57 +1,56 @@
<template> <template>
<div class="app flex-row align-items-center"> <div class="app flex-row align-items-center">
<div class="container"> <div class="container">
<b-row class="justify-content-center"> <CRow class="justify-content-center">
<b-col md="6" sm="8"> <CCol md="6" sm="8">
<b-card no-body class="mx-4"> <CCard class="mx-4">
<b-card-body class="p-4"> <template #body>
<b-form> <CCardBody class="p-4">
<CForm>
<h1>Register</h1> <h1>Register</h1>
<p class="text-muted">Create your account</p> <p class="text-muted">Create your account</p>
<b-input-group class="mb-3"> <CFormInput
<b-input-group-prepend> placeholder="Username"
<b-input-group-text><i class="icon-user"></i></b-input-group-text> prepend="<i class='icon-user'></i>"
</b-input-group-prepend> autocomplete="username"
<b-form-input type="text" class="form-control" placeholder="Username" autocomplete="username" /> />
</b-input-group> <CFormInput
placeholder="Email"
<b-input-group class="mb-3"> prepend="@"
<b-input-group-prepend> autocomplete="email"
<b-input-group-text>@</b-input-group-text> />
</b-input-group-prepend> <CFormInput
<b-form-input type="text" class="form-control" placeholder="Email" autocomplete="email" /> placeholder="Password"
</b-input-group> type="password"
prepend="<i class='icon-lock'></i>"
<b-input-group class="mb-3"> autocomplete="new-password"
<b-input-group-prepend> />
<b-input-group-text><i class="icon-lock"></i></b-input-group-text> <CFormInput
</b-input-group-prepend> placeholder="Repeat password"
<b-form-input type="password" class="form-control" placeholder="Password" autocomplete="new-password" /> type="password"
</b-input-group> prepend="<i class='icon-lock'></i>"
autocomplete="new-password"
<b-input-group class="mb-4"> class="mb-4"
<b-input-group-prepend> />
<b-input-group-text><i class="icon-lock"></i></b-input-group-text> <CButton variant="success" block>Create Account</CButton>
</b-input-group-prepend> </CForm>
<b-form-input type="password" class="form-control" placeholder="Repeat password" autocomplete="new-password" /> </CCardBody>
</b-input-group> </template>
<template #footer>
<b-button variant="success" block>Create Account</b-button> <CCardFooter class="p-4">
</b-form> <CRow>
</b-card-body> <CCol cols="6">
<b-card-footer class="p-4"> <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
<b-row> </CCol>
<b-col cols="6"> <CCol cols="6">
<b-button block class="btn btn-facebook"><span>facebook</span></b-button> <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
</b-col> </CCol>
<b-col cols="6"> </CRow>
<b-button block class="btn btn-twitter" type="button"><span>twitter</span></b-button> </CCardFooter>
</b-col> </template>
</b-row> </CCard>
</b-card-footer> </CCol>
</b-card> </CRow>
</b-col>
</b-row>
</div> </div>
</div> </div>
</template> </template>
src/views/theme/ColorTheme.vue
+3 -4
View File
@@ -1,9 +1,9 @@
<template> <template>
<b-col xl="2" md="4" sm="6" xs="12" class="mb-4"> <CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
<div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div> <div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
<slot></slot> <slot></slot>
<color-view/> <ColorView/>
</b-col> </CCol>
</template> </template>
<script> <script>
@@ -23,4 +23,3 @@ export default {
} }
} }
</script> </script>
src/views/theme/Colors.vue
+52 -53
View File
@@ -1,67 +1,66 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card header-tag="header"> <CCard >
<div slot="header"> <CCardHeader slot="header">
<i class="icon-drop"></i> Theme colors <i class="icon-drop"></i> Theme colors
</div> </CCardHeader>
<b-card-body> <CCardBody slot="body">
<b-row> <CRow>
<color-theme color="bg-primary"> <ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6> <h6>Brand Primary Color</h6>
</color-theme> </ColorTheme>
<color-theme color="bg-secondary"><h6>Brand Secondary Color</h6></color-theme> <ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<color-theme color="bg-success"><h6>Brand Success Color</h6></color-theme> <ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
<color-theme color="bg-danger"><h6>Brand Danger Color</h6></color-theme> <ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<color-theme color="bg-warning"><h6>Brand Warning Color</h6></color-theme> <ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<color-theme color="bg-info"><h6>Brand Info Color</h6></color-theme> <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<color-theme color="bg-light"><h6>Brand Light Color</h6></color-theme> <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<color-theme color="bg-dark"><h6>Brand Dark Color</h6></color-theme> <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
</b-row> </CRow>
</b-card-body> </CCardBody>
</b-card> </CCard>
<b-card header-tag="header"> <CCard >
<div slot="header"> <CCardHeader slot="header">
<i class="icon-drop"></i> Grays <i class="icon-drop"></i> Grays
</div> </CCardHeader>
<b-card-body> <CCardBody slot="body">
<b-row> <CRow>
<color-theme color="bg-gray-100"><h6>Brand 100 Color</h6></color-theme> <ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<color-theme color="bg-gray-200"><h6>Brand 200 Color</h6></color-theme> <ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
<color-theme color="bg-gray-300"><h6>Brand 300 Color</h6></color-theme> <ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
<color-theme color="bg-gray-400"><h6>Brand 400 Color</h6></color-theme> <ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
<color-theme color="bg-gray-500"><h6>Brand 500 Color</h6></color-theme> <ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
<color-theme color="bg-gray-600"><h6>Brand 600 Color</h6></color-theme> <ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
<color-theme color="bg-gray-700"><h6>Brand 700 Color</h6></color-theme> <ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
<color-theme color="bg-gray-800"><h6>Brand 800 Color</h6></color-theme> <ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
<color-theme color="bg-gray-900"><h6>Brand 900 Color</h6></color-theme> <ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
</b-row> </CRow>
</b-card-body> </CCardBody>
</b-card> </CCard>
<b-card header-tag="header"> <CCard >
<div slot="header"> <CCardHeader slot="header">
<i class="icon-drop"></i> Additional colors <i class="icon-drop"></i> Additional colors
</div> </CCardHeader>
<b-card-body> <CCardBody slot="body">
<b-row> <CRow>
<color-theme color="bg-blue"><h6>Brand Blue Color</h6></color-theme> <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<color-theme color="bg-indigo"><h6>Brand Indigo Color</h6></color-theme> <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
<color-theme color="bg-purple"><h6>Brand Purple Color</h6></color-theme> <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
<color-theme color="bg-pink"><h6>Brand Pink Color</h6></color-theme> <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
<color-theme color="bg-red"><h6>Brand Red Color</h6></color-theme> <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
<color-theme color="bg-orange"><h6>Brand Orange Color</h6></color-theme> <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
<color-theme color="bg-yellow"><h6>Brand Yellow Color</h6></color-theme> <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
<color-theme color="bg-green"><h6>Brand Green Color</h6></color-theme> <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
<color-theme color="bg-teal"><h6>Brand Teal Color</h6></color-theme> <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
<color-theme color="bg-cyan"><h6>Brand Cyan Color</h6></color-theme> <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
</b-row> </CRow>
</b-card-body> </CCardBody>
</b-card> </CCard>
</div> </div>
</template> </template>
<script> <script>
import ColorTheme from './ColorTheme' import ColorTheme from './ColorTheme'
export default { export default {
name: 'colors', name: 'colors',
components: { ColorTheme } components: { ColorTheme }
src/views/users/User.vue
+21 -22
View File
@@ -1,21 +1,24 @@
<template> <template>
<b-row> <CRow>
<b-col cols="12" lg="6"> <CCol cols="12"
<b-card no-header> lg="6"
>
<CCard no-header>
<template slot="header"> <template slot="header">
User id: {{ $route.params.id }} User id: {{ $route.params.id }}
</template> </template>
<b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields"> <CTable striped
<template slot="value" slot-scope="data"> small
<strong>{{data.item.value}}</strong> fixed
</template> :items="items($route.params.id)"
</b-table> :fields="$options.fields"
/>
<template slot="footer"> <template slot="footer">
<b-button @click="goBack">Back</b-button> <CButton @click="goBack">Back</CButton>
</template> </template>
</b-card> </CCard>
</b-col> </CCol>
</b-row> </CRow>
</template> </template>
<script> <script>
@@ -28,20 +31,16 @@ export default {
default: 'User id' default: 'User id'
}, },
}, },
data: () => { fields: [
return { { key: 'key', _style:'width:150px'},
items: (id) => { { key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
],
methods: {
items (id) {
const user = usersData.find( user => user.id.toString() === id) const user = usersData.find( user => user.id.toString() === id)
const userDetails = user ? Object.entries(user) : [['id', 'Not found']] const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
return userDetails.map(([key, value]) => {return {key: key, value: value}}) return userDetails.map(([key, value]) => {return {key: key, value: value}})
}, },
fields: [
{key: 'key'},
{key: 'value'},
],
}
},
methods: {
goBack() { goBack() {
this.$router.go(-1) this.$router.go(-1)
// this.$router.replace({path: '/users'}) // this.$router.replace({path: '/users'})
src/views/users/Users.vue
+29 -48
View File
@@ -1,58 +1,37 @@
<template> <template>
<b-row> <CRow>
<b-col cols="12" xl="6"> <CCol cols="12" xl="6">
<transition name="slide"> <transition name="slide">
<b-card :header="caption"> <CCard header="users">
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked"> <CTable hover
<template slot="id" slot-scope="data"> striped
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
@row-clicked="rowClicked"
:paginationProps="$options.paginationProps"
>
<td slot="id" slot-scope="data">
<strong>{{data.item.id}}</strong> <strong>{{data.item.id}}</strong>
</template> </td>
<template slot="name" slot-scope="data"> <td slot="name" slot-scope="data">
<strong>{{data.item.name}}</strong> <strong>{{data.item.name}}</strong>
</template> </td>
<template slot="status" slot-scope="data"> <td slot="status" slot-scope="data">
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge> <CBadge :variant="getBadge(data.item.status)">{{data.item.status}}</CBadge>
</template> </td>
</b-table> </CTable>
<nav> </CCard>
<b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
</nav>
</b-card>
</transition> </transition>
</b-col> </CCol>
</b-row> </CRow>
</template> </template>
<script> <script>
import usersData from './UsersData' import usersData from './UsersData'
export default { export default {
name: 'Users', name: 'Users',
props: {
caption: {
type: String,
default: 'Users'
},
hover: {
type: Boolean,
default: true
},
striped: {
type: Boolean,
default: true
},
bordered: {
type: Boolean,
default: false
},
small: {
type: Boolean,
default: false
},
fixed: {
type: Boolean,
default: false
}
},
data: () => { data: () => {
return { return {
items: usersData.filter((user) => user.id < 42), items: usersData.filter((user) => user.id < 42),
@@ -68,7 +47,12 @@ export default {
totalRows: 0 totalRows: 0
} }
}, },
computed: { paginationProps: {
// size: 'sm',
align: 'center',
hideDoubleArrows: true,
previousButtonText: 'prev',
nextButtonText: 'next'
}, },
methods: { methods: {
getBadge (status) { getBadge (status) {
@@ -77,9 +61,6 @@ export default {
: status === 'Pending' ? 'warning' : status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary' : status === 'Banned' ? 'danger' : 'primary'
}, },
getRowCount (items) {
return items.length
},
userLink (id) { userLink (id) {
return `users/${id.toString()}` return `users/${id.toString()}`
}, },
src/views/users/UsersData.js
+1 -1
View File
@@ -1,5 +1,5 @@
const usersData = [ const usersData = [
{id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'}, // {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'}, {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'}, {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'}, {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},