feat: Initial commit of v3-alpha
This commit is contained in:
woothu
+4
-2
@@ -14,19 +14,21 @@
|
|||||||
"test:e2e": "vue-cli-service test:e2e"
|
"test:e2e": "vue-cli-service test:e2e"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@coreui/coreui": "^2.0.20",
|
"@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": "github:coreui/coreui-vue#vue_cli3",
|
"@coreui/vue": "github:coreui/coreui-vue#woothu",
|
||||||
"bootstrap": "^4.1.3",
|
"bootstrap": "^4.1.3",
|
||||||
"bootstrap-vue": "^2.0.0-rc.11",
|
"bootstrap-vue": "^2.0.0-rc.11",
|
||||||
"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",
|
||||||
|
"element-resize-detector": "^1.2.0",
|
||||||
"flag-icon-css": "^3.2.0",
|
"flag-icon-css": "^3.2.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"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",
|
||||||
"vue": "^2.5.17",
|
"vue": "^2.5.17",
|
||||||
"vue-chartjs": "^3.4.0",
|
"vue-chartjs": "^3.4.0",
|
||||||
"vue-perfect-scrollbar": "^0.1.0",
|
"vue-perfect-scrollbar": "^0.1.0",
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
<AppSidebar fixed>
|
<AppSidebar fixed>
|
||||||
<SidebarHeader/>
|
<SidebarHeader/>
|
||||||
<SidebarForm/>
|
<SidebarForm/>
|
||||||
<SidebarNav :navItems="nav"></SidebarNav>
|
<SidebarNav :navItems="computedNav"></SidebarNav>
|
||||||
<SidebarFooter/>
|
<SidebarFooter/>
|
||||||
<SidebarMinimizer/>
|
<SidebarMinimizer/>
|
||||||
</AppSidebar>
|
</AppSidebar>
|
||||||
@@ -88,6 +88,11 @@ export default {
|
|||||||
return {
|
return {
|
||||||
nav: nav.items
|
nav: nav.items
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
computedNav () {
|
||||||
|
return this.nav.filter((item) => item.name !== 'Dashboard')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,48 +1,58 @@
|
|||||||
<template>
|
<template>
|
||||||
<c-nav-item-dropdown no-caret right>
|
<CDropdown right class="nav-item" toggleClasses="nav-link" menuClasses="hehe">
|
||||||
<template slot="button-content">
|
<img slot="button"
|
||||||
<img
|
src="img/avatars/6.jpg"
|
||||||
src="img/avatars/6.jpg"
|
class="img-avatar"
|
||||||
class="img-avatar"
|
alt="admin@bootstrapmaster.com"
|
||||||
alt="admin@bootstrapmaster.com" />
|
/>
|
||||||
</template>
|
|
||||||
|
|
||||||
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
<c-dropdown-header tag="div" class="text-center"><strong>Account</strong></c-dropdown-header>
|
||||||
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
|
<c-dropdown-item><i class="fa fa-bell-o" /> Updates
|
||||||
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
|
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
|
||||||
</b-dropdown-item>
|
</c-dropdown-item>
|
||||||
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
|
<c-dropdown-item><i class="fa fa-envelope-o" /> Messages
|
||||||
<c-badge variant="success">{{ itemsCount }}</c-badge>
|
<c-badge variant="success">{{ itemsCount }}</c-badge>
|
||||||
</b-dropdown-item>
|
</c-dropdown-item>
|
||||||
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
|
<c-dropdown-item><i class="fa fa-tasks" /> Tasks
|
||||||
<c-badge variant="danger">{{ itemsCount }}</c-badge>
|
<c-badge variant="danger">{{ itemsCount }}</c-badge>
|
||||||
</b-dropdown-item>
|
</c-dropdown-item>
|
||||||
<b-dropdown-item><i class="fa fa-comments" /> Comments
|
<c-dropdown-item><i class="fa fa-comments" /> Comments
|
||||||
<c-badge variant="warning">{{ itemsCount }}</c-badge>
|
<c-badge variant="warning">{{ itemsCount }}</c-badge>
|
||||||
</b-dropdown-item>
|
</c-dropdown-item>
|
||||||
<b-dropdown-header
|
<c-dropdown-header
|
||||||
tag="div"
|
tag="div"
|
||||||
class="text-center">
|
class="text-center">
|
||||||
<strong>Settings</strong>
|
<strong>Settings</strong>
|
||||||
</b-dropdown-header>
|
</c-dropdown-header>
|
||||||
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
|
<c-dropdown-item><i class="fa fa-user" /> Profile</c-dropdown-item>
|
||||||
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
|
<c-dropdown-item><i class="fa fa-wrench" /> Settings</c-dropdown-item>
|
||||||
<b-dropdown-item><i class="fa fa-usd" /> Payments
|
<c-dropdown-item><i class="fa fa-usd" /> Payments
|
||||||
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
|
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
|
||||||
</b-dropdown-item>
|
</c-dropdown-item>
|
||||||
<b-dropdown-item><i class="fa fa-file" /> Projects
|
<c-dropdown-item><i class="fa fa-file" /> Projects
|
||||||
<c-badge variant="primary">{{ itemsCount }}</c-badge>
|
<c-badge variant="primary">{{ itemsCount }}</c-badge>
|
||||||
</b-dropdown-item>
|
</c-dropdown-item>
|
||||||
<b-dropdown-divider />
|
<CDropdownDivider/>
|
||||||
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
|
<c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
|
||||||
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
|
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
|
||||||
</c-nav-item-dropdown>
|
</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 }
|
||||||
},
|
},
|
||||||
|
|||||||
+45
-41
@@ -2,43 +2,7 @@
|
|||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
|
<c-widget06 header="9.823" text="Members online">
|
||||||
<b-dropdown slot='dropdown' class="float-right" variant="transparent p-0" right>
|
|
||||||
<template slot="button-content">
|
|
||||||
<i class="icon-settings"></i>
|
|
||||||
</template>
|
|
||||||
<b-dropdown-item>Action</b-dropdown-item>
|
|
||||||
<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>
|
|
||||||
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
|
||||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
|
||||||
style='height:70px' label='Members' pointHoverColor='primary'/>
|
|
||||||
|
|
||||||
</c-widget06>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
|
|
||||||
<template slot='dropdown'>
|
|
||||||
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
|
|
||||||
<template slot="button-content">
|
|
||||||
<i class="icon-location-pin"></i>
|
|
||||||
</template>
|
|
||||||
<b-dropdown-item>Action</b-dropdown-item>
|
|
||||||
<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='[1, 18, 9, 17, 34, 22, 11]'
|
|
||||||
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
|
||||||
style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
|
|
||||||
pointHoverColor='info'/>
|
|
||||||
</c-widget06>
|
|
||||||
</b-col>
|
|
||||||
<b-col sm="6" lg="3">
|
|
||||||
<c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
|
|
||||||
<template slot='dropdown'>
|
<template slot='dropdown'>
|
||||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||||
<template slot="button-content">
|
<template slot="button-content">
|
||||||
@@ -50,15 +14,54 @@
|
|||||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||||
</b-dropdown>
|
</b-dropdown>
|
||||||
</template>
|
</template>
|
||||||
<c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]'
|
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
|
||||||
|
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||||
|
style='height:70px' label='Members' pointHoverColor='primary'/>
|
||||||
|
</c-widget06>
|
||||||
|
</b-col>
|
||||||
|
<b-col sm="6" lg="3">
|
||||||
|
<c-widget06 variant="info" header="9.823" text="Members online">
|
||||||
|
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
|
||||||
|
<i slot="button-content"
|
||||||
|
class="icon-location-pin"
|
||||||
|
></i>
|
||||||
|
<b-dropdown-item>Action</b-dropdown-item>
|
||||||
|
<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>
|
||||||
|
<CSimplePointedChart class="px-3"
|
||||||
|
:data="[1, 18, 9, 17, 34, 22, 11]"
|
||||||
|
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
|
||||||
|
style="height:70px"
|
||||||
|
label="Members"
|
||||||
|
:options="{elements: {line: {tension: 0.00001}}}"
|
||||||
|
pointHoverColor="info"
|
||||||
|
/>
|
||||||
|
</c-widget06>
|
||||||
|
</b-col>
|
||||||
|
<b-col sm="6" lg="3">
|
||||||
|
<c-widget06 variant="warning" header="9.823" text="Members online">
|
||||||
|
<template slot='dropdown'>
|
||||||
|
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||||
|
<template slot="button-content">
|
||||||
|
<i class="icon-settings"></i>
|
||||||
|
</template>
|
||||||
|
<b-dropdown-item>Action</b-dropdown-item>
|
||||||
|
<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>
|
</c-widget06>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
|
<c-widget06 variant="danger" header="9.823" text="Members online">
|
||||||
<template slot='dropdown'>
|
<template slot="dropdown">
|
||||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
<b-dropdown class="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>
|
||||||
@@ -69,11 +72,12 @@
|
|||||||
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
|
||||||
</b-dropdown>
|
</b-dropdown>
|
||||||
</template>
|
</template>
|
||||||
<c-simple-bar-chart :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
|
<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>
|
</c-widget06>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
|
|
||||||
<b-card>
|
<b-card>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="5">
|
<b-col sm="5">
|
||||||
|
|||||||
+13
-9
@@ -3,7 +3,7 @@
|
|||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
|
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
|
||||||
<CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
|
<CProgress color="success" :value="25" class="progress-xs my-3 mb-0"/>
|
||||||
</c-widget01>
|
</c-widget01>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
@@ -201,7 +201,7 @@
|
|||||||
</b-row>
|
</b-row>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
|
<c-widget06 header="9.823" text="Members online">
|
||||||
<template slot='dropdown'>
|
<template slot='dropdown'>
|
||||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||||
<template slot="button-content">
|
<template slot="button-content">
|
||||||
@@ -219,7 +219,7 @@
|
|||||||
</c-widget06>
|
</c-widget06>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
|
<c-widget06 variant="info" header="9.823" text="Members online">
|
||||||
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
|
<b-dropdown slot="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"
|
||||||
@@ -240,7 +240,7 @@
|
|||||||
</c-widget06>
|
</c-widget06>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
|
<c-widget06 variant="warning" header="9.823" text="Members online">
|
||||||
<template slot='dropdown'>
|
<template slot='dropdown'>
|
||||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||||
<template slot="button-content">
|
<template slot="button-content">
|
||||||
@@ -259,7 +259,7 @@
|
|||||||
</c-widget06>
|
</c-widget06>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
|
<c-widget06 variant="danger" header="9.823" text="Members online">
|
||||||
<template slot="dropdown">
|
<template slot="dropdown">
|
||||||
<b-dropdown class="float-right" variant="transparent p-0" right>
|
<b-dropdown class="float-right" variant="transparent p-0" right>
|
||||||
<template slot="button-content">
|
<template slot="button-content">
|
||||||
@@ -287,19 +287,19 @@
|
|||||||
</c-widget07>
|
</c-widget07>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
<c-widget07 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'/>
|
<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'/>
|
||||||
<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'/>
|
<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'/>
|
||||||
</c-widget07>
|
</c-widget07>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
<c-widget07 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'/>
|
<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'/>
|
||||||
<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'/>
|
<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'/>
|
||||||
</c-widget07>
|
</c-widget07>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" lg="3">
|
<b-col sm="6" lg="3">
|
||||||
<c-widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
|
<c-widget07 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'/>
|
<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'/>
|
||||||
<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'/>
|
<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'/>
|
||||||
</c-widget07>
|
</c-widget07>
|
||||||
@@ -350,7 +350,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// import CWidget06 from './CWidget06'
|
||||||
export default {
|
export default {
|
||||||
name: 'Widgets'
|
name: 'Widgets',
|
||||||
|
// components: {
|
||||||
|
// CWidget06
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
<CBreadcrumb :items="items"/>
|
<CBreadcrumb :items="items"/>
|
||||||
<CBreadcrumb :items="items2"/>
|
<CBreadcrumb :items="items2"/>
|
||||||
<CBreadcrumb :items="items3"/>
|
<CBreadcrumb :items="items3"/>
|
||||||
<Breadcrumb :list="items3"/>
|
<!-- <Breadcrumb :list="items3"/> -->
|
||||||
|
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
|
|||||||
@@ -1,170 +0,0 @@
|
|||||||
import { mergeData } from 'vue-functional-data-merge'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The Link component is used in many other BV components.
|
|
||||||
* As such, sharing its props makes supporting all its features easier.
|
|
||||||
* However, some components need to modify the defaults for their own purpose.
|
|
||||||
* Prefer sharing a fresh copy of the props to ensure mutations
|
|
||||||
* do not affect other component references to the props.
|
|
||||||
*
|
|
||||||
* https://github.com/vuejs/vue-router/blob/dev/src/components/link.js
|
|
||||||
* @return {{}}
|
|
||||||
*/
|
|
||||||
export function propsFactory () {
|
|
||||||
return {
|
|
||||||
href: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
rel: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
target: {
|
|
||||||
type: String,
|
|
||||||
default: '_self'
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
activeClass: {
|
|
||||||
type: String,
|
|
||||||
default: 'active'
|
|
||||||
},
|
|
||||||
append: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
event: {
|
|
||||||
type: [String, Array],
|
|
||||||
default: 'click'
|
|
||||||
},
|
|
||||||
exact: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
exactActiveClass: {
|
|
||||||
type: String,
|
|
||||||
default: 'active'
|
|
||||||
},
|
|
||||||
replace: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
routerTag: {
|
|
||||||
type: String,
|
|
||||||
default: 'a'
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
type: [String, Object],
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const props = propsFactory()
|
|
||||||
|
|
||||||
|
|
||||||
function computeTag (props, parent) {
|
|
||||||
return Boolean(parent.$router) && props.to && !props.disabled ? 'router-link' : 'a'
|
|
||||||
}
|
|
||||||
|
|
||||||
/*eslint no-unused-vars: ["error", {"args": "none"}]*/
|
|
||||||
function computeHref ({ disabled, href, to }, tag) {
|
|
||||||
// We've already checked the parent.$router in computeTag,
|
|
||||||
// so router-link means live router.
|
|
||||||
// When deferring to Vue Router's router-link,
|
|
||||||
// don't use the href attr at all.
|
|
||||||
// Must return undefined for router-link to populate href.
|
|
||||||
if (tag === 'router-link') return void 0
|
|
||||||
// If href explicitly provided
|
|
||||||
if (href) return href
|
|
||||||
// Reconstruct href when `to` used, but no router
|
|
||||||
if (to) {
|
|
||||||
// Fallback to `to` prop (if `to` is a string)
|
|
||||||
if (typeof to === 'string') return to
|
|
||||||
// Fallback to `to.path` prop (if `to` is an object)
|
|
||||||
if (typeof to === 'object' && typeof to.path === 'string') return to.path
|
|
||||||
}
|
|
||||||
// If nothing is provided use '#'
|
|
||||||
return '#'
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeRel ({ target, rel }) {
|
|
||||||
if (target === '_blank' && rel === null) {
|
|
||||||
return 'noopener'
|
|
||||||
}
|
|
||||||
return rel || null
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickHandlerFactory ({ disabled, tag, href, suppliedHandler, parent }) {
|
|
||||||
const isRouterLink = tag === 'router-link'
|
|
||||||
|
|
||||||
return function onClick (e) {
|
|
||||||
if (disabled && e instanceof Event) {
|
|
||||||
// Stop event from bubbling up.
|
|
||||||
e.stopPropagation()
|
|
||||||
// Kill the event loop attached to this specific EventTarget.
|
|
||||||
e.stopImmediatePropagation()
|
|
||||||
} else {
|
|
||||||
parent.$root.$emit('clicked::link', e)
|
|
||||||
|
|
||||||
if (isRouterLink && e.target.__vue__) {
|
|
||||||
e.target.__vue__.$emit('click', e)
|
|
||||||
}
|
|
||||||
if (typeof suppliedHandler === 'function') {
|
|
||||||
suppliedHandler(...arguments)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((!isRouterLink && href === '#') || disabled) {
|
|
||||||
// Stop scroll-to-top behavior or navigation.
|
|
||||||
e.preventDefault()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
functional: true,
|
|
||||||
name: 'CLink',
|
|
||||||
props: propsFactory(),
|
|
||||||
render (h, { props, data, parent, children }) {
|
|
||||||
const tag = computeTag(props, parent)
|
|
||||||
const rel = computeRel(props)
|
|
||||||
const href = computeHref(props, tag)
|
|
||||||
const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
|
|
||||||
const suppliedHandler = (data[eventType] || {}).click
|
|
||||||
const handlers = { click: clickHandlerFactory({ tag, href, disabled: props.disabled, suppliedHandler, parent }) }
|
|
||||||
|
|
||||||
const componentData = mergeData(data, {
|
|
||||||
class: [
|
|
||||||
props.active ? (props.exact ? props.exactActiveClass : props.activeClass) : null,
|
|
||||||
{ disabled: props.disabled }
|
|
||||||
],
|
|
||||||
attrs: {
|
|
||||||
rel,
|
|
||||||
href,
|
|
||||||
target: props.target,
|
|
||||||
tabindex: props.disabled ? '-1' : (data.attrs ? data.attrs.tabindex : null),
|
|
||||||
'aria-disabled': (tag === 'a' && props.disabled) ? 'true' : null
|
|
||||||
},
|
|
||||||
props: Object.assign(props, { tag: props.routerTag })
|
|
||||||
})
|
|
||||||
|
|
||||||
// If href prop exists on router-link (even undefined or null) it fails working on SSR
|
|
||||||
if (!componentData.attrs.href) {
|
|
||||||
delete componentData.attrs.href
|
|
||||||
}
|
|
||||||
|
|
||||||
// We want to overwrite any click handler since our callback
|
|
||||||
// will invoke the supplied handler if !props.disabled
|
|
||||||
componentData[eventType] = Object.assign(componentData[eventType] || {}, handlers)
|
|
||||||
|
|
||||||
return h(tag, componentData, children)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
<template>
|
|
||||||
<li :class='dropdownClasses' :id="safeId">
|
|
||||||
<a href="#" :id="'C-' + safeId" aria-haspopup="true" :aria-expanded="visible"
|
|
||||||
:class="toggleClasses" @click="toggle(!visible)" @blur="toggle(false)">
|
|
||||||
<slot name="button-content">{{text}}</slot>
|
|
||||||
</a>
|
|
||||||
<div :class='menuClasses' :aria-labbeledby="'C-' + safeId">
|
|
||||||
<slot></slot>
|
|
||||||
<slot name="dropdown"></slot>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CNavItemDropdown',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
visible: this.show
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
noCaret: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
extraToggleClasses: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
extraMenuClasses: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
default: 'Dropdown'
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
dropup: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
right: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
toggle (visible) {
|
|
||||||
if(this.disabled)
|
|
||||||
return
|
|
||||||
this.visible = visible
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
dropdownClasses () {
|
|
||||||
return [
|
|
||||||
'nav-item',
|
|
||||||
'dropdown',
|
|
||||||
this.dropup ? 'dropup' : '',
|
|
||||||
this.visible ? 'show' : ''
|
|
||||||
]
|
|
||||||
},
|
|
||||||
toggleClasses () {
|
|
||||||
return [
|
|
||||||
'nav-link',
|
|
||||||
this.noCaret ? '' : 'dropdown-toggle',
|
|
||||||
this.disabled ? 'disabled' : '',
|
|
||||||
this.extraToggleClasses ? this.extraToggleClasses : ''
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menuClasses () {
|
|
||||||
return [
|
|
||||||
'dropdown-menu',
|
|
||||||
this.right ? 'dropdown-menu-right' : 'dropdown-menu-left',
|
|
||||||
this.visible ? 'show' : '',
|
|
||||||
this.extraMenuClasses ? this.extraMenuClasses : ''
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
<template>
|
|
||||||
<label :class="classList">
|
|
||||||
<input
|
|
||||||
:id="id"
|
|
||||||
:name="name"
|
|
||||||
:type="type"
|
|
||||||
:checked="isChecked"
|
|
||||||
:disabled="disabled"
|
|
||||||
:required="required"
|
|
||||||
:value="value"
|
|
||||||
class="switch-input form-check-input"
|
|
||||||
@change="toggle"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
:data-checked="dataOn"
|
|
||||||
:data-unchecked="dataOff"
|
|
||||||
class="switch-slider"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name:'CSwitch',
|
|
||||||
model: {
|
|
||||||
prop: 'passedValue',
|
|
||||||
event: 'change'
|
|
||||||
},
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
isChecked: null,
|
|
||||||
passedValue: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
variant: {
|
|
||||||
type: String,
|
|
||||||
default: 'secondary'
|
|
||||||
},
|
|
||||||
outline: {
|
|
||||||
type: [Boolean, String],
|
|
||||||
default: null,
|
|
||||||
validator: value => [false, true, '', 'alt'].indexOf(value) !== -1
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
validator: value => ['', 'lg', 'sm'].indexOf(value) !== -1
|
|
||||||
},
|
|
||||||
shape: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
validator: value => [null, '3d', 'pill'].indexOf(value) !== -1
|
|
||||||
},
|
|
||||||
id: String,
|
|
||||||
name: String,
|
|
||||||
checked: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
disabled: Boolean,
|
|
||||||
required: Boolean,
|
|
||||||
value: String,
|
|
||||||
trueValue: [String, Number, Array, Object],
|
|
||||||
falseValue: [String, Number, Array, Object],
|
|
||||||
dataOn: String,
|
|
||||||
dataOff: String,
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'checkbox'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
classList () {
|
|
||||||
return [
|
|
||||||
'switch',
|
|
||||||
this.dataOn || this.dataOff ? 'switch-label' : '',
|
|
||||||
this.size ? `switch-${this.size}` : '',
|
|
||||||
this.shape ? `switch-${this.shape}` : '',
|
|
||||||
`switch${this.outline ? '-outline' : ''}-${this.variant}${this.outline==='alt' ? '-alt' : ''}`,
|
|
||||||
'form-check-label'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggle (event) {
|
|
||||||
this.setValues(event.target.checked)
|
|
||||||
this.$emit('change', this.passedValue, event);
|
|
||||||
},
|
|
||||||
setValues (checked) {
|
|
||||||
this.isChecked = checked
|
|
||||||
if(checked)
|
|
||||||
this.passedValue = this.trueValue !== undefined ? this.trueValue : checked
|
|
||||||
else
|
|
||||||
this.passedValue = this.falseValue !== undefined ? this.falseValue : checked
|
|
||||||
},
|
|
||||||
detectPassedCheck (modelValue) {
|
|
||||||
if(typeof modelValue === 'boolean')
|
|
||||||
this.isChecked = modelValue
|
|
||||||
else if (modelValue === this.falseValue)
|
|
||||||
this.isChecked = false
|
|
||||||
else if (modelValue === this.trueValue)
|
|
||||||
this.isChecked = true
|
|
||||||
else if (this.type === 'checkbox')
|
|
||||||
console.warn('Value passed to CSwitch component by v-model property is not of boolean type and does not equal trueValue or falseValue property.')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
if(this.$vnode.data.model)
|
|
||||||
this.detectPassedCheck(this.$vnode.data.model.value)
|
|
||||||
else
|
|
||||||
this.isChecked = this.checked
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
+94
-36
@@ -1,21 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
|
<!-- <CContainer fluid>
|
||||||
|
<CRow>
|
||||||
|
<CColumn lg md="7" :sm="{'order': 2, offset:'0', size:'4'}" class="hehe">
|
||||||
|
hehe
|
||||||
|
</CColumn>
|
||||||
|
</CRow>
|
||||||
|
</CContainer> -->
|
||||||
|
<CNavbar toggleable="md" light variant="light">
|
||||||
|
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
|
||||||
|
<CLink class="navbar-brand">NavBar</CLink>
|
||||||
|
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
|
||||||
|
<CNavbarNav pills class="navbar-nav">
|
||||||
|
<CNavItem>
|
||||||
|
hehehe1
|
||||||
|
</CNavItem>
|
||||||
|
<CNavItem class="nav-item">
|
||||||
|
hehehe1
|
||||||
|
</CNavItem>
|
||||||
|
<CNavItem class="nav-item">
|
||||||
|
hehehe2
|
||||||
|
</CNavItem>
|
||||||
|
<DefaultHeaderDropdownAccnt/>
|
||||||
|
</CNavbarNav>
|
||||||
|
<CNavbarNav class="ml-auto">
|
||||||
|
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
|
||||||
|
<c-dropdown-item><i class="fa fa-file" /> Projects
|
||||||
|
<c-badge variant="primary">32</c-badge>
|
||||||
|
</c-dropdown-item>
|
||||||
|
<c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
|
||||||
|
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
|
||||||
|
</CDropdown>
|
||||||
|
</CNavbarNav>
|
||||||
|
</CCollapse>
|
||||||
|
</CNavbar>
|
||||||
|
<br>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="6" md="4">
|
<b-col sm="6" md="4">
|
||||||
<b-card header="Card title">
|
<transition name="fade">
|
||||||
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 class="bg-secondary" no-body v-if="show" >
|
||||||
</b-card>
|
<CCardHeader slot="header">
|
||||||
|
Card with header actions
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<c-link href="#" class="card-header-action btn-setting" >
|
||||||
|
<i class="icon-settings"></i>
|
||||||
|
</c-link>
|
||||||
|
<c-link class="card-header-action btn-minimize" v-c-collapse:collapse1="test" @click="test = !test" data-duration="600">
|
||||||
|
<i :class="`icon-arrow-${ !test ? 'up' : 'down'}`"></i>
|
||||||
|
</c-link>
|
||||||
|
<c-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||||
|
<i class="icon-close"></i>
|
||||||
|
</c-link>
|
||||||
|
</div>
|
||||||
|
</CCardHeader>
|
||||||
|
<c-card-body id="collapse1">
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
</c-card-body>
|
||||||
|
</c-card>
|
||||||
|
</transition>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="4">
|
<b-col sm="6" md="4">
|
||||||
<b-card show-footer>
|
<c-card>
|
||||||
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.
|
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25" class="mb-2"/>
|
||||||
<div slot="footer">Card footer</div>
|
<CCardHeader header="Card title"/>
|
||||||
</b-card>
|
<CCardBody style="max-height:200px;overflow-y:auto">
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
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>
|
||||||
|
</c-card>
|
||||||
|
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="4">
|
<b-col sm="6" md="4">
|
||||||
<b-card header="<i class='fa fa-check'></i> Card with icon">
|
<c-card footer="Card footer"
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
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."
|
||||||
</b-card>
|
header="<i class='fa fa-check'></i> Card with icon"/>
|
||||||
|
</b-col>
|
||||||
|
<b-col sm="6" md="4">
|
||||||
|
<CCard footer="Card footer">
|
||||||
|
<CCardHeader slot="header">
|
||||||
|
<i class='fa fa-check'></i> Card with icon
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody slot="body"
|
||||||
|
title="title"
|
||||||
|
subtitle="subtitle"
|
||||||
|
body="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."/>
|
||||||
|
</CCard>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="4">
|
<b-col sm="6" md="4">
|
||||||
<b-card>
|
<b-card>
|
||||||
@@ -202,41 +275,26 @@
|
|||||||
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.
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col sm="6" md="4">
|
|
||||||
<transition name="fade">
|
|
||||||
<b-card class="bg-secondary" no-body v-if="show">
|
|
||||||
<div slot="header">
|
|
||||||
Card with header actions
|
|
||||||
<div class="card-header-actions">
|
|
||||||
<b-link href="#" class="card-header-action btn-setting">
|
|
||||||
<i class="icon-settings"></i>
|
|
||||||
</b-link>
|
|
||||||
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
|
|
||||||
<i class="icon-arrow-up"></i>
|
|
||||||
</b-link>
|
|
||||||
<b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
|
||||||
<i class="icon-close"></i>
|
|
||||||
</b-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<b-collapse id="collapse1" visible>
|
|
||||||
<b-card-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.
|
|
||||||
</b-card-body>
|
|
||||||
</b-collapse>
|
|
||||||
</b-card>
|
|
||||||
</transition>
|
|
||||||
</b-col>
|
|
||||||
</b-row><!--/.row-->
|
</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,
|
||||||
|
test: true,
|
||||||
|
test2: false,
|
||||||
|
form: 1,
|
||||||
|
smh: 'sdfsdf'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+179
-6
@@ -24,7 +24,7 @@
|
|||||||
</b-row>
|
</b-row>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="4">
|
<b-col sm="4">
|
||||||
<b-form-group >
|
<b-form-group>
|
||||||
<label for="month1">Month</label>
|
<label for="month1">Month</label>
|
||||||
<b-form-select id="month1"
|
<b-form-select id="month1"
|
||||||
:plain="true"
|
:plain="true"
|
||||||
@@ -440,7 +440,7 @@
|
|||||||
<div slot="header">
|
<div slot="header">
|
||||||
<strong>Normal</strong> Form
|
<strong>Normal</strong> Form
|
||||||
</div>
|
</div>
|
||||||
<b-form>
|
<b-form novalidate>
|
||||||
<b-form-group validated
|
<b-form-group validated
|
||||||
label="Email"
|
label="Email"
|
||||||
label-for="normalEmail"
|
label-for="normalEmail"
|
||||||
@@ -1022,29 +1022,202 @@
|
|||||||
</b-form-group>
|
</b-form-group>
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
<b-button type="submit" variant="primary">Save changes</b-button>
|
<b-button type="submit" variant="primary">Save changes</b-button>
|
||||||
<b-button type="button" variant="secondary">Cancel</b-button>
|
<b-button type="button" variant="secondary" @click="testt">Cancel</b-button>
|
||||||
</div>
|
</div>
|
||||||
</b-card-body>
|
</b-card-body>
|
||||||
</b-collapse>
|
</b-collapse>
|
||||||
</b-card>
|
</b-card>
|
||||||
</transition>
|
</transition>
|
||||||
|
<b-card>
|
||||||
|
<CForm :id="id">
|
||||||
|
<input type="text" :value="cInput"/>
|
||||||
|
<CFormInput type="email"
|
||||||
|
label="CFormInput"
|
||||||
|
placeholder="Email input"
|
||||||
|
description="input description"
|
||||||
|
size="lg"
|
||||||
|
:readonly="false"
|
||||||
|
:plaintext="false"
|
||||||
|
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
|
||||||
|
:disabled="false"
|
||||||
|
validFeedback="valid feedback"
|
||||||
|
invalidFeedback="invalid feedback"
|
||||||
|
append=".00"
|
||||||
|
prepend="$"
|
||||||
|
required
|
||||||
|
:tooltipFeedbacks="true"
|
||||||
|
:isValid="validator"
|
||||||
|
:was-validateds="true"
|
||||||
|
addInputClasses="hehe"
|
||||||
|
addLabelClasses="heh2"
|
||||||
|
addWrapperClasses="heh2"
|
||||||
|
v-model="cInput"
|
||||||
|
lazys
|
||||||
|
/>
|
||||||
|
<CFormTextarea label="Input label"
|
||||||
|
placeholder="Placeholder for textarea"
|
||||||
|
descriptiond="input description"
|
||||||
|
size="lg"
|
||||||
|
:readonly="false"
|
||||||
|
:plaintext="false"
|
||||||
|
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
|
||||||
|
:disabled="false"
|
||||||
|
validFeedback="valid feedback"
|
||||||
|
invalidFeedback="invalid feedback"
|
||||||
|
append=".00"
|
||||||
|
prepends="$"
|
||||||
|
required
|
||||||
|
value="wsewrwed"
|
||||||
|
:tooltipFeedbacks="true"
|
||||||
|
:isValids="true"
|
||||||
|
:was-validated="true"
|
||||||
|
addInputClasses="fsad"
|
||||||
|
addLabelClassesa="heh2"
|
||||||
|
:rows="20"
|
||||||
|
:cols="12"
|
||||||
|
v-model="cInput"
|
||||||
|
>
|
||||||
|
<b-button slot="prepend" class="btn btn-success">asd</b-button>
|
||||||
|
</CFormTextarea>
|
||||||
|
<br>
|
||||||
|
<CFormSelect label="Input label"
|
||||||
|
:options="['first', true,3,{value:'fourth', text:'Another text', disabled:'disabled'},
|
||||||
|
{value:null, text:'boolean value'}]"
|
||||||
|
placeholder="Placeholder test"
|
||||||
|
description="input description"
|
||||||
|
size="lg"
|
||||||
|
customs
|
||||||
|
plaintexts
|
||||||
|
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
|
||||||
|
disableds="disabled"
|
||||||
|
validFeedback="valid feedback"
|
||||||
|
invalidFeedback="invalid feedback"
|
||||||
|
appenda=".00"
|
||||||
|
prepends="$"
|
||||||
|
required
|
||||||
|
:tooltipFeedback="true"
|
||||||
|
:isValidf="true"
|
||||||
|
:was-validated="true"
|
||||||
|
addInputClassess="form-control-plaintext"
|
||||||
|
addLabelClasses="heh2"
|
||||||
|
addWrapperClasses="hehe22"
|
||||||
|
v-model="selected"
|
||||||
|
>
|
||||||
|
<b-button slot="prepends" class="btn btn-success">dssdf</b-button>
|
||||||
|
</CFormSelect>
|
||||||
|
{{String(selected)}}
|
||||||
|
<CFormFile label="Input label"
|
||||||
|
description="input description"
|
||||||
|
size="lg"
|
||||||
|
:horizontals="{input: 'col-sm-8', label: 'col-sm-4'}"
|
||||||
|
:disabled="false"
|
||||||
|
validFeedback="valid feedback"
|
||||||
|
invalidFeedback="invalid feedback"
|
||||||
|
required
|
||||||
|
:tooltipFeedback="true"
|
||||||
|
:isValid="true"
|
||||||
|
:was-validateds="true"
|
||||||
|
addInputClassesa="hehe"
|
||||||
|
addLabelClassesa="heh2"
|
||||||
|
custom
|
||||||
|
multiple
|
||||||
|
accept="image/*"
|
||||||
|
/>
|
||||||
|
<div class="my-radio-group row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
My radio group
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-8" >
|
||||||
|
<CFormCheckbox type="radio"
|
||||||
|
:label="String(value)"
|
||||||
|
descriptions="input description"
|
||||||
|
:disabled="false"
|
||||||
|
validFeedback="valid feedback"
|
||||||
|
invalidFeedback="invalid feedback"
|
||||||
|
required
|
||||||
|
:tooltipFeedbacks="true"
|
||||||
|
:was-validateds="true"
|
||||||
|
addLabelClassesa="heh2"
|
||||||
|
custom
|
||||||
|
name="someName"
|
||||||
|
:value="value"
|
||||||
|
v-model="checks[1]"
|
||||||
|
:key="key"
|
||||||
|
inline
|
||||||
|
v-for="(value, key) in ['first', null, 3, false]"
|
||||||
|
/>
|
||||||
|
<CFormCheckbox label="Input label"
|
||||||
|
descriptions="input description"
|
||||||
|
sizes="lg"
|
||||||
|
:disabled="false"
|
||||||
|
validFeedback="valid feedback"
|
||||||
|
invalidFeedback="invalid feedback"
|
||||||
|
required
|
||||||
|
:tooltipFeedback="true"
|
||||||
|
:was-validated="true"
|
||||||
|
addInputClassesa="hehe"
|
||||||
|
addLabelClassesa="heh2"
|
||||||
|
:isValidss="true"
|
||||||
|
value="hehes"
|
||||||
|
custom="radio"
|
||||||
|
v-model="checks[0]"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</CForm>
|
||||||
|
<CSpinner variant="success"/>
|
||||||
|
<CSpinner grow/>
|
||||||
|
<CSpinner small />
|
||||||
|
<CSpinner small grow/>
|
||||||
|
<CSpinner grow tag="span"/>
|
||||||
|
|
||||||
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// import CForm from './CForm'
|
||||||
|
// import CFormInput from './CFormInput'
|
||||||
|
// import CFormFile from './CFormFile'
|
||||||
|
// import CFormSelect from './CFormSelect'
|
||||||
|
// import CFormCheckbox from './CFormCheckbox'
|
||||||
|
// import CFormTextarea from './CFormTextarea'
|
||||||
|
// import CSpinner from './CSpinner'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'forms',
|
name: 'forms',
|
||||||
|
// components: { CForm, CFormInput, CFormFile, CFormSelect,
|
||||||
|
// CFormCheckbox, CFormTextarea, CSpinner},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
selected: [], // Must be an array reference!
|
selected: [], // Must be an array reference!
|
||||||
show: true
|
show: true,
|
||||||
|
id: 'sdfjosdf22',
|
||||||
|
cInput: false,
|
||||||
|
smh: 'shnsad',
|
||||||
|
trueValue:'someTrueValue',
|
||||||
|
falseValue:'someFalseValue',
|
||||||
|
checks: ['someTrueValue','hehehe2','',1,1,1,1,1,1,1,1,1,1,1,1],
|
||||||
|
selected: 'first',
|
||||||
|
isValid: '',
|
||||||
|
testkkk: 2,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
updated () {
|
||||||
|
console.log('parent updated')
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
click () {
|
testt (e) {
|
||||||
// do nothing
|
// console.log(e)
|
||||||
|
// this.selected = 3
|
||||||
|
this.cInput += 100
|
||||||
|
},
|
||||||
|
validator (val) {
|
||||||
|
return val ? val.length > 4 : null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,10 +15,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
<c-jumbotron 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>
|
<b-btn variant="primary" href="#">More Info</b-btn>
|
||||||
</b-jumbotron>
|
</c-jumbotron>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
@@ -31,14 +31,12 @@
|
|||||||
<small>with slots</small>
|
<small>with slots</small>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-jumbotron>
|
<c-jumbotron header="Bootstrap 4" lead="">
|
||||||
<template slot="header">
|
|
||||||
Bootstrap 4
|
<p slot="lead" class="lead">
|
||||||
</template>
|
|
||||||
<template slot="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.
|
||||||
</template>
|
</p>
|
||||||
<hr class="my-4">
|
<hr class="my-4">
|
||||||
<p>
|
<p>
|
||||||
It uses utility classes for typography and spacing to space content
|
It uses utility classes for typography and spacing to space content
|
||||||
@@ -46,7 +44,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<b-btn variant="primary" href="#">Do Something</b-btn>
|
<b-btn variant="primary" href="#">Do Something</b-btn>
|
||||||
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
||||||
</b-jumbotron>
|
</c-jumbotron>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
@@ -61,20 +59,21 @@
|
|||||||
<small>variants</small>
|
<small>variants</small>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
|
<c-jumbotron variant="info"
|
||||||
<template slot="header">
|
text-variant="white"
|
||||||
Bootstrap 4
|
border-variant="dark"
|
||||||
</template>
|
header="Bootstrap 4">
|
||||||
<template slot="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.
|
||||||
</template>
|
</p>
|
||||||
<hr class="my-4">
|
<hr class="my-4">
|
||||||
<p>
|
<p>
|
||||||
It uses utility classes for typography and spacing to space content
|
It uses utility classes for typography and spacing to space content
|
||||||
out within the larger container.
|
out within the larger container.
|
||||||
</p>
|
</p>
|
||||||
</b-jumbotron>
|
</c-jumbotron>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
@@ -88,4 +87,3 @@ export default {
|
|||||||
name: 'jumbotrons'
|
name: 'jumbotrons'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
|
<!-- <b-row>
|
||||||
|
<b-col>
|
||||||
|
<b-card>
|
||||||
|
<CMedia asideClasses="m-5 align-self-end" asideRight>
|
||||||
|
<img slot="aside" src="img/avatars/6.jpg">
|
||||||
|
<div class="text-center">
|
||||||
|
ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
|
||||||
|
</div>
|
||||||
|
</CMedia>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
</b-row> -->
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col md="6">
|
<b-col md="6">
|
||||||
<b-card
|
<b-card
|
||||||
@@ -14,13 +26,13 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item>Cras justo odio</b-list-group-item>
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||||
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||||
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col md="6">
|
||||||
@@ -30,13 +42,13 @@
|
|||||||
<div slot="header">
|
<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>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item>Cras justo odio</b-list-group-item>
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||||
<b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
|
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||||
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
@@ -48,13 +60,13 @@
|
|||||||
<div slot="header">
|
<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>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
|
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||||
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||||
<b-list-group-item>Morbi leo risus</b-list-group-item>
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||||
<b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
|
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||||
<b-list-group-item>Vestibulum at eros</b-list-group-item>
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col md="6">
|
||||||
@@ -64,12 +76,12 @@
|
|||||||
<div slot="header">
|
<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>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
|
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
|
||||||
<b-list-group-item href="#" active>Link with active state</b-list-group-item>
|
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
|
||||||
<b-list-group-item href="#">Action links are easy</b-list-group-item>
|
<CListGroupItem href="#">Action links are easy</CListGroupItem>
|
||||||
<b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
|
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
@@ -81,12 +93,12 @@
|
|||||||
<div slot="header">
|
<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>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item button>Button item</b-list-group-item>
|
<CListGroupItem tag="button">Button item</CListGroupItem>
|
||||||
<b-list-group-item button>I am a button</b-list-group-item>
|
<CListGroupItem tag="button">I am a button</CListGroupItem>
|
||||||
<b-list-group-item button disabled>Disabled button</b-list-group-item>
|
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
|
||||||
<b-list-group-item button>This is a button too</b-list-group-item>
|
<CListGroupItem tag="button">This is a button too</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col md="6">
|
||||||
@@ -96,20 +108,20 @@
|
|||||||
<div slot="header">
|
<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>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item 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>
|
<b-badge variant="primary" pill>14</b-badge>
|
||||||
</b-list-group-item>
|
</CListGroupItem>
|
||||||
<b-list-group-item 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>
|
<b-badge variant="primary" pill>2</b-badge>
|
||||||
</b-list-group-item>
|
</CListGroupItem>
|
||||||
<b-list-group-item 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>
|
<b-badge variant="primary" pill>1</b-badge>
|
||||||
</b-list-group-item>
|
</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
@@ -121,17 +133,17 @@
|
|||||||
<div slot="header">
|
<div slot="header">
|
||||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
|
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
|
||||||
</div>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item>This is a default list group item</b-list-group-item>
|
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="primary">This is a primary list group item</b-list-group-item>
|
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="secondary">This is a secondary list group item</b-list-group-item>
|
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="success">This is a success list group item</b-list-group-item>
|
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="danger">This is a danger list group item</b-list-group-item>
|
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="warning">This is a warning list group item</b-list-group-item>
|
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="info">This is a info list group item</b-list-group-item>
|
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="light">This is a light list group item</b-list-group-item>
|
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
||||||
<b-list-group-item variant="dark">This is a dark list group item</b-list-group-item>
|
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col md="6">
|
<b-col md="6">
|
||||||
@@ -141,17 +153,17 @@
|
|||||||
<div slot="header">
|
<div slot="header">
|
||||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
|
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
|
||||||
</div>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item href="#">This is a default list group item</b-list-group-item>
|
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="primary">This is a primary list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="secondary">This is a secondary list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="success">This is a success list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="danger">This is a danger list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="warning">This is a warning list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="info">This is a info list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="light">This is a light list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
|
||||||
<b-list-group-item href="#" variant="dark">This is a dark list group item</b-list-group-item>
|
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
@@ -165,11 +177,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<b-card-group deck>
|
<b-card-group deck>
|
||||||
<b-card header="<b>Card with list group</b>">
|
<b-card header="<b>Card with list group</b>">
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
|
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||||
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||||
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
|
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
<p class="card-text mt-2">
|
<p class="card-text mt-2">
|
||||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||||
@@ -178,11 +190,11 @@
|
|||||||
</p>
|
</p>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card no-body header="<b>Card with flush list group</b>">
|
<b-card no-body header="<b>Card with flush list group</b>">
|
||||||
<b-list-group flush>
|
<CListGroup flush>
|
||||||
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
|
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||||
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||||
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
|
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
<b-card-body>
|
<b-card-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
|
||||||
@@ -202,8 +214,8 @@
|
|||||||
<div slot="header">
|
<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>
|
</div>
|
||||||
<b-list-group>
|
<CListGroup>
|
||||||
<b-list-group-item 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">
|
||||||
<h5 class="mb-1">List group item heading</h5>
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
<small>3 days ago</small>
|
<small>3 days ago</small>
|
||||||
@@ -213,8 +225,8 @@
|
|||||||
sed diam eget risus varius blandit.
|
sed diam eget risus varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small>Donec id elit non mi porta.</small>
|
<small>Donec id elit non mi porta.</small>
|
||||||
</b-list-group-item>
|
</CListGroupItem>
|
||||||
<b-list-group-item href="#" class="flex-column align-items-start">
|
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||||
<div class="d-flex w-100 justify-content-between">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
<h5 class="mb-1">List group item heading</h5>
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
<small class="text-muted">3 days ago</small>
|
<small class="text-muted">3 days ago</small>
|
||||||
@@ -224,8 +236,8 @@
|
|||||||
sed diam eget risus varius blandit.
|
sed diam eget risus varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
</b-list-group-item>
|
</CListGroupItem>
|
||||||
<b-list-group-item href="#" disabled class="flex-column align-items-start">
|
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||||
<div class="d-flex w-100 justify-content-between">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
<h5 class="mb-1">Disabled List group item</h5>
|
<h5 class="mb-1">Disabled List group item</h5>
|
||||||
<small class="text-muted">3 days ago</small>
|
<small class="text-muted">3 days ago</small>
|
||||||
@@ -235,8 +247,8 @@
|
|||||||
sed diam eget risus varius blandit.
|
sed diam eget risus varius blandit.
|
||||||
</p>
|
</p>
|
||||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
</b-list-group-item>
|
</CListGroupItem>
|
||||||
</b-list-group>
|
</CListGroup>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
@@ -249,4 +261,3 @@ export default {
|
|||||||
name: 'list-groups'
|
name: 'list-groups'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -33,20 +33,20 @@
|
|||||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||||
</b-nav-form>
|
</b-nav-form>
|
||||||
|
|
||||||
<c-nav-item-dropdown text="Lang">
|
<!-- <c-nav-item-dropdown text="Lang">
|
||||||
<!-- <template slot="button-content">
|
<template slot="button-content">
|
||||||
<img
|
<img
|
||||||
src="img/avatars/6.jpg"
|
src="img/avatars/6.jpg"
|
||||||
class="img-avatar"
|
class="img-avatar"
|
||||||
alt="admin@bootstrapmaster.com" />
|
alt="admin@bootstrapmaster.com" />
|
||||||
</template> -->
|
</template>
|
||||||
<template slot="dropdown">
|
<template slot="dropdown">
|
||||||
<a href="#" class='dropdown-item'>EN</a>
|
<a href="#" class='dropdown-item'>EN</a>
|
||||||
<a href="#" class='dropdown-item'>ES</a>
|
<a href="#" class='dropdown-item'>ES</a>
|
||||||
<a href="#" class='dropdown-item'>RU</a>
|
<a href="#" class='dropdown-item'>RU</a>
|
||||||
<a href="#" class='dropdown-item'>FA</a>
|
<a href="#" class='dropdown-item'>FA</a>
|
||||||
</template>
|
</template>
|
||||||
</c-nav-item-dropdown>
|
</c-nav-item-dropdown> -->
|
||||||
|
|
||||||
<b-nav-item-dropdown right>
|
<b-nav-item-dropdown right>
|
||||||
<!-- Using button-content slot -->
|
<!-- Using button-content slot -->
|
||||||
@@ -165,12 +165,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CNavItemDropdown from './CNavItemDropdown'
|
// import CNavItemDropdown from './CNavItemDropdown'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'navbars',
|
name: 'navbars',
|
||||||
components:{
|
// components:{
|
||||||
CNavItemDropdown
|
// CNavItemDropdown
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+87
-50
@@ -13,12 +13,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-nav>
|
<c-nav>
|
||||||
<b-nav-item active>Active</b-nav-item>
|
<c-nav-item active>Active</c-nav-item>
|
||||||
<b-nav-item>Link</b-nav-item>
|
<c-nav-item>Link</c-nav-item>
|
||||||
<b-nav-item>Another Link</b-nav-item>
|
<c-nav-item>Another Link</c-nav-item>
|
||||||
<b-nav-item disabled>Disabled</b-nav-item>
|
<c-nav-item disabled>Disabled</c-nav-item>
|
||||||
</b-nav>
|
</c-nav>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card
|
<b-card
|
||||||
@@ -28,27 +28,47 @@
|
|||||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-nav tabs>
|
<c-nav tabs v-model="item" tab-content>
|
||||||
<b-nav-item active>Active</b-nav-item>
|
<!-- <c-nav-item index="hehe2">Active</c-nav-item> -->
|
||||||
<b-nav-item>Link</b-nav-item>
|
<c-nav-item id="hehe">
|
||||||
<b-nav-item>Another Link</b-nav-item>
|
<i class="icon-basket-loaded"></i> Active
|
||||||
<b-nav-item disabled>Disabled</b-nav-item>
|
<div slot="tab">hehe</div>
|
||||||
</b-nav>
|
</c-nav-item>
|
||||||
|
<c-nav-item>
|
||||||
|
Link
|
||||||
|
|
||||||
|
</c-nav-item>
|
||||||
|
<c-nav-item>
|
||||||
|
Another Link
|
||||||
|
<div slot="tab">hehe3</div>
|
||||||
|
</c-nav-item>
|
||||||
|
<c-nav-item disabled>Disabled</c-nav-item>
|
||||||
|
|
||||||
|
</c-nav>
|
||||||
|
<!-- <CTab fade :activeItem="item">
|
||||||
|
<CTabItem id="hehe2">text1</CTabItem>
|
||||||
|
<CTabItem>text1</CTabItem>
|
||||||
|
<CTabItem>text2</CTabItem>
|
||||||
|
<CTabItem @click="smh = 1">text3</CTabItem>
|
||||||
|
<CTabItem>text4</CTabItem>
|
||||||
|
</CTab> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card
|
<b-card
|
||||||
header-tag="header"
|
header-tag="header"
|
||||||
footer-tag="footer">
|
footer-tag="footer">
|
||||||
<div slot="header">
|
<div 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>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div @click="item--">
|
||||||
<b-nav pills>
|
<c-nav pills>
|
||||||
<b-nav-item active>Active</b-nav-item>
|
<c-nav-item active>Active</c-nav-item>
|
||||||
<b-nav-item>Link</b-nav-item>
|
<c-nav-item>Link</c-nav-item>
|
||||||
<b-nav-item>Another Link</b-nav-item>
|
<c-nav-item>Another Link</c-nav-item>
|
||||||
<b-nav-item disabled>Disabled</b-nav-item>
|
<c-nav-item disabled>Disabled</c-nav-item>
|
||||||
</b-nav>
|
</c-nav>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card
|
<b-card
|
||||||
@@ -58,12 +78,12 @@
|
|||||||
<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>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-nav fill tabs>
|
<c-nav fill tabs>
|
||||||
<b-nav-item active>Active</b-nav-item>
|
<c-nav-item active>Active</c-nav-item>
|
||||||
<b-nav-item>Link</b-nav-item>
|
<c-nav-item>Link</c-nav-item>
|
||||||
<b-nav-item>Link with a long name </b-nav-item>
|
<c-nav-item>Link with a long name </c-nav-item>
|
||||||
<b-nav-item disabled>Disabled</b-nav-item>
|
<c-nav-item disabled>Disabled</c-nav-item>
|
||||||
</b-nav>
|
</c-nav>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card
|
<b-card
|
||||||
@@ -73,12 +93,12 @@
|
|||||||
<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>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-nav justified tabs>
|
<c-nav justified tabs>
|
||||||
<b-nav-item active>Active</b-nav-item>
|
<c-nav-item active>Active</c-nav-item>
|
||||||
<b-nav-item>Link</b-nav-item>
|
<c-nav-item>Link</c-nav-item>
|
||||||
<b-nav-item>Link with a long name </b-nav-item>
|
<c-nav-item>Link with a long name </c-nav-item>
|
||||||
<b-nav-item disabled>Disabled</b-nav-item>
|
<c-nav-item disabled>Disabled</c-nav-item>
|
||||||
</b-nav>
|
</c-nav>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card
|
<b-card
|
||||||
@@ -88,16 +108,17 @@
|
|||||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-nav pills>
|
<c-nav pills>
|
||||||
<b-nav-item active>Active</b-nav-item>
|
<c-nav-item active>Active</c-nav-item>
|
||||||
<b-nav-item>Link</b-nav-item>
|
<c-nav-item>Link</c-nav-item>
|
||||||
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" right>
|
<c-dropdown id="nav7_ddown" text="Dropdown" right>
|
||||||
<b-dropdown-item>one</b-dropdown-item>
|
<a class="nav-link dropdown-toggle" slot="button">Dropdown</a>
|
||||||
<b-dropdown-item>two</b-dropdown-item>
|
<c-dropdown-item>one</c-dropdown-item>
|
||||||
<b-dropdown-divider></b-dropdown-divider>
|
<c-dropdown-item>two</c-dropdown-item>
|
||||||
<b-dropdown-item>three</b-dropdown-item>
|
<c-dropdown-divider></c-dropdown-divider>
|
||||||
</b-nav-item-dropdown>
|
<c-dropdown-item>three</c-dropdown-item>
|
||||||
</b-nav>
|
</c-dropdown>
|
||||||
|
</c-nav>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
<b-card
|
<b-card
|
||||||
@@ -107,12 +128,12 @@
|
|||||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-nav vertical class="w-25">
|
<c-nav vertical class="w-25">
|
||||||
<b-nav-item active>Active</b-nav-item>
|
<c-nav-item active>Active</c-nav-item>
|
||||||
<b-nav-item>Link</b-nav-item>
|
<c-nav-item>Link</c-nav-item>
|
||||||
<b-nav-item>Another Link</b-nav-item>
|
<c-nav-item>Another Link</c-nav-item>
|
||||||
<b-nav-item disabled>Disabled</b-nav-item>
|
<c-nav-item disabled>Disabled</c-nav-item>
|
||||||
</b-nav>
|
</c-nav>
|
||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
</div>
|
</div>
|
||||||
@@ -120,8 +141,24 @@
|
|||||||
</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 () {
|
||||||
|
return {
|
||||||
|
item: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// components: {
|
||||||
|
// CNav,
|
||||||
|
// CNavItem,
|
||||||
|
// CTab,
|
||||||
|
// CTabItem
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -13,6 +13,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<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">
|
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
|
||||||
</b-pagination>
|
</b-pagination>
|
||||||
@@ -82,18 +95,27 @@
|
|||||||
</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>
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<CSwitch v-model="myFlag2" checked @change="test" /> -->
|
<CSwitch v-model="myFlag2" checked @change="test" /> -->
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col xs="12" md="6">
|
<b-col xs="12" md="6">
|
||||||
<b-card>
|
<b-card v-if="true">
|
||||||
<div slot="header">
|
<div slot="header">
|
||||||
<h5>
|
<h5>
|
||||||
Radio switches
|
Radio switches
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
<b-badge variant="danger" class="float-right">NEW</b-badge>
|
<b-badge variant="danger" class="float-right">NEW</b-badge>
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
<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"
|
||||||
:variant="variant"
|
:variant="variant"
|
||||||
@@ -25,8 +25,8 @@
|
|||||||
type="radio"
|
type="radio"
|
||||||
name="radio"
|
name="radio"
|
||||||
v-model="radio"
|
v-model="radio"
|
||||||
:trueValue="variant"
|
:value="variant"
|
||||||
v-for="(variant, key) in ['secondary','warning','success','info','danger','light','dark']"
|
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
|
||||||
/>
|
/>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
@@ -47,6 +47,14 @@
|
|||||||
trueValue="yes"
|
trueValue="yes"
|
||||||
falseValue="no"
|
falseValue="no"
|
||||||
/>
|
/>
|
||||||
|
<CSwitch class="mx-1"
|
||||||
|
ref="totest"
|
||||||
|
variant="primary"
|
||||||
|
checked
|
||||||
|
name="switch1"
|
||||||
|
:checked="true"
|
||||||
|
value="someValue"
|
||||||
|
/>
|
||||||
<CSwitch class="mx-1"
|
<CSwitch class="mx-1"
|
||||||
:variant="variant"
|
:variant="variant"
|
||||||
checked
|
checked
|
||||||
@@ -474,6 +482,7 @@ export default {
|
|||||||
],
|
],
|
||||||
checker: 'yes',
|
checker: 'yes',
|
||||||
radio: 'primary',
|
radio: 'primary',
|
||||||
|
radio2: 'warning',
|
||||||
myFlag1: true,
|
myFlag1: true,
|
||||||
myFlag2: false,
|
myFlag2: false,
|
||||||
picker: '',
|
picker: '',
|
||||||
@@ -492,6 +501,10 @@ export default {
|
|||||||
console.log(a)
|
console.log(a)
|
||||||
console.log(typeof a)
|
console.log(typeof a)
|
||||||
console.log(event)
|
console.log(event)
|
||||||
|
},
|
||||||
|
test2 () {
|
||||||
|
console.log(this.$refs.totest)
|
||||||
|
this.$refs.totest.$forceUpdate()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+177
-8
@@ -1,40 +1,209 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
|
|
||||||
<b-row>
|
<b-row>
|
||||||
|
<b-col sm="12">
|
||||||
|
<b-card header="test1 ">
|
||||||
|
<CTable :items="items.slice(0)"
|
||||||
|
:fields="fields"
|
||||||
|
:activePage="page"
|
||||||
|
@pages-change="val => pages = val"
|
||||||
|
:perPage="5"
|
||||||
|
ref="table"
|
||||||
|
indexCol="onlyFilter"
|
||||||
|
filterRow
|
||||||
|
smalls
|
||||||
|
noPagination
|
||||||
|
@row-clicked2="(item, index) => toggleDetails(index)"
|
||||||
|
loading
|
||||||
|
hover
|
||||||
|
striped
|
||||||
|
optionsRow="onlyFilter2"
|
||||||
|
:defaultSorter="{ name:'username', direction:'desc'}"
|
||||||
|
defaultTableFilter="staff"
|
||||||
|
:defaultColumnFilter="{username:'zby'}"
|
||||||
|
>
|
||||||
|
<template slot="status-header" slot-scope="{item}">
|
||||||
|
Status scoped slot
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- <tempalate slot="sorting-icon" slot-scope={state}>
|
||||||
|
{{state}}
|
||||||
|
</tempalate> -->
|
||||||
|
<!-- <td slot="status-filter" slot-scope="{clear, colName}" @click="clear">
|
||||||
|
<i class="cui-ban icons text-danger d-block mt-2 ml-1"></i>
|
||||||
|
</td> -->
|
||||||
|
<!-- <div slot="underTable">hehe</div>
|
||||||
|
<caption slot="caption" style="caption-side: top;">
|
||||||
|
This is a table caption at the top.
|
||||||
|
</caption> -->
|
||||||
|
<td slot="status" slot-scope="{item}">
|
||||||
|
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||||
|
</td>
|
||||||
|
<!-- <td slot="show_details" slot-scope="{item, index}">
|
||||||
|
<button class="btn btn-primary" @click="toggleDetails(index)">
|
||||||
|
{{details.includes(index) ? 'Hide' : 'Show'}}
|
||||||
|
</button>
|
||||||
|
</td> -->
|
||||||
|
<!-- <td slot="index-col"
|
||||||
|
slot-scope="{index}"
|
||||||
|
@click="toggleDetails(index)"
|
||||||
|
style="cursor:pointer"
|
||||||
|
>
|
||||||
|
<i class="icons font-lg d-block cui-chevron-right"
|
||||||
|
style="transition: transform 0.4s"
|
||||||
|
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
|
||||||
|
</td> -->
|
||||||
|
<CCollapse :show="details.includes(index)"
|
||||||
|
slot="details"
|
||||||
|
slot-scope="{item, index}">
|
||||||
|
<CCardBody>
|
||||||
|
{{index + 1}} - {{item}}
|
||||||
|
</CCardBody>
|
||||||
|
</CCollapse>
|
||||||
|
</CTable>
|
||||||
|
<CPagination v-show="pages > 1"
|
||||||
|
v-model="page"
|
||||||
|
:pages="pages"
|
||||||
|
align="center"
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row>
|
||||||
|
<b-col sm="12">
|
||||||
|
<b-card header="test2">
|
||||||
|
<CTable :items="items.slice(0)"
|
||||||
|
:fields="fields"
|
||||||
|
:perPage="5"
|
||||||
|
indexCol="onlyIndexes2"
|
||||||
|
filterRow
|
||||||
|
optionsRow="onlyFilter2"
|
||||||
|
:paginationProps="{align:'center', size:'lg'}"
|
||||||
|
noPagination
|
||||||
|
>
|
||||||
|
<td slot="status" slot-scope="{item}">
|
||||||
|
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||||
|
</td>
|
||||||
|
</CTable>
|
||||||
|
</b-card>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
|
||||||
|
|
||||||
|
<b-row @click="test">
|
||||||
<b-col lg="6">
|
<b-col lg="6">
|
||||||
<c-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></c-table>
|
<old-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></old-table>
|
||||||
</b-col><!--/.col-->
|
</b-col><!--/.col-->
|
||||||
|
|
||||||
<b-col lg="6">
|
<b-col lg="6">
|
||||||
<c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
|
<old-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></old-table>
|
||||||
</b-col><!--/.col-->
|
</b-col><!--/.col-->
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
|
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col lg="6">
|
<b-col lg="6">
|
||||||
<c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
|
<old-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></old-table>
|
||||||
</b-col><!--/.col-->
|
</b-col><!--/.col-->
|
||||||
|
|
||||||
<b-col lg="6">
|
<b-col lg="6">
|
||||||
<c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
|
<old-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></old-table>
|
||||||
</b-col><!--/.col-->
|
</b-col><!--/.col-->
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
|
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col sm="12">
|
<b-col sm="12">
|
||||||
<c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
|
<old-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></old-table>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import cTable from './Table.vue'
|
import oldTable from './Table.vue'
|
||||||
|
|
||||||
|
// const fields = ['username', 'registered', 'role']
|
||||||
|
const fields = [
|
||||||
|
{ key: 'username', label: 'UsErNaMe', _style:'width:40%'},
|
||||||
|
{ key: 'registered' , style:'width:20%', noSorting: true, noFilter: true},
|
||||||
|
{ key: 'role', _classes: 'table-danger2', _style:'width:20%; color:bluse'},
|
||||||
|
{ key: 'status' },
|
||||||
|
// { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
|
||||||
|
]
|
||||||
|
const items = [
|
||||||
|
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', _classes: 'table-success2',_cellClasses: {role: 'table-success'}, role: 'Member', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
|
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
|
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
|
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
|
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
|
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
|
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
|
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
|
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
|
{number:1.3, username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
|
{number:1.3, username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
|
{number:2.3, username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
|
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
|
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
|
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
|
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
|
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||||
|
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||||
|
]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'tables',
|
name: 'tables',
|
||||||
components: {cTable}
|
components: { oldTable },
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
items: items,
|
||||||
|
fields: fields,
|
||||||
|
page: 1,
|
||||||
|
page2: 1,
|
||||||
|
itemsNumber: 0,
|
||||||
|
pages: null,
|
||||||
|
details: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getBadge (status) {
|
||||||
|
return status === 'Active' ? 'success'
|
||||||
|
: status === 'Inactive' ? 'secondary'
|
||||||
|
: status === 'Pending' ? 'warning'
|
||||||
|
: status === 'Banned' ? 'danger' : 'primary'
|
||||||
|
},
|
||||||
|
test () {
|
||||||
|
this.$refs.table.changeSort('username')
|
||||||
|
this.$refs.table.filter = 't'
|
||||||
|
// console.log(this.items)
|
||||||
|
},
|
||||||
|
test3 (item, index) {
|
||||||
|
alert(index + ' - ' + item.username)
|
||||||
|
// console.log()
|
||||||
|
},
|
||||||
|
log(val) {
|
||||||
|
console.log(val)
|
||||||
|
},
|
||||||
|
toggleDetails (index) {
|
||||||
|
// console.log('hehe')
|
||||||
|
const position = this.details.indexOf(index)
|
||||||
|
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// computed: {
|
||||||
|
// pages () {
|
||||||
|
// return this.$refs.table.pages
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -89,7 +89,8 @@
|
|||||||
</b-card>
|
</b-card>
|
||||||
<b-card
|
<b-card
|
||||||
header-tag="header"
|
header-tag="header"
|
||||||
footer-tag="footer">
|
footer-tag="footer"
|
||||||
|
id="boundary">
|
||||||
<div slot="header">
|
<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>
|
</div>
|
||||||
@@ -111,18 +112,57 @@
|
|||||||
</b-tooltip>
|
</b-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<b-btn @click="test" id="refButton2">
|
||||||
|
test
|
||||||
|
</b-btn><br><br>
|
||||||
|
<b-btn id="refButton" data-toggle="tooltip" class="px-1" >button</b-btn>
|
||||||
|
<CTooltip targetId="refButton"
|
||||||
|
:placement="placement"
|
||||||
|
content="sas"
|
||||||
|
ref="tooltip"
|
||||||
|
:active="true"
|
||||||
|
:popover="show"
|
||||||
|
popoverHeader="smh"
|
||||||
|
:delay="smh"
|
||||||
|
:offset="smh"
|
||||||
|
boundaries="boundary1"
|
||||||
|
:appendToBody="false"
|
||||||
|
/><br><br><br>
|
||||||
|
<!-- :content="this is HTML <b>content!</b>" -->
|
||||||
|
|
||||||
|
<!-- :popover="true"
|
||||||
|
popoverHeader="Something" -->
|
||||||
|
<!-- title="<div class='card'><img src='https://picsum.photos/600/300/?image=25' class='card-img mb-2'><div class='card-header'><div>Card title</div></div><div class='card-body' style='max-height: 200px; overflow-y: auto;'>
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
|
</div></div>" -->
|
||||||
|
<!-- <div class="tooltip" id="hehe33">
|
||||||
|
<div class="inner-tooltip">
|
||||||
|
hfhsdasad
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
</b-card>
|
</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,
|
||||||
|
placement: 'bottom-end'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -138,8 +178,12 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
this.$refs.tooltip2.$emit('disable')
|
this.$refs.tooltip2.$emit('disable')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
test () {
|
||||||
|
this.show = !this.show
|
||||||
|
this.placement = 'right'
|
||||||
|
this.smh = 200
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -15,13 +15,69 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b-button-group>
|
<CButton variant="success" to="/dashboard" disabled>sdjk</CButton>
|
||||||
<b-button>One</b-button>
|
<CButton variant="success" to="/dashboard" role="smh">sdjk</CButton>
|
||||||
<b-button>Two</b-button>
|
|
||||||
<b-button>Three</b-button>
|
<CButton variant="success" :pressed.sync="myToggle">sdjk</CButton>
|
||||||
<b-button>Four</b-button>
|
<CButton variant="success" :pressed.sync="myToggle2">sdjk</CButton>
|
||||||
<b-button class="d-sm-down-none">Five</b-button>
|
|
||||||
</b-button-group>
|
<CButton variant="outline-success" pressed>sdjk</CButton>
|
||||||
|
|
||||||
|
<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>
|
<b-button-group>
|
||||||
<b-button class="d-sm-down-none" variant="success">Success</b-button>
|
<b-button class="d-sm-down-none" variant="success">Success</b-button>
|
||||||
@@ -34,6 +90,43 @@
|
|||||||
</div>
|
</div>
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
|
<CDropdown no-caret show>
|
||||||
|
<img slot="button-content"
|
||||||
|
src="img/avatars/6.jpg"
|
||||||
|
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-col cols="12">
|
||||||
<b-card
|
<b-card
|
||||||
header-tag="header"
|
header-tag="header"
|
||||||
@@ -190,7 +283,31 @@
|
|||||||
</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 () {
|
||||||
|
return {
|
||||||
|
myToggle: false,
|
||||||
|
myToggle2: false,
|
||||||
|
itemsCount: 33
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -115,7 +115,8 @@
|
|||||||
dismissible
|
dismissible
|
||||||
fade
|
fade
|
||||||
:show="showDismissibleAlert"
|
:show="showDismissibleAlert"
|
||||||
@dismissed="showDismissibleAlert=false">
|
@dismissed="showDismissibleAlert=false"
|
||||||
|
>
|
||||||
Dismissible Alert!
|
Dismissible Alert!
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
|
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
|
||||||
|
|||||||
@@ -13,6 +13,8 @@
|
|||||||
<b-button type="button" variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</b-button>
|
<b-button type="button" variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</b-button>
|
||||||
<b-button type="button" variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</b-button>
|
<b-button type="button" variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</b-button>
|
||||||
<b-button type="button" variant="info" @click="infoModal = true" class="mr-1">Launch info modal</b-button>
|
<b-button type="button" variant="info" @click="infoModal = true" class="mr-1">Launch info modal</b-button>
|
||||||
|
<b-button type="button" variant="info" @click="cmodal = !cmodal" class="mr-1">CModal</b-button>
|
||||||
|
|
||||||
</b-card>
|
</b-card>
|
||||||
</b-col><!--/.col-->
|
</b-col><!--/.col-->
|
||||||
</b-row><!--/.row-->
|
</b-row><!--/.row-->
|
||||||
@@ -84,13 +86,53 @@
|
|||||||
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.
|
||||||
</b-modal>
|
</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
|
||||||
|
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.
|
||||||
|
<!-- <div slot="header" class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">new header</h5>
|
||||||
|
<button type="button" class="close closeModal" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div> -->
|
||||||
|
<div slot="body" class="modal-body">
|
||||||
|
n
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer" slot="footer">
|
||||||
|
<button type="button" class="btn btn-secondary closeModal">Close2</button>
|
||||||
|
<button type="button" class="btn btn-primary closeModal">OK2</button>
|
||||||
|
</div>
|
||||||
|
</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,
|
||||||
@@ -100,7 +142,8 @@ export default {
|
|||||||
successModal: false,
|
successModal: false,
|
||||||
warningModal: false,
|
warningModal: false,
|
||||||
dangerModal: false,
|
dangerModal: false,
|
||||||
infoModal: false
|
infoModal: false,
|
||||||
|
cmodal: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user