chore: 3.0.0-alpha.5 version
This commit is contained in:
woothu
@@ -5,6 +5,7 @@ node_modules
|
|||||||
|
|
||||||
/tests/e2e/reports/
|
/tests/e2e/reports/
|
||||||
selenium-debug.log
|
selenium-debug.log
|
||||||
|
chromedriver.log
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
|
|||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: [
|
||||||
['@vue/app']
|
['@babel/preset-env']
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-9
@@ -8,24 +8,22 @@ module.exports = {
|
|||||||
transform: {
|
transform: {
|
||||||
'^.+\\.vue$': 'vue-jest',
|
'^.+\\.vue$': 'vue-jest',
|
||||||
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
|
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
|
||||||
'^.+\\.jsx?$': 'babel-jest'
|
'^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest'
|
||||||
},
|
},
|
||||||
|
transformIgnorePatterns: ['/node_modules/(?!@coreui/icons/vue|coreui)'],
|
||||||
moduleNameMapper: {
|
moduleNameMapper: {
|
||||||
'^@/(.*)$': '<rootDir>/src/$1'
|
'^@/(.*)$': '<rootDir>/src/$1'
|
||||||
},
|
},
|
||||||
snapshotSerializers: [
|
snapshotSerializers: [
|
||||||
'jest-serializer-vue'
|
'jest-serializer-vue'
|
||||||
],
|
],
|
||||||
testMatch: [
|
testMatch: ['<rootDir>/tests/unit/**/*.spec.js'],
|
||||||
'<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
|
|
||||||
'<rootDir>/tests/unit/Dashboard.spec.js'
|
|
||||||
],
|
|
||||||
verbose: true,
|
verbose: true,
|
||||||
testURL: "http://localhost/",
|
testURL: 'http://localhost/',
|
||||||
collectCoverage: true,
|
collectCoverage: true,
|
||||||
collectCoverageFrom: [
|
collectCoverageFrom: [
|
||||||
"src/**/*.{js,vue}",
|
'src/**/*.{js,vue}',
|
||||||
"!**/node_modules/**"
|
'!**/node_modules/**'
|
||||||
],
|
],
|
||||||
coverageReporters: ["html", "text-summary"]
|
coverageReporters: ['html', 'text-summary']
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+5989
-30417
File diff suppressed because it is too large
Load Diff
+19
-20
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@coreui/coreui-free-vue-admin-template",
|
"name": "@coreui/coreui-free-vue-admin-template",
|
||||||
"version": "3.0.0-alpha.4",
|
"version": "3.0.0-alpha.5",
|
||||||
"description": "Open Source Bootstrap Admin Template",
|
"description": "Open Source Bootstrap Admin Template",
|
||||||
"author": "Łukasz Holeczek",
|
"author": "Łukasz Holeczek",
|
||||||
"homepage": "http://coreui.io",
|
"homepage": "http://coreui.io",
|
||||||
@@ -14,30 +14,29 @@
|
|||||||
"test:e2e": "vue-cli-service test:e2e"
|
"test:e2e": "vue-cli-service test:e2e"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@coreui/coreui": "next",
|
"@coreui/coreui": "3.0.0-alpha.14",
|
||||||
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
|
"@coreui/coreui-chartjs": "coreui/coreui-chartjs#v2",
|
||||||
"@coreui/coreui-vue-chartjs": "coreui/coreui-vue-chartjs",
|
|
||||||
"@coreui/icons": "coreui/coreui-icons#v1-alpha",
|
"@coreui/icons": "coreui/coreui-icons#v1-alpha",
|
||||||
"@coreui/vue": "coreui/coreui-vue#3.0.0-alpha.4",
|
"@coreui/vue": "coreui/coreui-vue#3.0.0-alpha.5",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
"vue-router": "^3.0.7"
|
"vue-router": "^3.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "^3.9.2",
|
"@vue/cli-plugin-babel": "^4.0.4",
|
||||||
"@vue/cli-plugin-e2e-nightwatch": "^3.9.2",
|
"@vue/cli-plugin-e2e-nightwatch": "^4.0.4",
|
||||||
"@vue/cli-plugin-eslint": "^3.9.2",
|
"@vue/cli-plugin-eslint": "^4.0.4",
|
||||||
"@vue/cli-plugin-unit-jest": "^3.9.0",
|
"@vue/cli-plugin-unit-jest": "^4.0.4",
|
||||||
"@vue/cli-service": "^3.9.2",
|
"@vue/cli-service": "^4.0.4",
|
||||||
"@vue/test-utils": "^1.0.0-beta.25",
|
"@vue/test-utils": "^1.0.0-beta.29",
|
||||||
"babel-core": "^6.26.3",
|
"@babel/core": "7.6.4",
|
||||||
"babel-plugin-dynamic-import-node": "^2.3.0",
|
"babel-eslint": "^10.0.3",
|
||||||
"babel-plugin-module-resolver": "^3.2.0",
|
"babel-jest": "24.9.0",
|
||||||
"babel-preset-vue-app": "^2.0.0",
|
"core-js": "3.3.2",
|
||||||
"babel-jest": "23.6.0",
|
"chromedriver": "^77.0.0",
|
||||||
"growl": "^1.10.5",
|
"eslint": "^6.5.1",
|
||||||
"https-proxy-agent": "^2.2.2",
|
"eslint-plugin-vue": "^5.2.3",
|
||||||
"node-sass": "^4.12.0",
|
"node-sass": "^4.12.0",
|
||||||
"sass-loader": "^7.1.0",
|
"sass-loader": "^8.0.0",
|
||||||
"vue-template-compiler": "^2.6.10"
|
"vue-template-compiler": "^2.6.10"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
|
|||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376 178">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-2 {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>Base_negative</title>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-2" d="M128,56.1244,89,33.6077a12,12,0,0,0-12,0L38,56.1243a12.0339,12.0339,0,0,0-6,10.3924V111.55a12.0333,12.0333,0,0,0,6,10.3923L77,144.459a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V66.5167A12.0336,12.0336,0,0,0,128,56.1244ZM126,111.55a4,4,0,0,1-2,3.4641L85,137.5308a4,4,0,0,1-4,0L42,115.0141a4,4,0,0,1-2-3.4641V66.5167a4,4,0,0,1,2-3.4641L81,40.5359a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-2" d="M106.0216,102.0713h-2.866a3.9993,3.9993,0,0,0-1.9246.4935L83.95,112.05,64,100.5315V77.554L83.95,66.0354l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V71.2691a2,2,0,0,0-1.04-1.7547L87.793,59.0188a8.0391,8.0391,0,0,0-7.8428.09L60,70.6262A8.0245,8.0245,0,0,0,56,77.5549v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,106.0216,102.0713Z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-2" d="M200.7447,65.4285a15.0166,15.0166,0,0,0-15,14.9995V97.7054a15,15,0,1,0,30,0V80.428A15.0166,15.0166,0,0,0,200.7447,65.4285Zm7,32.2769a7,7,0,1,1-14,0V80.428a7,7,0,0,1,14,0Z"/>
|
||||||
|
<path class="cls-2" d="M164.0788,73.4878a7.01,7.01,0,0,1,7.8681,6.0752.9893.9893,0,0,0,.9843.865h6.0305a1.0109,1.0109,0,0,0,.9987-1.0971,15.0183,15.0183,0,0,0-15.7162-13.8837A15.288,15.288,0,0,0,150,80.8635V97.27a15.288,15.288,0,0,0,14.2441,15.4163A15.0184,15.0184,0,0,0,179.96,98.8025a1.0108,1.0108,0,0,0-.9987-1.0971h-6.0305a.9893.9893,0,0,0-.9843.865,7.01,7.01,0,0,1-7.868,6.0757A7.1642,7.1642,0,0,1,158,97.4612V80.6724A7.1638,7.1638,0,0,1,164.0788,73.4878Z"/>
|
||||||
|
<path class="cls-2" d="M246.9222,92.9944a12.1584,12.1584,0,0,0,7.1842-11.0771V78.2161A12.1494,12.1494,0,0,0,241.957,66.0667H225a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1v-17h6.6215l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8158-11.0771a4.1538,4.1538,0,0,1-4.1489,4.1494h-9.8511v-12h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
|
||||||
|
<path class="cls-2" d="M289,66.0667H263a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-12h13a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-10h19a1,1,0,0,0,1-1v-6A1,1,0,0,0,289,66.0667Z"/>
|
||||||
|
<path class="cls-2" d="M327,66.0667h-6a1,1,0,0,0-1,1V89.7142a7.0066,7.0066,0,1,1-14,0V67.0667a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V89.7142a15.0031,15.0031,0,1,0,30,0V67.0667A1,1,0,0,0,327,66.0667Z"/>
|
||||||
|
<rect class="cls-2" x="336" y="66.0667" width="8" height="38" rx="1"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
<svg id="Warstwa_1" data-name="Warstwa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376.0106 178">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #3c4b64;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>Base</title>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M128,56.1244,89,33.6077a12,12,0,0,0-12,0L38,56.1243a12.0339,12.0339,0,0,0-6,10.3924V111.55a12.0333,12.0333,0,0,0,6,10.3923L77,144.459a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V66.5167A12.0336,12.0336,0,0,0,128,56.1244ZM126,111.55a4,4,0,0,1-2,3.4641L85,137.5308a4,4,0,0,1-4,0L42,115.0141a4,4,0,0,1-2-3.4641V66.5167a4,4,0,0,1,2-3.4641L81,40.5359a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-1" d="M106.0216,102.0713h-2.866a3.9993,3.9993,0,0,0-1.9246.4935L83.95,112.05,64,100.5315V77.554L83.95,66.0354l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V71.2691a2,2,0,0,0-1.04-1.7547L87.793,59.0188a8.0391,8.0391,0,0,0-7.8428.09L60,70.6262A8.0245,8.0245,0,0,0,56,77.5549v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,106.0216,102.0713Z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M200.7447,65.4285a15.0166,15.0166,0,0,0-15,14.9995V97.7054a15,15,0,1,0,30,0V80.428A15.0166,15.0166,0,0,0,200.7447,65.4285Zm7,32.2769a7,7,0,1,1-14,0V80.428a7,7,0,0,1,14,0Z"/>
|
||||||
|
<path class="cls-1" d="M164.0788,73.4878a7.01,7.01,0,0,1,7.8681,6.0752.9893.9893,0,0,0,.9843.865h6.0305a1.0109,1.0109,0,0,0,.9987-1.0971,15.0183,15.0183,0,0,0-15.7162-13.8837A15.288,15.288,0,0,0,150,80.8635V97.27a15.288,15.288,0,0,0,14.2441,15.4163A15.0184,15.0184,0,0,0,179.96,98.8025a1.0108,1.0108,0,0,0-.9987-1.0971h-6.0305a.9893.9893,0,0,0-.9843.865,7.01,7.01,0,0,1-7.868,6.0757A7.1642,7.1642,0,0,1,158,97.4612V80.6724A7.1638,7.1638,0,0,1,164.0788,73.4878Z"/>
|
||||||
|
<path class="cls-1" d="M246.9222,92.9944a12.1584,12.1584,0,0,0,7.1842-11.0771V78.2161A12.1494,12.1494,0,0,0,241.957,66.0667H225a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1v-17h6.6215l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8158-11.0771a4.1538,4.1538,0,0,1-4.1489,4.1494h-9.8511v-12h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
|
||||||
|
<path class="cls-1" d="M289,66.0667H263a1,1,0,0,0-1,1v44a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-12h13a1,1,0,0,0,1-1v-6a1,1,0,0,0-1-1H270v-10h19a1,1,0,0,0,1-1v-6A1,1,0,0,0,289,66.0667Z"/>
|
||||||
|
<path class="cls-1" d="M327,66.0667h-6a1,1,0,0,0-1,1V89.7142a7.0066,7.0066,0,1,1-14,0V67.0667a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V89.7142a15.0031,15.0031,0,1,0,30,0V67.0667A1,1,0,0,0,327,66.0667Z"/>
|
||||||
|
<rect class="cls-1" x="336" y="66.0667" width="8" height="38" rx="1"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>signet_white</title>
|
||||||
|
<g id="Warstwa_1" data-name="Warstwa 1">
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-1" d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #3c4b64;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<title>signet</title>
|
||||||
|
<g id="Warstwa_1" data-name="Warstwa 1">
|
||||||
|
<g>
|
||||||
|
<path class="cls-1" d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
|
||||||
|
<path class="cls-1" d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,53 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve">
|
|
||||||
<style type="text/css">
|
|
||||||
.st0{fill:#1FA8D7;}
|
|
||||||
.st1{fill:#FFFFFF;}
|
|
||||||
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st5{fill:#333333;}
|
|
||||||
.st6{fill:#1EA7D6;}
|
|
||||||
</style>
|
|
||||||
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
|
|
||||||
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
|
|
||||||
86.6,166.7 144.3,133.3 115.5,116.7 "/>
|
|
||||||
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
|
|
||||||
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
|
|
||||||
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
|
|
||||||
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
|
|
||||||
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
|
|
||||||
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
|
|
||||||
<g>
|
|
||||||
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
|
|
||||||
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
|
|
||||||
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
|
|
||||||
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
|
|
||||||
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
|
|
||||||
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
|
|
||||||
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
|
|
||||||
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
|
|
||||||
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
|
|
||||||
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
|
|
||||||
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
|
|
||||||
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
|
|
||||||
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
|
|
||||||
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
|
|
||||||
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
|
|
||||||
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
|
|
||||||
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
|
|
||||||
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
|
|
||||||
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
|
|
||||||
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
|
|
||||||
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
|
|
||||||
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
|
|
||||||
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
|
|
||||||
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
|
|
||||||
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
|
|
||||||
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
|
|
||||||
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,53 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
width="173.2px" height="200px" viewBox="0 0 173.2 200" style="enable-background:new 0 0 173.2 200;" xml:space="preserve">
|
|
||||||
<style type="text/css">
|
|
||||||
.st0{fill:#1FA8D7;}
|
|
||||||
.st1{fill:#FFFFFF;}
|
|
||||||
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
|
|
||||||
.st5{fill:#333333;}
|
|
||||||
.st6{fill:#1EA7D6;}
|
|
||||||
</style>
|
|
||||||
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
|
|
||||||
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
|
|
||||||
86.6,166.7 144.3,133.3 115.5,116.7 "/>
|
|
||||||
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
|
|
||||||
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
|
|
||||||
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
|
|
||||||
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
|
|
||||||
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
|
|
||||||
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
|
|
||||||
<g>
|
|
||||||
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
|
|
||||||
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
|
|
||||||
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
|
|
||||||
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
|
|
||||||
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
|
|
||||||
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
|
|
||||||
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
|
|
||||||
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
|
|
||||||
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
|
|
||||||
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
|
|
||||||
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
|
|
||||||
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
|
|
||||||
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
|
|
||||||
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
|
|
||||||
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
|
|
||||||
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
|
|
||||||
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
|
|
||||||
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
|
|
||||||
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
|
|
||||||
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
|
|
||||||
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
|
|
||||||
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
|
|
||||||
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
|
|
||||||
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
|
|
||||||
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
|
|
||||||
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
|
|
||||||
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
+1
-1
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'app'
|
name: 'App'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -4,5 +4,8 @@
|
|||||||
// Import styles
|
// Import styles
|
||||||
@import "~@coreui/coreui/scss/coreui";
|
@import "~@coreui/coreui/scss/coreui";
|
||||||
|
|
||||||
|
// Import custom tooltips styles
|
||||||
|
@import "~@coreui/coreui-chartjs/custom-tooltips/dist/css/coreui-chartjs.css";
|
||||||
|
|
||||||
// If you want to add something do it here
|
// If you want to add something do it here
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|||||||
@@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<CDropdown
|
|
||||||
nav
|
|
||||||
no-caret
|
|
||||||
no-popper
|
|
||||||
add-menu-classes="c-dropdown-menu-right"
|
|
||||||
>
|
|
||||||
<template #button-content>
|
|
||||||
<img
|
|
||||||
src="img/avatars/6.jpg"
|
|
||||||
class="c-img-avatar"
|
|
||||||
alt="admin@bootstrapmaster.com"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<CDropdownHeader tag="div" class="c-text-center">
|
|
||||||
<strong>Account</strong>
|
|
||||||
</CDropdownHeader>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-bell"/> Updates
|
|
||||||
<CBadge variant="info" additional-classes="hehe">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-envelope-open" /> Messages
|
|
||||||
<CBadge variant="success">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-task" /> Tasks
|
|
||||||
<CBadge variant="danger">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-comment-square" /> Comments
|
|
||||||
<CBadge variant="warning">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownHeader
|
|
||||||
tag="div"
|
|
||||||
class="c-text-center"
|
|
||||||
>
|
|
||||||
<strong>Settings</strong>
|
|
||||||
</CDropdownHeader>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-user" /> Profile
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-wrench" /> Settings
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-dollar" /> Payments
|
|
||||||
<CBadge variant="secondary">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-file" /> Projects
|
|
||||||
<CBadge variant="primary">{{ itemsCount }}</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownDivider/>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-shield" /> Lock Account
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem>
|
|
||||||
<i class="cui-lock-locked" /> Logout
|
|
||||||
</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'DefaultHeaderDropdownAccnt',
|
|
||||||
data: () => {
|
|
||||||
return { itemsCount: 42 }
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,18 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-app c-default-layout">
|
<div class="c-app">
|
||||||
<TheHeader/>
|
|
||||||
<TheSidebar/>
|
<TheSidebar/>
|
||||||
<div class="c-body">
|
<div class="c-wrapper">
|
||||||
<main class="c-main">
|
<TheHeader/>
|
||||||
<CBreadcrumbRouter/>
|
<div class="c-body">
|
||||||
<CContainer fluid>
|
<main class="c-main">
|
||||||
<transition name="fade">
|
<CContainer fluid>
|
||||||
<router-view></router-view>
|
<transition name="fade">
|
||||||
</transition>
|
<router-view></router-view>
|
||||||
</CContainer>
|
</transition>
|
||||||
</main>
|
</CContainer>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<TheFooter/>
|
||||||
</div>
|
</div>
|
||||||
<TheFooter/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -22,7 +23,7 @@ import TheHeader from './TheHeader'
|
|||||||
import TheFooter from './TheFooter'
|
import TheFooter from './TheFooter'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'full',
|
name: 'TheContainer',
|
||||||
components: {
|
components: {
|
||||||
TheSidebar,
|
TheSidebar,
|
||||||
TheHeader,
|
TheHeader,
|
||||||
@@ -2,10 +2,10 @@
|
|||||||
<CFooter>
|
<CFooter>
|
||||||
<div>
|
<div>
|
||||||
<a href="https://coreui.io">CoreUI</a>
|
<a href="https://coreui.io">CoreUI</a>
|
||||||
<span class="c-ml-1">© 2018 creativeLabs.</span>
|
<span class="ml-1">© 2019 creativeLabs.</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-ml-auto">
|
<div class="ml-auto">
|
||||||
<span class="c-mr-1">Powered by</span>
|
<span class="mr-1">Powered by</span>
|
||||||
<a href="https://coreui.io">CoreUI for Vue</a>
|
<a href="https://coreui.io">CoreUI for Vue</a>
|
||||||
</div>
|
</div>
|
||||||
</CFooter>
|
</CFooter>
|
||||||
|
|||||||
@@ -1,43 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<CHeader fixed>
|
<CHeader fixed with-subheader light>
|
||||||
<CSidebarToggler class="c-header-toggler c-d-lg-none"/>
|
<CToggler
|
||||||
<CLink class="c-header-brand" to="#">
|
in-header
|
||||||
<img class="c-navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
|
class="c-header-toggler ml-3"
|
||||||
<!-- <img class="c-navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo"> -->
|
v-c-emit-root-event:toggle-sidebar
|
||||||
</CLink>
|
/>
|
||||||
<CSidebarToggler class="c-header-toggler c-d-md-down-none"/>
|
<img
|
||||||
<ul class="c-header-nav c-d-md-down-none">
|
class="c-header-brand mx-auto d-lg-none"
|
||||||
<CNavItem class="c-px-3" to="/dashboard">Dashboard</CNavItem>
|
src="img/brand/coreui-base.svg"
|
||||||
<CNavItem class="c-px-3" to="/users" exact>Users</CNavItem>
|
width="97"
|
||||||
<CNavItem class="c-px-3">Settings</CNavItem>
|
height="46"
|
||||||
</ul>
|
alt="CoreUI Logo"
|
||||||
<CNav class="c-header-nav c-ml-auto">
|
/>
|
||||||
<CNavItem class="c-d-md-down-none">
|
<CHeaderNav class="d-md-down-none mr-auto">
|
||||||
|
<CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
|
||||||
|
<CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
|
||||||
|
<CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
|
||||||
|
</CHeaderNav>
|
||||||
|
<CHeaderNav class="mr-4">
|
||||||
|
<CHeaderNavItem class="d-md-down-none mx-2">
|
||||||
<i class="cui-bell"></i>
|
<i class="cui-bell"></i>
|
||||||
<CBadge pill variant="danger">5</CBadge>
|
</CHeaderNavItem>
|
||||||
</CNavItem>
|
<CHeaderNavItem class="d-md-down-none mx-2">
|
||||||
<CNavItem class="c-d-md-down-none">
|
|
||||||
<i class="cui-list"></i>
|
<i class="cui-list"></i>
|
||||||
</CNavItem>
|
</CHeaderNavItem>
|
||||||
<CNavItem class="d-md-down-none">
|
<CHeaderNavItem class="d-md-down-none mx-2">
|
||||||
<i class="cui-location-pin"></i>
|
<i class="cui-envelope-open"></i>
|
||||||
</CNavItem>
|
</CHeaderNavItem>
|
||||||
<DefaultHeaderDropdownAccnt/>
|
<TheHeaderDropdownAccnt/>
|
||||||
</CNav>
|
</CHeaderNav>
|
||||||
<!-- <CSidebarToggler
|
<div class="c-subheader px-3">
|
||||||
class="c-header-toggler c-d-md-down-none"
|
<CBreadcrumbRouter class="border-0"/>
|
||||||
aside
|
</div>
|
||||||
/> -->
|
|
||||||
</CHeader>
|
</CHeader>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
|
import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TheHeader',
|
name: 'TheHeader',
|
||||||
components: {
|
components: {
|
||||||
DefaultHeaderDropdownAccnt
|
TheHeaderDropdownAccnt
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<CDropdown
|
||||||
|
nav
|
||||||
|
no-caret
|
||||||
|
class="c-header-nav-items"
|
||||||
|
placement="bottom-end"
|
||||||
|
add-menu-classes="pt-0"
|
||||||
|
:show.sync="show"
|
||||||
|
>
|
||||||
|
<template #toggler>
|
||||||
|
<CLink class="c-header-nav-link" @click="show = !show">
|
||||||
|
<div class="c-avatar">
|
||||||
|
<img
|
||||||
|
src="img/avatars/6.jpg"
|
||||||
|
class="c-avatar-img "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CLink>
|
||||||
|
</template>
|
||||||
|
<CDropdownHeader tag="div" class="text-center" color="light">
|
||||||
|
<strong>Account</strong>
|
||||||
|
</CDropdownHeader>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-bell mr-2"/> Updates
|
||||||
|
<CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-envelope-open mr-2" /> Messages
|
||||||
|
<CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-task mr-2" /> Tasks
|
||||||
|
<CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-comment-square mr-2" /> Comments
|
||||||
|
<CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownHeader
|
||||||
|
tag="div"
|
||||||
|
class="text-center"
|
||||||
|
color="light"
|
||||||
|
>
|
||||||
|
<strong>Settings</strong>
|
||||||
|
</CDropdownHeader>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-user mr-2" /> Profile
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-wrench mr-2" /> Settings
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-dollar mr-2" /> Payments
|
||||||
|
<CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-file mr-2" /> Projects
|
||||||
|
<CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownDivider/>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-shield mr-2" /> Lock Account
|
||||||
|
</CDropdownItem>
|
||||||
|
<CDropdownItem>
|
||||||
|
<i class="cui-lock-locked mr-2" /> Logout
|
||||||
|
</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TheHeaderDropdownAccnt',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
itemsCount: 42,
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,10 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<CSidebar fixed>
|
<CSidebar
|
||||||
<CSidebarHeader/>
|
fixed
|
||||||
<CSidebarForm/>
|
:minimize="minimize"
|
||||||
<CSidebarNav :nav-items="computedNav"/>
|
:show="show"
|
||||||
<CSidebarFooter/>
|
>
|
||||||
<CSidebarMinimizer/>
|
<CSidebarBrand
|
||||||
|
fullSrc="img/brand/coreui-base-white.svg"
|
||||||
|
minimizedSrc="img/brand/coreui-signet-white.svg"
|
||||||
|
:wrappedInLink="{ href: 'https://coreui.io/', target: '_blank'}"
|
||||||
|
/>
|
||||||
|
<!-- <CSidebarHeader/> -->
|
||||||
|
<!-- <CSidebarForm/> -->
|
||||||
|
<CRenderFunction :contentToRender="nav"/>
|
||||||
|
<!-- <CSidebarFooter/> -->
|
||||||
|
<CSidebarMinimizer
|
||||||
|
class="d-md-down-none"
|
||||||
|
@click.native="minimize = !minimize"
|
||||||
|
/>
|
||||||
</CSidebar>
|
</CSidebar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -12,10 +24,15 @@
|
|||||||
import nav from './_nav'
|
import nav from './_nav'
|
||||||
export default {
|
export default {
|
||||||
name: 'TheSidebar',
|
name: 'TheSidebar',
|
||||||
computed: {
|
data () {
|
||||||
computedNav () {
|
return {
|
||||||
return nav.items.filter(item => item.name !== 'Dashboard')
|
minimize: false,
|
||||||
|
nav,
|
||||||
|
show: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$root.$on('toggle-sidebar', () => this.show = !this.show)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+463
-256
@@ -1,264 +1,471 @@
|
|||||||
export default {
|
export default [
|
||||||
items: [
|
'CSidebarNav',
|
||||||
{
|
[
|
||||||
name: 'Dashboard',
|
[
|
||||||
url: '/dashboard',
|
'CSidebarNavLink',
|
||||||
icon: 'cui-speedometer',
|
{
|
||||||
badge: {
|
props: {
|
||||||
variant: 'primary',
|
name: 'Dashboard',
|
||||||
text: 'NEW'
|
to: '/dashboard',
|
||||||
}
|
icon: 'cui-speedometer',
|
||||||
},
|
|
||||||
{
|
|
||||||
title: true,
|
|
||||||
name: 'Theme',
|
|
||||||
class: '',
|
|
||||||
wrapper: {
|
|
||||||
element: '',
|
|
||||||
attributes: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Colors',
|
|
||||||
url: '/theme/colors',
|
|
||||||
icon: 'cui-drop'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Typography',
|
|
||||||
url: '/theme/typography',
|
|
||||||
icon: 'cui-pencil'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: true,
|
|
||||||
name: 'Components',
|
|
||||||
class: '',
|
|
||||||
wrapper: {
|
|
||||||
element: '',
|
|
||||||
attributes: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Base',
|
|
||||||
url: '/base',
|
|
||||||
icon: 'cui-puzzle',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Breadcrumbs',
|
|
||||||
url: '/base/breadcrumbs',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Cards',
|
|
||||||
url: '/base/cards',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Carousels',
|
|
||||||
url: '/base/carousels',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Collapses',
|
|
||||||
url: '/base/collapses',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Forms',
|
|
||||||
url: '/base/forms',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jumbotrons',
|
|
||||||
url: '/base/jumbotrons',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'List Groups',
|
|
||||||
url: '/base/list-groups',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Navs',
|
|
||||||
url: '/base/navs',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Navbars',
|
|
||||||
url: '/base/navbars',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Paginations',
|
|
||||||
url: '/base/paginations',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Popovers',
|
|
||||||
url: '/base/popovers',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Progress Bars',
|
|
||||||
url: '/base/progress-bars',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Switches',
|
|
||||||
url: '/base/switches',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Tables',
|
|
||||||
url: '/base/tables',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Tabs',
|
|
||||||
url: '/base/tabs',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Tooltips',
|
|
||||||
url: '/base/tooltips',
|
|
||||||
icon: 'cui-puzzle'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Buttons',
|
|
||||||
url: '/buttons',
|
|
||||||
icon: 'cui-cursor',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Buttons',
|
|
||||||
url: '/buttons/standard-buttons',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Button Dropdowns',
|
|
||||||
url: '/buttons/dropdowns',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Button Groups',
|
|
||||||
url: '/buttons/button-groups',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Brand Buttons',
|
|
||||||
url: '/buttons/brand-buttons',
|
|
||||||
icon: 'cui-cursor'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Charts',
|
|
||||||
url: '/charts',
|
|
||||||
icon: 'cui-pie-chart'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Icons',
|
|
||||||
url: '/icons',
|
|
||||||
icon: 'cui-star',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'CoreUI Icons',
|
|
||||||
url: '/icons/coreui-icons',
|
|
||||||
icon: 'cui-star',
|
|
||||||
badge: {
|
badge: {
|
||||||
variant: 'info',
|
color: 'primary',
|
||||||
text: 'NEW'
|
text: 'NEW'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Brands',
|
|
||||||
url: '/icons/brands',
|
|
||||||
icon: 'cui-star'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Flags',
|
|
||||||
url: '/icons/flags',
|
|
||||||
icon: 'cui-star'
|
|
||||||
}
|
}
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Notifications',
|
|
||||||
url: '/notifications',
|
|
||||||
icon: 'cui-bell',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Alerts',
|
|
||||||
url: '/notifications/alerts',
|
|
||||||
icon: 'cui-bell'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Badges',
|
|
||||||
url: '/notifications/badges',
|
|
||||||
icon: 'cui-bell'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Modals',
|
|
||||||
url: '/notifications/modals',
|
|
||||||
icon: 'cui-bell'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Widgets',
|
|
||||||
url: '/widgets',
|
|
||||||
icon: 'cui-calculator',
|
|
||||||
badge: {
|
|
||||||
variant: 'primary',
|
|
||||||
text: 'NEW'
|
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
{
|
[
|
||||||
divider: true
|
'CSidebarNavTitle',
|
||||||
},
|
['Theme']
|
||||||
{
|
],
|
||||||
title: true,
|
[
|
||||||
name: 'Extras'
|
'CSidebarNavLink',
|
||||||
},
|
{
|
||||||
{
|
props: {
|
||||||
name: 'Pages',
|
name: 'Colors',
|
||||||
url: '/pages',
|
to: '/theme/colors',
|
||||||
icon: 'cui-star',
|
icon: 'cui-drop'
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Login',
|
|
||||||
url: '/pages/login',
|
|
||||||
icon: 'cui-star'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Register',
|
|
||||||
url: '/pages/register',
|
|
||||||
icon: 'cui-star'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Error 404',
|
|
||||||
url: '/pages/404',
|
|
||||||
icon: 'cui-star'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Error 500',
|
|
||||||
url: '/pages/500',
|
|
||||||
icon: 'cui-star'
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Typography',
|
||||||
|
to: '/theme/typography',
|
||||||
|
icon: 'cui-pencil'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavTitle',
|
||||||
|
['Components']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Base',
|
||||||
|
route: '/base',
|
||||||
|
icon: 'cui-puzzle',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Breadcrumbs',
|
||||||
|
to: '/base/breadcrumbs',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Cards',
|
||||||
|
to: '/base/cards',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Carousels',
|
||||||
|
to: '/base/carousels',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Collapses',
|
||||||
|
to: '/base/collapses',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Forms',
|
||||||
|
to: '/base/forms',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Jumbotrons',
|
||||||
|
to: '/base/jumbotrons',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'List Groups',
|
||||||
|
to: '/base/list-groups',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Navs',
|
||||||
|
to: '/base/navs',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Navbars',
|
||||||
|
to: '/base/navbars',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Paginations',
|
||||||
|
to: '/base/paginations',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Popovers',
|
||||||
|
to: '/base/popovers',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Progress Bars',
|
||||||
|
to: '/base/progress-bars',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Switches',
|
||||||
|
to: '/base/switches',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Tables',
|
||||||
|
to: '/base/tables',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Tabs',
|
||||||
|
to: '/base/tabs',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Tooltips',
|
||||||
|
to: '/base/tooltips',
|
||||||
|
icon: 'cui-puzzle'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
]
|
]
|
||||||
},
|
],
|
||||||
{
|
[
|
||||||
name: 'Download CoreUI',
|
'CSidebarNavDropdown',
|
||||||
url: 'http://coreui.io/vue/',
|
{
|
||||||
icon: 'cui-cloud-download',
|
props: {
|
||||||
class: 'mt-auto',
|
name: 'Buttons',
|
||||||
variant: 'success'
|
route: '/buttons',
|
||||||
},
|
icon: 'cui-cursor',
|
||||||
{
|
}
|
||||||
name: 'Try CoreUI PRO',
|
},
|
||||||
url: 'http://coreui.io/pro/vue/',
|
[
|
||||||
icon: 'cui-layers',
|
[
|
||||||
variant: 'danger'
|
'CSidebarNavLink',
|
||||||
}
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Buttons',
|
||||||
|
to: '/buttons/standard-buttons',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Button Dropdowns',
|
||||||
|
to: '/buttons/dropdowns',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Button Groups',
|
||||||
|
to: '/buttons/button-groups',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Brand Buttons',
|
||||||
|
to: '/buttons/brand-buttons',
|
||||||
|
icon: 'cui-cursor'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Charts',
|
||||||
|
to: '/charts',
|
||||||
|
icon: 'cui-pie-chart'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Icons',
|
||||||
|
route: '/icons',
|
||||||
|
icon: 'cui-star',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'CoreUI Icons',
|
||||||
|
to: '/icons/coreui-icons',
|
||||||
|
icon: 'cui-star',
|
||||||
|
badge: {
|
||||||
|
color: 'info',
|
||||||
|
text: 'NEW'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Brands',
|
||||||
|
to: '/icons/brands',
|
||||||
|
icon: 'cui-star'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Flags',
|
||||||
|
to: '/icons/flags',
|
||||||
|
icon: 'cui-star'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Notifications',
|
||||||
|
route: '/notifications',
|
||||||
|
icon: 'cui-bell',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Alerts',
|
||||||
|
to: '/notifications/alerts',
|
||||||
|
icon: 'cui-bell'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Badges',
|
||||||
|
to: '/notifications/badges',
|
||||||
|
icon: 'cui-bell'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Modals',
|
||||||
|
to: '/notifications/modals',
|
||||||
|
icon: 'cui-bell'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Widgets',
|
||||||
|
to: '/widgets',
|
||||||
|
icon: 'cui-calculator',
|
||||||
|
badge: {
|
||||||
|
color: 'primary',
|
||||||
|
text: 'NEW',
|
||||||
|
pill: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDivider',
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavTitle',
|
||||||
|
['Extras']
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavDropdown',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Pages',
|
||||||
|
route: '/pages',
|
||||||
|
icon: 'cui-star',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Login',
|
||||||
|
to: '/pages/login',
|
||||||
|
icon: 'cui-star'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Register',
|
||||||
|
to: '/pages/register',
|
||||||
|
icon: 'cui-star'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Error 404',
|
||||||
|
to: '/pages/404',
|
||||||
|
icon: 'cui-star'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Error 500',
|
||||||
|
to: '/pages/500',
|
||||||
|
icon: 'cui-star'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Download CoreUI',
|
||||||
|
href: 'http://coreui.io/vue/',
|
||||||
|
icon: 'cui-cloud-download',
|
||||||
|
addLinkClasses: 'c-nav-link-success',
|
||||||
|
target: '_blank'
|
||||||
|
},
|
||||||
|
attrs: {
|
||||||
|
class: 'mt-auto',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'CSidebarNavLink',
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
name: 'Try CoreUI PRO',
|
||||||
|
href: 'http://coreui.io/pro/vue/',
|
||||||
|
icon: 'cui-layers',
|
||||||
|
addLinkClasses: 'c-nav-link-danger',
|
||||||
|
target: '_blank'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
]
|
]
|
||||||
}
|
]
|
||||||
|
|
||||||
|
|||||||
+11
-6
@@ -2,7 +2,7 @@ import Vue from 'vue'
|
|||||||
import Router from 'vue-router'
|
import Router from 'vue-router'
|
||||||
|
|
||||||
// Containers
|
// Containers
|
||||||
const DefaultContainer = () => import('@/containers/DefaultContainer')
|
const TheContainer = () => import('@/containers/TheContainer')
|
||||||
|
|
||||||
// Views
|
// Views
|
||||||
const Dashboard = () => import('@/views/Dashboard')
|
const Dashboard = () => import('@/views/Dashboard')
|
||||||
@@ -10,7 +10,7 @@ const Dashboard = () => import('@/views/Dashboard')
|
|||||||
const Colors = () => import('@/views/theme/Colors')
|
const Colors = () => import('@/views/theme/Colors')
|
||||||
const Typography = () => import('@/views/theme/Typography')
|
const Typography = () => import('@/views/theme/Typography')
|
||||||
|
|
||||||
const Charts = () => import('@/views/Charts')
|
const Charts = () => import('@/views/charts/Charts')
|
||||||
const Widgets = () => import('@/views/widgets/Widgets')
|
const Widgets = () => import('@/views/widgets/Widgets')
|
||||||
|
|
||||||
// Views - Components
|
// Views - Components
|
||||||
@@ -61,14 +61,18 @@ Vue.use(Router)
|
|||||||
|
|
||||||
export default new Router({
|
export default new Router({
|
||||||
mode: 'hash', // https://router.vuejs.org/api/#mode
|
mode: 'hash', // https://router.vuejs.org/api/#mode
|
||||||
linkActiveClass: 'c-active',
|
linkActiveClass: 'active',
|
||||||
scrollBehavior: () => ({ y: 0 }),
|
scrollBehavior: () => ({ y: 0 }),
|
||||||
routes: [
|
routes: configRoutes()
|
||||||
|
})
|
||||||
|
|
||||||
|
function configRoutes () {
|
||||||
|
return [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/dashboard',
|
redirect: '/dashboard',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: DefaultContainer,
|
component: TheContainer,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
@@ -327,4 +331,5 @@ export default new Router({
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
}
|
||||||
|
|
||||||
|
|||||||
+180
-189
@@ -5,19 +5,19 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="5">
|
<CCol sm="5">
|
||||||
<h4 id="traffic" class="c-card-title c-mb-0">Traffic</h4>
|
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||||
<div class="c-small c-text-muted">November 2017</div>
|
<div class="small text-muted">November 2017</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="7" class="c-d-none c-d-md-block">
|
<CCol sm="7" class="d-none d-md-block">
|
||||||
<CButton variant="primary" class="c-float-right">
|
<CButton color="primary" class="float-right">
|
||||||
<i class="cui-cloud-download"></i>
|
<i class="cui-cloud-download"></i>
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButtonGroup class="c-float-right c-mr-3">
|
<CButtonGroup class="float-right mr-3">
|
||||||
<CButton
|
<CButton
|
||||||
variant="outline-secondary"
|
color="outline-secondary"
|
||||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||||
:key="key"
|
:key="key"
|
||||||
class="c-mx-0"
|
class="mx-0"
|
||||||
:pressed="value === selected ? true : false"
|
:pressed="value === selected ? true : false"
|
||||||
@click="selected = value"
|
@click="selected = value"
|
||||||
>
|
>
|
||||||
@@ -29,52 +29,52 @@
|
|||||||
<MainChartExample style="height:300px;margin-top:40px;"/>
|
<MainChartExample style="height:300px;margin-top:40px;"/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CRow class="c-text-center">
|
<CRow class="text-center">
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||||
<div class="c-text-muted">Visits</div>
|
<div class="text-muted">Visits</div>
|
||||||
<strong>29.703 Users (40%)</strong>
|
<strong>29.703 Users (40%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="success"
|
color="success"
|
||||||
:value="40"
|
:value="40"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||||
<div class="c-text-muted">Unique</div>
|
<div class="text-muted">Unique</div>
|
||||||
<strong>24.093 Users (20%)</strong>
|
<strong>24.093 Users (20%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="info"
|
color="info"
|
||||||
:value="20"
|
:value="20"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||||
<div class="c-text-muted">Pageviews</div>
|
<div class="text-muted">Pageviews</div>
|
||||||
<strong>78.706 Views (60%)</strong>
|
<strong>78.706 Views (60%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:value="60"
|
:value="60"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0">
|
<CCol md sm="12" class="mb-sm-2 mb-0">
|
||||||
<div class="c-text-muted">New Users</div>
|
<div class="text-muted">New Users</div>
|
||||||
<strong>22.123 Users (80%)</strong>
|
<strong>22.123 Users (80%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="80"
|
:value="80"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md sm="12" class="c-mb-sm-2 c-mb-0 c-d-md-down-none">
|
<CCol md sm="12" class="mb-sm-2 mb-0 d-md-down-none">
|
||||||
<div class="c-text-muted">Bounce Rate</div>
|
<div class="text-muted">Bounce Rate</div>
|
||||||
<strong>Average Rate (40.15%)</strong>
|
<strong>Average Rate (40.15%)</strong>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs c-mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
:value="40"
|
:value="40"
|
||||||
/>
|
/>
|
||||||
@@ -90,158 +90,158 @@
|
|||||||
<CCol sm="12" lg="6">
|
<CCol sm="12" lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="info">
|
<CCallout color="info">
|
||||||
<small class="c-text-muted">New Clients</small><br>
|
<small class="text-muted">New Clients</small><br>
|
||||||
<strong class="c-h4">9,123</strong>
|
<strong class="h4">9,123</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="danger">
|
<CCallout color="danger">
|
||||||
<small class="c-text-muted">Recurring Clients</small><br>
|
<small class="text-muted">Recurring Clients</small><br>
|
||||||
<strong class="c-h4">22,643</strong>
|
<strong class="h4">22,643</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<hr class="c-mt-0">
|
<hr class="mt-0">
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Monday
|
Monday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
variant="info"
|
color="info"
|
||||||
:value="34"
|
:value="34"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="78"
|
:value="78"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Tuesday
|
Tuesday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="56"
|
:value="56"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="94"
|
:value="94"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Wednesday
|
Wednesday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="12"
|
:value="12"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="67"
|
:value="67"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Thursday
|
Thursday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="43"
|
:value="43"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="91"
|
:value="91"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Friday
|
Friday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="22"
|
:value="22"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="73"
|
:value="73"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Saturday
|
Saturday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="53"
|
:value="53"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="82"
|
:value="82"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-4">
|
<div class="progress-group mb-4">
|
||||||
<div class="c-progress-group-prepend">
|
<div class="progress-group-prepend">
|
||||||
<span class="c-progress-group-text">
|
<span class="progress-group-text">
|
||||||
Sunday
|
Sunday
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="9"
|
:value="9"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="69"
|
:value="69"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-legend c-text-center">
|
<div class="legend text-center">
|
||||||
<small>
|
<small>
|
||||||
<sup><CBadge pill variant="info"> </CBadge></sup>
|
<sup><CBadge pill color="info"> </CBadge></sup>
|
||||||
New clients
|
New clients
|
||||||
|
|
||||||
<sup><CBadge pill variant="danger"> </CBadge></sup>
|
<sup><CBadge pill color="danger"> </CBadge></sup>
|
||||||
Recurring clients
|
Recurring clients
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@@ -249,126 +249,126 @@
|
|||||||
<CCol sm="12" lg="6">
|
<CCol sm="12" lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="warning">
|
<CCallout color="warning">
|
||||||
<small class="c-text-muted">Pageviews</small><br>
|
<small class="text-muted">Pageviews</small><br>
|
||||||
<strong class="c-h4">78,623</strong>
|
<strong class="h4">78,623</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="success">
|
<CCallout color="success">
|
||||||
<small class="c-text-muted">Organic</small><br>
|
<small class="text-muted">Organic</small><br>
|
||||||
<strong class="c-h4">49,123</strong>
|
<strong class="h4">49,123</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<hr class="c-mt-0">
|
<hr class="mt-0">
|
||||||
<ul class="c-horizontal-bars c-type-2">
|
<ul class="horizontal-bars type-2">
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<i class="cui-user c-progress-group-icon"></i>
|
<i class="cui-user progress-group-icon"></i>
|
||||||
<span class="c-title">Male</span>
|
<span class="title">Male</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">43%</span>
|
<span class="ml-auto font-weight-bold">43%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="43"
|
:value="43"
|
||||||
variant="warning"
|
color="warning"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group c-mb-5">
|
<div class="progress-group mb-5">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<i class="cui-user-female c-progress-group-icon"></i>
|
<i class="cui-user-female progress-group-icon"></i>
|
||||||
<span class="c-title">Female</span>
|
<span class="title">Female</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">37%</span>
|
<span class="ml-auto font-weight-bold">37%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="37"
|
:value="37"
|
||||||
variant="warning"
|
color="warning"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<i class="cui-globe c-progress-group-icon"></i>
|
<i class="cui-globe progress-group-icon"></i>
|
||||||
<span class="c-title">Organic Search</span>
|
<span class="title">Organic Search</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
191,235<span class="text-muted small">(56%)</span>
|
191,235<span class="text-muted small">(56%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="56"
|
:value="56"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialFacebook"
|
name="socialFacebook"
|
||||||
height="17"
|
height="17"
|
||||||
class="c-progress-group-icon"
|
class="progress-group-icon"
|
||||||
/>
|
/>
|
||||||
<span class="c-title">Facebook</span>
|
<span class="title">Facebook</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
51,223 <span class="c-text-muted small">(15%)</span>
|
51,223 <span class="text-muted small">(15%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="15"
|
:value="15"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialTwitter"
|
name="socialTwitter"
|
||||||
height="17"
|
height="17"
|
||||||
class="c-progress-group-icon"
|
class="progress-group-icon"
|
||||||
/>
|
/>
|
||||||
<span class="c-title">Twitter</span>
|
<span class="title">Twitter</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
37,564 <span class="c-text-muted c-small">(11%)</span>
|
37,564 <span class="text-muted small">(11%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="11"
|
:value="11"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group">
|
<div class="progress-group">
|
||||||
<div class="c-progress-group-header">
|
<div class="progress-group-header">
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialLinkedin"
|
name="socialLinkedin"
|
||||||
height="17"
|
height="17"
|
||||||
class="c-progress-group-icon"
|
class="progress-group-icon"
|
||||||
/>
|
/>
|
||||||
<span class="c-title">LinkedIn</span>
|
<span class="title">LinkedIn</span>
|
||||||
<span class="c-ml-auto c-font-weight-bold">
|
<span class="ml-auto font-weight-bold">
|
||||||
27,319 <span class="c-text-muted small"> (8%)</span>
|
27,319 <span class="text-muted small"> (8%)</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
:value="8"
|
:value="8"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-divider c-text-center">
|
<div class="divider text-center">
|
||||||
<CButton variant="link" size="sm" class="c-text-muted">
|
<CButton color="link" size="sm" class="text-muted">
|
||||||
<i class="cui-options"></i>
|
<i class="cui-options"></i>
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -377,25 +377,25 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<br/>
|
<br/>
|
||||||
<CTable
|
<CTable
|
||||||
class="c-mb-0 c-table-outline"
|
class="mb-0 table-outline"
|
||||||
hover
|
hover
|
||||||
:items="tableItems"
|
:items="tableItems"
|
||||||
:fields="tableFields"
|
:fields="tableFields"
|
||||||
head-variant="light"
|
head-color="light"
|
||||||
no-sorting
|
no-sorting
|
||||||
>
|
>
|
||||||
<td slot="avatar" class="c-text-center" slot-scope="{item}">
|
<td slot="avatar" class="text-center" slot-scope="{item}">
|
||||||
<div class="c-avatar">
|
<div class="c-avatar">
|
||||||
<img :src="item.avatar.url" class="c-img-avatar" alt="">
|
<img :src="item.avatar.url" class="c-avatar-img" alt="">
|
||||||
<span
|
<span
|
||||||
class="c-avatar-status"
|
class="c-avatar-status"
|
||||||
:class="`c-bg-${item.avatar.status || 'secondary'}`"
|
:class="`bg-${item.avatar.status || 'secondary'}`"
|
||||||
></span>
|
></span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td slot="user" slot-scope="{item}">
|
<td slot="user" slot-scope="{item}">
|
||||||
<div>{{item.user.name}}</div>
|
<div>{{item.user.name}}</div>
|
||||||
<div class="c-small c-text-muted">
|
<div class="small text-muted">
|
||||||
<span>
|
<span>
|
||||||
<template v-if="item.user.new">New</template>
|
<template v-if="item.user.new">New</template>
|
||||||
<template v-else>Recurring</template>
|
<template v-else>Recurring</template>
|
||||||
@@ -405,7 +405,7 @@
|
|||||||
<td
|
<td
|
||||||
slot="country"
|
slot="country"
|
||||||
slot-scope="{item}"
|
slot-scope="{item}"
|
||||||
class="c-text-center"
|
class="text-center"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
:name="item.country.flag"
|
:name="item.country.flag"
|
||||||
@@ -413,24 +413,24 @@
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td slot="usage" slot-scope="{item}">
|
<td slot="usage" slot-scope="{item}">
|
||||||
<div class="c-clearfix">
|
<div class="clearfix">
|
||||||
<div class="c-float-left">
|
<div class="float-left">
|
||||||
<strong>{{item.usage.value}}%</strong>
|
<strong>{{item.usage.value}}%</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-float-right">
|
<div class="float-right">
|
||||||
<small class="c-text-muted">{{item.usage.period}}</small>
|
<small class="text-muted">{{item.usage.period}}</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="c-progress-xs"
|
class="progress-xs"
|
||||||
v-model="item.usage.value"
|
v-model="item.usage.value"
|
||||||
:variant="variant(item.usage.value)"
|
:color="color(item.usage.value)"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
slot="payment"
|
slot="payment"
|
||||||
slot-scope="{item}"
|
slot-scope="{item}"
|
||||||
class="c-text-center"
|
class="text-center"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
:name="item.payment.icon"
|
:name="item.payment.icon"
|
||||||
@@ -438,7 +438,7 @@
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td slot="activity" slot-scope="{item}">
|
<td slot="activity" slot-scope="{item}">
|
||||||
<div class="c-small c-text-muted">Last login</div>
|
<div class="small text-muted">Last login</div>
|
||||||
<strong>{{item.activity}}</strong>
|
<strong>{{item.activity}}</strong>
|
||||||
</td>
|
</td>
|
||||||
</CTable>
|
</CTable>
|
||||||
@@ -452,15 +452,13 @@
|
|||||||
import MainChartExample from './charts/MainChartExample'
|
import MainChartExample from './charts/MainChartExample'
|
||||||
import WidgetsDropdown from './widgets/WidgetsDropdown'
|
import WidgetsDropdown from './widgets/WidgetsDropdown'
|
||||||
import WidgetsBrand from './widgets/WidgetsBrand'
|
import WidgetsBrand from './widgets/WidgetsBrand'
|
||||||
import CChartLineSimple from './charts/CChartLineSimple'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
components: {
|
components: {
|
||||||
MainChartExample,
|
MainChartExample,
|
||||||
WidgetsDropdown,
|
WidgetsDropdown,
|
||||||
WidgetsBrand,
|
WidgetsBrand
|
||||||
CChartLineSimple
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
@@ -516,36 +514,29 @@ export default {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
tableFields: [
|
tableFields: [
|
||||||
{ key: 'avatar', label: '', _classes: 'c-text-center' },
|
{ key: 'avatar', label: '', _classes: 'text-center' },
|
||||||
{ key: 'user' },
|
{ key: 'user' },
|
||||||
{ key: 'country', _classes: 'c-text-center' },
|
{ key: 'country', _classes: 'text-center' },
|
||||||
{ key: 'usage' },
|
{ key: 'usage' },
|
||||||
{ key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
|
{ key: 'payment', label: 'Payment method', _classes: 'text-center' },
|
||||||
{ key: 'activity' },
|
{ key: 'activity' },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
variant (value) {
|
color (value) {
|
||||||
let $variant
|
let $color
|
||||||
if (value <= 25) {
|
if (value <= 25) {
|
||||||
$variant = 'info'
|
$color = 'info'
|
||||||
} else if (value > 25 && value <= 50) {
|
} else if (value > 25 && value <= 50) {
|
||||||
$variant = 'success'
|
$color = 'success'
|
||||||
} else if (value > 50 && value <= 75) {
|
} else if (value > 50 && value <= 75) {
|
||||||
$variant = 'warning'
|
$color = 'warning'
|
||||||
} else if (value > 75 && value <= 100) {
|
} else if (value > 75 && value <= 100) {
|
||||||
$variant = 'danger'
|
$color = 'danger'
|
||||||
}
|
}
|
||||||
return $variant
|
return $color
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
/* IE fix */
|
|
||||||
#card-chart-01, #card-chart-02 {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,74 +1,96 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<CRow>
|
||||||
<div>
|
<CCol col>
|
||||||
<CRow>
|
<CCard>
|
||||||
<CCol col>
|
<CCardHeader>
|
||||||
<CCard>
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
|
||||||
<CCardHeader>
|
<div class="card-header-actions">
|
||||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
|
<a
|
||||||
<!-- <div class="card-header-actions">
|
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
class="card-header-action"
|
||||||
<small class="text-muted">docs</small>
|
rel="noreferrer noopener"
|
||||||
</a>
|
target="_blank"
|
||||||
</div> -->
|
>
|
||||||
</CCardHeader>
|
<small class="text-muted">docs</small>
|
||||||
<CCardBody>
|
</a>
|
||||||
<CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
|
</div>
|
||||||
<CBreadcrumb :items="items2"/>
|
</CCardHeader>
|
||||||
<CBreadcrumb :items="items3"/>
|
<CCardBody>
|
||||||
</CCardBody>
|
<CBreadcrumb :items="items"/>
|
||||||
</CCard>
|
<CBreadcrumb :items="items2"/>
|
||||||
</CCol>
|
<CBreadcrumb :items="items3"/>
|
||||||
</CRow>
|
</CCardBody>
|
||||||
</div>
|
</CCard>
|
||||||
</div>
|
</CCol>
|
||||||
|
</CRow>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'breadcrumbs',
|
name: 'Breadcrumbs',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
items: [{
|
items: [
|
||||||
textHtml: '<b>Admin</b>',
|
{
|
||||||
href: '#'
|
text: '<b>Admin</b>',
|
||||||
}, {
|
href: '#'
|
||||||
textHtml: 'Manage',
|
},
|
||||||
href: '#'
|
{
|
||||||
}, {
|
text: 'Manage',
|
||||||
textHtml: 'Library'
|
href: '#'
|
||||||
}],
|
},
|
||||||
|
{
|
||||||
|
text: 'Library'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
items2: [{
|
items2: [
|
||||||
textHtml: 'Go to dashboard',
|
{
|
||||||
to: '/dashboard'
|
text: 'Go to dashboard',
|
||||||
}, {
|
to: '/dashboard'
|
||||||
textHtml: 'Go to widgets',
|
},
|
||||||
to: '/Widgets'
|
{
|
||||||
}, {
|
text: 'Go to widgets',
|
||||||
textHtml: 'Go to Google',
|
to: '/Widgets'
|
||||||
href: 'http://google.com'
|
},
|
||||||
},{
|
{
|
||||||
textHtml: 'Current page'
|
text: 'Go to Google',
|
||||||
}],
|
href: 'http://google.com'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Current page'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
items3: [{
|
items3: [
|
||||||
textHtml: 'Link',
|
{
|
||||||
to: '#2',
|
text: 'Added',
|
||||||
activeClass: 'c-bg-info c-p-1'
|
to: '#2',
|
||||||
}, {
|
addClasses: 'font-xl'
|
||||||
textHtml: 'Active',
|
},
|
||||||
to: '#3',
|
{
|
||||||
activeClass: 'c-bg-warning c-p-1',
|
text: 'Custom',
|
||||||
addLinkClasses: 'c-bg-info c-p-1'
|
to: '#3',
|
||||||
},{
|
addClasses: 'font-xl'
|
||||||
textHtml: 'Classes',
|
},
|
||||||
to: '#4',
|
{
|
||||||
activeClass: 'c-bg-danger c-p-1',
|
text: 'Classes',
|
||||||
}]
|
to: '#4',
|
||||||
|
addClasses: 'font-xl text-danger'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.breadcrumb-item + .font-xl.breadcrumb-item::before {
|
||||||
|
color: rgb(140, 195, 38);
|
||||||
|
content: '>>';
|
||||||
|
padding: 0px 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
+78
-88
@@ -2,7 +2,24 @@
|
|||||||
<div>
|
<div>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" :body-html="loremIpsum"/>
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
Card title
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/CardComponents"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
{{loremIpsum}}
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
|
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
|
||||||
@@ -18,17 +35,17 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with switch
|
Card with switch
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
size="sm"
|
size="sm"
|
||||||
shape="pill"
|
shape="pill"
|
||||||
variant="info"
|
color="info"
|
||||||
data-on="On"
|
data-on="On"
|
||||||
data-off="Off"
|
data-off="Off"
|
||||||
:checked="true"
|
:checked="true"
|
||||||
/>
|
/>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -36,10 +53,10 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with label
|
Card with label
|
||||||
<CBadge variant="success" class="c-float-right">Success</CBadge>
|
<CBadge color="success" class="float-right">Success</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -47,9 +64,11 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with label
|
Card with label
|
||||||
<CBadge pill variant="danger" class="c-float-right">42</CBadge>
|
<CBadge pill color="danger" class="float-right">42</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody :body-html="loremIpsum"/>
|
<CCardBody>
|
||||||
|
{{loremIpsum}}
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -57,79 +76,79 @@
|
|||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline primary"
|
header="Card outline primary"
|
||||||
border-variant="primary"
|
border-color="primary"
|
||||||
:body-html="loremIpsum"
|
:body-html="loremIpsum"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline secondary"
|
header="Card outline secondary"
|
||||||
border-variant="secondary"
|
border-color="secondary"
|
||||||
:body-html="loremIpsum"
|
:body-html="loremIpsum"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline success"
|
header="Card outline success"
|
||||||
border-variant="success"
|
border-color="success"
|
||||||
body-wrapper
|
body-wrapper
|
||||||
>
|
>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline info" border-variant="info" body-wrapper>
|
<CCard header-html="Card outline info" border-color="info" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
|
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
|
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
|
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
|
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
|
<CCard class="card-accent-success" header="Card with success accent" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
|
<CCard class="card-accent-info" header="Card with info accent" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
|
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
|
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-primary c-text-center" body-wrapper>
|
<CCard class="bg-primary text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -138,8 +157,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-success c-text-center" body-wrapper>
|
<CCard class="bg-success text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -148,8 +167,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-info c-text-center" body-wrapper>
|
<CCard class="bg-info text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -158,8 +177,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-warning c-text-center" body-wrapper>
|
<CCard class="bg-warning text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -168,8 +187,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-danger c-text-center" body-wrapper>
|
<CCard class="bg-danger text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -178,8 +197,8 @@
|
|||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard class="c-bg-secondary c-text-center" body-wrapper>
|
<CCard class="bg-secondary text-center" body-wrapper>
|
||||||
<blockquote class="c-card-blockquote">
|
<blockquote class="card-blockquote">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
<footer>Someone famous in
|
<footer>Someone famous in
|
||||||
<cite title="Source Title">Source Title</cite>
|
<cite title="Source Title">Source Title</cite>
|
||||||
@@ -190,79 +209,63 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-primary" body-wrapper>
|
<CCard header-html="Card title" class="bg-primary" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-success" body-wrapper>
|
<CCard header-html="Card title" class="bg-success" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-info" body-wrapper>
|
<CCard header-html="Card title" class="bg-info" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-warning" body-wrapper>
|
<CCard header-html="Card title" class="bg-warning" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card title" class="c-bg-danger" body-wrapper>
|
<CCard header-html="Card title" class="bg-danger" body-wrapper>
|
||||||
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.
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<CCard class="c-bg-secondary" v-if="show" >
|
<CCard class="bg-secondary" v-if="show">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with header actions
|
Card with header actions
|
||||||
<div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<CLink href="#" class="c-card-header-action btn-setting" >
|
<CLink href="#" class="card-header-action btn-setting">
|
||||||
<i class="cui-settings"></i>
|
<i class="cui-settings"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||||
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
|
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
|
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||||
<i class="cui-circle-x"></i>
|
<i class="cui-circle-x"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCollapse :show="isCollapsed" :duration="400">
|
<CCollapse :show="isCollapsed" :duration="400">
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
{{loremIpsum}}
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
</CCard>
|
</CCard>
|
||||||
</transition>
|
</transition>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<!-- <CRow>
|
|
||||||
<CCol sm="6" md="4">
|
|
||||||
<CCard >
|
|
||||||
<CCardImg img-src="https://picsum.photos/600/300/?image=25"/>
|
|
||||||
<CCardHeader header-html="Card title"/>
|
|
||||||
<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>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow> -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'cards',
|
name: 'Cards',
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
show: true,
|
show: true,
|
||||||
@@ -272,16 +275,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.fade-enter-active {
|
|
||||||
transition: all .3s ease;
|
|
||||||
}
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
|
||||||
}
|
|
||||||
.fade-enter, .fade-leave-to {
|
|
||||||
transform: translateX(10px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,54 +1,50 @@
|
|||||||
<template functional>
|
<template>
|
||||||
<div class="c-wrapper">
|
<CRow>
|
||||||
<div>
|
<CCol md="12" lg="7">
|
||||||
<CRow>
|
<CCard>
|
||||||
<CCol md="12" lg="9" >
|
<CCardHeader>
|
||||||
<CCard>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CCardHeader>
|
<strong> Bootstrap Carousel</strong>
|
||||||
<i class="fa fa-align-justify"></i>
|
<div class="card-header-actions">
|
||||||
<strong> Bootstrap Carousel</strong>
|
<a
|
||||||
<!-- <div class="card-header-actions">
|
href="https://coreui.io/vue/docs/3.0/components/Carousel"
|
||||||
<a
|
class="card-header-action"
|
||||||
href="https://bootstrap-vue.js.org/docs/components/carousel"
|
rel="noreferrer noopener"
|
||||||
class="card-header-action"
|
target="_blank"
|
||||||
rel="noreferrer noopener"
|
>
|
||||||
target="_blank"
|
<small class="text-muted">docs</small>
|
||||||
>
|
</a>
|
||||||
<small class="text-muted">docs</small>
|
</div>
|
||||||
</a>
|
</CCardHeader>
|
||||||
</div> -->
|
<CCardBody>
|
||||||
</CCardHeader>
|
<CCarousel
|
||||||
<CCardBody>
|
arrows
|
||||||
<CCarousel
|
indicators
|
||||||
arrows
|
animate
|
||||||
indicators
|
height="400px"
|
||||||
animate
|
>
|
||||||
height="400px"
|
<CCarouselItem
|
||||||
>
|
captionHeader="First Slide"
|
||||||
<CCarouselItem
|
image="https://lorempixel.com/1024/480/technics/2/"
|
||||||
caption="First Slide"
|
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||||
image="https://lorempixel.com/1024/480/technics/2/"
|
/>
|
||||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
<CCarouselItem
|
||||||
/>
|
captionHeader="Blank page"
|
||||||
<CCarouselItem
|
:image="{ blankColor: 'grey' }"
|
||||||
caption="Blank page"
|
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||||
:image="{ blankColor: 'grey' }"
|
/>
|
||||||
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
<CCarouselItem
|
||||||
/>
|
image="https://lorempixel.com/1024/480/technics/8/"
|
||||||
<CCarouselItem
|
/>
|
||||||
image="https://lorempixel.com/1024/480/technics/8/"
|
</CCarousel>
|
||||||
/>
|
</CCardBody>
|
||||||
</CCarousel>
|
</CCard>
|
||||||
</CCardBody>
|
</CCol>
|
||||||
</CCard>
|
</CRow>
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'carousels'
|
name: 'Carousels'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,44 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<CRow>
|
||||||
<div>
|
<CCol col="12" md="6">
|
||||||
<CRow>
|
<CCard>
|
||||||
<CCol col="12" md="6">
|
<CCardHeader>
|
||||||
<CCard>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CCardHeader>
|
<strong> Bootstrap Collapse </strong>
|
||||||
<i class="fa fa-align-justify"></i>
|
<div class="card-header-actions">
|
||||||
<strong> Bootstrap Collapse </strong>
|
<a
|
||||||
<!-- <div class="card-header-actions">
|
href="https://coreui.io/vue/docs/3.0/components/Collapse"
|
||||||
<CLink class="card-header-action">
|
class="card-header-action"
|
||||||
<small class="text-muted">docs</small>
|
rel="noreferrer noopener"
|
||||||
</CLink>
|
target="_blank"
|
||||||
</div> -->
|
>
|
||||||
</CCardHeader>
|
<small class="text-muted">docs</small>
|
||||||
<CCardBody>
|
</a>
|
||||||
<CButton id="collapse1" variant="primary">
|
</div>
|
||||||
Toggle Collapse
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CButton id="collapse1" color="primary">
|
||||||
|
Toggle Collapse
|
||||||
|
</CButton>
|
||||||
|
<CCollapse toggler="collapse1" class="mt-2">
|
||||||
|
<CCard body-wrapper>
|
||||||
|
<p class="card-text">Collapse contents Here</p>
|
||||||
|
<CButton id="collapse2" size="sm" color="secondary">
|
||||||
|
Toggle Inner Collapse
|
||||||
</CButton>
|
</CButton>
|
||||||
<CCollapse toggler="collapse1" class="c-mt-2">
|
<CCollapse toggler="collapse2" class="mt-2">
|
||||||
<CCard body-wrapper>
|
<CCard body-wrapper>Hello!</CCard>
|
||||||
<p class="c-card-text">Collapse contents Here</p>
|
|
||||||
<CButton id="collapse2" size="sm">
|
|
||||||
Toggle Inner Collapse
|
|
||||||
</CButton>
|
|
||||||
<CCollapse toggler="collapse2" class="c-mt-2">
|
|
||||||
<CCard body-wrapper>Hello!</CCard>
|
|
||||||
</CCollapse>
|
|
||||||
</CCard>
|
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
</CCardBody>
|
</CCard>
|
||||||
</CCard>
|
</CCollapse>
|
||||||
</CCol>
|
</CCardBody>
|
||||||
</CRow>
|
</CCard>
|
||||||
</div>
|
</CCol>
|
||||||
</div>
|
</CRow>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'collapses',
|
name: 'Collapses',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
showCollapse: true,
|
showCollapse: true,
|
||||||
|
|||||||
+181
-178
@@ -5,11 +5,21 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<strong>Credit Card </strong> <small>Form</small>
|
<strong>Credit Card </strong> <small>Form</small>
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/FormComponents"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Name"
|
label="Name"
|
||||||
placeholder="Enter your name"
|
placeholder="Enter your name"
|
||||||
/>
|
/>
|
||||||
@@ -17,7 +27,7 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Credit Card Number"
|
label="Credit Card Number"
|
||||||
placeholder="0000 0000 0000 0000"
|
placeholder="0000 0000 0000 0000"
|
||||||
/>
|
/>
|
||||||
@@ -25,19 +35,19 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Month"
|
label="Month"
|
||||||
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Year"
|
label="Year"
|
||||||
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="CVV/CVC"
|
label="CVV/CVC"
|
||||||
placeholder="123"
|
placeholder="123"
|
||||||
/>
|
/>
|
||||||
@@ -52,33 +62,33 @@
|
|||||||
<strong>Company </strong><small>Form</small>
|
<strong>Company </strong><small>Form</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Company"
|
label="Company"
|
||||||
placeholder="Enter your company name"
|
placeholder="Enter your company name"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="VAT"
|
label="VAT"
|
||||||
placeholder="PL1234567890"
|
placeholder="PL1234567890"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Street"
|
label="Street"
|
||||||
placeholder="Enter street name"
|
placeholder="Enter street name"
|
||||||
/>
|
/>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="8">
|
<CCol sm="8">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="City"
|
label="City"
|
||||||
placeholder="Enter your city"
|
placeholder="Enter your city"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Postal code"
|
label="Postal code"
|
||||||
placeholder="Postal code"
|
placeholder="Postal code"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Country"
|
label="Country"
|
||||||
placeholder="Country name"
|
placeholder="Country name"
|
||||||
/>
|
/>
|
||||||
@@ -94,30 +104,30 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
description="Let us know your full name."
|
description="Let us know your full name."
|
||||||
label="Enter your name"
|
label="Enter your name"
|
||||||
horizontal
|
horizontal
|
||||||
autocomplete="name"
|
autocomplete="name"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Static"
|
label="Static"
|
||||||
value="Username"
|
value="Username"
|
||||||
horizontal
|
horizontal
|
||||||
plaintext
|
plaintext
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Text input"
|
label="Text input"
|
||||||
description="This is a help text"
|
description="This is a help text"
|
||||||
placeholder="Text"
|
placeholder="Text"
|
||||||
horizontal
|
horizontal
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Date"
|
label="Date"
|
||||||
type="date"
|
type="date"
|
||||||
horizontal
|
horizontal
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Email input"
|
label="Email input"
|
||||||
description="Please enter your email"
|
description="Please enter your email"
|
||||||
placeholder="Enter your email"
|
placeholder="Enter your email"
|
||||||
@@ -125,7 +135,7 @@
|
|||||||
horizontal
|
horizontal
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Password Input"
|
label="Password Input"
|
||||||
description="Please enter a complex password"
|
description="Please enter a complex password"
|
||||||
placeholder="Enter your password"
|
placeholder="Enter your password"
|
||||||
@@ -133,26 +143,26 @@
|
|||||||
horizontal
|
horizontal
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Disabled Input"
|
label="Disabled Input"
|
||||||
placeholder="Disabled"
|
placeholder="Disabled"
|
||||||
horizontal
|
horizontal
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Textarea"
|
label="Textarea"
|
||||||
placeholder="Content..."
|
placeholder="Content..."
|
||||||
horizontal
|
horizontal
|
||||||
textarea="true"
|
textarea="true"
|
||||||
rows="9"
|
rows="9"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Select"
|
label="Select"
|
||||||
horizontal
|
horizontal
|
||||||
:options="options"
|
:options="options"
|
||||||
placeholder="Please select"
|
placeholder="Please select"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Large select"
|
label="Large select"
|
||||||
size="lg"
|
size="lg"
|
||||||
horizontal
|
horizontal
|
||||||
@@ -160,14 +170,14 @@
|
|||||||
:options="selectOptions"
|
:options="selectOptions"
|
||||||
placeholder="Please select"
|
placeholder="Please select"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Small select"
|
label="Small select"
|
||||||
size="sm"
|
size="sm"
|
||||||
horizontal
|
horizontal
|
||||||
:options="options"
|
:options="options"
|
||||||
placeholder="Please select"
|
placeholder="Please select"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
label="Select"
|
label="Select"
|
||||||
horizontal
|
horizontal
|
||||||
:options="options"
|
:options="options"
|
||||||
@@ -175,12 +185,12 @@
|
|||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
<template v-for="(name, key) in checkboxNames">
|
<template v-for="(name, key) in checkboxNames">
|
||||||
<div class="c-form-group c-form-row" :key="name">
|
<div class="form-group form-row" :key="name">
|
||||||
<CCol tag="label" sm="3" class="c-col-form-label">
|
<CCol tag="label" sm="3" class="col-form-label">
|
||||||
{{name}}
|
{{name}}
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
|
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||||
<CFormCheckbox
|
<CInputCheckbox
|
||||||
v-for="option in options"
|
v-for="option in options"
|
||||||
:key="option"
|
:key="option"
|
||||||
:label="option"
|
:label="option"
|
||||||
@@ -194,40 +204,40 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-for="(name, key) in radioNames">
|
<template v-for="(name, key) in radioNames">
|
||||||
<div class="c-form-row c-form-group" :key="name">
|
<div class="form-row form-group" :key="name">
|
||||||
<CCol sm="3">
|
<CCol sm="3">
|
||||||
{{name}}
|
{{name}}
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
|
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||||
<CFormRadio
|
<CInputRadio
|
||||||
v-for="option in options"
|
v-for="(option, optionIndex) in options"
|
||||||
:key="option"
|
:key="option"
|
||||||
:label="option"
|
:label="option"
|
||||||
type="radio"
|
type="radio"
|
||||||
:value="option"
|
:value="option"
|
||||||
:custom="key > 1"
|
:custom="key > 1"
|
||||||
:name="`Option 1${key}`"
|
:name="`Option 1${key}`"
|
||||||
checked="Option 1"
|
:checked="optionIndex === key"
|
||||||
:inline="key % 2 === 1"
|
:inline="key % 2 === 1"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="File input"
|
label="File input"
|
||||||
horizontal
|
horizontal
|
||||||
/>
|
/>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="Multiple file input"
|
label="Multiple file input"
|
||||||
horizontal
|
horizontal
|
||||||
multiple
|
multiple
|
||||||
/>
|
/>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="File custom input"
|
label="File custom input"
|
||||||
horizontal
|
horizontal
|
||||||
custom
|
custom
|
||||||
/>
|
/>
|
||||||
<CFormFile
|
<CInputFile
|
||||||
label="Multiple file custom input"
|
label="Multiple file custom input"
|
||||||
horizontal
|
horizontal
|
||||||
multiple
|
multiple
|
||||||
@@ -236,8 +246,8 @@
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -248,27 +258,27 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mr-2"
|
class="mr-2"
|
||||||
placeholder="Jane Doe"
|
placeholder="Jane Doe"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<small>Name: </small>
|
<small>Name: </small>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="jane.doe@example.com"
|
placeholder="jane.doe@example.com"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<small>Email: </small>
|
<small>Email: </small>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -279,7 +289,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
description="Please enter your email."
|
description="Please enter your email."
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
@@ -287,7 +297,7 @@
|
|||||||
horizontal
|
horizontal
|
||||||
placeholder="Enter Email..."
|
placeholder="Enter Email..."
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="password"
|
type="password"
|
||||||
description="Please enter your password."
|
description="Please enter your password."
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
@@ -298,8 +308,8 @@
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -308,7 +318,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CForm novalidate>
|
<CForm novalidate>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
description="Please enter your email."
|
description="Please enter your email."
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
@@ -317,7 +327,7 @@
|
|||||||
required
|
required
|
||||||
was-validated
|
was-validated
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="password"
|
type="password"
|
||||||
description="Please enter your password."
|
description="Please enter your password."
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
@@ -328,8 +338,8 @@
|
|||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -338,60 +348,60 @@
|
|||||||
Input <strong>Grid</strong>
|
Input <strong>Grid</strong>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="3">
|
<CCol sm="3">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
|
<CInput class="mb-0" placeholder=".col-sm-3"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="4">
|
<CCol sm="4">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
|
<CInput class="mb-0" placeholder=".col-sm-4"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="5">
|
<CCol sm="5">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
|
<CInput class="mb-0" placeholder=".col-sm-5"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
|
<CInput class="mb-0" placeholder=".col-sm-6"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="7">
|
<CCol sm="7">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
|
<CInput class="mb-0" placeholder=".col-sm-7"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="8">
|
<CCol sm="8">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
|
<CInput class="mb-0" placeholder=".col-sm-8"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="9">
|
<CCol sm="9">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
|
<CInput class="mb-0" placeholder=".col-sm-9"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="10">
|
<CCol sm="10">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
|
<CInput class="mb-0" placeholder=".col-sm-10"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="11">
|
<CCol sm="11">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
|
<CInput class="mb-0" placeholder=".col-sm-11"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="c-form-group">
|
<CRow class="form-group">
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
|
<CInput class="mb-0" placeholder=".col-sm-12"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -399,18 +409,18 @@
|
|||||||
Input <strong>Sizes</strong>
|
Input <strong>Sizes</strong>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Small input"
|
label="Small input"
|
||||||
size="sm"
|
size="sm"
|
||||||
horizontal
|
horizontal
|
||||||
placeholder="size='sm'"
|
placeholder="size='sm'"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Default input"
|
label="Default input"
|
||||||
horizontal
|
horizontal
|
||||||
placeholder="normal"
|
placeholder="normal"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Large input"
|
label="Large input"
|
||||||
size="lg"
|
size="lg"
|
||||||
horizontal
|
horizontal
|
||||||
@@ -418,8 +428,8 @@
|
|||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -433,11 +443,11 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm validated novalidate>
|
<CForm validated novalidate>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is valid"
|
label="Input is valid"
|
||||||
valid-feedback="Input is not required."
|
valid-feedback="Input is not required."
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is invalid"
|
label="Input is invalid"
|
||||||
required
|
required
|
||||||
valid-feedback="Thank you :)"
|
valid-feedback="Thank you :)"
|
||||||
@@ -454,14 +464,14 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is valid"
|
label="Input is valid"
|
||||||
valid-feedback="Input is valid."
|
valid-feedback="Input is valid."
|
||||||
invalid-feedback="Please provide at least 4 characters."
|
invalid-feedback="Please provide at least 4 characters."
|
||||||
value="Valid value"
|
value="Valid value"
|
||||||
:is-valid="validator"
|
:is-valid="validator"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Input is invalid"
|
label="Input is invalid"
|
||||||
valid-feedback="Thank you :)"
|
valid-feedback="Thank you :)"
|
||||||
invalid-feedback="Please provide at least 4 characters."
|
invalid-feedback="Please provide at least 4 characters."
|
||||||
@@ -479,25 +489,25 @@
|
|||||||
<strong>Icon/Text</strong> Groups
|
<strong>Icon/Text</strong> Groups
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
append-html="<i class='cui-envelope-open'></i>"
|
append-html="<i class='cui-envelope-open'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prependHtml="<i class='cui-euro'></i>"
|
prependHtml="<i class='cui-euro'></i>"
|
||||||
placeholder="ex. $1.000.000"
|
placeholder="ex. $1.000.000"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -507,38 +517,38 @@
|
|||||||
<strong>Buttons</strong> Groups
|
<strong>Buttons</strong> Groups
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput placeholder="Username">
|
<CInput placeholder="Username">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CButton variant="primary">
|
<CButton color="primary">
|
||||||
<i class="cui-magnifying-glass"></i> Search
|
<i class="cui-magnifying-glass"></i> Search
|
||||||
</CButton>
|
</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton type="submit" variant="primary">Submit</CButton>
|
<CButton type="submit" color="primary">Submit</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CButton variant="primary"><CIcon name="facebook" height="14"/></CButton>
|
<CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary"><CIcon name="twitter" height="14"/></CButton>
|
<CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -548,11 +558,11 @@
|
|||||||
<strong>Dropdowns</strong> Groups
|
<strong>Dropdowns</strong> Groups
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput placeholder="Username">
|
<CInput placeholder="Username">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -560,16 +570,16 @@
|
|||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput
|
<CInput
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
right
|
right
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -578,13 +588,13 @@
|
|||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput placeholder="...">
|
<CInput placeholder="...">
|
||||||
|
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Split"
|
togglerText="Split"
|
||||||
variant="primary"
|
color="primary"
|
||||||
split
|
split
|
||||||
>
|
>
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
<CDropdownItem href="#">Action</CDropdownItem>
|
||||||
@@ -596,8 +606,8 @@
|
|||||||
|
|
||||||
<template #append>
|
<template #append>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
right
|
right
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -607,11 +617,11 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -624,24 +634,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow
|
<CRow
|
||||||
class="c-form-group"
|
class="form-group"
|
||||||
v-for="(number, key) in [4,5,6,7,8]"
|
v-for="(number, key) in [4,5,6,7,8]"
|
||||||
:key="key"
|
:key="key"
|
||||||
>
|
>
|
||||||
<CCol :col="12 - number">
|
<CCol :col="12 - number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :col="number">
|
<CCol :col="number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton size="sm" variant="primary">Action</CButton>
|
<CButton size="sm" color="primary">Action</CButton>
|
||||||
<CButton size="sm" variant="danger">Action</CButton>
|
<CButton size="sm" color="danger">Action</CButton>
|
||||||
<CButton size="sm" variant="warning">Action</CButton>
|
<CButton size="sm" color="warning">Action</CButton>
|
||||||
<CButton size="sm" variant="info">Action</CButton>
|
<CButton size="sm" color="info">Action</CButton>
|
||||||
<CButton size="sm" variant="success">Action</CButton>
|
<CButton size="sm" color="success">Action</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -652,24 +662,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow
|
<CRow
|
||||||
class="c-form-group"
|
class="form-group"
|
||||||
v-for="(number, key) in [4,5,6,7,8]"
|
v-for="(number, key) in [4,5,6,7,8]"
|
||||||
:key="key"
|
:key="key"
|
||||||
>
|
>
|
||||||
<CCol :col="number">
|
<CCol :col="number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol :col="12 - number">
|
<CCol :col="12 - number">
|
||||||
<CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
|
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton size="sm" variant="primary">Action</CButton>
|
<CButton size="sm" color="primary">Action</CButton>
|
||||||
<CButton size="sm" variant="danger">Action</CButton>
|
<CButton size="sm" color="danger">Action</CButton>
|
||||||
<CButton size="sm" variant="warning">Action</CButton>
|
<CButton size="sm" color="warning">Action</CButton>
|
||||||
<CButton size="sm" variant="info">Action</CButton>
|
<CButton size="sm" color="info">Action</CButton>
|
||||||
<CButton size="sm" variant="success">Action</CButton>
|
<CButton size="sm" color="success">Action</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -682,24 +692,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
prepend-html="Username"
|
prepend-html="Username"
|
||||||
append-html="<i class='cui-user'></i>"
|
append-html="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prepend-html="Email"
|
prepend-html="Email"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
append-html="<i class='cui-envelope-closed'></i>"
|
append-html="<i class='cui-envelope-closed'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prepend-html="Password"
|
prepend-html="Password"
|
||||||
type="password"
|
type="password"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
append-html="<i class='cui-shield'></i>"
|
append-html="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="c-form-group c-form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" size="sm" variant="primary">
|
<CButton type="submit" size="sm" color="primary">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -714,24 +724,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
append-html="<i class='cui-user'></i>"
|
append-html="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
append-html="<i class='cui-envelope-closed'></i>"
|
append-html="<i class='cui-envelope-closed'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
append-html="<i class='cui-shield'></i>"
|
append-html="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="c-form-group c-form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
|
<CButton type="submit" class="btn btn-sm btn-secondary">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -746,24 +756,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
prependHtml="<i class='cui-envelope-closed'></i>"
|
prependHtml="<i class='cui-envelope-closed'></i>"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
autocomplete="current-password"
|
autocomplete="current-password"
|
||||||
prependHtml="<i class='cui-shield'></i>"
|
prependHtml="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="c-form-group c-form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" size="sm" variant="success">
|
<CButton type="submit" size="sm" color="success">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -778,58 +788,58 @@
|
|||||||
<CCard v-if="show">
|
<CCard v-if="show">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="cui-pencil"></i> Form Elements
|
<i class="cui-pencil"></i> Form Elements
|
||||||
<div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<CLink href="#" class="c-card-header-action c-btn-setting">
|
<CLink href="#" class="card-header-action btn-setting">
|
||||||
<i class="cui-settings"></i>
|
<i class="cui-settings"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink
|
<CLink
|
||||||
class="c-card-header-action c-btn-minimize"
|
class="card-header-action btn-minimize"
|
||||||
@click="formCollapsed=!formCollapsed"
|
@click="formCollapsed=!formCollapsed"
|
||||||
>
|
>
|
||||||
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
|
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
|
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||||
<i class="cui-circle-x"></i>
|
<i class="cui-circle-x"></i>
|
||||||
</CLink>
|
</CLink>
|
||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCollapse :show="formCollapsed">
|
<CCollapse :show="formCollapsed">
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Prepended text"
|
label="Prepended text"
|
||||||
prepend-html="@"
|
prepend-html="@"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
type="email"
|
type="email"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Appended text"
|
label="Appended text"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Appended and prepended text"
|
label="Appended and prepended text"
|
||||||
prepend-html="$"
|
prepend-html="$"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
label="Append with button"
|
label="Append with button"
|
||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary">Go!</CButton>
|
<CButton color="primary">Go!</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<CFormInput label="Two-buttons append">
|
<CInput label="Two-buttons append">
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary">Search</CButton>
|
<CButton color="primary">Search</CButton>
|
||||||
<CButton variant="danger">Options</CButton>
|
<CButton color="danger">Options</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
<div class="c-form-actions">
|
<div class="form-actions">
|
||||||
<CButton type="submit" variant="primary">Save changes</CButton>
|
<CButton type="submit" color="primary">Save changes</CButton>
|
||||||
<CButton variant="secondary">Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
@@ -842,7 +852,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'forms',
|
name: 'Forms',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
selected: [], // Must be an array reference!
|
selected: [], // Must be an array reference!
|
||||||
@@ -851,7 +861,11 @@ export default {
|
|||||||
options: ['Option 1', 'Option 2', 'Option 3'],
|
options: ['Option 1', 'Option 2', 'Option 3'],
|
||||||
selectOptions: [
|
selectOptions: [
|
||||||
'Option 1', 'Option 2', 'Option 3',
|
'Option 1', 'Option 2', 'Option 3',
|
||||||
{ value: ['some value', 'another value'], label: 'Option 4' }],
|
{
|
||||||
|
value: ['some value', 'another value'],
|
||||||
|
label: 'Selected option'
|
||||||
|
}
|
||||||
|
],
|
||||||
selectedOption: ['some value', 'another value'],
|
selectedOption: ['some value', 'another value'],
|
||||||
|
|
||||||
formCollapsed: true,
|
formCollapsed: true,
|
||||||
@@ -868,14 +882,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.fade-enter-active,
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
}
|
|
||||||
.fade-enter,
|
|
||||||
.fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,84 +1,87 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CRow>
|
||||||
<CRow>
|
<CCol>
|
||||||
<CCol>
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i>
|
||||||
<i class="fa fa-align-justify"></i>
|
<strong> Bootstrap Jumbotron </strong>
|
||||||
<strong> Bootstrap Jumbotron </strong>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="card-header-actions">
|
<a
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
href="https://coreui.io/vue/docs/3.0/components/Jumbotron"
|
||||||
<small class="c-text-muted">docs</small>
|
class="card-header-action"
|
||||||
</a>
|
rel="noreferrer noopener"
|
||||||
</div> -->
|
target="_blank"
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
|
||||||
<p>For more information visit website</p>
|
|
||||||
<CButton variant="primary" href="#">More Info</CButton>
|
|
||||||
</CJumbotron>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
|
||||||
<small>with slots</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CJumbotron header="Bootstrap 4" lead="">
|
|
||||||
<p slot="lead" class="c-lead">
|
|
||||||
This is a simple hero unit, a simple jumbotron-style component for
|
|
||||||
calling extra attention to featured content or information.
|
|
||||||
</p>
|
|
||||||
<hr class="c-my-4">
|
|
||||||
<p>
|
|
||||||
It uses utility classes for typography and spacing to space content
|
|
||||||
out within the larger container.
|
|
||||||
</p>
|
|
||||||
<CButton variant="primary" href="#">Do Something</CButton>
|
|
||||||
<CButton variant="success" href="#">Do Something Else</CButton>
|
|
||||||
</CJumbotron>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
|
||||||
<small>variants</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CJumbotron
|
|
||||||
variant="info"
|
|
||||||
text-variant="white"
|
|
||||||
border-variant="dark"
|
|
||||||
header="Bootstrap 4"
|
|
||||||
>
|
>
|
||||||
<p slot="lead" class="c-lead">
|
<small class="text-muted">docs</small>
|
||||||
This is a simple hero unit, a simple jumbotron-style component for
|
</a>
|
||||||
calling extra attention to featured content or information.
|
</div>
|
||||||
</p>
|
</CCardHeader>
|
||||||
<hr class="c-my-4">
|
<CCardBody>
|
||||||
<p>
|
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||||
It uses utility classes for typography and spacing to space content
|
<p>For more information visit website</p>
|
||||||
out within the larger container.
|
<CButton color="primary" href="#">More Info</CButton>
|
||||||
</p>
|
</CJumbotron>
|
||||||
</CJumbotron>
|
</CCardBody>
|
||||||
</CCardBody>
|
</CCard>
|
||||||
</CCard>
|
</CCol>
|
||||||
</CCol>
|
<CCol>
|
||||||
</CRow>
|
<CCard>
|
||||||
</div>
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||||
|
<small>with slots</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CJumbotron header="Bootstrap 4" lead="">
|
||||||
|
<p slot="lead" class="lead">
|
||||||
|
This is a simple hero unit, a simple jumbotron-style component for
|
||||||
|
calling extra attention to featured content or information.
|
||||||
|
</p>
|
||||||
|
<hr class="my-4">
|
||||||
|
<p>
|
||||||
|
It uses utility classes for typography and spacing to space content
|
||||||
|
out within the larger container.
|
||||||
|
</p>
|
||||||
|
<CButton color="primary" href="#">Do Something</CButton>
|
||||||
|
<CButton color="success" href="#">Do Something Else</CButton>
|
||||||
|
</CJumbotron>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
<CRow>
|
||||||
|
<CCol>
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||||
|
<small>colors</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CJumbotron
|
||||||
|
color="info"
|
||||||
|
text-color="white"
|
||||||
|
border-color="dark"
|
||||||
|
header="Bootstrap 4"
|
||||||
|
>
|
||||||
|
<p slot="lead" class="lead">
|
||||||
|
This is a simple hero unit, a simple jumbotron-style component for
|
||||||
|
calling extra attention to featured content or information.
|
||||||
|
</p>
|
||||||
|
<hr class="my-4">
|
||||||
|
<p>
|
||||||
|
It uses utility classes for typography and spacing to space content
|
||||||
|
out within the larger container.
|
||||||
|
</p>
|
||||||
|
</CJumbotron>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'jumbotrons'
|
name: 'Jumbotrons'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+271
-268
@@ -1,276 +1,279 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CRow>
|
||||||
<CRow>
|
<CCol md="6">
|
||||||
<CCol md="6">
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i>
|
||||||
<i class="fa fa-align-justify"></i>
|
<strong> Bootstrap list group </strong>
|
||||||
<strong> Bootstrap list group </strong>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="c-card-header-actions">
|
<a
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
href="https://coreui.io/vue/docs/3.0/components/ListGroup"
|
||||||
<small class="c-text-muted">docs</small>
|
class="card-header-action"
|
||||||
</a>
|
rel="noreferrer noopener"
|
||||||
</div> -->
|
target="_blank"
|
||||||
</CCardHeader>
|
>
|
||||||
<CCardBody>
|
<small class="text-muted">docs</small>
|
||||||
<CListGroup>
|
</a>
|
||||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
</div>
|
||||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
<CListGroup>
|
||||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||||
</CListGroup>
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||||
</CCardBody>
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||||
</CCard>
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||||
</CCol>
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||||
<CCol md="6">
|
</CListGroup>
|
||||||
<CCard>
|
</CCardBody>
|
||||||
<CCardHeader>
|
</CCard>
|
||||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
|
</CCol>
|
||||||
</CCardHeader>
|
<CCol md="6">
|
||||||
<CCardBody>
|
<CCard>
|
||||||
<CListGroup>
|
<CCardHeader>
|
||||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
|
||||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
<CListGroup>
|
||||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||||
</CListGroup>
|
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||||
</CCardBody>
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||||
</CCard>
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||||
</CCol>
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||||
</CRow>
|
</CListGroup>
|
||||||
<CRow>
|
</CCardBody>
|
||||||
<CCol md="6">
|
</CCard>
|
||||||
<CCard>
|
</CCol>
|
||||||
<CCardHeader>
|
</CRow>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CRow>
|
||||||
<strong> List group </strong>
|
<CCol md="6">
|
||||||
<small>disabled items</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CListGroup>
|
<strong> List group </strong>
|
||||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
<small>disabled items</small>
|
||||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
<CListGroup>
|
||||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||||
</CListGroup>
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||||
</CCardBody>
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||||
</CCard>
|
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||||
</CCol>
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||||
<CCol md="6">
|
</CListGroup>
|
||||||
<CCard>
|
</CCardBody>
|
||||||
<CCardHeader>
|
</CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
</CCol>
|
||||||
<strong> List group </strong>
|
<CCol md="6">
|
||||||
<small>actionable items</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CListGroup>
|
<strong> List group </strong>
|
||||||
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
|
<small>actionable items</small>
|
||||||
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem href="#">Action links are easy</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
|
<CListGroup>
|
||||||
</CListGroup>
|
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
|
||||||
</CCardBody>
|
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
|
||||||
</CCard>
|
<CListGroupItem href="#">Action links are easy</CListGroupItem>
|
||||||
</CCol>
|
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
|
||||||
</CRow>
|
</CListGroup>
|
||||||
<CRow>
|
</CCardBody>
|
||||||
<CCol md="6">
|
</CCard>
|
||||||
<CCard>
|
</CCol>
|
||||||
<CCardHeader>
|
</CRow>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CRow>
|
||||||
<strong> List group </strong>
|
<CCol md="6">
|
||||||
<small>buttons</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CListGroup>
|
<strong> List group </strong>
|
||||||
<CListGroupItem tag="button">Button item</CListGroupItem>
|
<small>buttons</small>
|
||||||
<CListGroupItem tag="button">I am a button</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem tag="button">This is a button too</CListGroupItem>
|
<CListGroup>
|
||||||
</CListGroup>
|
<CListGroupItem tag="button">Button item</CListGroupItem>
|
||||||
</CCardBody>
|
<CListGroupItem tag="button">I am a button</CListGroupItem>
|
||||||
</CCard>
|
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
|
||||||
</CCol>
|
<CListGroupItem tag="button">This is a button too</CListGroupItem>
|
||||||
<CCol md="6">
|
</CListGroup>
|
||||||
<CCard>
|
</CCardBody>
|
||||||
<CCardHeader>
|
</CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
</CCol>
|
||||||
<strong> List group </strong>
|
<CCol md="6">
|
||||||
<small>with badges</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CListGroup>
|
<strong> List group </strong>
|
||||||
<CListGroupItem
|
<small>with badges</small>
|
||||||
class="c-d-flex c-justify-content-between c-align-items-center"
|
</CCardHeader>
|
||||||
>
|
<CCardBody>
|
||||||
Cras justo odio
|
<CListGroup>
|
||||||
<CBadge variant="primary" pill>14</CBadge>
|
<CListGroupItem
|
||||||
</CListGroupItem>
|
class="d-flex justify-content-between align-items-center"
|
||||||
<CListGroupItem
|
>
|
||||||
class="c-d-flex c-justify-content-between c-align-items-center"
|
Cras justo odio
|
||||||
>
|
<CBadge color="primary" pill>14</CBadge>
|
||||||
Dapibus ac facilisis in
|
</CListGroupItem>
|
||||||
<CBadge variant="primary" pill>2</CBadge>
|
<CListGroupItem
|
||||||
</CListGroupItem>
|
class="d-flex justify-content-between align-items-center"
|
||||||
<CListGroupItem
|
>
|
||||||
class="c-d-flex c-justify-content-between c-align-items-center"
|
Dapibus ac facilisis in
|
||||||
>
|
<CBadge color="primary" pill>2</CBadge>
|
||||||
Morbi leo risus
|
</CListGroupItem>
|
||||||
<CBadge variant="primary" pill>1</CBadge>
|
<CListGroupItem
|
||||||
</CListGroupItem>
|
class="d-flex justify-content-between align-items-center"
|
||||||
</CListGroup>
|
>
|
||||||
</CCardBody>
|
Morbi leo risus
|
||||||
</CCard>
|
<CBadge color="primary" pill>1</CBadge>
|
||||||
</CCol>
|
</CListGroupItem>
|
||||||
</CRow>
|
</CListGroup>
|
||||||
<CRow>
|
</CCardBody>
|
||||||
<CCol md="6">
|
</CCard>
|
||||||
<CCard>
|
</CCol>
|
||||||
<CCardHeader>
|
</CRow>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CRow>
|
||||||
<strong> List group </strong>
|
<CCol md="6">
|
||||||
<small>variants</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CListGroup>
|
<strong> List group </strong>
|
||||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
<small>colors</small>
|
||||||
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
|
<CListGroup>
|
||||||
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
|
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
|
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
|
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
||||||
</CListGroup>
|
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
||||||
</CCardBody>
|
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
||||||
</CCard>
|
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
||||||
</CCol>
|
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
||||||
<CCol md="6">
|
</CListGroup>
|
||||||
<CCard>
|
</CCardBody>
|
||||||
<CCardHeader>
|
</CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
</CCol>
|
||||||
<strong> List group </strong>
|
<CCol md="6">
|
||||||
<small>variants active</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CListGroup>
|
<strong> List group </strong>
|
||||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
<small>colors active</small>
|
||||||
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
|
</CCardHeader>
|
||||||
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
|
<CListGroup>
|
||||||
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
|
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
|
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
|
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
|
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
|
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
|
||||||
</CListGroup>
|
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
|
||||||
</CCardBody>
|
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
|
||||||
</CCard>
|
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
|
||||||
</CCol>
|
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
|
||||||
</CRow>
|
</CListGroup>
|
||||||
<CRow>
|
</CCardBody>
|
||||||
<CCol col="12">
|
</CCard>
|
||||||
<CCard>
|
</CCol>
|
||||||
<CCardHeader>
|
</CRow>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CRow>
|
||||||
<strong> List group </strong>
|
<CCol col="12">
|
||||||
<small>inside cards</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CCardGroup deck>
|
<strong> List group </strong>
|
||||||
<CCard headerHtml="<b>Card with list group</b>">
|
<small>inside cards</small>
|
||||||
<CListGroup>
|
</CCardHeader>
|
||||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
<CCardBody>
|
||||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
<CCardGroup deck>
|
||||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
<CCard headerHtml="<b>Card with list group</b>">
|
||||||
</CListGroup>
|
<CListGroup>
|
||||||
<p class="c-card-text c-mt-2">
|
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
</CListGroup>
|
||||||
ad sit ipsum anim Lorem.
|
<p class="card-text mt-2">
|
||||||
</p>
|
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||||
</CCard>
|
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||||
<CCard header="<b>Card with flush list group</b>">
|
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||||
<CListGroup flush>
|
ad sit ipsum anim Lorem.
|
||||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
</p>
|
||||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
</CCard>
|
||||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
<CCard header="<b>Card with flush list group</b>">
|
||||||
</CListGroup>
|
<CListGroup flush>
|
||||||
<CCardBody>
|
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
</CListGroup>
|
||||||
ad sit ipsum anim Lorem.
|
<CCardBody>
|
||||||
</CCardBody>
|
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||||
</CCard>
|
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||||
</CCardGroup>
|
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||||
</CCardBody>
|
ad sit ipsum anim Lorem.
|
||||||
</CCard>
|
</CCardBody>
|
||||||
</CCol>
|
</CCard>
|
||||||
</CRow>
|
</CCardGroup>
|
||||||
<CRow>
|
</CCardBody>
|
||||||
<CCol md="6">
|
</CCard>
|
||||||
<CCard>
|
</CCol>
|
||||||
<CCardHeader>
|
</CRow>
|
||||||
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
|
<CRow>
|
||||||
</CCardHeader>
|
<CCol md="6">
|
||||||
<CCardBody>
|
<CCard>
|
||||||
<CListGroup>
|
<CCardHeader>
|
||||||
<CListGroupItem
|
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
|
||||||
href="#"
|
</CCardHeader>
|
||||||
active
|
<CCardBody>
|
||||||
class="c-flex-column c-align-items-start"
|
<CListGroup>
|
||||||
>
|
<CListGroupItem
|
||||||
<div class="c-d-flex c-w-100 c-justify-content-between">
|
href="#"
|
||||||
<h5 class="c-mb-1">List group item heading</h5>
|
active
|
||||||
<small>3 days ago</small>
|
class="flex-column align-items-start"
|
||||||
</div>
|
>
|
||||||
<p class="c-mb-1">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
sed diam eget risus varius blandit.
|
<small>3 days ago</small>
|
||||||
</p>
|
</div>
|
||||||
<small>Donec id elit non mi porta.</small>
|
<p class="mb-1">
|
||||||
</CListGroupItem>
|
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||||
<CListGroupItem href="#" class="c-flex-column c-align-items-start">
|
sed diam eget risus varius blandit.
|
||||||
<div class="c-d-flex c-w-100 c-justify-content-between">
|
</p>
|
||||||
<h5 class="c-mb-1">List group item heading</h5>
|
<small>Donec id elit non mi porta.</small>
|
||||||
<small class="c-text-muted">3 days ago</small>
|
</CListGroupItem>
|
||||||
</div>
|
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||||
<p class="c-mb-1">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
<h5 class="mb-1">List group item heading</h5>
|
||||||
sed diam eget risus varius blandit.
|
<small class="text-muted">3 days ago</small>
|
||||||
</p>
|
</div>
|
||||||
<small class="c-text-muted">Donec id elit non mi porta.</small>
|
<p class="mb-1">
|
||||||
</CListGroupItem>
|
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||||
<CListGroupItem href="#" disabled class="c-flex-column c-align-items-start">
|
sed diam eget risus varius blandit.
|
||||||
<div class="c-d-flex c-w-100 c-justify-content-between">
|
</p>
|
||||||
<h5 class="c-mb-1">Disabled List group item</h5>
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
<small class="c-text-muted">3 days ago</small>
|
</CListGroupItem>
|
||||||
</div>
|
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||||
<p class="c-mb-1">
|
<div class="d-flex w-100 justify-content-between">
|
||||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
<h5 class="mb-1">Disabled List group item</h5>
|
||||||
sed diam eget risus varius blandit.
|
<small class="text-muted">3 days ago</small>
|
||||||
</p>
|
</div>
|
||||||
<small class="c-text-muted">Donec id elit non mi porta.</small>
|
<p class="mb-1">
|
||||||
</CListGroupItem>
|
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||||
</CListGroup>
|
sed diam eget risus varius blandit.
|
||||||
</CCardBody>
|
</p>
|
||||||
</CCard>
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||||
</CCol>
|
</CListGroupItem>
|
||||||
</CRow>
|
</CListGroup>
|
||||||
</div>
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'list-groups'
|
name: 'ListGroups'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+162
-193
@@ -1,208 +1,177 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CCard>
|
||||||
<!-- <CCard>
|
<CCardHeader>
|
||||||
<CNavbar toggleable="md" light variant="light">
|
<i class="fa fa-align-justify"></i>
|
||||||
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
|
<strong> Bootstrap Navbar </strong>
|
||||||
<CLink class="navbar-brand">NavBar</CLink>
|
<div class="card-header-actions">
|
||||||
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
|
<a
|
||||||
<CNavbarNav pills class="navbar-nav">
|
href="https://coreui.io/vue/docs/3.0/components/Navbar"
|
||||||
<CNavItem>
|
class="card-header-action"
|
||||||
hehehe1
|
rel="noreferrer noopener"
|
||||||
</CNavItem>
|
target="_blank"
|
||||||
<CNavItem class="nav-item">
|
|
||||||
hehehe1
|
|
||||||
</CNavItem>
|
|
||||||
<CNavItem class="nav-item">
|
|
||||||
hehehe2
|
|
||||||
</CNavItem>
|
|
||||||
<DefaultHeaderDropdownAccnt/>
|
|
||||||
</CNavbarNav>
|
|
||||||
<CNavbarNav class="ml-auto">
|
|
||||||
<CDropdown right class="c-nav-item " toggle-classes="c-nav-link">
|
|
||||||
<CDropdownItem><i class="cui-file" /> Projects
|
|
||||||
<CBadge variant="primary">32</CBadge>
|
|
||||||
</CDropdownItem>
|
|
||||||
<CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
|
|
||||||
<CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CNavbar>
|
|
||||||
</CCard> -->
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Bootstrap Navbar </strong>
|
|
||||||
<!-- <div class="c-card-header-actions">
|
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
|
||||||
<small class="c-text-muted">docs</small>
|
|
||||||
</a>
|
|
||||||
</div> -->
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar
|
|
||||||
toggleable="md"
|
|
||||||
variant="info"
|
|
||||||
sticky
|
|
||||||
>
|
>
|
||||||
<CNavbarToggle @click="show=!show"/>
|
<small class="text-muted">docs</small>
|
||||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
</a>
|
||||||
<CCollapse :show="show" navbar>
|
</div>
|
||||||
<CNavbarNav>
|
</CCardHeader>
|
||||||
<CNavItem href="#">Link</CNavItem>
|
<CCardBody>
|
||||||
<CNavItem href="#" disabled>Disabled</CNavItem>
|
<CNavbar
|
||||||
</CNavbarNav>
|
expandable="md"
|
||||||
|
color="info"
|
||||||
|
>
|
||||||
|
<CToggler inNavbar @click="show=!show"/>
|
||||||
|
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||||
|
<CCollapse :show="show" navbar>
|
||||||
|
<CNavbarNav>
|
||||||
|
<CNavItem href="#">Link</CNavItem>
|
||||||
|
<CNavItem href="#" disabled>Disabled</CNavItem>
|
||||||
|
</CNavbarNav>
|
||||||
|
|
||||||
<!-- Right aligned nav items -->
|
<!-- Right aligned nav items -->
|
||||||
<CNavbarNav class="c-ml-auto">
|
<CNavbarNav class="ml-auto">
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mr-sm-2"
|
class="mr-sm-2"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
size="sm"
|
size="sm"
|
||||||
/>
|
/>
|
||||||
<CButton variant="light" size="sm" class="c-my-2 c-my-sm-0">
|
<CButton color="light" size="sm" class="my-2 my-sm-0">
|
||||||
Search
|
Search
|
||||||
</CButton>
|
</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
|
|
||||||
<CDropdown
|
<CDropdown
|
||||||
button-html="Lang"
|
toggler-text="Lang"
|
||||||
nav
|
in-nav
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
>
|
>
|
||||||
<CDropdownItem>EN</CDropdownItem>
|
|
||||||
<CDropdownItem>ES</CDropdownItem>
|
|
||||||
<CDropdownItem>RU</CDropdownItem>
|
|
||||||
<CDropdownItem>FA</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
|
|
||||||
<CDropdown
|
|
||||||
nav
|
|
||||||
buttonHtml="<em>User</em>"
|
|
||||||
placement="bottom-end"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Profile</CDropdownItem>
|
|
||||||
<CDropdownItem>Signout</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
|
||||||
<small>brand</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<!-- Image and text -->
|
|
||||||
<CNavbar variant="faded" light>
|
|
||||||
<CNavbarBrand href="#">
|
|
||||||
<img src="https://placekitten.com/g/30/30" class="c-d-inline-block c-align-top" alt="BV">
|
|
||||||
BootstrapVue
|
|
||||||
</CNavbarBrand>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
|
||||||
<small>text</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar toggleable="sm" light variant="light">
|
|
||||||
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
|
|
||||||
<CNavbarBrand>BootstrapVue</CNavbarBrand>
|
|
||||||
<CCollapse :show="navbarText" navbar>
|
|
||||||
<CNavbarNav>
|
|
||||||
<span class="c-navbar-text">Navbar text</span>
|
|
||||||
</CNavbarNav>
|
|
||||||
</CCollapse>
|
|
||||||
</CNavbar>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
|
||||||
<small>dropdown</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CNavbar>
|
|
||||||
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
|
|
||||||
<CCollapse :show="navbarDropdown" navbar> -->
|
|
||||||
<CNavbarNav>
|
|
||||||
<CNavItem href="#">Home</CNavItem>
|
|
||||||
<CNavItem href="#">Link</CNavItem>
|
|
||||||
<!-- Navbar dropdowns -->
|
|
||||||
<CDropdown
|
|
||||||
button-html="Lang"
|
|
||||||
right
|
|
||||||
nav
|
|
||||||
>
|
|
||||||
<CDropdownItem>EN</CDropdownItem>
|
<CDropdownItem>EN</CDropdownItem>
|
||||||
<CDropdownItem>ES</CDropdownItem>
|
<CDropdownItem>ES</CDropdownItem>
|
||||||
<CDropdownItem>RU</CDropdownItem>
|
<CDropdownItem>RU</CDropdownItem>
|
||||||
<CDropdownItem>FA</CDropdownItem>
|
<CDropdownItem>FA</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
|
||||||
button-html="User"
|
<CDropdown
|
||||||
right
|
in-nav
|
||||||
nav
|
toggler-text="User"
|
||||||
>
|
placement="bottom-end"
|
||||||
<CDropdownItem>Account</CDropdownItem>
|
>
|
||||||
<CDropdownItem>Settings</CDropdownItem>
|
<CDropdownItem>Profile</CDropdownItem>
|
||||||
</CDropdown>
|
<CDropdownItem>Signout</CDropdownItem>
|
||||||
</CNavbarNav>
|
</CDropdown>
|
||||||
<!-- </CCollapse> -->
|
</CNavbarNav>
|
||||||
</CNavbar>
|
</CCollapse>
|
||||||
</CCardBody>
|
</CNavbar>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
<CCardHeader>
|
||||||
<small>form</small>
|
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||||
</CCardHeader>
|
<small>brand</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNavbar light variant="light">
|
<CCardBody>
|
||||||
<CForm inline>
|
<!-- Image and text -->
|
||||||
<CFormInput
|
<CNavbar color="faded" light>
|
||||||
class="c-mr-sm-2"
|
<CNavbarBrand href="#">
|
||||||
placeholder="Search"
|
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
||||||
size="sm"
|
CoreuiVue
|
||||||
/>
|
</CNavbarBrand>
|
||||||
<CButton variant="outline-success" class="c-my-2 c-my-sm-0" type="submit">Search</CButton>
|
</CNavbar>
|
||||||
</CForm>
|
</CCardBody>
|
||||||
</CNavbar>
|
</CCard>
|
||||||
</CCardBody>
|
<CCard>
|
||||||
</CCard>
|
<CCardHeader>
|
||||||
<CCard>
|
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||||
<CCardHeader>
|
<small>text</small>
|
||||||
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
</CCardHeader>
|
||||||
<small>input group</small>
|
<CCardBody>
|
||||||
</CCardHeader>
|
<CNavbar toggleable="sm" light color="light">
|
||||||
<CCardBody>
|
<CToggler inNavbar @click="navbarText=!navbarText"/>
|
||||||
<CNavbar light variant="light">
|
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
||||||
<CForm inline>
|
<CCollapse :show="navbarText" navbar>
|
||||||
<CFormInput
|
<CNavbarNav>
|
||||||
class="c-mr-sm-2"
|
<span class="navbar-text">Navbar text</span>
|
||||||
placeholder="Username"
|
</CNavbarNav>
|
||||||
/>
|
</CCollapse>
|
||||||
</CForm>
|
</CNavbar>
|
||||||
</CNavbar>
|
</CCardBody>
|
||||||
</CCardBody>
|
</CCard>
|
||||||
</CCard>
|
<CCard>
|
||||||
</div>
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||||
|
<small>dropdown</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CNavbar expandable="sm" color="primary" >
|
||||||
|
<CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
|
||||||
|
<CCollapse :show="navbarDropdown" navbar>
|
||||||
|
<CNavbarNav>
|
||||||
|
<CNavItem href="#">Home</CNavItem>
|
||||||
|
<CNavItem href="#">Link</CNavItem>
|
||||||
|
<!-- Navbar dropdowns -->
|
||||||
|
<CDropdown
|
||||||
|
toggler-text="Lang"
|
||||||
|
placement="bottom-end"
|
||||||
|
in-nav
|
||||||
|
>
|
||||||
|
<CDropdownItem>EN</CDropdownItem>
|
||||||
|
<CDropdownItem>ES</CDropdownItem>
|
||||||
|
<CDropdownItem>RU</CDropdownItem>
|
||||||
|
<CDropdownItem>FA</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
<CDropdown
|
||||||
|
toggler-text="User"
|
||||||
|
placement="bottom-end"
|
||||||
|
in-nav
|
||||||
|
>
|
||||||
|
<CDropdownItem>Account</CDropdownItem>
|
||||||
|
<CDropdownItem>Settings</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</CNavbarNav>
|
||||||
|
</CCollapse>
|
||||||
|
</CNavbar>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||||
|
<small>form</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CNavbar light color="light">
|
||||||
|
<CForm inline>
|
||||||
|
<CInput
|
||||||
|
class="mr-sm-2"
|
||||||
|
placeholder="Search"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||||
|
</CForm>
|
||||||
|
</CNavbar>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
|
||||||
|
<small>input group</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CNavbar light color="light">
|
||||||
|
<CForm inline>
|
||||||
|
<CInput
|
||||||
|
class="mr-sm-2"
|
||||||
|
placeholder="Username"
|
||||||
|
/>
|
||||||
|
</CForm>
|
||||||
|
</CNavbar>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'navbars',
|
name: 'Navbars',
|
||||||
components: {
|
|
||||||
DefaultHeaderDropdownAccnt
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
|
|||||||
+156
-156
@@ -1,165 +1,165 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
|
||||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="c-card-header-actions">
|
<a
|
||||||
<CLink
|
href="https://coreui.io/vue/docs/3.0/components/Nav"
|
||||||
href="#"
|
class="card-header-action"
|
||||||
class="c-card-header-action"
|
rel="noreferrer noopener"
|
||||||
>
|
target="_blank"
|
||||||
<small class="c-text-muted">docs</small>
|
>
|
||||||
</CLink>
|
<small class="text-muted">docs</small>
|
||||||
</div> -->
|
</a>
|
||||||
</CCardHeader>
|
</div>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNav>
|
<CCardBody>
|
||||||
<CNavItem active>Active</CNavItem>
|
<CNav>
|
||||||
<CNavItem title="Link"/>
|
<CNavItem active>Active</CNavItem>
|
||||||
<CNavItem>Another Link</CNavItem>
|
<CNavItem title="Link"/>
|
||||||
<CNavItem disabled>Disabled</CNavItem>
|
<CNavItem>Another Link</CNavItem>
|
||||||
</CNav>
|
<CNavItem disabled>Disabled</CNavItem>
|
||||||
</CCardBody>
|
</CNav>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Bootstrap Navs </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>icons</small>
|
<strong> Bootstrap Navs </strong>
|
||||||
</CCardHeader>
|
<small>icons</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNav>
|
<CCardBody>
|
||||||
<CNavItem active>
|
<CNav>
|
||||||
<i class="cui-basket-loaded"></i>
|
<CNavItem active>
|
||||||
</CNavItem>
|
<i class="cui-basket-loaded"></i>
|
||||||
<CNavItem>
|
</CNavItem>
|
||||||
Link
|
<CNavItem>
|
||||||
</CNavItem>
|
Link
|
||||||
<CNavItem>
|
</CNavItem>
|
||||||
Another Link
|
<CNavItem>
|
||||||
</CNavItem>
|
Another Link
|
||||||
<CNavItem disabled>Disabled</CNavItem>
|
</CNavItem>
|
||||||
</CNav>
|
<CNavItem disabled>Disabled</CNavItem>
|
||||||
</CCardBody>
|
</CNav>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Bootstrap Navs </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>tab style</small>
|
<strong> Bootstrap Navs </strong>
|
||||||
</CCardHeader>
|
<small>tab style</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNav tabs>
|
<CCardBody>
|
||||||
<CNavItem active>
|
<CNav tabs>
|
||||||
Active
|
<CNavItem active>
|
||||||
</CNavItem>
|
Active
|
||||||
<CNavItem>
|
</CNavItem>
|
||||||
Link
|
<CNavItem>
|
||||||
</CNavItem>
|
Link
|
||||||
<CNavItem>
|
</CNavItem>
|
||||||
Another Link
|
<CNavItem>
|
||||||
</CNavItem>
|
Another Link
|
||||||
<CNavItem disabled>Disabled</CNavItem>
|
</CNavItem>
|
||||||
</CNav>
|
<CNavItem disabled>Disabled</CNavItem>
|
||||||
</CCardBody>
|
</CNav>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader @click="item++">
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader @click="item++">
|
||||||
<strong> Bootstrap Navs </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>pill style</small>
|
<strong> Bootstrap Navs </strong>
|
||||||
</CCardHeader>
|
<small>pill style</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNav pills>
|
<CCardBody>
|
||||||
<CNavItem active>Active</CNavItem>
|
<CNav pills>
|
||||||
<CNavItem>Link</CNavItem>
|
<CNavItem active>Active</CNavItem>
|
||||||
<CNavItem>Another Link</CNavItem>
|
<CNavItem>Link</CNavItem>
|
||||||
<CNavItem disabled>Disabled</CNavItem>
|
<CNavItem>Another Link</CNavItem>
|
||||||
</CNav>
|
<CNavItem disabled>Disabled</CNavItem>
|
||||||
</CCardBody>
|
</CNav>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Bootstrap Navs </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>fill tabs</small>
|
<strong> Bootstrap Navs </strong>
|
||||||
</CCardHeader>
|
<small>fill tabs</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNav fill tabs>
|
<CCardBody>
|
||||||
<CNavItem active>Active</CNavItem>
|
<CNav fill tabs>
|
||||||
<CNavItem>Link</CNavItem>
|
<CNavItem active>Active</CNavItem>
|
||||||
<CNavItem>Link with a long name </CNavItem>
|
<CNavItem>Link</CNavItem>
|
||||||
<CNavItem disabled>Disabled</CNavItem>
|
<CNavItem>Link with a long name </CNavItem>
|
||||||
</CNav>
|
<CNavItem disabled>Disabled</CNavItem>
|
||||||
</CCardBody>
|
</CNav>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Bootstrap Navs </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>justified tabs</small>
|
<strong> Bootstrap Navs </strong>
|
||||||
</CCardHeader>
|
<small>justified tabs</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNav justified tabs>
|
<CCardBody>
|
||||||
<CNavItem active>Active</CNavItem>
|
<CNav justified tabs>
|
||||||
<CNavItem>Link</CNavItem>
|
<CNavItem active>Active</CNavItem>
|
||||||
<CNavItem>Link with a long name </CNavItem>
|
<CNavItem>Link</CNavItem>
|
||||||
<CNavItem disabled>Disabled</CNavItem>
|
<CNavItem>Link with a long name </CNavItem>
|
||||||
</CNav>
|
<CNavItem disabled>Disabled</CNavItem>
|
||||||
</CCardBody>
|
</CNav>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Bootstrap Navs </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>dropdown support</small>
|
<strong> Bootstrap Navs </strong>
|
||||||
</CCardHeader>
|
<small>dropdown support</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CNav pills>
|
<CCardBody>
|
||||||
<CNavItem active>Active</CNavItem>
|
<CNav pills>
|
||||||
<CNavItem>Link</CNavItem>
|
<CNavItem active>Active</CNavItem>
|
||||||
<CDropdown
|
<CNavItem>Link</CNavItem>
|
||||||
id="nav7_ddown"
|
<CDropdown
|
||||||
nav
|
id="nav7_ddown"
|
||||||
placement="bottom-end"
|
nav
|
||||||
button-content="Dropdown"
|
placement="bottom-end"
|
||||||
>
|
button-content="Dropdown"
|
||||||
<!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
|
>
|
||||||
<CDropdownItem>one</CDropdownItem>
|
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
|
||||||
<CDropdownItem>two</CDropdownItem>
|
<CDropdownItem>one</CDropdownItem>
|
||||||
<CDropdownDivider/>
|
<CDropdownItem>two</CDropdownItem>
|
||||||
<CDropdownItem>three</CDropdownItem>
|
<CDropdownDivider/>
|
||||||
</CDropdown>
|
<CDropdownItem>three</CDropdownItem>
|
||||||
</CNav>
|
</CDropdown>
|
||||||
</CCardBody>
|
</CNav>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Bootstrap Navs </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>vertical variation</small>
|
<strong> Bootstrap Navs </strong>
|
||||||
</CCardHeader>
|
<small>vertical variation</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CRow>
|
<CCardBody>
|
||||||
<CCol col="3" class="c-m-0">
|
<CRow>
|
||||||
<CNav vertical pills >
|
<CCol col="3" class="m-0">
|
||||||
<CNavItem active>Active</CNavItem>
|
<CNav vertical pills >
|
||||||
<CNavItem>Link</CNavItem>
|
<CNavItem active>Active</CNavItem>
|
||||||
<CNavItem>Another Link</CNavItem>
|
<CNavItem>Link</CNavItem>
|
||||||
<CNavItem disabled>Disabled</CNavItem>
|
<CNavItem>Another Link</CNavItem>
|
||||||
</CNav>
|
<CNavItem disabled>Disabled</CNavItem>
|
||||||
</CCol>
|
</CNav>
|
||||||
</CRow>
|
</CCol>
|
||||||
</CCardBody>
|
</CRow>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
</div>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'navs',
|
name: 'Navs',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
item: 2
|
item: 2
|
||||||
|
|||||||
@@ -1,86 +1,89 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i>
|
||||||
<i class="fa fa-align-justify"></i>
|
<strong> Responsive bootstrap Pagination</strong>
|
||||||
<strong> Responsive bootstrap Pagination</strong>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="c-card-header-actions">
|
<a
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
href="https://coreui.io/vue/docs/3.0/components/Pagination"
|
||||||
<small class="c-text-muted">docs</small>
|
class="card-header-action"
|
||||||
</a>
|
rel="noreferrer noopener"
|
||||||
</div> -->
|
target="_blank"
|
||||||
</CCardHeader>
|
>
|
||||||
<CCardBody>
|
<small class="text-muted">docs</small>
|
||||||
<h6>Default</h6>
|
</a>
|
||||||
|
</div>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<h6>Default</h6>
|
||||||
|
<CPagination
|
||||||
|
:active-page.sync="currentPage"
|
||||||
|
:pages="10"
|
||||||
|
responsive
|
||||||
|
/>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<h6>Small</h6>
|
||||||
|
<CPagination
|
||||||
|
size="sm"
|
||||||
|
:active-page.sync="currentPage"
|
||||||
|
:pages="10"/>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h6>Large</h6>
|
||||||
<CPagination
|
<CPagination
|
||||||
|
size="lg"
|
||||||
:active-page.sync="currentPage"
|
:active-page.sync="currentPage"
|
||||||
:pages="10"
|
:pages="10"
|
||||||
responsive
|
responsive
|
||||||
/>
|
/>
|
||||||
<br>
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h6>Small</h6>
|
<div>currentPage: {{currentPage}}</div>
|
||||||
<CPagination
|
</CCardBody>
|
||||||
size="sm"
|
</CCard>
|
||||||
:active-page.sync="currentPage"
|
<CCard>
|
||||||
:pages="10"/>
|
<CCardHeader>
|
||||||
<br>
|
<i class="fa fa-align-justify"></i>
|
||||||
|
<strong> Pagination </strong>
|
||||||
|
<small>alignment</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<h6>Left alignment (default)</h6>
|
||||||
|
<CPagination
|
||||||
|
:active-page.sync="currentPage"
|
||||||
|
:pages="10"
|
||||||
|
/>
|
||||||
|
<br>
|
||||||
|
|
||||||
<div>
|
<h6>Center alignment</h6>
|
||||||
<h6>Large</h6>
|
<CPagination
|
||||||
<CPagination
|
align="center"
|
||||||
size="lg"
|
:pages="10"
|
||||||
:active-page.sync="currentPage"
|
:active-page.sync="currentPage"
|
||||||
:pages="10"
|
/>
|
||||||
responsive
|
<br>
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>currentPage: {{currentPage}}</div>
|
<h6>Right (end) alignment</h6>
|
||||||
</CCardBody>
|
<CPagination
|
||||||
</CCard>
|
align="end"
|
||||||
<CCard>
|
:active-page.sync="currentPage"
|
||||||
<CCardHeader>
|
:pages="10"
|
||||||
<i class="fa fa-align-justify"></i>
|
/>
|
||||||
<strong> Pagination </strong>
|
<br>
|
||||||
<small>alignment</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<h6>Left alignment (default)</h6>
|
|
||||||
<CPagination
|
|
||||||
:active-page.sync="currentPage"
|
|
||||||
:pages="10"
|
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<h6>Center alignment</h6>
|
<div>currentPage: {{currentPage}}</div>
|
||||||
<CPagination
|
</CCardBody>
|
||||||
align="center"
|
</CCard>
|
||||||
:pages="10"
|
|
||||||
:active-page.sync="currentPage"
|
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<h6>Right (end) alignment</h6>
|
|
||||||
<CPagination
|
|
||||||
align="end"
|
|
||||||
:active-page.sync="currentPage"
|
|
||||||
:pages="10"
|
|
||||||
/>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div>currentPage: {{currentPage}}</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'paginations',
|
name: 'Paginations',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
currentPage: 3,
|
currentPage: 3,
|
||||||
|
|||||||
+72
-82
@@ -1,96 +1,86 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i>
|
||||||
<i class="fa fa-align-justify"></i>
|
<strong> Bootstrap Popovers</strong>
|
||||||
<strong> Bootstrap Popovers</strong>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="c-card-header-actions">
|
<a
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
href="https://coreui.io/vue/docs/3.0/components/Popover"
|
||||||
<small class="c-text-muted">docs</small>
|
class="card-header-action"
|
||||||
</a>
|
rel="noreferrer noopener"
|
||||||
</div> -->
|
target="_blank"
|
||||||
</CCardHeader>
|
>
|
||||||
<CCardBody>
|
<small class="text-muted">docs</small>
|
||||||
<CRow>
|
</a>
|
||||||
<CCol col="4">
|
</div>
|
||||||
<div class="c-my-3 c-text-center">
|
</CCardHeader>
|
||||||
<CButton
|
<CCardBody>
|
||||||
variant="primary"
|
<CRow>
|
||||||
v-c-popover="{
|
<CCol col="6">
|
||||||
header: 'Popover header',
|
<div class="my-3 text-center">
|
||||||
content: 'I am popover content!'
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
Hover Me
|
|
||||||
</CButton>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="4">
|
|
||||||
<div class="c-my-3 c-text-center">
|
|
||||||
<CButton
|
|
||||||
variant="primary"
|
|
||||||
v-c-popover="{
|
|
||||||
header: 'Popover!',
|
|
||||||
content: 'I start <strong>open</strong>',
|
|
||||||
active: true
|
|
||||||
}"
|
|
||||||
textHtml="Hover me"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="4">
|
|
||||||
<div class="c-my-3 c-text-center">
|
|
||||||
<CButton
|
|
||||||
variant="primary"
|
|
||||||
v-c-popover.click="{
|
|
||||||
header: 'Popover!',
|
|
||||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
|
||||||
placement: 'bottom'
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
Click me
|
|
||||||
</CButton>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Popovers </strong>
|
|
||||||
<small>placement</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody class="c-my-3">
|
|
||||||
<CRow>
|
|
||||||
<CCol
|
|
||||||
md="4"
|
|
||||||
class="c-py-4 c-text-center"
|
|
||||||
v-for="placement in placements"
|
|
||||||
:key="placement"
|
|
||||||
>
|
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover="{
|
v-c-popover="{
|
||||||
header: 'Popover!',
|
header: 'Popover header',
|
||||||
content: `Placement ${placement}`,
|
content: 'I am popover content!'
|
||||||
placement
|
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ placement }}
|
Click Me
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCol>
|
</div>
|
||||||
</CRow>
|
</CCol>
|
||||||
</CCardBody>
|
<CCol col="6">
|
||||||
</CCard>
|
<div class="my-3 text-center">
|
||||||
</div>
|
<CButton
|
||||||
|
color="primary"
|
||||||
|
v-c-popover="{
|
||||||
|
header: 'Popover!',
|
||||||
|
content: 'I start <strong>open</strong>',
|
||||||
|
active: true
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
</CButton>
|
||||||
|
</div>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i>
|
||||||
|
<strong> Popovers </strong>
|
||||||
|
<small>placement</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody class="my-3">
|
||||||
|
<CRow>
|
||||||
|
<CCol
|
||||||
|
md="4"
|
||||||
|
class="py-4 text-center"
|
||||||
|
v-for="placement in placements"
|
||||||
|
:key="placement"
|
||||||
|
>
|
||||||
|
<CButton
|
||||||
|
color="primary"
|
||||||
|
v-c-popover="{
|
||||||
|
header: 'Popover!',
|
||||||
|
content: `Placement ${placement}`,
|
||||||
|
placement
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ placement }}
|
||||||
|
</CButton>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'popovers',
|
name: 'Popovers',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
placements: [
|
placements: [
|
||||||
|
|||||||
+210
-203
@@ -1,218 +1,227 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i>
|
||||||
<i class="fa fa-align-justify"></i>
|
<strong> Bootstrap Progress</strong>
|
||||||
<strong> Bootstrap Progress</strong>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="c-card-header-actions">
|
<a
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
href="https://coreui.io/vue/docs/3.0/components/Progress"
|
||||||
<small class="c-text-muted">docs</small>
|
class="card-header-action"
|
||||||
</a>
|
rel="noreferrer noopener"
|
||||||
</div> -->
|
target="_blank"
|
||||||
</CCardHeader>
|
>
|
||||||
<CCardBody>
|
<small class="text-muted">docs</small>
|
||||||
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
|
</a>
|
||||||
<CProgress class="c-mt-1" :max="max" show-value>
|
</div>
|
||||||
<CProgressBar :value="counter*(6/10)" variant="success"/>
|
</CCardHeader>
|
||||||
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
|
<CCardBody>
|
||||||
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
|
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
||||||
</CProgress>
|
<CProgress class="mt-1" :max="max" show-value>
|
||||||
<CButton class="c-mt-4" @click="clicked">Click me</CButton>
|
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||||
</CCardBody>
|
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||||
</CCard>
|
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||||
<CCard>
|
</CProgress>
|
||||||
<CCardHeader>
|
<CButton
|
||||||
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
|
@click="clicked"
|
||||||
</CCardHeader>
|
color="secondary"
|
||||||
<CCardBody>
|
class="mt-4"
|
||||||
<h6>No label</h6>
|
>
|
||||||
<CProgress :value="value" :max="max2" class="c-mb-3"/>
|
Click me to animate progress bars
|
||||||
<h6>Value label</h6>
|
</CButton>
|
||||||
<CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
|
</CCardBody>
|
||||||
<h6>Progress label</h6>
|
</CCard>
|
||||||
<CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
|
<CCard>
|
||||||
<h6>Value label with precision</h6>
|
<CCardHeader>
|
||||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
|
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
|
||||||
<h6>Progress label with precision</h6>
|
</CCardHeader>
|
||||||
<CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
|
<CCardBody>
|
||||||
</CCardBody>
|
<h6>No label</h6>
|
||||||
</CCard>
|
<CProgress :value="value" :max="max2" class="mb-3"/>
|
||||||
<CCard>
|
<h6>Value label</h6>
|
||||||
<CCardHeader>
|
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
|
||||||
<i class="fa fa-align-justify"></i>
|
<h6>Progress label</h6>
|
||||||
<strong> Progress </strong>
|
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
|
||||||
<small>width</small>
|
<h6>Value label with precision</h6>
|
||||||
</CCardHeader>
|
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
|
||||||
<CCardBody>
|
<h6>Progress label with precision</h6>
|
||||||
<h6>Default width</h6>
|
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
|
||||||
<CProgress :value="value3" class="c-mb-3"/>
|
</CCardBody>
|
||||||
<h6>Custom widths</h6>
|
</CCard>
|
||||||
<CProgress :value="value3" class="c-w-75 c-mb-2"/>
|
<CCard>
|
||||||
<CProgress :value="value3" class="c-w-50 c-mb-2"/>
|
<CCardHeader>
|
||||||
<CProgress :value="value3" class="c-w-25"/>
|
<i class="fa fa-align-justify"></i>
|
||||||
</CCardBody>
|
<strong> Progress </strong>
|
||||||
</CCard>
|
<small>width</small>
|
||||||
<CCard>
|
</CCardHeader>
|
||||||
<CCardHeader>
|
<CCardBody>
|
||||||
<i class="fa fa-align-justify"></i>
|
<h6>Default width</h6>
|
||||||
<strong> Progress </strong>
|
<CProgress :value="value3" class="mb-3"/>
|
||||||
<small>height</small>
|
<h6>Custom widths</h6>
|
||||||
</CCardHeader>
|
<CProgress :value="value3" class="w-75 mb-2"/>
|
||||||
<CCardBody>
|
<CProgress :value="value3" class="w-50 mb-2"/>
|
||||||
<h6>Default height</h6>
|
<CProgress :value="value3" class="w-25"/>
|
||||||
<CProgress :value="value3" show-progress class="c-mb-3"/>
|
</CCardBody>
|
||||||
<h6>Custom heights</h6>
|
</CCard>
|
||||||
<CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
|
<CCard>
|
||||||
<CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
|
<CCardHeader>
|
||||||
<CProgress height="2px" :value="value3"/>
|
<i class="fa fa-align-justify"></i>
|
||||||
</CCardBody>
|
<strong> Progress </strong>
|
||||||
</CCard>
|
<small>height</small>
|
||||||
<CCard>
|
</CCardHeader>
|
||||||
<CCardHeader>
|
<CCardBody>
|
||||||
<i class="fa fa-align-justify"></i>
|
<h6>Default height</h6>
|
||||||
<strong> Progress </strong>
|
<CProgress :value="value3" show-percentage class="mb-3"/>
|
||||||
<small>variants</small>
|
<h6>Custom heights</h6>
|
||||||
</CCardHeader>
|
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
|
||||||
<CCardBody>
|
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
|
||||||
<div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
|
<CProgress height="2px" :value="value3"/>
|
||||||
<div class="c-col-sm-2">{{ bar.variant }}:</div>
|
</CCardBody>
|
||||||
<div class="c-col-sm-10 c-pt-1">
|
</CCard>
|
||||||
<CProgress
|
<CCard>
|
||||||
:value="bar.value"
|
<CCardHeader>
|
||||||
:variant="bar.variant"
|
<i class="fa fa-align-justify"></i>
|
||||||
:key="bar.variant"
|
<strong> Progress </strong>
|
||||||
/>
|
<small>colors</small>
|
||||||
</div>
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
|
||||||
|
<div class="col-sm-2">{{ bar.color }}:</div>
|
||||||
|
<div class="col-sm-10 pt-1">
|
||||||
|
<CProgress
|
||||||
|
:value="bar.value"
|
||||||
|
:color="bar.color"
|
||||||
|
:key="bar.color"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</div>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Progress </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>striped</small>
|
<strong> Progress </strong>
|
||||||
</CCardHeader>
|
<small>striped</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CProgress
|
<CCardBody>
|
||||||
:value="25"
|
<CProgress
|
||||||
variant="success"
|
:value="25"
|
||||||
:striped="striped"
|
color="success"
|
||||||
class="c-mb-2"
|
:striped="striped"
|
||||||
/>
|
class="mb-2"
|
||||||
<CProgress
|
/>
|
||||||
:value="50"
|
<CProgress
|
||||||
variant="info"
|
:value="50"
|
||||||
:striped="striped"
|
color="info"
|
||||||
class="c-mb-2"
|
:striped="striped"
|
||||||
/>
|
class="mb-2"
|
||||||
<CProgress
|
/>
|
||||||
:value="75"
|
<CProgress
|
||||||
variant="warning"
|
:value="75"
|
||||||
:striped="striped"
|
color="warning"
|
||||||
class="c-mb-2"
|
:striped="striped"
|
||||||
/>
|
class="mb-2"
|
||||||
<CProgress
|
/>
|
||||||
:value="100"
|
<CProgress
|
||||||
variant="danger"
|
:value="100"
|
||||||
:striped="striped"
|
color="danger"
|
||||||
class="c-mb-2"
|
:striped="striped"
|
||||||
/>
|
class="mb-2"
|
||||||
<CButton variant="secondary" @click="striped = !striped">
|
/>
|
||||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
<CButton color="secondary" @click="striped = !striped">
|
||||||
</CButton>
|
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||||
</CCardBody>
|
</CButton>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Progress </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>animated</small>
|
<strong> Progress </strong>
|
||||||
</CCardHeader>
|
<small>animated</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CProgress
|
<CCardBody>
|
||||||
:value="25"
|
<CProgress
|
||||||
variant="success"
|
:value="25"
|
||||||
striped
|
color="success"
|
||||||
:animated="animate"
|
striped
|
||||||
class="c-mb-2"
|
:animated="animate"
|
||||||
/>
|
class="mb-2"
|
||||||
<CProgress
|
/>
|
||||||
:value="50"
|
<CProgress
|
||||||
variant="info"
|
:value="50"
|
||||||
striped
|
color="info"
|
||||||
:animated="animate"
|
striped
|
||||||
class="c-mb-2"
|
:animated="animate"
|
||||||
/>
|
class="mb-2"
|
||||||
<CProgress
|
/>
|
||||||
:value="75"
|
<CProgress
|
||||||
variant="warning"
|
:value="75"
|
||||||
striped
|
color="warning"
|
||||||
:animated="animate"
|
striped
|
||||||
class="c-mb-2"
|
:animated="animate"
|
||||||
/>
|
class="mb-2"
|
||||||
<CProgress
|
/>
|
||||||
:value="100"
|
<CProgress
|
||||||
variant="danger"
|
:value="100"
|
||||||
:animated="animate"
|
color="danger"
|
||||||
class="c-mb-3"
|
:animated="animate"
|
||||||
/>
|
class="mb-3"
|
||||||
<CButton variant="secondary" @click="animate = !animate">
|
/>
|
||||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
<CButton color="secondary" @click="animate = !animate">
|
||||||
</CButton>
|
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||||
</CCardBody>
|
</CButton>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
<CCard>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCardHeader>
|
||||||
<strong> Progress </strong>
|
<i class="fa fa-align-justify"></i>
|
||||||
<small>multiple bars</small>
|
<strong> Progress </strong>
|
||||||
</CCardHeader>
|
<small>multiple bars</small>
|
||||||
<CCardBody>
|
</CCardHeader>
|
||||||
<CProgress :max="max3" class="c-mb-3">
|
<CCardBody>
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgress :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
</CProgress>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
<CProgress show-progress :max="max3" class="c-mb-3">
|
</CProgress>
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgress show-percentage :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
</CProgress>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
<CProgress show-value striped :max="max3" class="c-mb-3">
|
</CProgress>
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgress show-value striped :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
</CProgress>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
<CProgress :max="max3" class="c-mb-3">
|
</CProgress>
|
||||||
<CProgressBar variant="primary" :value="values[0]" show-progress/>
|
<CProgress :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
|
<CProgressBar color="primary" :value="values[0]" show-percentage/>
|
||||||
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
|
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
|
||||||
</CProgress>
|
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
|
||||||
</CCardBody>
|
</CProgress>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
</div>
|
</CCard>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'progress-bars',
|
name: 'ProgressBars',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
counter: 45,
|
counter: 73,
|
||||||
max: 100,
|
max: 100,
|
||||||
max2: 50,
|
max2: 50,
|
||||||
value: 33.333333333,
|
value: 33.333333333,
|
||||||
value3: 75,
|
value3: 75,
|
||||||
bars: [
|
bars: [
|
||||||
{variant: 'success', value: 75},
|
{color: 'success', value: 75},
|
||||||
{variant: 'info', value: 75},
|
{color: 'info', value: 75},
|
||||||
{variant: 'warning', value: 75},
|
{color: 'warning', value: 75},
|
||||||
{variant: 'danger', value: 75},
|
{color: 'danger', value: 75},
|
||||||
{variant: 'primary', value: 75},
|
{color: 'primary', value: 75},
|
||||||
{variant: 'secondary', value: 75},
|
{color: 'secondary', value: 75},
|
||||||
{variant: 'dark', value: 75}
|
{color: 'dark', value: 75}
|
||||||
],
|
],
|
||||||
timer: null,
|
timer: null,
|
||||||
striped: true,
|
striped: true,
|
||||||
@@ -224,8 +233,6 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
clicked () {
|
clicked () {
|
||||||
this.counter = Math.random() * this.max
|
this.counter = Math.random() * this.max
|
||||||
// console.log('Change progress to ' +
|
|
||||||
// Math.round(this.counter * 100) / 100)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|||||||
+259
-251
@@ -4,34 +4,33 @@
|
|||||||
<CCol xs="12" md="6">
|
<CCol xs="12" md="6">
|
||||||
<CCard v-if="true">
|
<CCard v-if="true">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<h5>
|
Radio switches
|
||||||
Radio switches
|
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
|
||||||
<CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
|
<div class="card-header-actions">
|
||||||
<CBadge variant="danger" class="c-float-right">NEW</CBadge>
|
<a
|
||||||
</h5>
|
href="https://coreui.io/vue/docs/3.0/components/Switch"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- <CSwitch
|
|
||||||
:checked.sync="test11"
|
|
||||||
true-value="yes"
|
|
||||||
false-value="no"
|
|
||||||
id="alt"
|
|
||||||
name="lg"
|
|
||||||
required
|
|
||||||
/> -->
|
|
||||||
<!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
|
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-mx-1"
|
v-for="(color, key) in colors"
|
||||||
:key="key"
|
:key="'radio' + key"
|
||||||
:variant="variant"
|
class="mx-1"
|
||||||
|
:color="color"
|
||||||
shape="3d"
|
shape="3d"
|
||||||
outline="alt"
|
outline="alt"
|
||||||
v-bind="labelIcon"
|
v-bind="labelIcon"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="radio"
|
name="radio"
|
||||||
:checked.sync="radio"
|
:checked="key === 2"
|
||||||
:value="variant"
|
@update:checked="(val) => val ? radio = color : null"
|
||||||
v-for="(variant, key) in variants"
|
:value="color"
|
||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -42,25 +41,23 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Switch default
|
Switch default
|
||||||
<CBadge variant="primary">{{checker}}</CBadge>
|
<CBadge color="primary">{{checker}}</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-mx-1"
|
class="mx-1"
|
||||||
variant="primary"
|
color="primary"
|
||||||
name="switch1"
|
name="switch1"
|
||||||
:checked.sync="checker"
|
:checked.sync="checker"
|
||||||
true-value="yes"
|
|
||||||
false-value="no"
|
|
||||||
/>
|
/>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="c-mx-1"
|
class="mx-1"
|
||||||
:variant="variant"
|
:color="color"
|
||||||
checked
|
checked
|
||||||
:key="key"
|
:key="key"
|
||||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||||
/>
|
/>
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled />
|
<CSwitch class="mx-1" color="primary" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -70,15 +67,15 @@
|
|||||||
Switch pills
|
Switch pills
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
|
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -88,15 +85,15 @@
|
|||||||
3d Switch
|
3d Switch
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -106,15 +103,15 @@
|
|||||||
3d Switch <small><code>disabled</code></small>
|
3d Switch <small><code>disabled</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="success" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="info" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="light" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -124,15 +121,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -142,15 +139,15 @@
|
|||||||
3d Switch <small><code>label</code></small>
|
3d Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
<CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -160,15 +157,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -178,15 +175,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -196,15 +193,15 @@
|
|||||||
Switch <small><code>outline</code></small>
|
Switch <small><code>outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline />
|
<CSwitch class="mx-1" color="primary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline />
|
<CSwitch class="mx-1" color="secondary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline />
|
<CSwitch class="mx-1" color="success" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline />
|
<CSwitch class="mx-1" color="warning" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline />
|
<CSwitch class="mx-1" color="info" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline />
|
<CSwitch class="mx-1" color="danger" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline />
|
<CSwitch class="mx-1" color="light" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline />
|
<CSwitch class="mx-1" color="dark" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline disabled />
|
<CSwitch class="mx-1" color="primary" outline disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -214,15 +211,15 @@
|
|||||||
Switch <small><code>outline shape="pill"</code></small>
|
Switch <small><code>outline shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -232,15 +229,15 @@
|
|||||||
Switch <small><code>outline="alt"</code></small>
|
Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -250,15 +247,15 @@
|
|||||||
Switch <small><code>outline="alt" shape="pill"</code></small>
|
Switch <small><code>outline="alt" shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -268,15 +265,15 @@
|
|||||||
Switch <small><code>label</code></small>
|
Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked />
|
<CSwitch class="mx-1" color="primary" checked />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked />
|
<CSwitch class="mx-1" color="secondary" checked />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked />
|
<CSwitch class="mx-1" color="success" checked />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked />
|
<CSwitch class="mx-1" color="warning" checked />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked />
|
<CSwitch class="mx-1" color="info" checked />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked />
|
<CSwitch class="mx-1" color="danger" checked />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked />
|
<CSwitch class="mx-1" color="light" checked />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked />
|
<CSwitch class="mx-1" color="dark" checked />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled />
|
<CSwitch class="mx-1" color="primary" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -286,15 +283,15 @@
|
|||||||
Switch <small><code>label shape="pill"</code></small>
|
Switch <small><code>label shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -304,15 +301,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline />
|
<CSwitch class="mx-1" color="primary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline />
|
<CSwitch class="mx-1" color="secondary" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline />
|
<CSwitch class="mx-1" color="success" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline />
|
<CSwitch class="mx-1" color="warning" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline />
|
<CSwitch class="mx-1" color="info" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline />
|
<CSwitch class="mx-1" color="danger" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline />
|
<CSwitch class="mx-1" color="light" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline />
|
<CSwitch class="mx-1" color="dark" checked outline />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline disabled />
|
<CSwitch class="mx-1" color="primary" outline disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -322,15 +319,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -340,15 +337,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -358,15 +355,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -377,15 +374,15 @@
|
|||||||
Switch <small><code>label</code></small>
|
Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked v-bind="labelIcon"/>
|
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>shape
|
</CCard>shape
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -395,15 +392,15 @@
|
|||||||
Switch <small><code>label shape="pill"</code></small>
|
Switch <small><code>label shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -413,15 +410,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -431,15 +428,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -449,15 +446,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -467,15 +464,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="c-mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||||
<CSwitch class="c-mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="c-mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -485,11 +482,11 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Sizes
|
Sizes
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody class="c-p-0">
|
<CCardBody class="p-0">
|
||||||
<CTable
|
<CTable
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
class="c-table-align-middle c-mb-0"
|
class="table-align-middle mb-0"
|
||||||
:items="items"
|
:items="items"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
no-sorting
|
no-sorting
|
||||||
@@ -498,7 +495,7 @@
|
|||||||
<td>
|
<td>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
:shape="item.example.shape"
|
:shape="item.example.shape"
|
||||||
:variant="item.example.variant"
|
:color="item.example.color"
|
||||||
:size="item.example.size"
|
:size="item.example.size"
|
||||||
:checked="item.example.checked"
|
:checked="item.example.checked"
|
||||||
/>
|
/>
|
||||||
@@ -519,24 +516,36 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'switches',
|
name: 'Switches',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
variants:[
|
colors: [
|
||||||
'primary','secondary','warning','success','info','danger','light','dark'
|
'primary','secondary','warning','success','info','danger','light','dark'
|
||||||
],
|
],
|
||||||
fields: [
|
fields: [
|
||||||
{key: 'size'},
|
{ key: 'size' },
|
||||||
{key: 'example'},
|
{ key: 'example' },
|
||||||
{key: 'size_prop', label: 'Size prop'}
|
{ key: 'size_prop', label: 'Size prop' }
|
||||||
],
|
],
|
||||||
items: [
|
items: [
|
||||||
{size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
|
{
|
||||||
{size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
|
size: 'Large',
|
||||||
{size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
|
example: { shape: '3d', color: 'primary', size: 'lg', checked: true },
|
||||||
|
size_prop: 'Add following prop <code>size="lg"</code>'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
size: 'Normal',
|
||||||
|
example: { shape: '3d', color: 'primary', size: '', checked: true },
|
||||||
|
size_prop: '-'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
size: 'Small',
|
||||||
|
example: {shape: '3d', color: 'primary', size: 'sm', checked: true},
|
||||||
|
size_prop: 'Add following prop <code>size="sm"</code>'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
checker: 'yes',
|
checker: true,
|
||||||
radio: 'primary',
|
radio: 'warning',
|
||||||
labelIcon: {
|
labelIcon: {
|
||||||
labelOn: '\u2713',
|
labelOn: '\u2713',
|
||||||
labelOff: '\u2715'
|
labelOff: '\u2715'
|
||||||
@@ -544,8 +553,7 @@ export default {
|
|||||||
labelTxt: {
|
labelTxt: {
|
||||||
labelOn: 'yes',
|
labelOn: 'yes',
|
||||||
labelOff: 'no'
|
labelOff: 'no'
|
||||||
},
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,13 +8,13 @@
|
|||||||
:fixed="fixed"
|
:fixed="fixed"
|
||||||
:items="items"
|
:items="items"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
:per-page="small ? 10 : 5"
|
:items-per-page="small ? 10 : 5"
|
||||||
:dark="dark"
|
:dark="dark"
|
||||||
no-sorting
|
pagination
|
||||||
>
|
>
|
||||||
<template #status="{item}">
|
<template #status="{item}">
|
||||||
<td>
|
<td>
|
||||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
</CTable>
|
</CTable>
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'TableWrapper',
|
name: 'Table',
|
||||||
props: {
|
props: {
|
||||||
items: Array,
|
items: Array,
|
||||||
fields: {
|
fields: {
|
||||||
@@ -49,7 +49,7 @@ export default {
|
|||||||
: status === 'Inactive' ? 'secondary'
|
: status === 'Inactive' ? 'secondary'
|
||||||
: status === 'Pending' ? 'warning'
|
: status === 'Pending' ? 'warning'
|
||||||
: status === 'Banned' ? 'danger' : 'primary'
|
: status === 'Banned' ? 'danger' : 'primary'
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+11
-152
@@ -1,102 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<CRow>
|
|
||||||
<CCol sm="12">
|
|
||||||
<CCard header-html="CTable power presentation" body-wrapper>
|
|
||||||
<CTable
|
|
||||||
:items="getItems()"
|
|
||||||
:fields="fields"
|
|
||||||
:per-page="6"
|
|
||||||
index-column
|
|
||||||
filter-row
|
|
||||||
options-row
|
|
||||||
hover
|
|
||||||
:default-column-filter="{ role:'staff' }"
|
|
||||||
:default-sorters="['username', 'asc']"
|
|
||||||
:default-filter="2012"
|
|
||||||
dark-header
|
|
||||||
footer
|
|
||||||
pagination
|
|
||||||
>
|
|
||||||
<template #index-column="{index}">
|
|
||||||
<td
|
|
||||||
@click="toggleDetails(index)"
|
|
||||||
style="cursor:pointer"
|
|
||||||
class="c-text-center"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="c-icons c-font-lg c-d-block cui-chevron-right"
|
|
||||||
style="transition: transform 0.4s"
|
|
||||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
|
|
||||||
></i>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
<template #status="{item}">
|
|
||||||
<td>
|
|
||||||
<CBadge :variant="getBadge(item.status)">
|
|
||||||
{{item.status}}
|
|
||||||
</CBadge>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
<template #show_details="{item, index}">
|
|
||||||
<td class="c-py-2">
|
|
||||||
<CButton
|
|
||||||
variant="outline-primary"
|
|
||||||
square
|
|
||||||
size="sm"
|
|
||||||
@click="toggleDetails(index)"
|
|
||||||
:text-html="details.includes(index) ? 'Hide' : 'Show'"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</template>
|
|
||||||
<template #details="{item, index}">
|
|
||||||
<CCollapse :show="details.includes(index)">
|
|
||||||
<CCardBody>
|
|
||||||
{{index + 1}} - {{item}}
|
|
||||||
</CCardBody>
|
|
||||||
</CCollapse>
|
|
||||||
</template>
|
|
||||||
</CTable>
|
|
||||||
<!-- <CPagination
|
|
||||||
v-show="pages > 1"
|
|
||||||
:activePage.sync="page"
|
|
||||||
:pages="pages"
|
|
||||||
/> -->
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<!-- <CRow>
|
|
||||||
<CCol sm="12">
|
|
||||||
<CCard header-html="test2">
|
|
||||||
<CTable
|
|
||||||
:items="items.slice(0)"
|
|
||||||
:fields="fields"
|
|
||||||
:per-page="5"
|
|
||||||
index-col="onlyCleaner"
|
|
||||||
filter-row
|
|
||||||
options-row="onlyFiltesr"
|
|
||||||
:pagination-props="{align:'center'}"
|
|
||||||
>
|
|
||||||
<td slot="status" slot-scope="{item}">
|
|
||||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
|
||||||
</td>
|
|
||||||
</CTable>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow> -->
|
|
||||||
|
|
||||||
|
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
caption="<i class='fa fa-align-justify'></i> Simple Table"
|
caption="<i class='fa fa-align-justify'></i> Simple Table"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
striped
|
striped
|
||||||
caption="<i class='fa fa-align-justify'></i> Striped Table"
|
caption="<i class='fa fa-align-justify'></i> Striped Table"
|
||||||
/>
|
/>
|
||||||
@@ -106,7 +20,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
small
|
small
|
||||||
caption="<i class='fa fa-align-justify'></i> Condensed Table"
|
caption="<i class='fa fa-align-justify'></i> Condensed Table"
|
||||||
/>
|
/>
|
||||||
@@ -114,7 +28,7 @@
|
|||||||
|
|
||||||
<CCol lg="6">
|
<CCol lg="6">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
fixed
|
fixed
|
||||||
bordered
|
bordered
|
||||||
caption="<i class='fa fa-align-justify'></i> Bordered Table"
|
caption="<i class='fa fa-align-justify'></i> Bordered Table"
|
||||||
@@ -125,7 +39,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
bordered
|
bordered
|
||||||
@@ -139,7 +53,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="12">
|
<CCol sm="12">
|
||||||
<CTableWrapper
|
<CTableWrapper
|
||||||
:items="getItems()"
|
:items="getShuffledUsersData()"
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
bordered
|
bordered
|
||||||
@@ -150,69 +64,17 @@
|
|||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CTableWrapper from './Table.vue'
|
import CTableWrapper from './Table.vue'
|
||||||
|
import usersData from '../users/UsersData'
|
||||||
const fields = [
|
|
||||||
{ key: 'username', _style:'width:40%' },
|
|
||||||
'registered',
|
|
||||||
{ key: 'role', _style:'width:20%;' },
|
|
||||||
{ key: 'status', _style:'width:20%;' },
|
|
||||||
{ 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', 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', _classes: 'c-table-success'},
|
|
||||||
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
|
||||||
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'c-table-info'},
|
|
||||||
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
|
||||||
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
|
||||||
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
|
||||||
{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', _classes: 'c-table-danger'},
|
|
||||||
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
|
||||||
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'tables',
|
name: 'Tables',
|
||||||
components: { CTableWrapper },
|
components: { CTableWrapper },
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
items: items,
|
|
||||||
fields: fields,
|
|
||||||
page: 1,
|
|
||||||
pages: null,
|
|
||||||
details: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getBadge (status) {
|
|
||||||
return status === 'Active' ? 'success'
|
|
||||||
: status === 'Inactive' ? 'secondary'
|
|
||||||
: status === 'Pending' ? 'warning'
|
|
||||||
: status === 'Banned' ? 'danger' : 'primary'
|
|
||||||
},
|
|
||||||
shuffleArray (array) {
|
shuffleArray (array) {
|
||||||
for (let i = array.length - 1; i > 0; i--) {
|
for (let i = array.length - 1; i > 0; i--) {
|
||||||
let j = Math.floor(Math.random() * (i + 1))
|
let j = Math.floor(Math.random() * (i + 1))
|
||||||
@@ -222,12 +84,9 @@ export default {
|
|||||||
}
|
}
|
||||||
return array
|
return array
|
||||||
},
|
},
|
||||||
toggleDetails (index) {
|
|
||||||
const position = this.details.indexOf(index)
|
getShuffledUsersData () {
|
||||||
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
|
return this.shuffleArray(usersData.slice(0))
|
||||||
},
|
|
||||||
getItems () {
|
|
||||||
return this.shuffleArray(this.items.slice(0))
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+17
-7
@@ -5,6 +5,16 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Tabs
|
Tabs
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Tabs"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs>
|
<CTabs>
|
||||||
@@ -15,7 +25,7 @@
|
|||||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
officia deserunt mollit anim id est laborum.
|
officia deserunt mollit anim id est laborum.
|
||||||
</CTab>
|
</CTab>
|
||||||
<CTab title-html="Profile" >
|
<CTab title-html="Profile">
|
||||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
@@ -47,7 +57,7 @@
|
|||||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||||
officia deserunt mollit anim id est laborum.
|
officia deserunt mollit anim id est laborum.
|
||||||
</CTab>
|
</CTab>
|
||||||
<CTab title-html="Profile" >
|
<CTab title-html="Profile">
|
||||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||||
@@ -106,13 +116,13 @@
|
|||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<!-- <CCol xs="12" lg="6">
|
<CCol xs="12" lg="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Tabs with icons
|
Tabs with icons
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs add-tab-classes="c-mt-1">
|
<CTabs add-tab-classes="mt-1">
|
||||||
<CTab active>
|
<CTab active>
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<i class="cui-calculator"></i> {{tabs[0]}}
|
<i class="cui-calculator"></i> {{tabs[0]}}
|
||||||
@@ -146,14 +156,14 @@
|
|||||||
</CTabs>
|
</CTabs>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol> -->
|
</CCol>
|
||||||
<CCol xs="12" lg="6">
|
<CCol xs="12" lg="6">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Tabs vertical
|
Tabs vertical
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CTabs pills vertical add-tabs-wrapper-classes="c-pl-3">
|
<CTabs pills vertical>
|
||||||
<CTab active>
|
<CTab active>
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<i class="cui-calculator"></i> {{tabs[0]}}
|
<i class="cui-calculator"></i> {{tabs[0]}}
|
||||||
@@ -194,7 +204,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'tabs',
|
name: 'Tabs',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
tabs: [
|
tabs: [
|
||||||
|
|||||||
+69
-69
@@ -1,81 +1,81 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i>
|
||||||
<i class="fa fa-align-justify"></i>
|
<strong> Bootstrap Tooltips </strong>
|
||||||
<strong> Bootstrap Tooltips </strong>
|
<small><code>v-c-tooltip</code> directive</small>
|
||||||
<small><code>v-c-tooltip</code> directive</small>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="c-card-header-actions">
|
<a
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
|
href="https://coreui.io/vue/docs/3.0/components/Tooltip"
|
||||||
<small class="c-text-muted">docs</small>
|
class="card-header-action"
|
||||||
</a>
|
rel="noreferrer noopener"
|
||||||
</div> -->
|
target="_blank"
|
||||||
</CCardHeader>
|
>
|
||||||
<CCardBody>
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CRow>
|
||||||
|
<CCol col="6">
|
||||||
|
<div class="text-center my-3">
|
||||||
|
<CButton
|
||||||
|
color="secondary"
|
||||||
|
v-c-tooltip.hover.click="'I am a tooltip!'"
|
||||||
|
>
|
||||||
|
Hover Me
|
||||||
|
</CButton>
|
||||||
|
</div>
|
||||||
|
</CCol>
|
||||||
|
<CCol col="6">
|
||||||
|
<div class="text-center my-3">
|
||||||
|
<CButton
|
||||||
|
v-c-tooltip="{content: 'I start open!', active:true }"
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
|
Hover me
|
||||||
|
</CButton>
|
||||||
|
</div>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i>
|
||||||
|
<strong> Tooltips </strong>
|
||||||
|
<small>placement</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<div class="my-3">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="4">
|
<CCol
|
||||||
<div class="c-text-center c-my-3">
|
md="4"
|
||||||
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
|
class="py-4 text-center"
|
||||||
Hover Me
|
v-for="placement in placements"
|
||||||
</CButton>
|
:key="placement"
|
||||||
</div>
|
>
|
||||||
</CCol>
|
<CButton
|
||||||
<CCol col="4">
|
color="primary"
|
||||||
<div class="c-text-center c-my-3">
|
v-c-tooltip.hover="{
|
||||||
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
|
content: `Placement ${placement}`,
|
||||||
Hover me
|
placement
|
||||||
</CButton>
|
}"
|
||||||
</div>
|
>
|
||||||
</CCol>
|
{{ placement }}
|
||||||
<CCol col="4">
|
</CButton>
|
||||||
<div class="c-text-center c-my-3">
|
|
||||||
<CButton v-c-tooltip.click="
|
|
||||||
'I am showing on click and hiding on click outside tooltip!'
|
|
||||||
">
|
|
||||||
Click me
|
|
||||||
</CButton>
|
|
||||||
</div>
|
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</div>
|
||||||
</CCard>
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Tooltips </strong>
|
|
||||||
<small>placement</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div class="c-my-3">
|
|
||||||
<CRow>
|
|
||||||
<CCol
|
|
||||||
md="4"
|
|
||||||
class="c-py-4 c-text-center"
|
|
||||||
v-for="placement in placements"
|
|
||||||
:key="placement"
|
|
||||||
>
|
|
||||||
<CButton
|
|
||||||
variant="primary"
|
|
||||||
v-c-tooltip.hover="{
|
|
||||||
content: `Placement ${placement}`,
|
|
||||||
placement
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ placement }}
|
|
||||||
</CButton>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'tooltips',
|
name: 'Tooltips',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
placements: [
|
placements: [
|
||||||
|
|||||||
+176
-169
@@ -1,173 +1,183 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<CRow>
|
||||||
<CRow>
|
<CCol col="12">
|
||||||
<CCol col="12">
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<strong>Brand Button</strong>
|
||||||
<strong>Brand Button</strong>
|
<div class="card-header-actions">
|
||||||
</CCardHeader>
|
<a
|
||||||
<CCardBody>
|
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||||
<small>Usage </small>
|
class="card-header-action"
|
||||||
<code>
|
rel="noreferrer noopener"
|
||||||
<CButton variant="facebook"><span>Facebook</span></CButton>
|
target="_blank"
|
||||||
</code>
|
>
|
||||||
<hr/>
|
<small class="text-muted">docs</small>
|
||||||
<h6>
|
</a>
|
||||||
Size Small
|
</div>
|
||||||
<small>Add <code>size="sm"</code></small>
|
</CCardHeader>
|
||||||
</h6>
|
<CCardBody>
|
||||||
<p>
|
<small>Usage </small>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
<code>{{ $options.usage }}</code>
|
||||||
<CButton
|
<hr/>
|
||||||
:name="brandName"
|
<h6>
|
||||||
size="sm"
|
Size Small
|
||||||
:key="key"
|
<small>Add <code>size="sm"</code></small>
|
||||||
:variant="brandName"
|
</h6>
|
||||||
>
|
<p>
|
||||||
<CIcon :name="brandName"/>
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
<span>{{brandName}}</span>
|
<CButton
|
||||||
</CButton>
|
:name="brandName"
|
||||||
</template>
|
size="sm"
|
||||||
</p>
|
:key="key"
|
||||||
<h6>Size Normal</h6>
|
:color="brandName"
|
||||||
<p>
|
>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
<CIcon size="sm" :name="brandName"/>
|
||||||
<CButton
|
<span>{{brandName}}</span>
|
||||||
:name="brandName"
|
</CButton>
|
||||||
:key="key"
|
</template>
|
||||||
:variant="brandName"
|
</p>
|
||||||
>
|
<h6>Size Normal</h6>
|
||||||
<CIcon :name="brandName"/>
|
<p>
|
||||||
<span>{{brandName}}</span>
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
</CButton>
|
<CButton
|
||||||
</template>
|
:name="brandName"
|
||||||
</p>
|
:key="key"
|
||||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
:color="brandName"
|
||||||
<p>
|
>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
<CIcon :name="brandName"/>
|
||||||
<CButton
|
<span>{{brandName}}</span>
|
||||||
:name="brandName"
|
</CButton>
|
||||||
size="lg"
|
</template>
|
||||||
:key="key"
|
</p>
|
||||||
:variant="brandName"
|
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||||
>
|
<p>
|
||||||
<CIcon :name="brandName"/>
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
<span>{{brandName}}</span>
|
<CButton
|
||||||
</CButton>
|
:name="brandName"
|
||||||
</template>
|
size="lg"
|
||||||
</p>
|
:key="key"
|
||||||
</CCardBody>
|
:color="brandName"
|
||||||
</CCard>
|
>
|
||||||
</CCol>
|
<CIcon size="lg" :name="brandName"/>
|
||||||
<CCol col="12">
|
<span>{{brandName}}</span>
|
||||||
<CCard>
|
</CButton>
|
||||||
<CCardHeader>
|
</template>
|
||||||
<strong>Brand Button </strong> <small>Icons only</small>
|
</p>
|
||||||
</CCardHeader>
|
</CCardBody>
|
||||||
<CCardBody>
|
</CCard>
|
||||||
<small>Usage </small>
|
</CCol>
|
||||||
<code>
|
<CCol col="12">
|
||||||
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
|
<CCard>
|
||||||
</code>
|
<CCardHeader>
|
||||||
<hr/>
|
<strong>Brand Button </strong> <small>Icons only</small>
|
||||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
</CCardHeader>
|
||||||
<p>
|
<CCardBody>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
<small>Usage </small>
|
||||||
<CButton
|
<code>{{ $options.iconsOnlyUsage }}</code>
|
||||||
:name="brandName"
|
<hr/>
|
||||||
size="sm"
|
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||||
:key="key"
|
<p>
|
||||||
:variant="brandName"
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
>
|
<CButton
|
||||||
<CIcon :name="brandName"/>
|
:name="brandName"
|
||||||
</CButton>
|
size="sm"
|
||||||
</template>
|
:key="key"
|
||||||
</p>
|
:color="brandName"
|
||||||
<h6>Size Normal</h6>
|
>
|
||||||
<p>
|
<CIcon size="sm" :name="brandName"/>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
</CButton>
|
||||||
<CButton
|
</template>
|
||||||
:name="brandName"
|
</p>
|
||||||
:key="key"
|
<h6>Size Normal</h6>
|
||||||
:variant="brandName"
|
<p>
|
||||||
>
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
<CIcon :name="brandName"/>
|
<CButton
|
||||||
</CButton>
|
:name="brandName"
|
||||||
</template>
|
:key="key"
|
||||||
</p>
|
:color="brandName"
|
||||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
>
|
||||||
<p>
|
<CIcon :name="brandName"/>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
</CButton>
|
||||||
<CButton
|
</template>
|
||||||
:name="brandName"
|
</p>
|
||||||
size="lg"
|
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||||
:key="key"
|
<p>
|
||||||
:variant="brandName"
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
>
|
<CButton
|
||||||
<CIcon :name="brandName"/>
|
:name="brandName"
|
||||||
</CButton>
|
size="lg"
|
||||||
</template>
|
:key="key"
|
||||||
</p>
|
:color="brandName"
|
||||||
</CCardBody>
|
>
|
||||||
</CCard>
|
<CIcon size="lg" :name="brandName"/>
|
||||||
</CCol>
|
</CButton>
|
||||||
|
</template>
|
||||||
|
</p>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
|
||||||
<CCol col="12">
|
<CCol col="12">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<strong>Brand Button </strong> <small>Text only</small>
|
<strong>Brand Button </strong> <small>Text only</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<small>Usage </small> <code><CButton variant="facebook"><span>Facebook</span></CButton></code>
|
<small>Usage </small>
|
||||||
<hr/>
|
<code>
|
||||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
{{ $options.textOnlyUsage }}
|
||||||
<p>
|
</code>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
<hr/>
|
||||||
<CButton
|
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||||
:name="brandName"
|
<p>
|
||||||
size="sm"
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
:key="key"
|
<CButton
|
||||||
:variant="brandName"
|
:name="brandName"
|
||||||
>
|
size="sm"
|
||||||
<span>{{brandName}}</span>
|
:key="key"
|
||||||
</CButton>
|
:color="brandName"
|
||||||
</template>
|
>
|
||||||
</p>
|
<span>{{brandName}}</span>
|
||||||
<h6>Size Normal</h6>
|
</CButton>
|
||||||
<p>
|
</template>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
</p>
|
||||||
<CButton
|
<h6>Size Normal</h6>
|
||||||
:name="brandName"
|
<p>
|
||||||
:key="key"
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
:variant="brandName"
|
<CButton
|
||||||
>
|
:name="brandName"
|
||||||
<span>{{brandName}}</span>
|
:key="key"
|
||||||
</CButton>
|
:color="brandName"
|
||||||
</template>
|
>
|
||||||
</p>
|
<span>{{brandName}}</span>
|
||||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
</CButton>
|
||||||
<p>
|
</template>
|
||||||
<template v-for="(brandName, key) in $options.brands">
|
</p>
|
||||||
<CButton
|
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||||
:name="brandName"
|
<p>
|
||||||
size="lg"
|
<template v-for="(brandName, key) in $options.brands">
|
||||||
:key="key"
|
<CButton
|
||||||
:variant="brandName"
|
:name="brandName"
|
||||||
>
|
size="lg"
|
||||||
<span>{{brandName}}</span>
|
:key="key"
|
||||||
</CButton>
|
:color="brandName"
|
||||||
</template>
|
>
|
||||||
</p>
|
<span>{{brandName}}</span>
|
||||||
</CCardBody>
|
</CButton>
|
||||||
</CCard>
|
</template>
|
||||||
</CCol>
|
</p>
|
||||||
</CRow>
|
</CCardBody>
|
||||||
</div>
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'brand-buttons',
|
name: 'BrandButtons',
|
||||||
|
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
|
||||||
|
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
|
||||||
|
textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
|
||||||
brands: [
|
brands: [
|
||||||
'facebook',
|
'facebook',
|
||||||
'twitter',
|
'twitter',
|
||||||
@@ -209,12 +219,9 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="css">
|
<style scoped>
|
||||||
.c-btn {
|
.btn {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
.c-btn svg + span {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+197
-209
@@ -1,215 +1,203 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<CRow>
|
||||||
<div>
|
<CCol col="12">
|
||||||
<CRow>
|
<CCard>
|
||||||
<CCol col="12" >
|
<CCardHeader>
|
||||||
<CCard>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CCardHeader>
|
<strong> Bootstrap button group</strong>
|
||||||
<i class="fa fa-align-justify"></i>
|
<div class="card-header-actions">
|
||||||
<strong> Bootstrap button group</strong>
|
<a
|
||||||
<!-- <div class="card-header-actions">
|
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
class="card-header-action"
|
||||||
<small class="text-muted">docs</small>
|
rel="noreferrer noopener"
|
||||||
</a>
|
target="_blank"
|
||||||
</div> -->
|
>
|
||||||
</CCardHeader>
|
<small class="text-muted">docs</small>
|
||||||
<CCardBody>
|
</a>
|
||||||
<div>
|
</div>
|
||||||
<CButtonGroup>
|
</CCardHeader>
|
||||||
<CButton>One</CButton>
|
<CCardBody>
|
||||||
<CButton>Two</CButton>
|
<div>
|
||||||
<CButton>Three</CButton>
|
<CButtonGroup>
|
||||||
<CButton>Four</CButton>
|
<CButton color="secondary">One</CButton>
|
||||||
<CButton class="c-d-sm-down-none">Five</CButton>
|
<CButton color="secondary">Two</CButton>
|
||||||
</CButtonGroup>
|
<CButton color="secondary">Three</CButton>
|
||||||
<br><br>
|
<CButton color="secondary">Four</CButton>
|
||||||
<CButtonGroup>
|
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
|
||||||
<CButton class="c-d-sm-down-none" variant="success">Success</CButton>
|
</CButtonGroup>
|
||||||
<CButton variant="info">Info</CButton>
|
<br><br>
|
||||||
<CButton variant="warning">Warn</CButton>
|
<CButtonGroup>
|
||||||
<CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
|
<CButton class="d-sm-down-none" color="success">Success</CButton>
|
||||||
<CButton variant="danger">Danger</CButton>
|
<CButton color="info">Info</CButton>
|
||||||
<CButton variant="link">Link</CButton>
|
<CButton color="warning">Warn</CButton>
|
||||||
</CButtonGroup>
|
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
|
||||||
</div>
|
<CButton color="danger">Danger</CButton>
|
||||||
</CCardBody>
|
<CButton color="link">Link</CButton>
|
||||||
</CCard>
|
</CButtonGroup>
|
||||||
</CCol>
|
</div>
|
||||||
<CCol col="12">
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCol col="12">
|
||||||
<strong> Button group </strong>sizing
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<div>
|
<strong> Button group </strong>sizing
|
||||||
<CButtonGroup>
|
</CCardHeader>
|
||||||
<CButton>Left</CButton>
|
<CCardBody>
|
||||||
<CButton>Middle</CButton>
|
<div>
|
||||||
<CButton>Right</CButton>
|
<CButtonGroup>
|
||||||
</CButtonGroup>
|
<CButton color="secondary">Left</CButton>
|
||||||
<br><br>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButtonGroup size="sm">
|
<CButton color="secondary">Right</CButton>
|
||||||
<CButton>Left</CButton>
|
</CButtonGroup>
|
||||||
<CButton>Middle</CButton>
|
<br><br>
|
||||||
<CButton>Right</CButton>
|
<CButtonGroup size="sm">
|
||||||
</CButtonGroup>
|
<CButton color="secondary">Left</CButton>
|
||||||
<br><br>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButtonGroup size="lg">
|
<CButton color="secondary">Right</CButton>
|
||||||
<CButton>Left</CButton>
|
</CButtonGroup>
|
||||||
<CButton>Middle</CButton>
|
<br><br>
|
||||||
<CButton>Right</CButton>
|
<CButtonGroup size="lg">
|
||||||
</CButtonGroup>
|
<CButton color="secondary">Left</CButton>
|
||||||
</div>
|
<CButton color="secondary">Middle</CButton>
|
||||||
</CCardBody>
|
<CButton color="secondary">Right</CButton>
|
||||||
</CCard>
|
</CButtonGroup>
|
||||||
</CCol>
|
</div>
|
||||||
<CCol col="12">
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
|
<CCol col="12">
|
||||||
</CCardHeader>
|
<CCard>
|
||||||
<CCardBody>
|
<CCardHeader>
|
||||||
<div>
|
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
|
||||||
<CButtonGroup>
|
</CCardHeader>
|
||||||
<CButton class="c-d-sm-down-none">Button 1</CButton>
|
<CCardBody>
|
||||||
<CButton class="c-d-sm-down-none">Button 2</CButton>
|
<div>
|
||||||
<CDropdown right text="Menu" variant="success">
|
<CButtonGroup>
|
||||||
<CDropdownItem>Item 1</CDropdownItem>
|
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
<CDropdown right text="Menu" color="success">
|
||||||
<CDropdownItem>Item 3</CDropdownItem>
|
<CDropdownItem>Item 1</CDropdownItem>
|
||||||
</CDropdown>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
<CButton class="c-d-sm-down-none">Button 3</CButton>
|
<CDropdownDivider></CDropdownDivider>
|
||||||
<CDropdown right split text="Split Menu" variant="info">
|
<CDropdownItem>Item 3</CDropdownItem>
|
||||||
<CDropdownItem>Item 1</CDropdownItem>
|
</CDropdown>
|
||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
<CDropdown right split text="Split Menu" color="info">
|
||||||
<CDropdownItem>Item 3</CDropdownItem>
|
<CDropdownItem>Item 1</CDropdownItem>
|
||||||
</CDropdown>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
</CButtonGroup>
|
<CDropdownDivider></CDropdownDivider>
|
||||||
</div>
|
<CDropdownItem>Item 3</CDropdownItem>
|
||||||
</CCardBody>
|
</CDropdown>
|
||||||
</CCard>
|
</CButtonGroup>
|
||||||
</CCol>
|
</div>
|
||||||
<CCol col="12">
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCol col="12">
|
||||||
<strong> Button group </strong>vertical variation
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i>
|
||||||
<div>
|
<strong> Button group </strong>vertical variation
|
||||||
<CButtonGroup vertical>
|
</CCardHeader>
|
||||||
<CButton>Top</CButton>
|
<CCardBody>
|
||||||
<CButton>Middle</CButton>
|
<div>
|
||||||
<CButton>Bottom</CButton>
|
<CButtonGroup vertical>
|
||||||
</CButtonGroup>
|
<CButton color="secondary">Top</CButton>
|
||||||
</div>
|
<CButton color="secondary">Middle</CButton>
|
||||||
</CCardBody>
|
<CButton color="secondary">Bottom</CButton>
|
||||||
</CCard>
|
</CButtonGroup>
|
||||||
</CCol>
|
</div>
|
||||||
<CCol col="12">
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i>
|
<CCol col="12">
|
||||||
<strong> Button toolbar </strong>
|
<CCard>
|
||||||
<small>with button groups</small>
|
<CCardHeader>
|
||||||
<!-- <div class="card-header-actions">
|
<i class="fa fa-align-justify"></i>
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
<strong> Button toolbar </strong>
|
||||||
<small class="text-muted">docs</small>
|
<small>with button groups</small>
|
||||||
</a>
|
<!-- <div class="card-header-actions">
|
||||||
</div> -->
|
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||||
</CCardHeader>
|
<small class="text-muted">docs</small>
|
||||||
<CCardBody>
|
</a>
|
||||||
<div>
|
</div> -->
|
||||||
<CButtonToolbar aria-label="Toolbar with button groups">
|
</CCardHeader>
|
||||||
<CButtonGroup class="c-mx-1">
|
<CCardBody>
|
||||||
<CButton class="c-d-sm-down-none">«</CButton>
|
<CButtonToolbar aria-label="Toolbar with button groups" >
|
||||||
<CButton>‹</CButton>
|
<CButtonGroup class="mx-1">
|
||||||
</CButtonGroup>
|
<CButton color="secondary" class="d-sm-down-none">«</CButton>
|
||||||
<CButtonGroup class="c-mx-1">
|
<CButton color="secondary">‹</CButton>
|
||||||
<CButton class="c-d-sm-down-none">Edit</CButton>
|
</CButtonGroup>
|
||||||
<CButton>Undo</CButton>
|
<CButtonGroup class="mx-1">
|
||||||
<CButton>Redo</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
|
||||||
</CButtonGroup>
|
<CButton color="secondary">Undo</CButton>
|
||||||
<CButtonGroup class="c-mx-1">
|
<CButton color="secondary">Redo</CButton>
|
||||||
<CButton>›</CButton>
|
</CButtonGroup>
|
||||||
<CButton class="c-d-sm-down-none">»</CButton>
|
<CButtonGroup class="mx-1">
|
||||||
</CButtonGroup>
|
<CButton color="secondary">›</CButton>
|
||||||
</CButtonToolbar>
|
<CButton color="secondary" class="d-sm-down-none">»</CButton>
|
||||||
</div>
|
</CButtonGroup>
|
||||||
<hr class="c-d-sm-down-none"/>
|
</CButtonToolbar>
|
||||||
<div>
|
<hr class="d-sm-down-none"/>
|
||||||
<CButtonToolbar
|
<CButtonToolbar
|
||||||
aria-label="Toolbar with button groups and input groups"
|
aria-label="Toolbar with button groups and input groups"
|
||||||
class="c-d-sm-down-none"
|
class="d-sm-down-none"
|
||||||
>
|
>
|
||||||
<CButtonGroup size="sm" class="c-mx-1">
|
<CButtonGroup size="sm" class="mx-1">
|
||||||
<CButton>New</CButton>
|
<CButton color="secondary">New</CButton>
|
||||||
<CButton>Edit</CButton>
|
<CButton color="secondary">Edit</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mb-0 c-w-25 c-mx-1"
|
class="mb-0 w-25 mx-1"
|
||||||
size="sm"
|
size="sm"
|
||||||
prepend-html="$"
|
prepend-html="$"
|
||||||
append-html=".00"
|
append-html=".00"
|
||||||
value="100"
|
value="100"
|
||||||
/>
|
/>
|
||||||
<CFormSelect
|
<CSelect
|
||||||
class="c-mb-0 c-w-25 c-mx-1"
|
class="mb-0 w-25 mx-1"
|
||||||
size="sm"
|
size="sm"
|
||||||
prepend-html="Size"
|
prepend-html="Size"
|
||||||
value="Medium"
|
value="Medium"
|
||||||
:options="['Large','Medium','Small']"
|
:options="['Large','Medium','Small']"
|
||||||
custom
|
custom
|
||||||
/>
|
/>
|
||||||
<CButtonGroup size="sm" class="c-mx-1">
|
<CButtonGroup size="sm" class="mx-1">
|
||||||
<CButton>Save</CButton>
|
<CButton color="secondary">Save</CButton>
|
||||||
<CButton>Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CButtonToolbar>
|
</CButtonToolbar>
|
||||||
</div>
|
<hr/>
|
||||||
<hr/>
|
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||||
<div>
|
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
<CButton color="secondary">New</CButton>
|
||||||
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
|
<CButton color="secondary">Edit</CButton>
|
||||||
<CButton>New</CButton>
|
<CButton color="secondary">Undo</CButton>
|
||||||
<CButton>Edit</CButton>
|
</CButtonGroup>
|
||||||
<CButton>Undo</CButton>
|
<CDropdown
|
||||||
</CButtonGroup>
|
color="secondary"
|
||||||
<CDropdown
|
class="mx-1"
|
||||||
class="c-mx-1"
|
placement="bottom-end"
|
||||||
placement="bottom-end"
|
button-content="Menu"
|
||||||
button-content="Menu"
|
>
|
||||||
>
|
<CDropdownItem>Item 1</CDropdownItem>
|
||||||
<CDropdownItem>Item 1</CDropdownItem>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CDropdownItem>Item 3</CDropdownItem>
|
||||||
<CDropdownItem>Item 3</CDropdownItem>
|
</CDropdown>
|
||||||
</CDropdown>
|
<CButtonGroup class="mx-1">
|
||||||
<CButtonGroup class="c-mx-1">
|
<CButton color="secondary">Save</CButton>
|
||||||
<CButton>Save</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
<CButton>Cancel</CButton>
|
</CButtonGroup>
|
||||||
</CButtonGroup>
|
</CButtonToolbar>
|
||||||
</CButtonToolbar>
|
</CCardBody>
|
||||||
</div>
|
</CCard>
|
||||||
</CCardBody>
|
</CCol>
|
||||||
</CCard>
|
</CRow>
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'button-groups',
|
name: 'ButtonGroups',
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
myToggle: false,
|
|
||||||
myToggle2: false,
|
|
||||||
itemsCount: 33
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+335
-311
@@ -1,334 +1,358 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div>
|
||||||
<div>
|
<CRow>
|
||||||
<CRow>
|
<CCol col="12" md="6">
|
||||||
<CCol col="12" md="6">
|
<CCard>
|
||||||
<CCard>
|
<CCardHeader>
|
||||||
<CCardHeader>
|
<i class="fa fa-align-justify"></i>
|
||||||
<i class="fa fa-align-justify"></i>
|
<strong> Bootstrap Dropdown</strong>
|
||||||
<strong> Bootstrap Dropdown</strong>
|
<div class="card-header-actions">
|
||||||
<!-- <div class="card-header-actions">
|
<a
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
|
||||||
<small class="text-muted">docs</small>
|
class="card-header-action"
|
||||||
</a>
|
rel="noreferrer noopener"
|
||||||
</div> -->
|
target="_blank"
|
||||||
</CCardHeader>
|
>
|
||||||
<CCardBody>
|
<small class="text-muted">docs</small>
|
||||||
<div>
|
</a>
|
||||||
<CDropdown button-html="Dropdown Button" class="c-m-2">
|
</div>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
</CCardHeader>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CCardBody>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<div>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
<!-- <div>
|
|
||||||
<CDropdown button-html="Dropdown using buttons as menu items" class="c-m-2">
|
|
||||||
<CDropdownItem>I'm a button</CDropdownItem>
|
|
||||||
<CDropdownItem>I'm also a button</CDropdownItem>
|
|
||||||
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
|
||||||
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div> -->
|
|
||||||
<div>
|
|
||||||
<CDropdown button-html="Dropdown with divider" class="c-m-2">
|
|
||||||
<CDropdownItem>First item</CDropdownItem>
|
|
||||||
<CDropdownItem>Second item</CDropdownItem>
|
|
||||||
<CDropdownDivider></CDropdownDivider>
|
|
||||||
<CDropdownItem>Separated Item</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CDropdown button-html="Dropdown with header" class="c-m-2">
|
|
||||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
|
||||||
<CDropdownItem>First item</CDropdownItem>
|
|
||||||
<CDropdownItem>Second Item</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Dropdown </strong>
|
|
||||||
<small>positioning</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div>
|
|
||||||
<CDropdown
|
|
||||||
button-html="Left align"
|
|
||||||
variant="primary"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown
|
|
||||||
placement="bottom-end"
|
|
||||||
button-html="Right align"
|
|
||||||
variant="primary"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CDropdown
|
|
||||||
button-html="Drop-Up"
|
|
||||||
variant="info"
|
|
||||||
class="c-m-2"
|
|
||||||
dropup
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CDropdown
|
|
||||||
:offset="25"
|
|
||||||
button-html="Offset Dropdown"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CDropdown
|
|
||||||
split
|
|
||||||
button-html="Split Dropdown"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<CCol col="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Dropdown </strong>
|
|
||||||
<small>hidden caret</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div>
|
|
||||||
<CDropdown
|
|
||||||
variant="link"
|
|
||||||
size="lg"
|
|
||||||
buttonHtml="🔍<span class='sr-only'>Search</span>"
|
|
||||||
no-caret
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
<CCol col="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Dropdown </strong>
|
|
||||||
<small>sizing</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div>
|
|
||||||
<CDropdown
|
|
||||||
size="lg"
|
|
||||||
button-html="Large"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown
|
|
||||||
size="lg"
|
|
||||||
split
|
|
||||||
button-html="Large Split"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
<br>
|
|
||||||
<CDropdown
|
|
||||||
size="sm"
|
|
||||||
button-html="Small"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
<CDropdown
|
|
||||||
size="sm"
|
|
||||||
split button-html="Small Split"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol>
|
|
||||||
</CRow>
|
|
||||||
<CRow>
|
|
||||||
<!-- <CCol col="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Dropdown </strong>
|
|
||||||
<small>headers and accessibility</small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<div>
|
|
||||||
<CDropdown
|
|
||||||
button-html="Dropdown ARIA" variant="primary"
|
|
||||||
class="c-m-2"
|
|
||||||
>
|
|
||||||
<div role="group">
|
|
||||||
<CDropdownHeader>Groups</CDropdownHeader>
|
|
||||||
<CDropdownItem>Add</CDropdownItem>
|
|
||||||
<CDropdownItem>Delete</CDropdownItem>
|
|
||||||
</div>
|
|
||||||
<div role="group">
|
|
||||||
<CDropdownHeader>Users</CDropdownHeader>
|
|
||||||
<CDropdownItem>Add</CDropdownItem>
|
|
||||||
<CDropdownItem>Delete</CDropdownItem>
|
|
||||||
</div>
|
|
||||||
<CDropdownDivider></CDropdownDivider>
|
|
||||||
<CDropdownItem>
|
|
||||||
Something <strong>not</strong> associated with user
|
|
||||||
</CDropdownItem>
|
|
||||||
</CDropdown>
|
|
||||||
</div>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
</CCol> -->
|
|
||||||
<CCol col="12" md="6">
|
|
||||||
<CCard>
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="fa fa-align-justify"></i>
|
|
||||||
<strong> Dropdown </strong>
|
|
||||||
<small><code>variant</code></small>
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
toggler-text="Dropdown Button"
|
||||||
button-html="Primary"
|
class="m-2"
|
||||||
variant="primary"
|
color="secondary"
|
||||||
class="c-m-0"
|
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
|
<CDropdownDivider></CDropdownDivider>
|
||||||
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
|
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
<!-- <div>
|
||||||
|
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
|
||||||
|
<CDropdownItem>I'm a button</CDropdownItem>
|
||||||
|
<CDropdownItem>I'm also a button</CDropdownItem>
|
||||||
|
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
||||||
|
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div> -->
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
toggler-text="Dropdown with divider"
|
||||||
|
class="m-2"
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
|
<CDropdownItem>First item</CDropdownItem>
|
||||||
|
<CDropdownItem>Second item</CDropdownItem>
|
||||||
|
<CDropdownDivider></CDropdownDivider>
|
||||||
|
<CDropdownItem>Separated Item</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
toggler-text="Dropdown with header"
|
||||||
|
class="m-2"
|
||||||
|
color="secondary"
|
||||||
|
>
|
||||||
|
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||||
|
<CDropdownItem>First item</CDropdownItem>
|
||||||
|
<CDropdownItem>Second Item</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
<CCol col="12" md="6">
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i>
|
||||||
|
<strong> Dropdown </strong>
|
||||||
|
<small>positioning</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
toggler-text="Left align"
|
||||||
|
color="primary"
|
||||||
|
class="m-2 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
|
<CDropdownItem>Something else here</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
placement="bottom-end"
|
||||||
button-html="Secondary"
|
toggler-text="Right align"
|
||||||
variant="secondary"
|
color="primary"
|
||||||
class="c-m-0"
|
class="m-2 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>Something else here</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
toggler-text="Drop-Up"
|
||||||
|
color="info"
|
||||||
|
class="m-2"
|
||||||
|
placement="top-start"
|
||||||
|
|
||||||
|
>
|
||||||
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
|
<CDropdownItem>Something else here</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
|
:offset="25"
|
||||||
|
toggler-text="Offset Dropdown"
|
||||||
|
class="m-2"
|
||||||
|
>
|
||||||
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
|
<CDropdownItem>Something else here</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
|
split
|
||||||
|
toggler-text="Split Dropdown"
|
||||||
|
class="m-2"
|
||||||
|
>
|
||||||
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
<CRow>
|
||||||
|
<CCol col="12" md="6">
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i>
|
||||||
|
<strong> Dropdown </strong>
|
||||||
|
<small>hidden caret</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
color="link"
|
||||||
|
size="lg"
|
||||||
|
:caret="false"
|
||||||
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
🔍<span class="sr-only">Search</span>
|
||||||
|
</template>
|
||||||
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
<CCol col="12" md="6">
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i>
|
||||||
|
<strong> Dropdown </strong>
|
||||||
|
<small>sizing</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<div>
|
||||||
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
|
size="lg"
|
||||||
|
toggler-text="Large"
|
||||||
|
class="m-2 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
|
<CDropdownItem>Something else here</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
color="secondary"
|
||||||
button-html="Success"
|
size="lg"
|
||||||
variant="success"
|
split
|
||||||
class="c-m-0"
|
toggler-text="Large Split"
|
||||||
|
class="m-2"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
<br>
|
||||||
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
|
size="sm"
|
||||||
|
toggler-text="Small"
|
||||||
|
class="m-2 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
|
color="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
button-html="Warning"
|
split toggler-text="Small Split"
|
||||||
variant="warning"
|
class="m-2"
|
||||||
class="c-m-0"
|
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
|
</div>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
<CRow>
|
||||||
|
<CCol col="12" md="6">
|
||||||
|
<CCard>
|
||||||
|
<CCardHeader>
|
||||||
|
<i class="fa fa-align-justify"></i>
|
||||||
|
<strong> Dropdown </strong>
|
||||||
|
<small>headers and accessibility</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
toggler-text="Dropdown ARIA" color="primary"
|
||||||
button-html="Danger"
|
class="m-2"
|
||||||
variant="danger"
|
|
||||||
class="c-m-0"
|
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<div role="group">
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownHeader>Groups</CDropdownHeader>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>Add</CDropdownItem>
|
||||||
|
<CDropdownItem>Delete</CDropdownItem>
|
||||||
|
</div>
|
||||||
|
<div role="group">
|
||||||
|
<CDropdownHeader>Users</CDropdownHeader>
|
||||||
|
<CDropdownItem>Add</CDropdownItem>
|
||||||
|
<CDropdownItem>Delete</CDropdownItem>
|
||||||
|
</div>
|
||||||
|
<CDropdownDivider></CDropdownDivider>
|
||||||
|
<CDropdownItem>
|
||||||
|
Something <strong>not</strong> associated with user
|
||||||
|
</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
</div>
|
||||||
size="sm"
|
</CCardBody>
|
||||||
button-html="Info"
|
</CCard>
|
||||||
variant="info"
|
</CCol>
|
||||||
class="c-m-0"
|
<CCol col="12" md="6">
|
||||||
>
|
<CCard>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CCardHeader>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<strong> Dropdown </strong>
|
||||||
</CDropdown>
|
<small><code>color</code></small>
|
||||||
<CDropdown
|
</CCardHeader>
|
||||||
size="sm"
|
<CCardBody>
|
||||||
button-html="Light"
|
<CDropdown
|
||||||
variant="light"
|
size="sm"
|
||||||
class="c-m-0"
|
toggler-text="Primary"
|
||||||
>
|
color="primary"
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
class="m-0 d-inline-block"
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
</CDropdown>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
<CDropdown
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
size="sm"
|
</CDropdown>
|
||||||
button-html="Dark"
|
<CDropdown
|
||||||
variant="dark"
|
size="sm"
|
||||||
class="c-m-0"
|
toggler-text="Secondary"
|
||||||
>
|
color="secondary"
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
class="m-0 d-inline-block"
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
</CDropdown>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
<CDropdown
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
size="sm"
|
</CDropdown>
|
||||||
button-html="Link"
|
<CDropdown
|
||||||
variant="link"
|
size="sm"
|
||||||
class="c-m-0"
|
toggler-text="Success"
|
||||||
>
|
color="success"
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
class="m-0 d-inline-block"
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
>
|
||||||
<CDropdownItem>Third Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
</CDropdown>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
</CCardBody>
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
</CCard>
|
</CDropdown>
|
||||||
</CCol>
|
<CDropdown
|
||||||
</CRow>
|
size="sm"
|
||||||
</div>
|
toggler-text="Warning"
|
||||||
|
color="warning"
|
||||||
|
class="m-0 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
<CDropdown
|
||||||
|
size="sm"
|
||||||
|
toggler-text="Danger"
|
||||||
|
color="danger"
|
||||||
|
class="m-0 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
<CDropdown
|
||||||
|
size="sm"
|
||||||
|
toggler-text="Info"
|
||||||
|
color="info"
|
||||||
|
class="m-0 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
<CDropdown
|
||||||
|
size="sm"
|
||||||
|
toggler-text="Light"
|
||||||
|
color="light"
|
||||||
|
class="m-0 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
<CDropdown
|
||||||
|
size="sm"
|
||||||
|
toggler-text="Dark"
|
||||||
|
color="dark"
|
||||||
|
class="m-0 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
<CDropdown
|
||||||
|
size="sm"
|
||||||
|
toggler-text="Link"
|
||||||
|
color="link"
|
||||||
|
class="m-0 d-inline-block"
|
||||||
|
>
|
||||||
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
|
<CDropdownItem>Third Action</CDropdownItem>
|
||||||
|
</CDropdown>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartBar } from '@coreui/coreui-vue-chartjs'
|
import { CChartBar } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartBarExample',
|
name: 'CChartBarExample',
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartBar } from '@coreui/coreui-vue-chartjs'
|
import { CChartBar } from '@coreui/coreui-chartjs/vue'
|
||||||
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartBarSimple',
|
name: 'CChartBarSimple',
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartDoughnut } from '@coreui/coreui-vue-chartjs'
|
import { CChartDoughnut } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartDoughnutExample',
|
name: 'CChartDoughnutExample',
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartLine } from '@coreui/coreui-vue-chartjs'
|
import { CChartLine } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartLineExample',
|
name: 'CChartLineExample',
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartLine } from '@coreui/coreui-vue-chartjs'
|
import { CChartLine } from '@coreui/coreui-chartjs/vue'
|
||||||
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
import { getColor, deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartLineSimple',
|
name: 'CChartLineSimple',
|
||||||
@@ -30,9 +30,18 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'Sales'
|
default: 'Sales'
|
||||||
},
|
},
|
||||||
pointed: Boolean
|
pointed: Boolean,
|
||||||
|
pointHoverBackgroundColor: String
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
pointHoverColor () {
|
||||||
|
if (this.pointHoverBackgroundColor) {
|
||||||
|
return this.pointHoverBackgroundColor
|
||||||
|
} else if (this.backgroundColor !== 'transparent') {
|
||||||
|
return this.backgroundColor
|
||||||
|
}
|
||||||
|
return this.borderColor
|
||||||
|
},
|
||||||
defaultDatasets () {
|
defaultDatasets () {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -40,7 +49,7 @@ export default {
|
|||||||
borderColor: getColor(this.borderColor),
|
borderColor: getColor(this.borderColor),
|
||||||
backgroundColor: getColor(this.backgroundColor),
|
backgroundColor: getColor(this.backgroundColor),
|
||||||
pointBackgroundColor: this.pointBackgroundColor,
|
pointBackgroundColor: this.pointBackgroundColor,
|
||||||
pointHoverBackgroundColor: getColor(this.borderColor),
|
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||||
label: this.label
|
label: this.label
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartPie } from '@coreui/coreui-vue-chartjs'
|
import { CChartPie } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartPieExample',
|
name: 'CChartPieExample',
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartPolarArea } from '@coreui/coreui-vue-chartjs'
|
import { CChartPolarArea } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartPolarAreaExample',
|
name: 'CChartPolarAreaExample',
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartRadar } from '@coreui/coreui-vue-chartjs'
|
import { CChartRadar } from '@coreui/coreui-chartjs/vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CChartRadarExample',
|
name: 'CChartRadarExample',
|
||||||
|
|||||||
@@ -1,8 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<CCardGroup columns class="c-card-columns c-cols-2">
|
<CCardGroup columns class="card-columns cols-2">
|
||||||
<CCard header-html="Line Chart" body-wrapper>
|
<CCard>
|
||||||
<CChartLineExample/>
|
<CCardHeader>
|
||||||
|
Line Chart
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Charts"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<CChartLineExample/>
|
||||||
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard header-html="Bar Chart" body-wrapper>
|
<CCard header-html="Bar Chart" body-wrapper>
|
||||||
<CChartBarExample/>
|
<CChartBarExample/>
|
||||||
@@ -32,7 +47,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as Charts from './charts/index.js'
|
import * as Charts from './index.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Charts',
|
name: 'Charts',
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CChartLine } from '@coreui/coreui-vue-chartjs'
|
import { CChartLine } from '@coreui/coreui-chartjs/vue'
|
||||||
import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
|
import { getColor, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||||
|
|
||||||
function random (min, max) {
|
function random (min, max) {
|
||||||
@@ -15,6 +15,7 @@ function random (min, max) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'MainChartExample',
|
||||||
components: {
|
components: {
|
||||||
CChartLine
|
CChartLine
|
||||||
},
|
},
|
||||||
@@ -39,7 +40,7 @@ export default {
|
|||||||
label: 'My First dataset',
|
label: 'My First dataset',
|
||||||
backgroundColor: hexToRgba(brandInfo, 10),
|
backgroundColor: hexToRgba(brandInfo, 10),
|
||||||
borderColor: brandInfo,
|
borderColor: brandInfo,
|
||||||
pointHoverBackgroundColor: '#fff',
|
pointHoverBackgroundColor: brandInfo,
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
data: data1
|
data: data1
|
||||||
},
|
},
|
||||||
@@ -47,7 +48,7 @@ export default {
|
|||||||
label: 'My Second dataset',
|
label: 'My Second dataset',
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: brandSuccess,
|
borderColor: brandSuccess,
|
||||||
pointHoverBackgroundColor: '#fff',
|
pointHoverBackgroundColor: brandSuccess,
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
data: data2
|
data: data2
|
||||||
},
|
},
|
||||||
@@ -55,7 +56,7 @@ export default {
|
|||||||
label: 'My Third dataset',
|
label: 'My Third dataset',
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
borderColor: brandDanger,
|
borderColor: brandDanger,
|
||||||
pointHoverBackgroundColor: '#fff',
|
pointHoverBackgroundColor: brandDanger,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderDash: [8, 5],
|
borderDash: [8, 5],
|
||||||
data: data3
|
data: data3
|
||||||
@@ -97,94 +98,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
// mounted () {
|
|
||||||
// const brandSuccess = getStyle('--success') || '#4dbd74'
|
|
||||||
// const brandInfo = getStyle('--info') || '#20a8d8'
|
|
||||||
// const brandDanger = getStyle('--danger') || '#f86c6b'
|
|
||||||
//
|
|
||||||
// let elements = 27
|
|
||||||
// const data1 = []
|
|
||||||
// const data2 = []
|
|
||||||
// const data3 = []
|
|
||||||
//
|
|
||||||
// for (let i = 0; i <= elements; i++) {
|
|
||||||
// data1.push(random(50, 200))
|
|
||||||
// data2.push(random(80, 100))
|
|
||||||
// data3.push(65)
|
|
||||||
// }
|
|
||||||
// this.renderChart({
|
|
||||||
// datasets: [
|
|
||||||
// {
|
|
||||||
// label: 'My First dataset',
|
|
||||||
// backgroundColor: hexToRgba(brandInfo, 10),
|
|
||||||
// borderColor: brandInfo,
|
|
||||||
// pointHoverBackgroundColor: '#fff',
|
|
||||||
// borderWidth: 2,
|
|
||||||
// data: data1
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: 'My Second dataset',
|
|
||||||
// backgroundColor: 'transparent',
|
|
||||||
// borderColor: brandSuccess,
|
|
||||||
// pointHoverBackgroundColor: '#fff',
|
|
||||||
// borderWidth: 2,
|
|
||||||
// data: data2
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// label: 'My Third dataset',
|
|
||||||
// backgroundColor: 'transparent',
|
|
||||||
// borderColor: brandDanger,
|
|
||||||
// pointHoverBackgroundColor: '#fff',
|
|
||||||
// borderWidth: 1,
|
|
||||||
// borderDash: [8, 5],
|
|
||||||
// data: data3
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }, {
|
|
||||||
// tooltips: {
|
|
||||||
// enabled: false,
|
|
||||||
// custom: CustomTooltips,
|
|
||||||
// intersect: true,
|
|
||||||
// mode: 'index',
|
|
||||||
// position: 'nearest',
|
|
||||||
// callbacks: {
|
|
||||||
// labelColor: function (tooltipItem, chart) {
|
|
||||||
// return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// maintainAspectRatio: false,
|
|
||||||
// legend: {
|
|
||||||
// display: false
|
|
||||||
// },
|
|
||||||
// scales: {
|
|
||||||
// xAxes: [{
|
|
||||||
// gridLines: {
|
|
||||||
// drawOnChartArea: false
|
|
||||||
// }
|
|
||||||
// }],
|
|
||||||
// yAxes: [{
|
|
||||||
// ticks: {
|
|
||||||
// beginAtZero: true,
|
|
||||||
// maxTicksLimit: 5,
|
|
||||||
// stepSize: Math.ceil(250 / 5),
|
|
||||||
// max: 250
|
|
||||||
// },
|
|
||||||
// gridLines: {
|
|
||||||
// display: true
|
|
||||||
// }
|
|
||||||
// }]
|
|
||||||
// },
|
|
||||||
// elements: {
|
|
||||||
// point: {
|
|
||||||
// radius: 0,
|
|
||||||
// hitRadius: 10,
|
|
||||||
// hoverRadius: 4,
|
|
||||||
// hoverBorderWidth: 3
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -5,17 +5,10 @@
|
|||||||
<i class="cui-globe"></i>Font Awesome brand icons
|
<i class="cui-globe"></i>Font Awesome brand icons
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow class="c-text-center">
|
<CRow class="text-center">
|
||||||
<CCol class="c-mb-5" col="12">
|
|
||||||
<!-- For using the flags inline with text add the classes
|
|
||||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
|
||||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
|
||||||
span. If you want to have a squared version flag then add the class
|
|
||||||
flag-icon-squared as well. -->
|
|
||||||
</CCol>
|
|
||||||
<template v-for="(brand, brandName) in $options.brands">
|
<template v-for="(brand, brandName) in $options.brands">
|
||||||
<CCol
|
<CCol
|
||||||
class="c-mb-5"
|
class="mb-5"
|
||||||
col="3"
|
col="3"
|
||||||
sm="2"
|
sm="2"
|
||||||
:key="brandName"
|
:key="brandName"
|
||||||
|
|||||||
+109
-109
@@ -1,429 +1,429 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<CCard >
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="cui-pencil"></i>CoreUI Icons
|
<i class="cui-pencil"></i>CoreUI Icons
|
||||||
<CBadge variant="info">New</CBadge>
|
<CBadge color="info">New</CBadge>
|
||||||
<div class="c-card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/coreui/coreui-icons"
|
href="https://github.com/coreui/coreui-icons"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="c-card-header-action"
|
class="card-header-action"
|
||||||
>
|
>
|
||||||
<small class="c-text-muted">Github</small>
|
<small class="text-muted">Github</small>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- <CRow class="c-text-center c-mb-5">
|
<!-- <CRow class="text-center mb-5">
|
||||||
<template v-for="(name, key) in $options.iconNames">
|
<template v-for="(name, key) in $options.iconNames">
|
||||||
<CCol :key="key" col="6" sm="4" md="3" xl="2" >
|
<CCol :key="key" col="6" sm="4" md="3" xl="2">
|
||||||
<CIcon :name="name" width="24" class="c-mt-4"/>
|
<CIcon :name="name" width="24" class="mt-4"/>
|
||||||
<div>{{name}}</div>
|
<div>{{name}}</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
</template>
|
</template>
|
||||||
</CRow>
|
</CRow>
|
||||||
-->
|
-->
|
||||||
<CRow class="c-text-center ">
|
<CRow class="text-center ">
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-account-logout icons font-2xl d-block mt-4"></i>
|
||||||
<div>account-logout</div>
|
<div>account-logout</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-action-redo c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-action-redo icons font-2xl d-block mt-4"></i>
|
||||||
<div>action-redo</div>
|
<div>action-redo</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-action-undo c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-action-undo icons font-2xl d-block mt-4"></i>
|
||||||
<div>action-undo</div>
|
<div>action-undo</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-align-center c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-align-center icons font-2xl d-block mt-4"></i>
|
||||||
<div>align-center</div>
|
<div>align-center</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-align-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-align-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>align-left</div>
|
<div>align-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-align-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-align-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>align-right</div>
|
<div>align-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-bottom</div>
|
<div>arrow-bottom</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-left</div>
|
<div>arrow-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-right</div>
|
<div>arrow-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-arrow-top c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
|
||||||
<div>arrow-top</div>
|
<div>arrow-top</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-ban c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-ban icons font-2xl d-block mt-4"></i>
|
||||||
<div>ban</div>
|
<div>ban</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-basket-loaded c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
|
||||||
<div>basket-loaded</div>
|
<div>basket-loaded</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-bell c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-bell icons font-2xl d-block mt-4"></i>
|
||||||
<div>bell</div>
|
<div>bell</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-bold c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-bold icons font-2xl d-block mt-4"></i>
|
||||||
<div>bold</div>
|
<div>bold</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-bookmark c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-bookmark icons font-2xl d-block mt-4"></i>
|
||||||
<div>bookmark</div>
|
<div>bookmark</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-briefcase c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-briefcase icons font-2xl d-block mt-4"></i>
|
||||||
<div>briefcase</div>
|
<div>briefcase</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-british-pound c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-british-pound icons font-2xl d-block mt-4"></i>
|
||||||
<div>british-pound</div>
|
<div>british-pound</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-brush c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-brush icons font-2xl d-block mt-4"></i>
|
||||||
<div>brush</div>
|
<div>brush</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-calculator c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-calculator icons font-2xl d-block mt-4"></i>
|
||||||
<div>calculator</div>
|
<div>calculator</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-calendar c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-calendar icons font-2xl d-block mt-4"></i>
|
||||||
<div>calendar</div>
|
<div>calendar</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cart c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cart icons font-2xl d-block mt-4"></i>
|
||||||
<div>cart</div>
|
<div>cart</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chart icons font-2xl d-block mt-4"></i>
|
||||||
<div>chart</div>
|
<div>chart</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-check c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-check icons font-2xl d-block mt-4"></i>
|
||||||
<div>check</div>
|
<div>check</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-bottom c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-bottom</div>
|
<div>chevron-bottom</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-left</div>
|
<div>chevron-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-right</div>
|
<div>chevron-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-chevron-top c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
|
||||||
<div>chevron-top</div>
|
<div>chevron-top</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-circle-check c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-circle-check icons font-2xl d-block mt-4"></i>
|
||||||
<div>circle-check</div>
|
<div>circle-check</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-circle-x c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-circle-x icons font-2xl d-block mt-4"></i>
|
||||||
<div>circle-x</div>
|
<div>circle-x</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cloud c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cloud icons font-2xl d-block mt-4"></i>
|
||||||
<div>cloud</div>
|
<div>cloud</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cloud-download c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
|
||||||
<div>cloud-download</div>
|
<div>cloud-download</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cloud-upload c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
|
||||||
<div>cloud-upload</div>
|
<div>cloud-upload</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-code c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-code icons font-2xl d-block mt-4"></i>
|
||||||
<div>code</div>
|
<div>code</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cog c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cog icons font-2xl d-block mt-4"></i>
|
||||||
<div>cog</div>
|
<div>cog</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-comment-square c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-comment-square icons font-2xl d-block mt-4"></i>
|
||||||
<div>comment-square</div>
|
<div>comment-square</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-credit-card c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-credit-card icons font-2xl d-block mt-4"></i>
|
||||||
<div>credit-card</div>
|
<div>credit-card</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-cursor c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-cursor icons font-2xl d-block mt-4"></i>
|
||||||
<div>cursor</div>
|
<div>cursor</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-dashboard c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-dashboard icons font-2xl d-block mt-4"></i>
|
||||||
<div>dashboard</div>
|
<div>dashboard</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-delete c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-delete icons font-2xl d-block mt-4"></i>
|
||||||
<div>delete</div>
|
<div>delete</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-dollar c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-dollar icons font-2xl d-block mt-4"></i>
|
||||||
<div>dollar</div>
|
<div>dollar</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-drop c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-drop icons font-2xl d-block mt-4"></i>
|
||||||
<div>drop</div>
|
<div>drop</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-envelope-closed c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
|
||||||
<div>envelope-closed</div>
|
<div>envelope-closed</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-envelope-letter c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
|
||||||
<div>envelope-letter</div>
|
<div>envelope-letter</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-envelope-open c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
|
||||||
<div>envelope-open</div>
|
<div>envelope-open</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-euro c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-euro icons font-2xl d-block mt-4"></i>
|
||||||
<div>euro</div>
|
<div>euro</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-file c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-file icons font-2xl d-block mt-4"></i>
|
||||||
<div>file</div>
|
<div>file</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-globe c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-globe icons font-2xl d-block mt-4"></i>
|
||||||
<div>globe</div>
|
<div>globe</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-graph c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-graph icons font-2xl d-block mt-4"></i>
|
||||||
<div>graph</div>
|
<div>graph</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-home c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-home icons font-2xl d-block mt-4"></i>
|
||||||
<div>home</div>
|
<div>home</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-inbox c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-inbox icons font-2xl d-block mt-4"></i>
|
||||||
<div>inbox</div>
|
<div>inbox</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-info c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-info icons font-2xl d-block mt-4"></i>
|
||||||
<div>info</div>
|
<div>info</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-italic c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-italic icons font-2xl d-block mt-4"></i>
|
||||||
<div>italic</div>
|
<div>italic</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-justify-center c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-justify-center icons font-2xl d-block mt-4"></i>
|
||||||
<div>justify-center</div>
|
<div>justify-center</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-justify-left c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-justify-left icons font-2xl d-block mt-4"></i>
|
||||||
<div>justify-left</div>
|
<div>justify-left</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-justify-right c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-justify-right icons font-2xl d-block mt-4"></i>
|
||||||
<div>justify-right</div>
|
<div>justify-right</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-laptop c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-laptop icons font-2xl d-block mt-4"></i>
|
||||||
<div>laptop</div>
|
<div>laptop</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-layers c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-layers icons font-2xl d-block mt-4"></i>
|
||||||
<div>layers</div>
|
<div>layers</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-lightbulb c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
|
||||||
<div>lightbulb</div>
|
<div>lightbulb</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-list c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-list icons font-2xl d-block mt-4"></i>
|
||||||
<div>list</div>
|
<div>list</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-location-pin c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-location-pin icons font-2xl d-block mt-4"></i>
|
||||||
<div>location-pin</div>
|
<div>location-pin</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-lock-locked c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
|
||||||
<div>lock-locked</div>
|
<div>lock-locked</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-lock-unlocked c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
|
||||||
<div>lock-unlocked</div>
|
<div>lock-unlocked</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-magnifying-glass c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
|
||||||
<div>magnifying-glass</div>
|
<div>magnifying-glass</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-map c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-map icons font-2xl d-block mt-4"></i>
|
||||||
<div>map</div>
|
<div>map</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-monitor c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-monitor icons font-2xl d-block mt-4"></i>
|
||||||
<div>monitor</div>
|
<div>monitor</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-moon c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-moon icons font-2xl d-block mt-4"></i>
|
||||||
<div>moon</div>
|
<div>moon</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-note c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-note icons font-2xl d-block mt-4"></i>
|
||||||
<div>note</div>
|
<div>note</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-options c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-options icons font-2xl d-block mt-4"></i>
|
||||||
<div>options</div>
|
<div>options</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-paperclip c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-paperclip icons font-2xl d-block mt-4"></i>
|
||||||
<div>paperclip</div>
|
<div>paperclip</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-pencil c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-pencil icons font-2xl d-block mt-4"></i>
|
||||||
<div>pencil</div>
|
<div>pencil</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-people c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-people icons font-2xl d-block mt-4"></i>
|
||||||
<div>people</div>
|
<div>people</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-phone c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-phone icons font-2xl d-block mt-4"></i>
|
||||||
<div>phone</div>
|
<div>phone</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-pie-chart c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
|
||||||
<div>pie-chart</div>
|
<div>pie-chart</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-print c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-print icons font-2xl d-block mt-4"></i>
|
||||||
<div>print</div>
|
<div>print</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-puzzle c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-puzzle icons font-2xl d-block mt-4"></i>
|
||||||
<div>puzzle</div>
|
<div>puzzle</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-rss c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-rss icons font-2xl d-block mt-4"></i>
|
||||||
<div>rss</div>
|
<div>rss</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-screen-desktop c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
|
||||||
<div>screen-desktop</div>
|
<div>screen-desktop</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-screen-smartphone c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
|
||||||
<div>screen-smartphone</div>
|
<div>screen-smartphone</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-settings c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-settings icons font-2xl d-block mt-4"></i>
|
||||||
<div>settings</div>
|
<div>settings</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-share c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-share icons font-2xl d-block mt-4"></i>
|
||||||
<div>share</div>
|
<div>share</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-shield c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-shield icons font-2xl d-block mt-4"></i>
|
||||||
<div>shield</div>
|
<div>shield</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-sort-ascending c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
|
||||||
<div>sort-ascending</div>
|
<div>sort-ascending</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-sort-descending c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
|
||||||
<div>sort-descending</div>
|
<div>sort-descending</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-speech c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-speech icons font-2xl d-block mt-4"></i>
|
||||||
<div>speech</div>
|
<div>speech</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-speedometer c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-speedometer icons font-2xl d-block mt-4"></i>
|
||||||
<div>speedometer</div>
|
<div>speedometer</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-star c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-star icons font-2xl d-block mt-4"></i>
|
||||||
<div>star</div>
|
<div>star</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-sun c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-sun icons font-2xl d-block mt-4"></i>
|
||||||
<div>sun</div>
|
<div>sun</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-tablet c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-tablet icons font-2xl d-block mt-4"></i>
|
||||||
<div>tablet</div>
|
<div>tablet</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-tags c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-tags icons font-2xl d-block mt-4"></i>
|
||||||
<div>tags</div>
|
<div>tags</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-task c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-task icons font-2xl d-block mt-4"></i>
|
||||||
<div>task</div>
|
<div>task</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-thumb-down c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
|
||||||
<div>thumb-down</div>
|
<div>thumb-down</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-thumb-up c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
|
||||||
<div>thumb-up</div>
|
<div>thumb-up</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-trash c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-trash icons font-2xl d-block mt-4"></i>
|
||||||
<div>trash</div>
|
<div>trash</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-underline c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-underline icons font-2xl d-block mt-4"></i>
|
||||||
<div>underline</div>
|
<div>underline</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user icons font-2xl d-block mt-4"></i>
|
||||||
<div>user</div>
|
<div>user</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user-female c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user-female icons font-2xl d-block mt-4"></i>
|
||||||
<div>user-female</div>
|
<div>user-female</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user-follow c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user-follow icons font-2xl d-block mt-4"></i>
|
||||||
<div>user-follow</div>
|
<div>user-follow</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-user-unfollow c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
|
||||||
<div>user-unfollow</div>
|
<div>user-unfollow</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-wrench c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-wrench icons font-2xl d-block mt-4"></i>
|
||||||
<div>wrench</div>
|
<div>wrench</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="3" xl="2">
|
<CCol col="6" sm="4" md="3" xl="2">
|
||||||
<i class="cui-yen c-icons c-font-2xl c-d-block c-mt-4"></i>
|
<i class="cui-yen icons font-2xl d-block mt-4"></i>
|
||||||
<div>yen</div>
|
<div>yen</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
<i class="cui-globe"></i> Flags
|
<i class="cui-globe"></i> Flags
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow class="c-text-center">
|
<CRow class="text-center">
|
||||||
<CCol class="c-mb-5" col="12">
|
<CCol class="mb-5" col="12">
|
||||||
<!-- For using the flags inline with text add the classes
|
<!-- For using the flags inline with text add the classes
|
||||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
||||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<template v-for="(flag, key) in displayedFlags">
|
<template v-for="(flag, key) in displayedFlags">
|
||||||
<CCol
|
<CCol
|
||||||
class="c-mb-5"
|
class="mb-5"
|
||||||
col="3"
|
col="3"
|
||||||
sm="2"
|
sm="2"
|
||||||
:key="key"
|
:key="key"
|
||||||
@@ -33,9 +33,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import { iconSet } from '@coreui/icons/flags'
|
import { iconSet } from '@coreui/icons/flags'
|
||||||
export default {
|
export default {
|
||||||
name: 'flags',
|
name: 'Flags',
|
||||||
iconSet,
|
iconSet,
|
||||||
computed: {
|
computed: {
|
||||||
|
// Avoid duplication caused by displaying 1x1 and 4x3 formats
|
||||||
|
// (adding Q to name makes icon quadratic)
|
||||||
displayedFlags () {
|
displayedFlags () {
|
||||||
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
|
return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
|
||||||
}
|
}
|
||||||
|
|||||||
+176
-171
@@ -1,182 +1,187 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<CRow>
|
||||||
<div>
|
<CCol col="12" md="6">
|
||||||
<CRow>
|
<CCard>
|
||||||
<CCol col="12" md="6">
|
<CCardHeader>
|
||||||
<CCard>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CCardHeader>
|
<strong> Bootstrap Alert</strong>
|
||||||
<i class="fa fa-align-justify"></i>
|
<div class="card-header-actions">
|
||||||
<strong> Bootstrap Alert</strong>
|
<a
|
||||||
<!-- <div class="card-header-actions">
|
href="https://coreui.io/vue/docs/3.0/components/Alert"
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
class="card-header-action"
|
||||||
<small class="text-muted">docs</small>
|
rel="noreferrer noopener"
|
||||||
</a>
|
target="_blank"
|
||||||
</div> -->
|
>
|
||||||
</CCardHeader>
|
<small class="text-muted">docs</small>
|
||||||
<CCardBody>
|
</a>
|
||||||
<div>
|
</div>
|
||||||
<p></p>
|
</CCardHeader>
|
||||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
<CCardBody>
|
||||||
<CAlert show variant="secondary">Secondary Alert</CAlert>
|
<div>
|
||||||
<CAlert show variant="success">Success Alert</CAlert>
|
<p></p>
|
||||||
<CAlert show variant="danger">Danger Alert</CAlert>
|
<CAlert show color="primary">Primary Alert</CAlert>
|
||||||
<CAlert show variant="warning">Warning Alert</CAlert>
|
<CAlert show color="secondary">Secondary Alert</CAlert>
|
||||||
<CAlert show variant="info">Info Alert</CAlert>
|
<CAlert show color="success">Success Alert</CAlert>
|
||||||
<CAlert show variant="light">Light Alert</CAlert>
|
<CAlert show color="danger">Danger Alert</CAlert>
|
||||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
<CAlert show color="warning">Warning Alert</CAlert>
|
||||||
</div>
|
<CAlert show color="info">Info Alert</CAlert>
|
||||||
</CCardBody>
|
<CAlert show color="light">Light Alert</CAlert>
|
||||||
</CCard>
|
<CAlert show color="dark">Dark Alert</CAlert>
|
||||||
</CCol>
|
</div>
|
||||||
<CCol col="12" md="6">
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i> Alert
|
<CCol col="12" md="6">
|
||||||
<small> use <code>.c-alert-link</code> to provide links</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i> Alert
|
||||||
<div>
|
<small> use <code>.alert-link</code> to provide links</small>
|
||||||
<CAlert show variant="primary">
|
</CCardHeader>
|
||||||
Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
|
<CCardBody>
|
||||||
</CAlert>
|
<div>
|
||||||
<CAlert show variant="secondary">
|
<CAlert show color="primary">
|
||||||
Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="success">
|
<CAlert show color="secondary">
|
||||||
Success Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="danger">
|
<CAlert show color="success">
|
||||||
Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="warning">
|
<CAlert show color="danger">
|
||||||
Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="info">
|
<CAlert show color="warning">
|
||||||
Info Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="light">
|
<CAlert show color="info">
|
||||||
Light Alert with <a href="#" class="c-alert-link">an example link</a>.
|
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="dark">
|
<CAlert show color="light">
|
||||||
Dark Alert with
|
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
<CLink href="#" class="c-alert-link">an example link</CLink>
|
</CAlert>
|
||||||
.
|
<CAlert show color="dark">
|
||||||
</CAlert>
|
Dark Alert with
|
||||||
</div>
|
<CLink href="#" class="alert-link">an example link</CLink>
|
||||||
</CCardBody>
|
.
|
||||||
</CCard>
|
</CAlert>
|
||||||
</CCol>
|
</div>
|
||||||
<CCol col="12" md="6">
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
<CCol col="12" md="6">
|
||||||
</CCardHeader>
|
<CCard>
|
||||||
<CCardBody>
|
<CCardHeader>
|
||||||
<CAlert show variant="success">
|
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||||
<h4 class="c-alert-heading">Well done!</h4>
|
</CCardHeader>
|
||||||
<p>
|
<CCardBody>
|
||||||
Aww yeah, you successfully read this important alert message.
|
<CAlert show color="success">
|
||||||
This example text is going to run a bit longer so that you can see
|
<h4 class="alert-heading">Well done!</h4>
|
||||||
how spacing within an alert works with this kind of content.
|
<p>
|
||||||
</p>
|
Aww yeah, you successfully read this important alert message.
|
||||||
<hr>
|
This example text is going to run a bit longer so that you can see
|
||||||
<p class="c-mb-0">
|
how spacing within an alert works with this kind of content.
|
||||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
</p>
|
||||||
</p>
|
<hr>
|
||||||
</CAlert>
|
<p class="mb-0">
|
||||||
</CCardBody>
|
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||||
</CCard>
|
</p>
|
||||||
</CCol>
|
</CAlert>
|
||||||
<CCol col="12" md="6">
|
</CCardBody>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i> Alerts
|
<CCol col="12" md="6">
|
||||||
<small>dismissible</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i> Alerts
|
||||||
<CAlert
|
<small>dismissible</small>
|
||||||
dismissible
|
</CCardHeader>
|
||||||
:show.sync="dismissibleAlerts[0]"
|
<CCardBody>
|
||||||
>
|
<CAlert
|
||||||
Dismissible Alert!
|
color="secondary"
|
||||||
</CAlert>
|
closeButton
|
||||||
|
:show.sync="dismissibleAlerts[0]"
|
||||||
|
>
|
||||||
|
Dismissible Alert!
|
||||||
|
</CAlert>
|
||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
dismissible
|
color="secondary"
|
||||||
fade
|
closeButton
|
||||||
:show.sync="dismissibleAlerts[1]"
|
fade
|
||||||
>
|
:show.sync="dismissibleAlerts[1]"
|
||||||
Dismissible Alert with fade effect!
|
>
|
||||||
</CAlert>
|
Dismissible Alert with fade effect!
|
||||||
|
</CAlert>
|
||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
:show.sync="dismissibleAlerts[2]"
|
color="secondary"
|
||||||
v-slot="{dismiss}"
|
:show.sync="dismissibleAlerts[2]"
|
||||||
class="c-alert-dismissible"
|
v-slot="{dismiss}"
|
||||||
>
|
class="alert-dismissible"
|
||||||
Dismissible Alert with custom button!
|
>
|
||||||
<CButton
|
Dismissible Alert with custom button!
|
||||||
class="c-position-absolute"
|
<CButton
|
||||||
variant="primary"
|
class="position-absolute"
|
||||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
color="secondary"
|
||||||
textHtml="<i>Close</i>"
|
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||||
@click="dismiss"
|
@click="dismiss"
|
||||||
/>
|
>
|
||||||
</CAlert>
|
<i>Close</i>
|
||||||
<CButton
|
</CButton>
|
||||||
@click="showDismissibleAlerts"
|
</CAlert>
|
||||||
variant="info"
|
<CButton
|
||||||
class="c-m-1"
|
@click="showDismissibleAlerts"
|
||||||
>
|
color="info"
|
||||||
Show dismissible alerts
|
class="m-1"
|
||||||
</CButton>
|
>
|
||||||
</CCardBody>
|
Show dismissible alerts
|
||||||
</CCard>
|
</CButton>
|
||||||
<CCard>
|
</CCardBody>
|
||||||
<CCardHeader>
|
</CCard>
|
||||||
<i class="fa fa-align-justify"></i> Alerts
|
<CCard>
|
||||||
<small>auto dismissible</small>
|
<CCardHeader>
|
||||||
</CCardHeader>
|
<i class="fa fa-align-justify"></i> Alerts
|
||||||
<CCardBody>
|
<small>auto dismissible</small>
|
||||||
<div>
|
</CCardHeader>
|
||||||
<CAlert
|
<CCardBody>
|
||||||
:show.sync="dismissCountDown"
|
<div>
|
||||||
dismissible
|
<CAlert
|
||||||
variant="warning"
|
:show.sync="dismissCountDown"
|
||||||
fade
|
closeButton
|
||||||
>
|
color="warning"
|
||||||
Alert will dismiss after
|
fade
|
||||||
<strong>{{dismissCountDown}}</strong> seconds...
|
>
|
||||||
</CAlert>
|
Alert will dismiss after
|
||||||
|
<strong>{{dismissCountDown}}</strong> seconds...
|
||||||
|
</CAlert>
|
||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
:show.sync="dismissCountDown"
|
:show.sync="dismissCountDown"
|
||||||
dismissible
|
closeButton
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||||
<CProgress
|
<CProgress
|
||||||
variant="info"
|
color="info"
|
||||||
:max="dismissSecs"
|
:max="dismissSecs"
|
||||||
:value="dismissCountDown"
|
:value="dismissCountDown"
|
||||||
height="4px"
|
height="4px"
|
||||||
/>
|
/>
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CButton @click="showAlert" variant="info" class="c-m-1">
|
<CButton @click="showAlert" color="info" class="m-1">
|
||||||
Show alert with timer
|
Show alert with timer
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'alerts',
|
name: 'Alerts',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dismissSecs: 10,
|
dismissSecs: 10,
|
||||||
|
|||||||
@@ -1,90 +1,91 @@
|
|||||||
<template functional>
|
<template functional>
|
||||||
<div class="c-wrapper">
|
<CRow>
|
||||||
<div>
|
<CCol col="12" md="6">
|
||||||
<CRow>
|
<CCard>
|
||||||
<CCol col="12" md="6">
|
<CCardHeader>
|
||||||
<CCard>
|
<i class="fa fa-align-justify"></i>
|
||||||
<CCardHeader>
|
<strong> Bootstrap Badge</strong>
|
||||||
<i class="fa fa-align-justify"></i>
|
<div class="card-header-actions">
|
||||||
<strong> Bootstrap Badge</strong>
|
<a
|
||||||
<!-- <div class="card-header-actions">
|
href="https://coreui.io/vue/docs/3.0/components/Badge"
|
||||||
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
class="card-header-action"
|
||||||
<small class="text-muted">docs</small>
|
rel="noreferrer noopener"
|
||||||
</a>
|
target="_blank"
|
||||||
</div> -->
|
>
|
||||||
</CCardHeader>
|
<small class="text-muted">docs</small>
|
||||||
<CCardBody>
|
</a>
|
||||||
<h2>Example heading <CBadge>New</CBadge></h2>
|
</div>
|
||||||
<h3>Example heading <CBadge>New</CBadge></h3>
|
</CCardHeader>
|
||||||
<h4>Example heading <CBadge>New</CBadge></h4>
|
<CCardBody>
|
||||||
<h5>Example heading <CBadge>New</CBadge></h5>
|
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
|
||||||
<h6>Example heading <CBadge>New</CBadge></h6>
|
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
|
||||||
</CCardBody>
|
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
|
||||||
<CCardFooter>
|
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
|
||||||
<CButton variant="primary">
|
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
|
||||||
Notifications
|
</CCardBody>
|
||||||
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
<CCardFooter>
|
||||||
</CButton>
|
<CButton color="primary">
|
||||||
</CCardFooter>
|
Notifications
|
||||||
</CCard>
|
<CBadge color="light" class="ml-2 position-static">4</CBadge>
|
||||||
</CCol>
|
</CButton>
|
||||||
<CCol col="12" md="6">
|
</CCardFooter>
|
||||||
<CCard>
|
</CCard>
|
||||||
<CCardHeader>
|
</CCol>
|
||||||
<i class="fa fa-align-justify"></i> Badge
|
<CCol col="12" md="6">
|
||||||
<small>contextual variations</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i> Badge
|
||||||
<CBadge variant="primary">Primary</CBadge>
|
<small>contextual variations</small>
|
||||||
<CBadge variant="secondary">Secondary</CBadge>
|
</CCardHeader>
|
||||||
<CBadge variant="success">Success</CBadge>
|
<CCardBody>
|
||||||
<CBadge variant="danger">Danger</CBadge>
|
<CBadge color="primary">Primary</CBadge>
|
||||||
<CBadge variant="warning">Warning</CBadge>
|
<CBadge color="secondary">Secondary</CBadge>
|
||||||
<CBadge variant="info">Info</CBadge>
|
<CBadge color="success">Success</CBadge>
|
||||||
<CBadge variant="light">Light</CBadge>
|
<CBadge color="danger">Danger</CBadge>
|
||||||
<CBadge variant="dark">Dark</CBadge>
|
<CBadge color="warning">Warning</CBadge>
|
||||||
</CCardBody>
|
<CBadge color="info">Info</CBadge>
|
||||||
</CCard>
|
<CBadge color="light">Light</CBadge>
|
||||||
<CCard>
|
<CBadge color="dark">Dark</CBadge>
|
||||||
<CCardHeader>
|
</CCardBody>
|
||||||
<i class="fa fa-align-justify"></i> Badge
|
</CCard>
|
||||||
<small>pills</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i> Badge
|
||||||
<CBadge pill variant="primary">Primary</CBadge>
|
<small>pills</small>
|
||||||
<CBadge pill variant="secondary">Secondary</CBadge>
|
</CCardHeader>
|
||||||
<CBadge pill variant="success">Success</CBadge>
|
<CCardBody>
|
||||||
<CBadge pill variant="danger">Danger</CBadge>
|
<CBadge pill color="primary">Primary</CBadge>
|
||||||
<CBadge pill variant="warning">Warning</CBadge>
|
<CBadge pill color="secondary">Secondary</CBadge>
|
||||||
<CBadge pill variant="info">Info</CBadge>
|
<CBadge pill color="success">Success</CBadge>
|
||||||
<CBadge pill variant="light">Light</CBadge>
|
<CBadge pill color="danger">Danger</CBadge>
|
||||||
<CBadge pill variant="dark">Dark</CBadge>
|
<CBadge pill color="warning">Warning</CBadge>
|
||||||
</CCardBody>
|
<CBadge pill color="info">Info</CBadge>
|
||||||
</CCard>
|
<CBadge pill color="light">Light</CBadge>
|
||||||
<CCard>
|
<CBadge pill color="dark">Dark</CBadge>
|
||||||
<CCardHeader>
|
</CCardBody>
|
||||||
<i class="fa fa-align-justify"></i> Badge
|
</CCard>
|
||||||
<small>actionable</small>
|
<CCard>
|
||||||
</CCardHeader>
|
<CCardHeader>
|
||||||
<CCardBody>
|
<i class="fa fa-align-justify"></i> Badge
|
||||||
<CBadge href="#" variant="primary">Primary</CBadge>
|
<small>actionable</small>
|
||||||
<CBadge href="#" variant="secondary">Secondary</CBadge>
|
</CCardHeader>
|
||||||
<CBadge href="#" variant="success">Success</CBadge>
|
<CCardBody>
|
||||||
<CBadge href="#" variant="danger">Danger</CBadge>
|
<CBadge href="#" color="primary">Primary</CBadge>
|
||||||
<CBadge href="#" variant="warning">Warning</CBadge>
|
<CBadge href="#" color="secondary">Secondary</CBadge>
|
||||||
<CBadge href="#" variant="info">Info</CBadge>
|
<CBadge href="#" color="success">Success</CBadge>
|
||||||
<CBadge href="#" variant="light">Light</CBadge>
|
<CBadge href="#" color="danger">Danger</CBadge>
|
||||||
<CBadge href="#" variant="dark">Dark</CBadge>
|
<CBadge href="#" color="warning">Warning</CBadge>
|
||||||
</CCardBody>
|
<CBadge href="#" color="info">Info</CBadge>
|
||||||
</CCard>
|
<CBadge href="#" color="light">Light</CBadge>
|
||||||
</CCol>
|
<CBadge href="#" color="dark">Dark</CBadge>
|
||||||
</CRow>
|
</CCardBody>
|
||||||
</div>
|
</CCard>
|
||||||
</div>
|
</CCol>
|
||||||
|
</CRow>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'badges'
|
name: 'Badges'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,39 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-wrapper">
|
<div class="wrapper">
|
||||||
<div>
|
<div>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12">
|
<CCol col="12">
|
||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/Modal"
|
||||||
|
class="card-header-action"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton variant="secondary" @click="myModal = true" class="c-mr-1">
|
<CButton color="secondary" @click="myModal = true" class="mr-1">
|
||||||
Launch demo modal
|
Launch demo modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
|
<CButton color="secondary" @click="largeModal = true" class="mr-1">
|
||||||
Launch large modal
|
Launch large modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
|
<CButton color="secondary" @click="smallModal = true" class="mr-1">
|
||||||
Launch small modal
|
Launch small modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<hr>
|
<hr>
|
||||||
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
|
<CButton color="primary" @click="primaryModal = true" class="mr-1">
|
||||||
Launch primary modal
|
Launch primary modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="success" @click="successModal = true" class="c-mr-1">
|
<CButton color="success" @click="successModal = true" class="mr-1">
|
||||||
Launch success modal
|
Launch success modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="warning" @click="warningModal = true" class="c-mr-1">
|
<CButton color="warning" @click="warningModal = true" class="mr-1">
|
||||||
Launch warning modal
|
Launch warning modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
|
<CButton color="danger" @click="dangerModal = true" class="mr-1">
|
||||||
Launch danger modal
|
Launch danger modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="info" @click="infoModal = true" class="c-mr-1">
|
<CButton color="info" @click="infoModal = true" class="mr-1">
|
||||||
Launch info modal
|
Launch info modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="dark" @click="darkModal = true" class="c-mr-1">
|
<CButton color="dark" @click="darkModal = true" class="mr-1">
|
||||||
Launch dark modal
|
Launch dark modal
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -44,7 +54,7 @@
|
|||||||
<!-- Modal Component -->
|
<!-- Modal Component -->
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
:visible.sync="myModal"
|
:show.sync="myModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -56,7 +66,7 @@
|
|||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
size="lg"
|
size="lg"
|
||||||
:visible.sync="largeModal"
|
:show.sync="largeModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -68,7 +78,7 @@
|
|||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
size="sm"
|
size="sm"
|
||||||
:visible.sync="smallModal"
|
:show.sync="smallModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -80,7 +90,7 @@
|
|||||||
|
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
:visible.sync="primaryModal"
|
:show.sync="primaryModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -91,8 +101,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="success"
|
color="success"
|
||||||
:visible.sync="successModal"
|
:show.sync="successModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -103,8 +113,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:visible.sync="warningModal"
|
:show.sync="warningModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -115,8 +125,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:visible.sync="dangerModal"
|
:show.sync="dangerModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -127,8 +137,8 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="info"
|
color="info"
|
||||||
:visible.sync="infoModal"
|
:show.sync="infoModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -138,12 +148,12 @@
|
|||||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
:visible.sync="darkModal"
|
:show.sync="darkModal"
|
||||||
:no-close-on-backdrop="true"
|
:no-close-on-backdrop="true"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
title="Modal title 2"
|
title="Modal title 2"
|
||||||
size="lg"
|
size="lg"
|
||||||
variant="dark"
|
color="dark"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -151,13 +161,13 @@
|
|||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
<template #header="{hide}">
|
<template #header>
|
||||||
<h6 class="c-modal-title">Custom smaller modal title</h6>
|
<h6 class="modal-title">Custom smaller modal title</h6>
|
||||||
<CButtonClose @click="hide()" class="c-text-white"/>
|
<CButtonClose @click="darkModal = false" class="text-white"/>
|
||||||
</template>
|
</template>
|
||||||
<template #footer="{hide}">
|
<template #footer>
|
||||||
<CButton @click="hide()" variant="danger">Discard</CButton>
|
<CButton @click="darkModal = false" color="danger">Discard</CButton>
|
||||||
<CButton @click="hide(true)" variant="success">Accept</CButton>
|
<CButton @click="darkModal = false" color="success">Accept</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CModal>
|
</CModal>
|
||||||
</div>
|
</div>
|
||||||
@@ -166,7 +176,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'modals',
|
name: 'Modals',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
myModal: false,
|
myModal: false,
|
||||||
|
|||||||
+12
-12
@@ -1,19 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
|
<CContainer class="d-flex align-items-center min-vh-100">
|
||||||
<CRow class="c-justify-content-center">
|
<CRow class="justify-content-center">
|
||||||
<CCol md="8">
|
<CCol md="8">
|
||||||
<CCardGroup>
|
<CCardGroup>
|
||||||
<CCard class="c-p-4">
|
<CCard class="p-4">
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CForm>
|
<CForm>
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
<p class="c-text-muted">Sign In to your account</p>
|
<p class="text-muted">Sign In to your account</p>
|
||||||
<CFormInput
|
<CInput
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
autocomplete="username email"
|
autocomplete="username email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
prependHtml="<i class='cui-lock-locked'></i>"
|
prependHtml="<i class='cui-lock-locked'></i>"
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
@@ -21,25 +21,25 @@
|
|||||||
/>
|
/>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton variant="primary" class="c-px-4">Login</CButton>
|
<CButton color="primary" class="px-4">Login</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" class="c-text-right">
|
<CCol col="6" class="text-right">
|
||||||
<CButton variant="link" class="c-px-0">Forgot password?</CButton>
|
<CButton color="link" class="px-0">Forgot password?</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard
|
<CCard
|
||||||
class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
|
class="text-white text-center bg-primary py-5 d-md-down-none"
|
||||||
style="width:44%"
|
style="width:44%"
|
||||||
body-wrapper
|
body-wrapper
|
||||||
>
|
>
|
||||||
<h2>Sign up</h2>
|
<h2>Sign up</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="c-active c-mt-3"
|
class="active mt-3"
|
||||||
>
|
>
|
||||||
Register Now!
|
Register Now!
|
||||||
</CButton>
|
</CButton>
|
||||||
|
|||||||
+11
-11
@@ -1,22 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
|
<CContainer class="d-flex align-items-center min-vh-100">
|
||||||
<CRow class="c-w-100 c-justify-content-center">
|
<CRow class="w-100 justify-content-center">
|
||||||
<CCol md="6">
|
<CCol md="6">
|
||||||
<div class="c-w-100">
|
<div class="w-100">
|
||||||
<div class="c-clearfix">
|
<div class="clearfix">
|
||||||
<h1 class="c-float-left c-display-3 c-mr-4">404</h1>
|
<h1 class="float-left display-3 mr-4">404</h1>
|
||||||
<h4 class="c-pt-3">Oops! You're lost.</h4>
|
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||||
<p class="c-text-muted">The page you are looking for was not found.</p>
|
<p class="text-muted">The page you are looking for was not found.</p>
|
||||||
</div>
|
</div>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mb-0"
|
class="mb-3"
|
||||||
prependHtml="<i class='cui-magnifying-glass'></i>"
|
prependHtml="<i class='cui-magnifying-glass'></i>"
|
||||||
placeholder="What are you looking for?"
|
placeholder="What are you looking for?"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="info">Search</CButton>
|
<CButton color="info">Search</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</div>
|
</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
|
|||||||
+10
-10
@@ -1,21 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-d-flex c-align-items-center c-min-vh-100">
|
<CContainer class="d-flex align-items-center min-vh-100">
|
||||||
<CRow class="c-w-100 c-justify-content-center">
|
<CRow class="w-100 justify-content-center">
|
||||||
<CCol md="6">
|
<CCol md="6">
|
||||||
<div class="c-clearfix">
|
<div class="clearfix">
|
||||||
<h1 class="c-float-left c-display-3 c-mr-4">500</h1>
|
<h1 class="float-left display-3 mr-4">500</h1>
|
||||||
<h4 class="c-pt-3">Houston, we have a problem!</h4>
|
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||||
<p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
|
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||||
</div>
|
</div>
|
||||||
<CFormInput
|
<CInput
|
||||||
class="c-mb-0"
|
class="mb-3"
|
||||||
prependHtml="<i class='cui-magnifying-glass'></i>"
|
prependHtml="<i class='cui-magnifying-glass'></i>"
|
||||||
placeholder="What are you looking for?"
|
placeholder="What are you looking for?"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="info">Search</CButton>
|
<CButton color="info">Search</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CInput>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CContainer>
|
</CContainer>
|
||||||
|
|||||||
@@ -1,45 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
|
<CContainer class="min-vh-100 d-flex align-items-center">
|
||||||
<CRow class="c-w-100 c-justify-content-center">
|
<CRow class="w-100 justify-content-center">
|
||||||
<CCol md="6" sm="8">
|
<CCol md="6" sm="8">
|
||||||
<CCard class="c-mx-4">
|
<CCard class="mx-4 mb-0">
|
||||||
<CCardBody class="c-p-4">
|
<CCardBody class="p-4">
|
||||||
<CForm>
|
<CForm>
|
||||||
<h1>Register</h1>
|
<h1>Register</h1>
|
||||||
<p class="c-text-muted">Create your account</p>
|
<p class="text-muted">Create your account</p>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Username"
|
placeholder="Username"
|
||||||
prependHtml="<i class='cui-user'></i>"
|
prependHtml="<i class='cui-user'></i>"
|
||||||
autocomplete="username"
|
autocomplete="username"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
prepend-html="@"
|
prepend-html="@"
|
||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
type="password"
|
type="password"
|
||||||
prependHtml="<i class='cui-lock-locked'></i>"
|
prependHtml="<i class='cui-lock-locked'></i>"
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
/>
|
/>
|
||||||
<CFormInput
|
<CInput
|
||||||
placeholder="Repeat password"
|
placeholder="Repeat password"
|
||||||
type="password"
|
type="password"
|
||||||
prependHtml="<i class='cui-lock-locked'></i>"
|
prependHtml="<i class='cui-lock-locked'></i>"
|
||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
class="c-mb-4"
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
<CButton variant="success" block>Create Account</CButton>
|
<CButton color="success" block>Create Account</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter class="c-p-4">
|
<CCardFooter class="p-4">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton block variant="facebook" textHtml="Facebook"/>
|
<CButton block color="facebook">
|
||||||
|
Facebook
|
||||||
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton block variant="twitter" textHtml="Twitter"/>
|
<CButton block color="twitter">
|
||||||
|
Twitter
|
||||||
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
|
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||||
<div
|
<div
|
||||||
:class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
|
:class="['theme-color w-75 rounded mb-3', color]"
|
||||||
:style="{ paddingTop: '75%' }"
|
:style="{ paddingTop: '75%' }"
|
||||||
></div>
|
></div>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
@@ -15,10 +15,7 @@ export default {
|
|||||||
name: 'ColorTheme',
|
name: 'ColorTheme',
|
||||||
components: { ColorView },
|
components: { ColorView },
|
||||||
props: {
|
props: {
|
||||||
color: {
|
color: String,
|
||||||
type: String,
|
|
||||||
default: 'c-bg-secondary'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<table class="c-w-100">
|
<table class="w-100">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="c-text-muted">HEX:</td>
|
<td class="text-muted">HEX:</td>
|
||||||
<td class="c-font-weight-bold">{{this.hexColor}}</td>
|
<td class="font-weight-bold">{{this.hexColor}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="c-text-muted">RGB:</td>
|
<td class="text-muted">RGB:</td>
|
||||||
<td class="c-font-weight-bold">{{this.bgColor}}</td>
|
<td class="font-weight-bold">{{this.bgColor}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
+19
-38
@@ -1,21 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<CCard >
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="cui-drop"></i> Theme colors
|
<i class="cui-drop"></i> Theme colors
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<ColorTheme color="c-bg-primary">
|
<ColorTheme color="bg-primary">
|
||||||
<h6>Brand Primary Color</h6>
|
<h6>Brand Primary Color</h6>
|
||||||
</ColorTheme>
|
</ColorTheme>
|
||||||
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -25,34 +25,15 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||||
<ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||||
</CRow>
|
|
||||||
</CCardBody>
|
|
||||||
</CCard>
|
|
||||||
<CCard >
|
|
||||||
<CCardHeader>
|
|
||||||
<i class="cui-drop"></i> Additional colors
|
|
||||||
</CCardHeader>
|
|
||||||
<CCardBody>
|
|
||||||
<CRow>
|
|
||||||
<ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
|
|
||||||
<ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
|
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -62,7 +43,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import ColorTheme from './ColorTheme'
|
import ColorTheme from './ColorTheme'
|
||||||
export default {
|
export default {
|
||||||
name: 'colors',
|
name: 'Colors',
|
||||||
components: { ColorTheme }
|
components: { ColorTheme }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Headings
|
Headings
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>Documentation and examples for Bootstrap typography,
|
<p>Documentation and examples for Bootstrap typography,
|
||||||
including global settings, headings, body text, lists, and more.</p>
|
including global settings, headings, body text, lists, and more.</p>
|
||||||
<table class="c-table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Heading</th>
|
<th>Heading</th>
|
||||||
@@ -18,131 +18,131 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h1></h1>
|
<h1></h1>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h1">h1. Bootstrap heading</span></td>
|
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h2></h2>
|
<h2></h2>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h2">h2. Bootstrap heading</span></td>
|
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h3></h3>
|
<h3></h3>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h3">h3. Bootstrap heading</span></td>
|
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h4></h4>
|
<h4></h4>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h4">h4. Bootstrap heading</span></td>
|
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h5></h5>
|
<h5></h5>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h5">h5. Bootstrap heading</span></td>
|
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">
|
<code class="highlighter-rouge">
|
||||||
<h6></h6>
|
<h6></h6>
|
||||||
</code>
|
</code>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
<td><span class="c-h6">h6. Bootstrap heading</span></td>
|
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Headings
|
Headings
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
<code class="c-highlighter-rouge">.h1</code> through
|
<code class="highlighter-rouge">.h1</code> through
|
||||||
<code class="c-highlighter-rouge">.h6</code>
|
<code class="highlighter-rouge">.h6</code>
|
||||||
classes are also available, for when you want to match the font
|
classes are also available, for when you want to match the font
|
||||||
styling of a heading but cannot use the associated HTML element.
|
styling of a heading but cannot use the associated HTML element.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example">
|
<div class="bd-example">
|
||||||
<p class="c-h1">h1. Bootstrap heading</p>
|
<p class="h1">h1. Bootstrap heading</p>
|
||||||
<p class="c-h2">h2. Bootstrap heading</p>
|
<p class="h2">h2. Bootstrap heading</p>
|
||||||
<p class="c-h3">h3. Bootstrap heading</p>
|
<p class="h3">h3. Bootstrap heading</p>
|
||||||
<p class="c-h4">h4. Bootstrap heading</p>
|
<p class="h4">h4. Bootstrap heading</p>
|
||||||
<p class="c-h5">h5. Bootstrap heading</p>
|
<p class="h5">h5. Bootstrap heading</p>
|
||||||
<p class="c-h6">h6. Bootstrap heading</p>
|
<p class="h6">h6. Bootstrap heading</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Display headings
|
Display headings
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
Traditional heading elements are designed to work best in the meat
|
Traditional heading elements are designed to work best in the meat
|
||||||
of your page content. When you need a heading to stand out,
|
of your page content. When you need a heading to stand out,
|
||||||
consider using a <strong>display heading</strong>—a larger,
|
consider using a <strong>display heading</strong>—a larger,
|
||||||
slightly more opinionated heading style.
|
slightly more opinionated heading style.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example c-bd-example-type">
|
<div class="bd-example bd-example-type">
|
||||||
<table class="c-table">
|
<table class="table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-1">Display 1</span></td>
|
<td><span class="display-1">Display 1</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-2">Display 2</span></td>
|
<td><span class="display-2">Display 2</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-3">Display 3</span></td>
|
<td><span class="display-3">Display 3</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><span class="c-display-4">Display 4</span></td>
|
<td><span class="display-4">Display 4</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Inline text elements
|
Inline text elements
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
Traditional heading elements are designed to work best in the meat
|
Traditional heading elements are designed to work best in the meat
|
||||||
of your page content. When you need a heading to stand out,
|
of your page content. When you need a heading to stand out,
|
||||||
consider using a <strong>display heading</strong>—a larger,
|
consider using a <strong>display heading</strong>—a larger,
|
||||||
slightly more opinionated heading style.
|
slightly more opinionated heading style.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example">
|
<div class="bd-example">
|
||||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||||
<p><del>
|
<p><del>
|
||||||
This line of text is meant to be treated as deleted text.
|
This line of text is meant to be treated as deleted text.
|
||||||
@@ -162,46 +162,46 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card">
|
<div class="card">
|
||||||
<div class="c-card-header">
|
<div class="card-header">
|
||||||
Description list alignment
|
Description list alignment
|
||||||
</div>
|
</div>
|
||||||
<div class="c-card-body">
|
<div class="card-body">
|
||||||
<p>
|
<p>
|
||||||
Align terms and descriptions horizontally by using our grid system’s
|
Align terms and descriptions horizontally by using our grid system’s
|
||||||
predefined classes (or semantic mixins). For longer terms, you can
|
predefined classes (or semantic mixins). For longer terms, you can
|
||||||
optionally add a <code class="highlighter-rouge">.text-truncate</code>
|
optionally add a <code class="highlighter-rouge">.text-truncate</code>
|
||||||
class to truncate the text with an ellipsis.
|
class to truncate the text with an ellipsis.
|
||||||
</p>
|
</p>
|
||||||
<div class="c-bd-example">
|
<div class="bd-example">
|
||||||
<dl class="c-row">
|
<dl class="row">
|
||||||
<dt class="c-col-sm-3">Description lists</dt>
|
<dt class="col-sm-3">Description lists</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
A description list is perfect for defining terms.
|
A description list is perfect for defining terms.
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3">Euismod</dt>
|
<dt class="col-sm-3">Euismod</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3">Malesuada porta</dt>
|
<dt class="col-sm-3">Malesuada porta</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
Etiam porta sem malesuada magna mollis euismod.
|
Etiam porta sem malesuada magna mollis euismod.
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
|
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||||
condimentum nibh, ut fermentum massa justo sit amet risus.
|
condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="c-col-sm-3">Nesting</dt>
|
<dt class="col-sm-3">Nesting</dt>
|
||||||
<dd class="c-col-sm-9">
|
<dd class="col-sm-9">
|
||||||
<dl class="c-row">
|
<dl class="row">
|
||||||
<dt class="c-col-sm-4">Nested definition list</dt>
|
<dt class="col-sm-4">Nested definition list</dt>
|
||||||
<dd class="c-col-sm-8">
|
<dd class="col-sm-8">
|
||||||
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
|
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
@@ -215,6 +215,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'typography'
|
name: 'Typography'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -10,12 +10,12 @@
|
|||||||
striped
|
striped
|
||||||
small
|
small
|
||||||
fixed
|
fixed
|
||||||
:items="items($route.params.id)"
|
:items="getUserData($route.params.id)"
|
||||||
:fields="$options.fields"
|
:fields="$options.fields"
|
||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton @click="goBack">Back</CButton>
|
<CButton color="primary" @click="goBack">Back</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -26,25 +26,18 @@
|
|||||||
import usersData from './UsersData'
|
import usersData from './UsersData'
|
||||||
export default {
|
export default {
|
||||||
name: 'User',
|
name: 'User',
|
||||||
props: {
|
|
||||||
caption: {
|
|
||||||
type: String,
|
|
||||||
default: 'User id'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fields: [
|
fields: [
|
||||||
{ key: 'key', _style:'width:150px'},
|
{ key: 'key', _style: 'width:150px' },
|
||||||
{ key: 'value' , _style:'width:150px;', _classes:'font-weight-bold'}
|
{ key: 'value' , _style: 'width:150px;' }
|
||||||
],
|
],
|
||||||
methods: {
|
methods: {
|
||||||
items (id) {
|
getUserData (id) {
|
||||||
const user = usersData.find( user => user.id.toString() === id)
|
const user = usersData.find((user, index) => index + 1 == id)
|
||||||
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
||||||
return userDetails.map(([key, value]) => {return {key: key, value: value}})
|
return userDetails.map(([key, value]) => { return { key, value } })
|
||||||
},
|
},
|
||||||
goBack() {
|
goBack() {
|
||||||
this.$router.go(-1)
|
this.$router.go(-1)
|
||||||
// this.$router.replace({path: '/users'})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+25
-32
@@ -2,28 +2,31 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="12" xl="8">
|
<CCol col="12" xl="8">
|
||||||
<transition name="slide">
|
<transition name="slide">
|
||||||
<CCard header-html="users" body-wrapper>
|
<CCard header-html="Users" body-wrapper>
|
||||||
<CTable
|
<CTable
|
||||||
hover
|
hover
|
||||||
striped
|
striped
|
||||||
:items="items"
|
:items="items"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
:current-page="currentPage"
|
:items-per-page="perPage"
|
||||||
:per-page="perPage"
|
|
||||||
@row-clicked="rowClicked"
|
@row-clicked="rowClicked"
|
||||||
:pagination="$options.paginationProps"
|
:pagination="$options.paginationProps"
|
||||||
|
index-column
|
||||||
|
clickable-rows
|
||||||
>
|
>
|
||||||
<td slot="id" slot-scope="data">
|
<template #username="data">
|
||||||
<strong>{{data.item.id}}</strong>
|
<td>
|
||||||
</td>
|
<strong>{{data.item.username}}</strong>
|
||||||
<td slot="name" slot-scope="data">
|
</td>
|
||||||
<strong>{{data.item.name}}</strong>
|
</template>
|
||||||
</td>
|
|
||||||
<td slot="status" slot-scope="data">
|
<template #status="data">
|
||||||
<CBadge :variant="getBadge(data.item.status)">
|
<td>
|
||||||
{{data.item.status}}
|
<CBadge :color="getBadge(data.item.status)">
|
||||||
</CBadge>
|
{{data.item.status}}
|
||||||
</td>
|
</CBadge>
|
||||||
|
</td>
|
||||||
|
</template>
|
||||||
</CTable>
|
</CTable>
|
||||||
</CCard>
|
</CCard>
|
||||||
</transition>
|
</transition>
|
||||||
@@ -37,22 +40,19 @@ export default {
|
|||||||
name: 'Users',
|
name: 'Users',
|
||||||
data: () => {
|
data: () => {
|
||||||
return {
|
return {
|
||||||
items: usersData.filter((user) => user.id < 42),
|
items: usersData,
|
||||||
fields: [
|
fields: [
|
||||||
{key: 'id'},
|
{ key: 'username', label: 'Name' },
|
||||||
{key: 'name'},
|
{ key: 'registered' },
|
||||||
{key: 'registered'},
|
{ key: 'role' },
|
||||||
{key: 'role'},
|
{ key: 'status' }
|
||||||
{key: 'status'}
|
|
||||||
],
|
],
|
||||||
currentPage: 1,
|
|
||||||
perPage: 5,
|
perPage: 5,
|
||||||
totalRows: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
paginationProps: {
|
paginationProps: {
|
||||||
align: 'center',
|
align: 'center',
|
||||||
hideDoubleArrows: true,
|
doubleArrows: false,
|
||||||
previousButtonHtml: 'prev',
|
previousButtonHtml: 'prev',
|
||||||
nextButtonHtml: 'next'
|
nextButtonHtml: 'next'
|
||||||
},
|
},
|
||||||
@@ -66,17 +66,10 @@ export default {
|
|||||||
userLink (id) {
|
userLink (id) {
|
||||||
return `users/${id.toString()}`
|
return `users/${id.toString()}`
|
||||||
},
|
},
|
||||||
rowClicked (item) {
|
rowClicked (item, index) {
|
||||||
const userLink = this.userLink(item.id)
|
const userLink = this.userLink(index + 1)
|
||||||
this.$router.push({path: userLink})
|
this.$router.push({path: userLink})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.c-card-body >>> table > tbody > tr > td {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,31 +1,31 @@
|
|||||||
const usersData = [
|
const usersData = [
|
||||||
// {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
|
{ username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
|
||||||
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-success'},
|
||||||
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||||
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||||
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
|
{ username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
|
{ username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||||
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
|
{ username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||||
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
|
{ username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
|
||||||
{id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
|
{ username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||||
{id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
|
{ username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||||
{id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
|
|
||||||
{id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export default usersData
|
export default usersData
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -8,10 +8,23 @@
|
|||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
>
|
>
|
||||||
<CProgress
|
<CProgress
|
||||||
variant="success"
|
color="success"
|
||||||
:value="25"
|
:value="25"
|
||||||
class="c-progress-xs c-my-3 c-mb-0"
|
class="progress-xs my-3 mb-0"
|
||||||
/>
|
/>
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header-actions">
|
||||||
|
<a
|
||||||
|
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
|
||||||
|
class="card-header-action position-absolute"
|
||||||
|
style="right:10px; top:10px"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<small class="text-muted">docs</small>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</CWidgetProgress>
|
</CWidgetProgress>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
@@ -19,7 +32,7 @@
|
|||||||
header="12.124"
|
header="12.124"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="info"
|
color="info"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -28,7 +41,7 @@
|
|||||||
header="$98.111,00"
|
header="$98.111,00"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="warning"
|
color="warning"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -37,7 +50,7 @@
|
|||||||
header="2 TB"
|
header="2 TB"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -48,7 +61,7 @@
|
|||||||
header="89.9%"
|
header="89.9%"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="success"
|
color="success"
|
||||||
inverse :value="25"
|
inverse :value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -57,7 +70,7 @@
|
|||||||
header="12.124"
|
header="12.124"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -67,7 +80,7 @@
|
|||||||
header="$98.111,00"
|
header="$98.111,00"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -77,7 +90,7 @@
|
|||||||
header="2 TB"
|
header="2 TB"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -88,7 +101,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" width="24"/>
|
<CIcon name="settings" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -97,7 +110,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" width="24"/>
|
<CIcon name="laptop" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -106,7 +119,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" width="24"/>
|
<CIcon name="moon" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -115,7 +128,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="bell" width="24"/>
|
<CIcon name="bell" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -126,8 +139,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" width="24"/>
|
<CIcon name="settings" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -136,8 +149,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" width="24"/>
|
<CIcon name="laptop" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -146,8 +159,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" width="24"/>
|
<CIcon name="moon" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -156,8 +169,8 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="danger"
|
color="danger"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="bell" width="24"/>
|
<CIcon name="bell" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -168,38 +181,38 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" class="c-mx-5 " width="24"/>
|
<CIcon name="settings" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" class="c-mx-5 " width="24"/>
|
<CIcon name="laptop" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" class="c-mx-5 " width="24"/>
|
<CIcon name="moon" class="mx-5 " width="24"/>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<CCardFooter class="c-card-footer c-px-3 c-py-2">
|
<CCardFooter class="card-footer px-3 py-2">
|
||||||
<CLink
|
<CLink
|
||||||
class="c-font-weight-bold c-font-xs c-btn-block c-text-muted"
|
class="font-weight-bold font-xs btn-block text-muted"
|
||||||
href="https://coreui.io/"
|
href="https://coreui.io/"
|
||||||
>
|
>
|
||||||
View more
|
View more
|
||||||
<CIcon name="arrowRight" class="c-float-right" width="16"/>
|
<CIcon name="arrowRight" class="float-right" width="16"/>
|
||||||
</CLink>
|
</CLink>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</template>
|
</template>
|
||||||
@@ -211,57 +224,57 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" class="c-mx-5 " width="24"/>
|
<CIcon name="settings" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" class="c-mx-5 " width="24"/>
|
<CIcon name="laptop" class="mx-5 " width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="12" sm="6" lg="4">
|
<CCol col="12" sm="6" lg="4">
|
||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-padding
|
:icon-padding="false"
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" class="c-mx-5" width="24"/>
|
<CIcon name="moon" class="mx-5" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow> -->
|
</CRow> -->
|
||||||
<WidgetsBrand noCharts/>
|
<WidgetsBrand noCharts/>
|
||||||
<WidgetsBrand/>
|
<WidgetsBrand/>
|
||||||
<CCardGroup class="c-mb-4">
|
<CCardGroup class="mb-4">
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -274,16 +287,16 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
</CCardGroup>
|
</CCardGroup>
|
||||||
<CCardGroup class="c-mb-4">
|
<CCardGroup class="mb-4">
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
@@ -291,7 +304,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
@@ -299,7 +312,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
@@ -307,7 +320,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
@@ -315,7 +328,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
@@ -326,7 +339,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -335,7 +348,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -344,7 +357,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -353,7 +366,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -362,7 +375,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -371,7 +384,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="972"
|
header="972"
|
||||||
text="comments"
|
text="comments"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="speech" height="36"/>
|
<CIcon name="speech" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -382,7 +395,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
@@ -392,7 +405,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
@@ -402,7 +415,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
@@ -412,7 +425,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
@@ -422,7 +435,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
@@ -432,7 +445,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="972"
|
header="972"
|
||||||
text="comments"
|
text="comments"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speech" height="36"/>
|
<CIcon name="speech" height="36"/>
|
||||||
@@ -443,6 +456,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
|
color="primary"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -454,7 +468,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="success"
|
color="success"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -466,7 +480,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="danger"
|
color="danger"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -478,7 +492,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="warning"
|
color="warning"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
|
|||||||
@@ -3,20 +3,19 @@
|
|||||||
<template v-if="!noCharts">
|
<template v-if="!noCharts">
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="facebook"
|
color="facebook"
|
||||||
right-header="89k"
|
right-header="89k"
|
||||||
right-footer="friends"
|
right-footer="friends"
|
||||||
left-header="459"
|
left-header="459"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialFacebook"
|
name="facebook"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||||
label="Friends"
|
label="Friends"
|
||||||
@@ -26,20 +25,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="twitter"
|
color="twitter"
|
||||||
right-header="973k"
|
right-header="973k"
|
||||||
right-footer="followers"
|
right-footer="followers"
|
||||||
left-header="1.792"
|
left-header="1.792"
|
||||||
left-footer="tweets"
|
left-footer="tweets"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialTwitter"
|
name="twitter"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
||||||
label="Followers"
|
label="Followers"
|
||||||
@@ -49,20 +47,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="linkedin"
|
color="linkedin"
|
||||||
right-header="500+"
|
right-header="500+"
|
||||||
right-footer="contracts"
|
right-footer="contracts"
|
||||||
left-header="292"
|
left-header="292"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialLinkedin"
|
name="linkedin"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||||
label="Contracts"
|
label="Contracts"
|
||||||
@@ -76,16 +73,15 @@
|
|||||||
right-footer="events"
|
right-footer="events"
|
||||||
left-header="4"
|
left-header="4"
|
||||||
left-footer="meetings"
|
left-footer="meetings"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="calendar"
|
name="calendar"
|
||||||
height="56"
|
height="52"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
style="height:100px"
|
class="c-chart-brand"
|
||||||
class="c-position-absolute"
|
|
||||||
background-color="rgba(255,255,255,.1)"
|
background-color="rgba(255,255,255,.1)"
|
||||||
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
||||||
label="Followers"
|
label="Followers"
|
||||||
@@ -97,46 +93,46 @@
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="facebook"
|
color="facebook"
|
||||||
right-header="89k"
|
right-header="89k"
|
||||||
right-footer="friends"
|
right-footer="friends"
|
||||||
left-header="459"
|
left-header="459"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialFacebook"
|
name="facebook"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="twitter"
|
color="twitter"
|
||||||
right-header="973k"
|
right-header="973k"
|
||||||
right-footer="followers"
|
right-footer="followers"
|
||||||
left-header="1.792"
|
left-header="1.792"
|
||||||
left-footer="tweets"
|
left-footer="tweets"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialTwitter"
|
name="twitter"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="linkedin"
|
color="linkedin"
|
||||||
right-header="500+"
|
right-header="500+"
|
||||||
right-footer="contracts"
|
right-footer="contracts"
|
||||||
left-header="292"
|
left-header="292"
|
||||||
left-footer="feeds"
|
left-footer="feeds"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="socialLinkedin"
|
name="linkedin"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -146,12 +142,12 @@
|
|||||||
right-footer="events"
|
right-footer="events"
|
||||||
left-header="4"
|
left-header="4"
|
||||||
left-footer="meetings"
|
left-footer="meetings"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="calendar"
|
name="calendar"
|
||||||
height="56"
|
height="56"
|
||||||
class="c-my-4"
|
class="my-4"
|
||||||
/>
|
/>
|
||||||
</CWidgetBrand>
|
</CWidgetBrand>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -163,7 +159,7 @@
|
|||||||
import { CChartLineSimple } from '../charts/index.js'
|
import { CChartLineSimple } from '../charts/index.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'WidgetsSocial',
|
name: 'WidgetsBrand',
|
||||||
components: {
|
components: {
|
||||||
CChartLineSimple
|
CChartLineSimple
|
||||||
},
|
},
|
||||||
@@ -172,3 +168,11 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.c-chart-brand {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown header="9.823" text="Members online">
|
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='cui-settings'></i>"
|
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-settings"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
@@ -18,7 +20,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
pointed
|
pointed
|
||||||
class="c-px-3"
|
class="px-3"
|
||||||
style="height:70px"
|
style="height:70px"
|
||||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||||
background-color="primary"
|
background-color="primary"
|
||||||
@@ -29,15 +31,18 @@
|
|||||||
</CWidgetDropdown>
|
</CWidgetDropdown>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown variant="info" header="9.823" text="Members online">
|
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
no-caret
|
:caret="false"
|
||||||
buttonHtml="<i class='cui-location-pin'></i>"
|
buttonHtml="<i class='cui-location-pin'></i>"
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-location-pin"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
@@ -47,7 +52,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<CChartLineSimple
|
<CChartLineSimple
|
||||||
pointed
|
pointed
|
||||||
class="c-px-3"
|
class="px-3"
|
||||||
style="height:70px"
|
style="height:70px"
|
||||||
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
||||||
background-color="info"
|
background-color="info"
|
||||||
@@ -60,17 +65,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown
|
<CWidgetDropdown
|
||||||
variant="warning"
|
color="warning"
|
||||||
header="9.823"
|
header="9.823"
|
||||||
text="Members online"
|
text="Members online"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='cui-settings'></i>"
|
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-settings"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
@@ -92,17 +99,19 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown
|
<CWidgetDropdown
|
||||||
variant="danger"
|
color="danger"
|
||||||
header="9.823"
|
header="9.823"
|
||||||
text="Members online"
|
text="Members online"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="c-float-right"
|
class="float-right"
|
||||||
variant="transparent c-p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
buttonHtml="<i class='cui-settings'></i>"
|
|
||||||
>
|
>
|
||||||
|
<template #toggler-content>
|
||||||
|
<i class="cui-settings"></i>
|
||||||
|
</template>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
// empty custom assertion needed for git to keep track of the folder
|
||||||
|
module.exports.assertion = function () {}
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
// A custom Nightwatch assertion.
|
|
||||||
// The assertion name is the filename.
|
|
||||||
// Example usage:
|
|
||||||
//
|
|
||||||
// browser.assert.elementCount(selector, count)
|
|
||||||
//
|
|
||||||
// For more information on custom assertions see:
|
|
||||||
// http://nightwatchjs.org/guide#writing-custom-assertions
|
|
||||||
|
|
||||||
exports.assertion = function elementCount (selector, count) {
|
|
||||||
this.message = `Testing if element <${selector}> has count: ${count}`
|
|
||||||
this.expected = count
|
|
||||||
this.pass = val => val === count
|
|
||||||
this.value = res => res.value
|
|
||||||
function evaluator (_selector) {
|
|
||||||
return document.querySelectorAll(_selector).length
|
|
||||||
}
|
|
||||||
this.command = cb => this.api.execute(evaluator, [selector], cb)
|
|
||||||
}
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
// empty custom command needed for git to keep track of the folder
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
// empty page-object needed for git to keep track of the folder
|
||||||
+18
-76
@@ -22,83 +22,25 @@ module.exports = {
|
|||||||
|
|
||||||
browser.url(devServer).pause(500).expect.element('body').to.be.present
|
browser.url(devServer).pause(500).expect.element('body').to.be.present
|
||||||
|
|
||||||
// browser.waitForElementVisible('.app', 10000)
|
browser.waitForElementVisible('.c-app', 2000)
|
||||||
// .assert.elementPresent('.app-header')
|
.assert.elementPresent('.c-header')
|
||||||
// .assert.elementPresent('.app-header > .navbar-brand')
|
.assert.elementPresent('.c-sidebar')
|
||||||
// .assert.elementPresent('.app-body')
|
.assert.elementPresent('.c-footer')
|
||||||
// .assert.elementPresent('.app-body > .main > .breadcrumb')
|
.assert.elementPresent('.c-sidebar')
|
||||||
// .assert.elementPresent('.app-body > .main > .container-fluid > .animated')
|
.assert.elementPresent('.c-body')
|
||||||
// .assert.elementPresent('.app-body > .sidebar > .sidebar-nav')
|
|
||||||
// .assert.elementPresent('.app-body > .sidebar > .sidebar-minimizer')
|
|
||||||
// .assert.elementPresent('.app-footer')
|
|
||||||
// .assert.containsText('.app-footer > div > span', 'creativeLabs')
|
|
||||||
// .assert.containsText('.app-footer > div.ml-auto > span', 'Powered by')
|
|
||||||
// .assert.elementCount('button', 10)
|
|
||||||
// .resizeWindow(1024, 800)
|
|
||||||
// .pause(500)
|
|
||||||
|
|
||||||
// browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
|
// browser.resizeWindow(700, 800)
|
||||||
// console.log('response', typeof response)
|
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
|
||||||
// this.assert.ok(browser === this, 'Check if the context is right.')
|
// browser.resizeWindow(1900, 800)
|
||||||
// this.assert.cssClassPresent('body', 'aside-menu-show')
|
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('0px')
|
||||||
// })
|
// browser.pause(1500)
|
||||||
//
|
// browser.click('.c-sidebar-minimizer')
|
||||||
// browser.pause(500)
|
// browser.pause(1000)
|
||||||
|
// browser.expect.element('.c-sidebar').to.have.css('width').which.equals('56px')
|
||||||
// browser.click('body > div > header > button.d-none.d-lg-block.navbar-toggler', function (response) {
|
// browser.click('button.c-header-toggler')
|
||||||
// console.log('response', typeof response)
|
// browser.pause(1000)
|
||||||
// this.assert.cssClassNotPresent('body', 'aside-menu-show')
|
// browser.expect.element('.c-sidebar').to.have.css('margin-left').which.equals('-256px')
|
||||||
// })
|
// browser.pause(1000)
|
||||||
//
|
|
||||||
// browser.pause(500)
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .useXpath()
|
|
||||||
// .click('/html/body/div/header/button[2]', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'sidebar-lg-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/header/button[2]', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'sidebar-lg-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/div/div/button', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'sidebar-minimized')
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'brand-minimized')
|
|
||||||
// })
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/div/div/button', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'sidebar-minimized')
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'brand-minimized')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .resizeWindow(800, 600)
|
|
||||||
// .pause(500)
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/header/button[1]', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassPresent('/html/body', 'sidebar-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser
|
|
||||||
// .pause(500)
|
|
||||||
// .click('/html/body/div/div/div/nav/section/ul/li[1]/div/a', function (response) {
|
|
||||||
// console.log('response', typeof response)
|
|
||||||
// this.assert.cssClassNotPresent('/html/body', 'sidebar-show')
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// browser.pause(5000)
|
|
||||||
|
|
||||||
browser.end()
|
browser.end()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
jest: true
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'import/no-extraneous-dependencies': 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { shallowMount, createLocalVue } from '@vue/test-utils'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import App from '@/App'
|
||||||
|
|
||||||
|
const localVue = createLocalVue()
|
||||||
|
localVue.use(VueRouter)
|
||||||
|
const router = new VueRouter()
|
||||||
|
|
||||||
|
|
||||||
|
localVue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('App.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(App.name).toBe('App')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(App, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is App', () => {
|
||||||
|
const wrapper = shallowMount(App, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.is(App)).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import { shallowMount, createLocalVue } from '@vue/test-utils';
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import TheContainer from '@/containers/TheContainer'
|
||||||
|
|
||||||
|
const localVue = createLocalVue()
|
||||||
|
localVue.use(VueRouter)
|
||||||
|
const router = new VueRouter()
|
||||||
|
|
||||||
|
localVue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheContainer.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(TheContainer.name).toBe('TheContainer')
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheContainer, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(TheContainer, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheFooter from '@/containers/TheFooter'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheFooter.vue', () => {
|
||||||
|
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheFooter)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheHeader from '@/containers/TheHeader'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheHeader.vue', () => {
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheHeader)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheHeaderDropdownAccnt from '@/containers/TheHeaderDropdownAccnt'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheHeaderDropdownAccnt.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(TheHeaderDropdownAccnt.name).toBe('TheHeaderDropdownAccnt')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')
|
||||||
|
const defaultData = TheHeaderDropdownAccnt.data()
|
||||||
|
expect(defaultData.itemsCount).toBe(42)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheHeaderDropdownAccnt)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils';
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import TheSidebar from '@/containers/TheSidebar'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('TheSidebar.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(TheSidebar.name).toBe('TheSidebar')
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(TheSidebar)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheContainer.vue renders correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="c-app"
|
||||||
|
>
|
||||||
|
<thesidebar-stub />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="c-wrapper"
|
||||||
|
>
|
||||||
|
<theheader-stub />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="c-body"
|
||||||
|
>
|
||||||
|
<main
|
||||||
|
class="c-main"
|
||||||
|
>
|
||||||
|
<ccontainer-stub
|
||||||
|
fluid="true"
|
||||||
|
>
|
||||||
|
<router-view-stub
|
||||||
|
name="fade"
|
||||||
|
/>
|
||||||
|
</ccontainer-stub>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<thefooter-stub />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheFooter.vue renders correctly 1`] = `
|
||||||
|
<cfooter-stub
|
||||||
|
tag="footer"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="https://coreui.io"
|
||||||
|
>
|
||||||
|
CoreUI
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-1"
|
||||||
|
>
|
||||||
|
© 2019 creativeLabs.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="ml-auto"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mr-1"
|
||||||
|
>
|
||||||
|
Powered by
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://coreui.io"
|
||||||
|
>
|
||||||
|
CoreUI for Vue
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</cfooter-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheHeader.vue renders correctly 1`] = `
|
||||||
|
<cheader-stub
|
||||||
|
colorscheme="light"
|
||||||
|
fixed="true"
|
||||||
|
light=""
|
||||||
|
tag="header"
|
||||||
|
withsubheader="true"
|
||||||
|
>
|
||||||
|
<ctoggler-stub
|
||||||
|
class="c-header-toggler ml-3"
|
||||||
|
inheader="true"
|
||||||
|
tag="button"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<img
|
||||||
|
alt="CoreUI Logo"
|
||||||
|
class="c-header-brand mx-auto d-lg-none"
|
||||||
|
height="46"
|
||||||
|
src="img/brand/coreui-base.svg"
|
||||||
|
width="97"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cheadernav-stub
|
||||||
|
class="d-md-down-none mr-auto"
|
||||||
|
>
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="px-3"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
to="/dashboard"
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="px-3"
|
||||||
|
event="click"
|
||||||
|
exact="true"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
to="/users"
|
||||||
|
>
|
||||||
|
Users
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="px-3"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
</cheadernav-stub>
|
||||||
|
|
||||||
|
<cheadernav-stub
|
||||||
|
class="mr-4"
|
||||||
|
>
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="d-md-down-none mx-2"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-bell"
|
||||||
|
/>
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="d-md-down-none mx-2"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-list"
|
||||||
|
/>
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<cheadernavitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="d-md-down-none mx-2"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-envelope-open"
|
||||||
|
/>
|
||||||
|
</cheadernavitem-stub>
|
||||||
|
|
||||||
|
<theheaderdropdownaccnt-stub />
|
||||||
|
</cheadernav-stub>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="c-subheader px-3"
|
||||||
|
>
|
||||||
|
<cbreadcrumbrouter-stub
|
||||||
|
class="border-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</cheader-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,251 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
|
||||||
|
<cdropdown-stub
|
||||||
|
addmenuclasses="pt-0"
|
||||||
|
caret="true"
|
||||||
|
class="c-header-nav-items"
|
||||||
|
flip="true"
|
||||||
|
nav=""
|
||||||
|
no-caret=""
|
||||||
|
placement="bottom-end"
|
||||||
|
togglertext="Dropdown"
|
||||||
|
>
|
||||||
|
|
||||||
|
<cdropdownheader-stub
|
||||||
|
class="text-center"
|
||||||
|
color="light"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<strong>
|
||||||
|
Account
|
||||||
|
</strong>
|
||||||
|
</cdropdownheader-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-bell mr-2"
|
||||||
|
/>
|
||||||
|
Updates
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="info"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-envelope-open mr-2"
|
||||||
|
/>
|
||||||
|
Messages
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="success"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-task mr-2"
|
||||||
|
/>
|
||||||
|
Tasks
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="danger"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-comment-square mr-2"
|
||||||
|
/>
|
||||||
|
Comments
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="warning"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownheader-stub
|
||||||
|
class="text-center"
|
||||||
|
color="light"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<strong>
|
||||||
|
Settings
|
||||||
|
</strong>
|
||||||
|
</cdropdownheader-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-user mr-2"
|
||||||
|
/>
|
||||||
|
Profile
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-wrench mr-2"
|
||||||
|
/>
|
||||||
|
Settings
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-dollar mr-2"
|
||||||
|
/>
|
||||||
|
Payments
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-file mr-2"
|
||||||
|
/>
|
||||||
|
Projects
|
||||||
|
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="ml-auto"
|
||||||
|
color="primary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</cbadge-stub>
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdowndivider-stub
|
||||||
|
tag="div"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-shield mr-2"
|
||||||
|
/>
|
||||||
|
Lock Account
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
|
||||||
|
<cdropdownitem-stub
|
||||||
|
activeclass="active"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-lock-locked mr-2"
|
||||||
|
/>
|
||||||
|
Logout
|
||||||
|
|
||||||
|
</cdropdownitem-stub>
|
||||||
|
</cdropdown-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TheSidebar.vue renders correctly 1`] = `
|
||||||
|
<csidebar-stub
|
||||||
|
breakpoint="lg"
|
||||||
|
colorscheme="dark"
|
||||||
|
dropdownmode="openActive"
|
||||||
|
fixed="true"
|
||||||
|
hideonmobileclick="true"
|
||||||
|
show="true"
|
||||||
|
>
|
||||||
|
<csidebarbrand-stub
|
||||||
|
fullsrc="img/brand/coreui-base-white.svg"
|
||||||
|
minimizedsrc="img/brand/coreui-signet-white.svg"
|
||||||
|
wrappedinlink="[object Object]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<crenderfunction-stub
|
||||||
|
contenttorender="CSidebarNav,CSidebarNavLink,[object Object],CSidebarNavTitle,Theme,CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavTitle,Components,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavDivider,CSidebarNavTitle,Extras,CSidebarNavDropdown,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object],CSidebarNavLink,[object Object]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<csidebarminimizer-stub
|
||||||
|
class="d-md-down-none"
|
||||||
|
/>
|
||||||
|
</csidebar-stub>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import { CIconPlugin } from '@coreui/icons/vue'
|
||||||
|
import Dashboard from '@/views/Dashboard'
|
||||||
|
import { iconsSet } from '@/assets/icons/icons.js'
|
||||||
|
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
Vue.use(CIconPlugin, iconsSet)
|
||||||
|
|
||||||
|
describe('Dashboard.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Dashboard.name).toBe('Dashboard')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Dashboard.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Dashboard.data).toMatch('function')
|
||||||
|
const defaultData = Dashboard.data()
|
||||||
|
expect(defaultData.selected).toMatch('Month')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Dashboard', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.is(Dashboard)).toBe(true)
|
||||||
|
})
|
||||||
|
it('should render correct content', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.find('#traffic').text()).toMatch('Traffic')
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(Dashboard)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,954 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Dashboard.vue renders correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<widgetsdropdown-stub />
|
||||||
|
|
||||||
|
<ccard-stub>
|
||||||
|
<ccardbody-stub>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
sm="5"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="card-title mb-0"
|
||||||
|
id="traffic"
|
||||||
|
>
|
||||||
|
Traffic
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="small text-muted"
|
||||||
|
>
|
||||||
|
November 2017
|
||||||
|
</div>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="d-none d-md-block"
|
||||||
|
sm="7"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="float-right"
|
||||||
|
color="primary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-cloud-download"
|
||||||
|
/>
|
||||||
|
</cbutton-stub>
|
||||||
|
|
||||||
|
<cbuttongroup-stub
|
||||||
|
class="float-right mr-3"
|
||||||
|
>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="mx-0"
|
||||||
|
color="outline-secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
Day
|
||||||
|
|
||||||
|
</cbutton-stub>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="mx-0"
|
||||||
|
color="outline-secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
pressed="true"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
Month
|
||||||
|
|
||||||
|
</cbutton-stub>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="mx-0"
|
||||||
|
color="outline-secondary"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
|
||||||
|
Year
|
||||||
|
|
||||||
|
</cbutton-stub>
|
||||||
|
</cbuttongroup-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<mainchartexample-stub
|
||||||
|
style="height: 300px; margin-top: 40px;"
|
||||||
|
/>
|
||||||
|
</ccardbody-stub>
|
||||||
|
|
||||||
|
<ccardfooter-stub>
|
||||||
|
<crow-stub
|
||||||
|
class="text-center"
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Visits
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
29.703 Users (40%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="40"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0 d-md-down-none"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Unique
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
24.093 Users (20%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="20"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Pageviews
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
78.706 Views (60%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="warning"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="60"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
New Users
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
22.123 Users (80%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="80"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
class="mb-sm-2 mb-0 d-md-down-none"
|
||||||
|
md="true"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Bounce Rate
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<strong>
|
||||||
|
Average Rate (40.15%)
|
||||||
|
</strong>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs mt-2"
|
||||||
|
max="100"
|
||||||
|
precision="1"
|
||||||
|
value="40"
|
||||||
|
/>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
</ccardfooter-stub>
|
||||||
|
</ccard-stub>
|
||||||
|
|
||||||
|
<widgetsbrand-stub />
|
||||||
|
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
md="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccard-stub
|
||||||
|
bodywrapper="true"
|
||||||
|
headerhtml="Traffic & Sales"
|
||||||
|
>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
lg="6"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="info"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
New Clients
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
9,123
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="danger"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Recurring Clients
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
22,643
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<hr
|
||||||
|
class="mt-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Monday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="34"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="78"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Tuesday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="56"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="94"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Wednesday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="12"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="67"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Thursday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="43"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="91"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Friday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="22"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="73"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Saturday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="53"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="82"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-prepend"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="progress-group-text"
|
||||||
|
>
|
||||||
|
|
||||||
|
Sunday
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="info"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="9"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="danger"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="69"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="legend text-center"
|
||||||
|
>
|
||||||
|
<small>
|
||||||
|
<sup>
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
color="info"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
pill="true"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
|
||||||
|
</cbadge-stub>
|
||||||
|
</sup>
|
||||||
|
|
||||||
|
New clients
|
||||||
|
|
||||||
|
|
||||||
|
<sup>
|
||||||
|
<cbadge-stub
|
||||||
|
activeclass="active"
|
||||||
|
color="danger"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
pill="true"
|
||||||
|
routertag="a"
|
||||||
|
tag="span"
|
||||||
|
target="_self"
|
||||||
|
>
|
||||||
|
|
||||||
|
</cbadge-stub>
|
||||||
|
</sup>
|
||||||
|
|
||||||
|
Recurring clients
|
||||||
|
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
lg="6"
|
||||||
|
sm="12"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<crow-stub
|
||||||
|
gutters="true"
|
||||||
|
>
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="warning"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Pageviews
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
78,623
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
|
||||||
|
<ccol-stub
|
||||||
|
sm="6"
|
||||||
|
tag="div"
|
||||||
|
>
|
||||||
|
<ccallout-stub
|
||||||
|
color="success"
|
||||||
|
>
|
||||||
|
<small
|
||||||
|
class="text-muted"
|
||||||
|
>
|
||||||
|
Organic
|
||||||
|
</small>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<strong
|
||||||
|
class="h4"
|
||||||
|
>
|
||||||
|
49,123
|
||||||
|
</strong>
|
||||||
|
</ccallout-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<hr
|
||||||
|
class="mt-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ul
|
||||||
|
class="horizontal-bars type-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-user progress-group-icon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Male
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
43%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="warning"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="43"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group mb-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-user-female progress-group-icon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Female
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
37%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="warning"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="37"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-globe progress-group-icon"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Organic Search
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
191,235
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(56%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="56"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<cicon-stub
|
||||||
|
class="progress-group-icon"
|
||||||
|
fonticontag="i"
|
||||||
|
height="17"
|
||||||
|
name="socialFacebook"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Facebook
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
51,223
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(15%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="15"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<cicon-stub
|
||||||
|
class="progress-group-icon"
|
||||||
|
fonticontag="i"
|
||||||
|
height="17"
|
||||||
|
name="socialTwitter"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
Twitter
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
37,564
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(11%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="11"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="progress-group-header"
|
||||||
|
>
|
||||||
|
<cicon-stub
|
||||||
|
class="progress-group-icon"
|
||||||
|
fonticontag="i"
|
||||||
|
height="17"
|
||||||
|
name="socialLinkedin"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="title"
|
||||||
|
>
|
||||||
|
LinkedIn
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="ml-auto font-weight-bold"
|
||||||
|
>
|
||||||
|
|
||||||
|
27,319
|
||||||
|
<span
|
||||||
|
class="text-muted small"
|
||||||
|
>
|
||||||
|
(8%)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="progress-group-bars"
|
||||||
|
>
|
||||||
|
<cprogress-stub
|
||||||
|
class="progress-xs"
|
||||||
|
color="success"
|
||||||
|
max="100"
|
||||||
|
precision="0"
|
||||||
|
value="8"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="divider text-center"
|
||||||
|
>
|
||||||
|
<cbutton-stub
|
||||||
|
activeclass="active"
|
||||||
|
class="text-muted"
|
||||||
|
color="link"
|
||||||
|
event="click"
|
||||||
|
exactactiveclass="active"
|
||||||
|
routertag="a"
|
||||||
|
size="sm"
|
||||||
|
target="_self"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="cui-options"
|
||||||
|
/>
|
||||||
|
</cbutton-stub>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<ctable-stub
|
||||||
|
class="mb-0 table-outline"
|
||||||
|
defaultsorter="[object Object]"
|
||||||
|
fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
|
||||||
|
head-color="light"
|
||||||
|
hover="true"
|
||||||
|
items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
|
||||||
|
itemsperpage="10"
|
||||||
|
no-sorting=""
|
||||||
|
responsive="true"
|
||||||
|
/>
|
||||||
|
</ccard-stub>
|
||||||
|
</ccol-stub>
|
||||||
|
</crow-stub>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Breadcrumbs from '@/views/base/Breadcrumbs'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Breadcrumbs.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Breadcrumbs.name).toBe('Breadcrumbs')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Breadcrumbs.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Breadcrumbs.data).toMatch('function')
|
||||||
|
const defaultData = Breadcrumbs.data()
|
||||||
|
expect(typeof defaultData.items).toMatch('object')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Breadcrumbs)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Breadcrumbs', () => {
|
||||||
|
const wrapper = shallowMount(Breadcrumbs)
|
||||||
|
expect(wrapper.is(Breadcrumbs)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Breadcrumbs)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Cards from '@/views/base/Cards'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Cards.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Cards.name).toBe('Cards')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Cards.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Cards.data).toMatch('function')
|
||||||
|
const defaultData = Cards.data()
|
||||||
|
expect(defaultData.show).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Cards)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Cards', () => {
|
||||||
|
const wrapper = shallowMount(Cards)
|
||||||
|
expect(wrapper.is(Cards)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Cards)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Carousels from '@/views/base/Carousels'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Carousels.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Carousels.name).toBe('Carousels')
|
||||||
|
})
|
||||||
|
it('is Carousels', () => {
|
||||||
|
const wrapper = shallowMount(Carousels)
|
||||||
|
expect(wrapper.is(Carousels)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Carousels)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount, mount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Collapses from '@/views/base/Collapses'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Collapses.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Collapses.name).toBe('Collapses')
|
||||||
|
})
|
||||||
|
it('has a created hook', () => {
|
||||||
|
expect(typeof Collapses.data).toMatch('function')
|
||||||
|
})
|
||||||
|
it('sets the correct default data', () => {
|
||||||
|
expect(typeof Collapses.data).toMatch('function')
|
||||||
|
const defaultData = Collapses.data()
|
||||||
|
expect(defaultData.showCollapse).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Collapses)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
// it('is Collapses', () => {
|
||||||
|
// const wrapper = shallowMount(Collapses)
|
||||||
|
// expect(wrapper.is(Collapses)).toBe(true)
|
||||||
|
// })
|
||||||
|
// it('should render correct content', () => {
|
||||||
|
// const wrapper = mount(Collapses)
|
||||||
|
// expect(wrapper.find('header.card-header > div > strong').text()).toMatch('Bootstrap Collapse')
|
||||||
|
// })
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = mount(Collapses)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Forms from '@/views/base/Forms'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Forms.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Forms.name).toBe('Forms')
|
||||||
|
})
|
||||||
|
it('is Forms', () => {
|
||||||
|
const wrapper = shallowMount(Forms)
|
||||||
|
expect(wrapper.is(Forms)).toBe(true)
|
||||||
|
})
|
||||||
|
// render random chackboxes
|
||||||
|
// test('renders correctly', () => {
|
||||||
|
// const wrapper = shallowMount(Forms)
|
||||||
|
// expect(wrapper.element).toMatchSnapshot()
|
||||||
|
// })
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Jumbotrons from '@/views/base/Jumbotrons'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Jumbotrons.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Jumbotrons.name).toBe('Jumbotrons')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Jumbotrons)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Jumbotrons', () => {
|
||||||
|
const wrapper = shallowMount(Jumbotrons)
|
||||||
|
expect(wrapper.is(Jumbotrons)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(Jumbotrons)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import ListGroups from '@/views/base/ListGroups'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('ListGroups.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(ListGroups.name).toBe('ListGroups')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(ListGroups)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is ListGroups', () => {
|
||||||
|
const wrapper = shallowMount(ListGroups)
|
||||||
|
expect(wrapper.is(ListGroups)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(ListGroups)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import CoreuiVue from '@coreui/vue'
|
||||||
|
import Navbars from '@/views/base/Navbars'
|
||||||
|
|
||||||
|
Vue.use(CoreuiVue)
|
||||||
|
|
||||||
|
describe('Navbars.vue', () => {
|
||||||
|
it('has a name', () => {
|
||||||
|
expect(Navbars.name).toBe('Navbars')
|
||||||
|
})
|
||||||
|
it('is Vue instance', () => {
|
||||||
|
const wrapper = shallowMount(Navbars)
|
||||||
|
expect(wrapper.isVueInstance()).toBe(true)
|
||||||
|
})
|
||||||
|
it('is Navbars', () => {
|
||||||
|
const wrapper = shallowMount(Navbars)
|
||||||
|
expect(wrapper.is(Navbars)).toBe(true)
|
||||||
|
})
|
||||||
|
test('renders correctly', () => {
|
||||||
|
const wrapper = shallowMount(Navbars)
|
||||||
|
expect(wrapper.element).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user