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

Merge pull request #48 from mrholek/v1.0.8

Browse Source 
v1.0.8
This commit is contained in:
xidedix
2018-01-17 17:29:16 +01:00
committed by GitHub
parent 6315b5e42c 77c076fd7d
commit 1e4e117475
551 changed files with 18646 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+12
View File
@@ -1,5 +1,17 @@
## [vue](./README.md) version `changelog`
###### `v1.0.8`
- update: vue to `2.5.13`
- update: Bootstrap to `4.0.0-beta.3`
- update: bootstrap-vue to `1.4.0`
- chore: dependencies update
- refactor: `<b-table>` use the prop `responsive="sm"` instead of `class="table-responsive-sm"`
- fix: `Vue warn:` Do not use built-in or reserved HTML elements as component id: (header, aside, footer, table)
- feature: some Bootstrap4 components added
- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton`
- refactor(checkboxes, radios, labels): temp tweaks
- feat: mobile sidebar link click closes the sidebar [#18](https://github.com/mrholek/CoreUI-Vue/pull/18)
###### `v1.0.6`
- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
LICENSE
+1 -1
View File
@@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2017 creativeLabs Łukasz Holeczek.
Copyright (c) 2018 creativeLabs Łukasz Holeczek.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Vue_Full_Project/CHANGELOG.md
+12
View File
@@ -1,5 +1,17 @@
## [vue](./README.md) version `changelog`
###### `v1.0.8`
- update: vue to `2.5.13`
- update: Bootstrap to `4.0.0-beta.3`
- update: bootstrap-vue to `1.4.0`
- chore: dependencies update
- refactor: `<b-table>` use the prop `responsive="sm"` instead of `class="table-responsive-sm"`
- fix: `Vue warn:` Do not use built-in or reserved HTML elements as component id: (header, aside, footer, table)
- feature: some Bootstrap4 components added
- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton`
- refactor(checkboxes, radios, labels): temp tweaks
- feat: mobile sidebar link click closes the sidebar [#18](https://github.com/mrholek/CoreUI-Vue/pull/18)
###### `v1.0.6`
- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
Vue_Full_Project/build/webpack.base.conf.js
+4 -1
View File
@@ -48,17 +48,20 @@ module.exports = {
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
exclude: [/fonts/],
use: {
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]',
publicPath: '../../',
outputPath: utils.assetsPath('img/')
outputPath: utils.assetsPath('img/'),
emitFile: true
}
}
},
{
test: /\.(woff2?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
exclude: [/flags/],
use: {
loader: 'file-loader',
options: {
Vue_Full_Project/package-lock.json
Generated
+14076
View File
File diff suppressed because it is too large Load Diff
Vue_Full_Project/package.json
+33 -32
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/vue",
"version": "1.0.6",
"version": "1.0.8",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
@@ -17,19 +17,20 @@
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"bootstrap": "4.0.0-beta.2",
"bootstrap-vue": "1.1.0",
"bootstrap": "4.0.0-beta.3",
"bootstrap-vue": "1.4.0",
"chart.js": "2.7.1",
"flag-icon-css": "2.9.0",
"font-awesome": "^4.7.0",
"simple-line-icons": "^2.4.1",
"vue": "2.5.6",
"vue": "2.5.13",
"vue-chartjs": "3.0.2",
"vue-router": "3.0.1"
},
"devDependencies": {
"autoprefixer": "7.1.6",
"autoprefixer": "7.2.4",
"babel-core": "6.26.0",
"babel-eslint": "8.0.2",
"babel-eslint": "8.2.1",
"babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "6.23.0",
"babel-preset-env": "1.6.1",
@@ -37,12 +38,12 @@
"babel-register": "6.26.0",
"chalk": "2.3.0",
"connect-history-api-fallback": "1.5.0",
"copy-webpack-plugin": "4.2.1",
"css-loader": "0.28.7",
"eslint": "4.11.0",
"copy-webpack-plugin": "4.3.1",
"css-loader": "0.28.8",
"eslint": "4.15.0",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-html": "4.0.0",
"eslint-plugin-html": "4.0.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-node": "5.2.1",
"eslint-config-standard": "10.2.1",
@@ -51,33 +52,34 @@
"eventsource-polyfill": "0.9.6",
"express": "4.16.2",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"file-loader": "1.1.6",
"friendly-errors-webpack-plugin": "1.6.1",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4",
"webpack-bundle-analyzer": "2.9.1",
"cross-env": "5.1.1",
"karma": "1.7.1",
"cross-env": "5.1.3",
"karma": "2.0.0",
"karma-coverage": "1.1.1",
"karma-mocha": "1.3.0",
"karma-phantomjs-launcher": "1.0.4",
"karma-phantomjs-shim": "1.5.0",
"karma-sinon-chai": "1.3.3",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "2.0.6",
"lolex": "2.3.0",
"mocha": "4.0.1",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "2.0.9",
"lolex": "2.3.1",
"mocha": "4.1.0",
"chai": "4.1.2",
"sinon": "4.1.2",
"sinon": "4.1.4",
"sinon-chai": "2.14.0",
"inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.16",
"chromedriver": "2.33.2",
"chromedriver": "2.34.1",
"cross-spawn": "5.1.0",
"nightwatch": "0.9.16",
"selenium-server": "3.7.1",
"nightwatch": "0.9.19",
"node-sass": "4.7.2",
"sass-loader": "6.0.6",
"selenium-server": "3.8.1",
"semver": "5.4.1",
"shelljs": "0.7.8",
"opn": "5.1.0",
@@ -85,18 +87,17 @@
"ora": "1.3.0",
"rimraf": "2.6.2",
"url-loader": "0.6.2",
"vue-loader": "13.5.0",
"vue-loader": "13.7.0",
"vue-style-loader": "3.0.3",
"vue-template-compiler": "2.5.6",
"webpack": "3.8.1",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.20.0",
"webpack-merge": "4.1.1",
"node-sass": "4.7.1",
"sass-loader": "6.0.6"
"vue-template-compiler": "2.5.13",
"webpack": "3.10.0",
"webpack-bundle-analyzer": "2.9.2",
"webpack-dev-middleware": "2.0.4",
"webpack-hot-middleware": "2.21.0",
"webpack-merge": "4.1.1"
},
"engines": {
"node": ">= 6.4.0",
"npm": ">= 5.0.0"
"node": ">= 8.9.4",
"npm": ">= 5.6.0"
}
}
Vue_Full_Project/scss/_bootstrap-variables.scss
+22 -1
View File
@@ -51,7 +51,28 @@ $theme-colors: (
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
dark: $gray-800,
blue: $blue,
indigo: $indigo,
purple: $purple,
pink: $pink,
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
cyan: $cyan,
gray-100: $gray-100,
gray-200: $gray-200,
gray-300: $gray-300,
gray-400: $gray-400,
gray-500: $gray-500,
gray-600: $gray-600,
gray-700: $gray-700,
gray-800: $gray-800,
gray-900: $gray-900
);
// Options
Vue_Full_Project/scss/core/_buttons.scss
-9
View File
@@ -2,15 +2,6 @@ button {
cursor: pointer;
}
.btn {
.badge {
position: absolute;
top: 2px;
right: 6px;
font-size: 9px;
}
}
.btn-transparent {
color: #fff;
background-color: transparent;
Vue_Full_Project/scss/core/_layout.scss
+3
View File
@@ -129,6 +129,9 @@ app-root {
}
}
}
.sidebar-minimizer {
display: none;
}
}
.sidebar-minimized {
Vue_Full_Project/scss/core/_nav.scss
+3
View File
@@ -1,6 +1,9 @@
.nav-tabs {
.nav-link {
color: $gray-600;
&:hover {
cursor: pointer;
}
&.active {
color: $gray-800;
background: #fff;
Vue_Full_Project/scss/core/_sidebar.scss
+1 -1
View File
@@ -207,7 +207,7 @@
border-radius: $border-radius;
}
> .nav-dropdown-items {
max-height: 1000px;
max-height: 1500px;
}
.nav-link {
Vue_Full_Project/scss/style.scss
+2 -2
View File
@@ -1,8 +1,8 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.6
* @version v1.0.8
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* @license MIT
*/
Vue_Full_Project/src/App.vue
+2
View File
@@ -9,6 +9,8 @@ export default {
</script>
<style>
/* Import Font Awesome Icons Set */
@import '~flag-icon-css/css/flag-icon.min.css';
/* Import Font Awesome Icons Set */
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/css/font-awesome.min.css';
Vue_Full_Project/src/_nav.js
+132 -20
View File
@@ -11,7 +11,7 @@ export default {
},
{
title: true,
name: 'UI elements',
name: 'Theme',
class: '',
wrapper: {
element: '',
@@ -19,44 +19,125 @@ export default {
}
},
{
name: 'Colors',
url: '/theme/colors',
icon: 'icon-drop'
},
{
name: 'Typography',
url: '/theme/typography',
icon: 'icon-pencil'
},
{
title: true,
name: 'Components',
url: '/components',
class: '',
wrapper: {
element: '',
attributes: {}
}
},
{
name: 'Base',
url: '/base',
icon: 'icon-puzzle',
children: [
{
name: 'Buttons',
url: '/components/buttons',
icon: 'icon-puzzle'
},
{
name: 'Social Buttons',
url: '/components/social-buttons',
name: 'Breadcrumbs',
url: '/base/breadcrumbs',
icon: 'icon-puzzle'
},
{
name: 'Cards',
url: '/components/cards',
url: '/base/cards',
icon: 'icon-puzzle'
},
{
name: 'Carousels',
url: '/base/carousels',
icon: 'icon-puzzle'
},
{
name: 'Collapses',
url: '/base/collapses',
icon: 'icon-puzzle'
},
{
name: 'Forms',
url: '/components/forms',
url: '/base/forms',
icon: 'icon-puzzle'
},
{
name: 'Modals',
url: '/components/modals',
name: 'Jumbotrons',
url: '/base/jumbotrons',
icon: 'icon-puzzle'
},
{
name: 'List Groups',
url: '/base/list-groups',
icon: 'icon-puzzle'
},
{
name: 'Navs',
url: '/base/navs',
icon: 'icon-puzzle'
},
{
name: 'Paginations',
url: '/base/paginations',
icon: 'icon-puzzle'
},
{
name: 'Popovers',
url: '/base/popovers',
icon: 'icon-puzzle'
},
{
name: 'Progress Bars',
url: '/base/progress-bars',
icon: 'icon-puzzle'
},
{
name: 'Switches',
url: '/components/switches',
url: '/base/switches',
icon: 'icon-puzzle'
},
{
name: 'Tables',
url: '/components/tables',
url: '/base/tables',
icon: 'icon-puzzle'
},
{
name: 'Tooltips',
url: '/base/tooltips',
icon: 'icon-puzzle'
}
]
},
{
name: 'Buttons',
url: '/buttons',
icon: 'icon-cursor',
children: [
{
name: 'Standard Buttons',
url: '/buttons/standard-buttons',
icon: 'icon-cursor'
},
{
name: 'Button Groups',
url: '/buttons/button-groups',
icon: 'icon-cursor'
},
{
name: 'Dropdowns',
url: '/buttons/dropdowns',
icon: 'icon-cursor'
},
{
name: 'Social Buttons',
url: '/buttons/social-buttons',
icon: 'icon-cursor'
}
]
},
@@ -65,6 +146,15 @@ export default {
url: '/icons',
icon: 'icon-star',
children: [
{
name: 'Flags',
url: '/icons/flags',
icon: 'icon-star',
badge: {
variant: 'success',
text: 'NEW'
}
},
{
name: 'Font Awesome',
url: '/icons/font-awesome',
@@ -81,6 +171,33 @@ export default {
}
]
},
{
name: 'Charts',
url: '/charts',
icon: 'icon-pie-chart'
},
{
name: 'Notifications',
url: '/notifications',
icon: 'icon-bell',
children: [
{
name: 'Alerts',
url: '/notifications/alerts',
icon: 'icon-bell'
},
{
name: 'Badges',
url: '/notifications/badges',
icon: 'icon-bell'
},
{
name: 'Modals',
url: '/notifications/modals',
icon: 'icon-bell'
}
]
},
{
name: 'Widgets',
url: '/widgets',
@@ -90,11 +207,6 @@ export default {
text: 'NEW'
}
},
{
name: 'Charts',
url: '/charts',
icon: 'icon-pie-chart'
},
{
divider: true
},
Vue_Full_Project/src/components/Aside.vue
+1 -1
View File
@@ -222,7 +222,7 @@
import Callout from './Callout'
import cSwitch from './Switch'
export default {
name: 'aside',
name: 'c-aside',
components: {
Callout,
cSwitch
Vue_Full_Project/src/components/Footer.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template>
<footer class="app-footer">
<span><a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.</span>
<span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
<span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>
</template>
<script>
export default {
name: 'footer'
name: 'c-footer'
}
</script>
Vue_Full_Project/src/components/Header.vue
+1 -1
View File
@@ -34,7 +34,7 @@
import HeaderDropdown from './HeaderDropdown.vue'
export default {
name: 'header',
name: 'c-header',
components: {
HeaderDropdown
},
Vue_Full_Project/src/components/HeaderDropdown.vue
+1 -1
View File
@@ -11,7 +11,7 @@
<b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="default">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
Vue_Full_Project/src/components/SidebarNavItem.vue
+8 -1
View File
@@ -1,5 +1,5 @@
<template>
<li :class="classList">
<li :class="classList" @click="hideMobile">
<slot></slot>
</li>
</template>
@@ -23,6 +23,13 @@
itemClasses () {
return this.classes ? this.classes.split(' ') : ''
}
},
methods: {
hideMobile () {
if (document.body.classList.contains('sidebar-mobile-show')) {
document.body.classList.toggle('sidebar-mobile-show')
}
}
}
}
</script>
Vue_Full_Project/src/components/SidebarNavLink.vue
+2 -11
View File
@@ -7,10 +7,8 @@
</div>
<div v-else>
<router-link :to="url" :class="classList">
<span @click="hideMobile">
<i :class="icon"></i> {{name}}
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
</span>
<i :class="icon"></i> {{name}}
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
</router-link>
</div>
</template>
@@ -65,13 +63,6 @@
return false
}
}
},
methods: {
hideMobile () {
if (document.body.classList.contains('sidebar-mobile-show')) {
document.body.classList.toggle('sidebar-mobile-show')
}
}
}
}
</script>
Vue_Full_Project/src/router/index.js
+169 -25
View File
@@ -6,22 +6,46 @@ import Full from '@/containers/Full'
// Views
import Dashboard from '@/views/Dashboard'
import Colors from '@/views/theme/Colors'
import Typography from '@/views/theme/Typography'
import Charts from '@/views/Charts'
import Widgets from '@/views/Widgets'
// Views - Components
import Buttons from '@/views/components/Buttons'
import SocialButtons from '@/views/components/SocialButtons'
import Cards from '@/views/components/Cards'
import Forms from '@/views/components/Forms'
import Modals from '@/views/components/Modals'
import Switches from '@/views/components/Switches'
import Tables from '@/views/components/Tables'
import Cards from '@/views/base/Cards'
import Forms from '@/views/base/Forms'
import Switches from '@/views/base/Switches'
import Tables from '@/views/base/Tables'
import Breadcrumbs from '@/views/base/Breadcrumbs'
import Carousels from '@/views/base/Carousels'
import Collapses from '@/views/base/Collapses'
import Jumbotrons from '@/views/base/Jumbotrons'
import ListGroups from '@/views/base/ListGroups'
import Navs from '@/views/base/Navs'
import Navbars from '@/views/base/Navbars'
import Paginations from '@/views/base/Paginations'
import Popovers from '@/views/base/Popovers'
import ProgressBars from '@/views/base/ProgressBars'
import Tooltips from '@/views/base/Tooltips'
// Views - Buttons
import StandardButtons from '@/views/buttons/StandardButtons'
import ButtonGroups from '@/views/buttons/ButtonGroups'
import Dropdowns from '@/views/buttons/Dropdowns'
import SocialButtons from '@/views/buttons/SocialButtons'
// Views - Icons
import Flags from '@/views/icons/Flags'
import FontAwesome from '@/views/icons/FontAwesome'
import SimpleLineIcons from '@/views/icons/SimpleLineIcons'
// Views - Notifications
import Alerts from '@/views/notifications/Alerts'
import Badges from '@/views/notifications/Badges'
import Modals from '@/views/notifications/Modals'
// Views - Pages
import Page404 from '@/views/pages/Page404'
import Page500 from '@/views/pages/Page500'
@@ -46,6 +70,26 @@ export default new Router({
name: 'Dashboard',
component: Dashboard
},
{
path: 'theme',
redirect: '/theme/colors',
name: 'Theme',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'colors',
name: 'Colors',
component: Colors
},
{
path: 'typography',
name: 'Typography',
component: Typography
}
]
},
{
path: 'charts',
name: 'Charts',
@@ -57,23 +101,13 @@ export default new Router({
component: Widgets
},
{
path: 'components',
redirect: '/components/buttons',
name: 'Components',
path: 'base',
redirect: '/base/cards',
name: 'Base',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'buttons',
name: 'Buttons',
component: Buttons
},
{
path: 'social-buttons',
name: 'Social Buttons',
component: SocialButtons
},
{
path: 'cards',
name: 'Cards',
@@ -84,11 +118,6 @@ export default new Router({
name: 'Forms',
component: Forms
},
{
path: 'modals',
name: 'Modals',
component: Modals
},
{
path: 'switches',
name: 'Switches',
@@ -98,6 +127,91 @@ export default new Router({
path: 'tables',
name: 'Tables',
component: Tables
},
{
path: 'breadcrumbs',
name: 'Breadcrumbs',
component: Breadcrumbs
},
{
path: 'carousels',
name: 'Carousels',
component: Carousels
},
{
path: 'collapses',
name: 'Collapses',
component: Collapses
},
{
path: 'jumbotrons',
name: 'Jumbotrons',
component: Jumbotrons
},
{
path: 'list-groups',
name: 'List Groups',
component: ListGroups
},
{
path: 'navs',
name: 'Navs',
component: Navs
},
{
path: 'navbars',
name: 'Navbars',
component: Navbars
},
{
path: 'paginations',
name: 'Paginations',
component: Paginations
},
{
path: 'popovers',
name: 'Popovers',
component: Popovers
},
{
path: 'progress-bars',
name: 'Progress Bars',
component: ProgressBars
},
{
path: 'tooltips',
name: 'Tooltips',
component: Tooltips
}
]
},
{
path: 'buttons',
redirect: '/buttons/buttons',
name: 'Buttons',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'standard-buttons',
name: 'Standard Buttons',
component: StandardButtons
},
{
path: 'button-groups',
name: 'Button Groups',
component: ButtonGroups
},
{
path: 'dropdowns',
name: 'Dropdowns',
component: Dropdowns
},
{
path: 'social-buttons',
name: 'Social Buttons',
component: SocialButtons
}
]
},
@@ -109,6 +223,11 @@ export default new Router({
render (c) { return c('router-view') }
},
children: [
{
path: 'flags',
name: 'Flags',
component: Flags
},
{
path: 'font-awesome',
name: 'Font Awesome',
@@ -120,6 +239,31 @@ export default new Router({
component: SimpleLineIcons
}
]
},
{
path: 'notifications',
redirect: '/notifications/alerts',
name: 'Notifications',
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'alerts',
name: 'Alerts',
component: Alerts
},
{
path: 'badges',
name: 'Badges',
component: Badges
},
{
path: 'modals',
name: 'Modals',
component: Modals
}
]
}
]
},
Vue_Full_Project/src/views/Dashboard.vue
+20 -19
View File
@@ -79,16 +79,16 @@
<b-row>
<b-col sm="5">
<h4 class="card-title mb-0">Traffic</h4>
<div class="small text-muted">November 2016</div>
<div class="small text-muted">November 2017</div>
</b-col>
<b-col sm="7" class="d-none d-md-block">
<b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
<b-button-toolbar class="float-right" aria-label="Toolbar with button groups">
<b-button-group class="mr-3" aria-label="First group">
<b-button variant="outline-secondary">Day</b-button>
<b-button variant="outline-secondary" :pressed="true">Month</b-button>
<b-button variant="outline-secondary">Year</b-button>
</b-button-group>
<b-button-toolbar class="float-right" aria-label="Toolbar with buttons group">
<b-form-radio-group class="mr-3" id="radiosBtn" buttons button-variant="outline-secondary" v-model="selected" name="radiosBtn">
<b-form-radio class="mx-0" value="Day">Day</b-form-radio>
<b-form-radio class="mx-0" value="Month">Month</b-form-radio>
<b-form-radio class="mx-0" value="Year">Year</b-form-radio>
</b-form-radio-group>
</b-button-toolbar>
</b-col>
</b-row>
@@ -497,11 +497,7 @@
</b-col>
</b-row>
<br/>
<b-table class="table-outline table-responsive-sm mb-0" hover
:items="tableItems"
:fields="tableFields"
head-variant="light"
>
<b-table class="mb-0 table-outline" responsive="sm" hover :items="tableItems" :fields="tableFields" head-variant="light">
<div slot="avatar" class="avatar" slot-scope="item">
<img :src="item.value.url" class="img-avatar" alt="">
<span class="avatar-status" v-bind:class="{ 'bg-success': item.value.status == 'success', 'bg-warning': item.value.status == 'warning', 'bg-danger': item.value.status == 'danger', 'bg-secondary': item.value.status == '' }"></span>
@@ -515,7 +511,8 @@
</span> | Registered: {{item.value.registered}}
</div>
</div>
<img slot="country" slot-scope="item" :src="item.value.flag" :alt="item.value.name" style="height:24px;">
<i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i>
<i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
<div slot="usage" slot-scope="item">
<div class="clearfix">
<div class="float-left">
@@ -563,11 +560,12 @@ export default {
},
data: function () {
return {
selected: 'Month',
tableItems: [
{
avatar: { url: 'static/img/avatars/1.jpg', status: 'success' },
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
country: { name: 'USA', flag: 'static/img/flags/USA.png' },
country: { name: 'USA', flag: 'us' },
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
activity: '10 sec ago'
@@ -575,7 +573,7 @@ export default {
{
avatar: { url: 'static/img/avatars/2.jpg', status: 'danger' },
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
country: { name: 'Brazil', flag: 'static/img/flags/Brazil.png' },
country: { name: 'Brazil', flag: 'br' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
activity: '5 minutes ago'
@@ -583,7 +581,7 @@ export default {
{
avatar: { url: 'static/img/avatars/3.jpg', status: 'warning' },
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
country: { name: 'India', flag: 'static/img/flags/India.png' },
country: { name: 'India', flag: 'in' },
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
activity: '1 hour ago'
@@ -591,7 +589,7 @@ export default {
{
avatar: { url: 'static/img/avatars/4.jpg', status: '' },
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
country: { name: 'France', flag: 'static/img/flags/France.png' },
country: { name: 'France', flag: 'fr' },
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'PayPal', icon: 'fa fa-paypal' },
activity: 'Last month'
@@ -599,7 +597,7 @@ export default {
{
avatar: { url: 'static/img/avatars/5.jpg', status: 'success' },
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Spain', flag: 'static/img/flags/Spain.png' },
country: { name: 'Spain', flag: 'es' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
activity: 'Last week'
@@ -607,7 +605,7 @@ export default {
{
avatar: { url: 'static/img/avatars/6.jpg', status: 'danger' },
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Poland', flag: 'static/img/flags/Poland.png' },
country: { name: 'Poland', flag: 'pl' },
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
activity: 'Last week'
@@ -651,6 +649,9 @@ export default {
$variant = 'danger'
}
return $variant
},
flag (value) {
return 'flag-icon flag-icon-' + value
}
}
}
Vue_Full_Project/src/views/base/Breadcrumbs.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Breadcrumb</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" target="_blank"><small className="text-muted">docs</small></a>
</div>
</div>
<b-breadcrumb :items="items"/>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'breadcrumbs',
data () {
return {
items: [{
text: 'Admin',
href: '#'
}, {
text: 'Manage',
href: '#'
}, {
text: 'Library',
active: true
}]
}
}
}
</script>
Vue_Full_Project/src/views/components/Cards.vue → Vue_Full_Project/src/views/base/Cards.vue
View File
Vue_Full_Project/src/views/base/Carousels.vue
+94
View File
@@ -0,0 +1,94 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Carousel</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/carousel" target="_blank"><small className="text-muted">docs</small></a>
</div>
</div>
<div>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<!-- Text slides with image -->
<b-carousel-slide caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://lorempixel.com/1024/480/technics/2/"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/4/">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://lorempixel.com/1024/480/technics/8/">
</b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
src="https://lorempixel.com/1024/480/technics/5/" alt="image slot">
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
</div>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'carousels',
data () {
return {
slide: 0,
sliding: null
}
},
methods: {
onSlideStart (slide) {
this.sliding = true
},
onSlideEnd (slide) {
this.sliding = false
}
}
}
</script>
Vue_Full_Project/src/views/base/Collapses.vue
+195
View File
@@ -0,0 +1,195 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Collapse</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/collapse" target="_blank"><small className="text-muted">docs</small></a>
</div>
</div>
<div>
<b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
<b-collapse id=collapse1_inner class="mt-2">
<b-card>Hello!</b-card>
</b-collapse>
</b-card>
</b-collapse>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Collapse</strong> <small>with<code>v-b-toggle</code>directive</small>
</div>
<div>
<!-- Using modifiers -->
<b-btn v-b-toggle.collapse2 class="m-1">Toggle Collapse</b-btn>
<!-- Using value -->
<b-btn v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</b-btn>
<!-- element to collapse -->
<b-collapse id="collapse2">
<b-card>
I am collapsible content!
</b-card>
</b-collapse>
</div>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Collapse</strong> <small>with<code>visibility</code></small>
</div>
<div>
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
<b-collapse visible id="collapse3">
<b-card>
I should start open!
</b-card>
</b-collapse>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Collapse</strong> <small>with<code>v-model</code></small>
</div>
<div>
<b-btn @click="showCollapse = !showCollapse"
:class="showCollapse ? 'collapsed' : null"
aria-controls="collapse4"
:aria-expanded="showCollapse ? 'true' : 'false'">
Toggle Collapse
</b-btn>
<b-collapse class="mt-2" v-model="showCollapse" id="collapse4">
<b-card>
I should start open!
</b-card>
</b-collapse>
</div>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Collapse</strong> <small>multiple elements</small>
</div>
<div>
<!-- Single button triggers two b-collapse components -->
<b-btn v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</b-btn>
<!-- elements to collapse -->
<b-collapse id="collapseA" class="mt-2">
<b-card>
I am collapsable content A!
</b-card>
</b-collapse>
<b-collapse id="collapseB" class="mt-2">
<b-card>
I am collapsable content B!
</b-card>
</b-collapse>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Collapse</strong><small><code>accordion</code>support</small>
</div>
<div role="tablist">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>
</b-card-header>
<b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
<b-card-body>
<p class="card-text">
I start opened because <code>visible</code> is <code>true</code>
</p>
<p class="card-text">
{{ text }}
</p>
</b-card-body>
</b-collapse>
</b-card>
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-btn block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</b-btn>
</b-card-header>
<b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">
<b-card-body>
<p class="card-text">
{{ text }}
</p>
</b-card-body>
</b-collapse>
</b-card>
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-btn block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</b-btn>
</b-card-header>
<b-collapse id="accordion3" accordion="my-accordion" role="tabpanel">
<b-card-body>
<p class="card-text">
{{ text }}
</p>
</b-card-body>
</b-collapse>
</b-card>
</div>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'collapses',
data () {
return {
showCollapse: true,
text: `
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
synth nesciunt you probably haven't heard of them accusamus labore VHS.
`
}
}
}
</script>
Vue_Full_Project/src/views/components/Forms.vue → Vue_Full_Project/src/views/base/Forms.vue
+402 -269
View File
@@ -8,175 +8,198 @@
</div>
<b-row>
<b-col sm="12">
<b-form-fieldset label="Name">
<b-form-group>
<label for="name">Name</label>
<b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
</b-form-fieldset>
</b-form-group>
</b-col>
</b-row><!--/.row-->
</b-row>
<b-row>
<b-col sm="12">
<b-form-fieldset label="Credit Card Number">
<b-form-group>
<label for="ccnumber">Credit Card Number</label>
<b-form-input type="text" id="ccnumber" placeholder="0000 0000 0000 0000"></b-form-input>
</b-form-fieldset>
</b-form-group>
</b-col>
</b-row><!--/.row-->
</b-row>
<b-row>
<b-col sm="4">
<b-form-fieldset label="Month">
<b-form-select
<b-form-group >
<label for="month1">Month</label>
<b-form-select id="month1"
:plain="true"
:options="[1,2,3,4,5,6,7,8,9,10,11,12]">
</b-form-select>
</b-form-fieldset>
</b-col><!--/.col-->
</b-form-group>
</b-col>
<b-col sm="4">
<b-form-fieldset label="Year">
<b-form-select
<b-form-group>
<label for="year1">Year</label>
<b-form-select id="year1"
:plain="true"
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]">
</b-form-select>
</b-form-fieldset>
</b-col><!--/.col-->
</b-form-group>
</b-col>
<b-col sm="4">
<b-form-fieldset label="CVV/CVC">
<b-form-group>
<label for="cvv">CVV/CVC</label>
<b-form-input type="text" id="cvv" placeholder="123"></b-form-input>
</b-form-fieldset>
</b-col><!--/.col-->
</b-row><!--/.row-->
</b-form-group>
</b-col>
</b-row>
</b-card>
</b-col><!--/.col-->
</b-col>
<b-col sm="6">
<b-card>
<div slot="header">
<strong>Company</strong> <small>Form</small>
</div>
<b-form-fieldset label="Company">
<b-form-group>
<label for="company">Company</label>
<b-form-input type="text" id="company" placeholder="Enter your company name"></b-form-input>
</b-form-fieldset>
<b-form-fieldset label="VAT">
</b-form-group>
<b-form-group>
<label for="vat">VAT</label>
<b-form-input type="text" id="vat" placeholder="PL1234567890"></b-form-input>
</b-form-fieldset>
<b-form-fieldset label="Street">
</b-form-group>
<b-form-group>
<label for="street">Street</label>
<b-form-input type="text" id="street" placeholder="Enter street name"></b-form-input>
</b-form-fieldset>
</b-form-group>
<b-row>
<b-col sm="8">
<b-form-fieldset label="City">
<b-form-group>
<label for="city">City</label>
<b-form-input type="text" id="city" placeholder="Enter your city"></b-form-input>
</b-form-fieldset>
</b-col><!--/.col-->
</b-form-group>
</b-col>
<b-col sm="4">
<b-form-fieldset label="Postal Code">
<b-form-group>
<label for="postal-code">Postal Code</label>
<b-form-input type="text" id="postal-code" placeholder="Postal Code"></b-form-input>
</b-form-fieldset>
</b-col><!--/.col-->
</b-row><!--/.row-->
<b-form-fieldset label="Country">
</b-form-group>
</b-col>
</b-row>
<b-form-group>
<label for="country">Country</label>
<b-form-input type="text" id="country" placeholder="Country name"></b-form-input>
</b-form-fieldset>
</b-form-group>
</b-card>
</b-col><!--/.col-->
</b-row><!--/.row-->
</b-col>
</b-row>
<b-row>
<b-col md="6">
<b-card>
<div slot="header">
<strong>Basic Form</strong> Elements
</div>
<b-form-fieldset
<b-form-group
description="Let us know your full name."
label="Enter your name"
label-for="basicName"
:label-cols="3"
:horizontal="true">
<b-form-input type="text"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="basicName" type="text"></b-form-input>
</b-form-group>
<b-form-group
label="Static"
label-for="basicStatic"
:label-cols="3"
:horizontal="true">
<b-form-input plaintext type="text" value="Username"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input plaintext id="basicStatic" type="text" value="Username"></b-form-input>
</b-form-group>
<b-form-group
description="This is a help text"
label="Text Input"
label-for="basicText"
:label-cols="3"
:horizontal="true">
<b-form-input type="text" placeholder="Text"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="basicText" type="text" placeholder="Text"></b-form-input>
</b-form-group>
<b-form-group
description="Please enter your email"
label="Email Input"
label-for="basicEmail"
:label-cols="3"
:horizontal="true">
<b-form-input type="email" placeholder="Enter your email"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="basicEmail" type="email" placeholder="Enter your email"></b-form-input>
</b-form-group>
<b-form-group
description="Please enter a complex password"
label="Password Input"
label-for="basicPassword"
:label-cols="3"
:horizontal="true">
<b-form-input type="password" placeholder="Enter your password"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="basicPassword" type="password" placeholder="Enter your password"></b-form-input>
</b-form-group>
<b-form-group
label="Disabled Input"
label-for="basicInputDisabled"
:label-cols="3"
:horizontal="true">
<b-form-input type="text" :disabled="true" placeholder="Disabled"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="basicInputDisabled" type="text" :disabled="true" placeholder="Disabled"></b-form-input>
</b-form-group>
<b-form-group
label="Textarea"
label-for="basicTextarea"
:label-cols="3"
:horizontal="true">
<b-form-input :textarea="true" :rows="9" placeholder="Content.."></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="basicTextarea" :textarea="true" :rows="9" placeholder="Content.."></b-form-input>
</b-form-group>
<b-form-group
label="Select"
label-for="basicSelect"
:label-cols="3"
:horizontal="true">
<b-form-select
<b-form-select id="basicSelect"
:plain="true"
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
value="Please select">
</b-form-select>
</b-form-fieldset>
<b-form-fieldset
</b-form-group>
<b-form-group
label="Select large"
label-for="basicSelectLg"
:label-cols="3"
:horizontal="true">
<b-form-select
<b-form-select id="basicSelectLg"
size="lg"
:plain="true"
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
value="Please select">
</b-form-select>
</b-form-fieldset>
<b-form-fieldset
</b-form-group>
<b-form-group
label="Select small"
label-for="basicSelectSm"
:label-cols="3"
:horizontal="true">
<b-form-select
<b-form-select id="basicSelectSm"
size="sm"
:plain="true"
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
value="Please select">
</b-form-select>
</b-form-fieldset>
<b-form-fieldset
</b-form-group>
<b-form-group
label="Disabled select"
label-for="basicSelectDisabled"
:label-cols="3"
:horizontal="true">
<b-form-select
<b-form-select id="basicSelectDisabled"
:plain="true"
:options="['Please select','Option 1', 'Option 2', 'Option 3']"
:disabled="true"
value="Please select">
</b-form-select>
</b-form-fieldset>
<b-form-fieldset
</b-form-group>
<b-form-group
label="Select"
label-for="basicMultiSelect"
:label-cols="3"
:horizontal="true">
<b-form-select
<b-form-select id="basicMultiSelect"
:plain="true"
:multiple="true"
:options="[
@@ -200,107 +223,161 @@
}]"
:value="[null,'c']">
</b-form-select>
</b-form-fieldset>
<b-form-fieldset
</b-form-group>
<b-form-group
label="Radios"
label-for="basicRadios"
:label-cols="3"
:horizontal="true">
<b-form-radio-group
<b-form-radio-group id="basicRadios"
:plain="true"
:options="[
{text: 'Option 1 ',value: '1'},
{text: 'Option 2 ',value: '2'},
{text: 'Option 3 ',value: '3'}
]"
value="1"
checked="2"
stacked>
</b-form-radio-group>
</b-form-fieldset>
<b-form-fieldset
label="Radios - custom"
:label-cols="3"
:horizontal="true">
<b-form-radio-group
:options="[
{text: 'Option 1',value: '1'},
{text: 'Option 2',value: '2'},
{text: 'Option 3',value: '3'}
]"
value="1"
stacked>
</b-form-radio-group>
</b-form-fieldset>
<b-form-fieldset
</b-form-group>
<b-form-group
label="Inline radios"
label-for="basicInlineRadios"
:label-cols="3"
:horizontal="true">
<b-form-radio-group
<b-form-radio-group id="basicInlineRadios"
:plain="true"
:options="[
{text: 'Option 1 ',value: '1'},
{text: 'Option 2 ',value: '2'},
{text: 'Option 3 ',value: '3'}
]"
value="1">
:checked="3">
</b-form-radio-group>
</b-form-fieldset>
<b-form-fieldset
label="Inline radios - custom"
:label-cols="3"
:horizontal="true">
<b-form-radio-group
:options="[
{text: 'Option 1',value: '1'},
{text: 'Option 2',value: '2'},
{text: 'Option 3',value: '3'}
]"
value="1">
</b-form-radio-group>
</b-form-fieldset>
<b-form-fieldset
</b-form-group>
<b-form-group
label="Checkboxes"
label-for="basicCheckboxes"
:label-cols="3"
:horizontal="true">
<b-form-checkbox :plain="true" value="1">Option 1</b-form-checkbox><br>
<b-form-checkbox :plain="true" value="2">Option 2</b-form-checkbox><br>
<b-form-checkbox :plain="true" value="3">Option 3</b-form-checkbox><br>
</b-form-fieldset>
<b-form-fieldset
label="Inline checkboxes"
:label-cols="3"
:horizontal="true">
<b-form-checkbox :plain="true" value="1">Option 1</b-form-checkbox>
<b-form-checkbox :plain="true" value="2">Option 2</b-form-checkbox>
<b-form-checkbox :plain="true" value="3">Option 3</b-form-checkbox>
</b-form-fieldset>
<b-form-fieldset
label="Checkboxes - custom"
:label-cols="3"
:horizontal="true">
<b-form-checkbox value="1">Option 1</b-form-checkbox><br>
<b-form-checkbox value="2">Option 2</b-form-checkbox><br>
<b-form-checkbox value="3">Option 3</b-form-checkbox><br>
</b-form-fieldset>
<b-form-fieldset
label="Inline checkboxes - custom"
:label-cols="3"
:horizontal="true">
horizontal>
<b-form-checkbox-group stacked id="basicCheckboxes" name="Checkboxes" :plain="true" :checked="[2,3]">
<b-form-checkbox value="1">Option 1</b-form-checkbox>
<b-form-checkbox value="2">Option 2</b-form-checkbox>
<b-form-checkbox value="3">Option 3</b-form-checkbox>
</b-form-fieldset>
<b-form-fieldset
</b-form-checkbox-group>
</b-form-group>
<b-form-group
label="Inline checkboxes"
label-for="basicInlineCheckboxes"
:label-cols="3"
:horizontal="true">
<b-form-checkbox-group id="basicInlineCheckboxes" name="InlineCheckboxes" :plain="true" :checked="[1,3]">
<b-form-checkbox :plain="true" value="1">Option 1</b-form-checkbox>
<b-form-checkbox :plain="true" value="2">Option 2</b-form-checkbox>
<b-form-checkbox :plain="true" value="3">Option 3</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<!--custom controls - radios/checkboxes - temporary fix-->
<b-form-group
label="Radios - custom"
label-for="basicRadiosCustom"
:label-cols="3"
:horizontal="true">
<b-form-radio-group
id="basicRadiosCustom"
value="1"
stacked>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" value="1">
<label class="custom-control-label" for="customRadio1">Option 1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" value="2" checked>
<label class="custom-control-label" for="customRadio2">Option 2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" value="3">
<label class="custom-control-label" for="customRadio3">Option 3</label>
</div>
</b-form-radio-group>
</b-form-group>
<b-form-group
label="Inline radios - custom"
label-for="basicCustomRadios1"
:label-cols="3"
:horizontal="true">
<b-form-radio-group
id="basicCustomRadios1"
name="customRadioInline1">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input" value="1">
<label class="custom-control-label" for="customRadioInline1">Option 1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input" value="2" checked>
<label class="custom-control-label" for="customRadioInline2">Option 2</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline3" name="customRadioInline1" class="custom-control-input" value="3">
<label class="custom-control-label" for="customRadioInline3">Option 3</label>
</div>
</b-form-radio-group>
</b-form-group>
<b-form-group
label="Checkboxes - custom"
label-for="basicCustomCheckboxes"
:label-cols="3"
:horizontal="true">
<b-form-checkbox-group stacked id="basicCustomCheckboxes">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customChk1" value="1" checked>
<label class="custom-control-label" for="customChk1">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customChk2" value="2">
<label class="custom-control-label" for="customChk2">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customChk3" value="3">
<label class="custom-control-label" for="customChk3">Option 3</label>
</div>
</b-form-checkbox-group>
</b-form-group>
<b-form-group
label="Inline checkboxes - custom"
label-for="basicInlineCustomCheckboxes"
:label-cols="3"
:horizontal="true">
<b-form-checkbox-group id="basicInlineCustomCheckboxes">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customInChk1" value="1">
<label class="custom-control-label" for="customInChk1">Option 1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customInChk2" value="2" checked>
<label class="custom-control-label" for="customInChk2">Option 2</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customInChk3" value="3">
<label class="custom-control-label" for="customInChk3">Option 3</label>
</div>
</b-form-checkbox-group>
</b-form-group>
<b-form-group
label="File input"
label-for="fileInput"
:label-cols="3"
:horizontal="true">
<b-form-file :plain="true"></b-form-file>
</b-form-fieldset>
<b-form-fieldset
<b-form-file id="fileInput" :plain="true"></b-form-file>
</b-form-group>
<b-form-group
label="Multiple file input"
label-for="fileInputMulti"
:label-cols="3"
:horizontal="true">
<b-form-file :plain="true" :multiple="true"></b-form-file>
</b-form-fieldset>
<b-form-file id="fileInputMulti" :plain="true" :multiple="true"></b-form-file>
</b-form-group>
<div slot="footer">
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -314,7 +391,7 @@
<b-form inline>
<label class="mr-sm-2" for="inlineInput1">Name: </label>
<b-input id="inlineInput1" type="text" placeholder="Jane Doe"></b-input>
<label class="mr-sm-2" for="inlineInput2">Email: </label>
<label class="mx-sm-2" for="inlineInput2">Email: </label>
<b-input id="inlineInput2" type="email" placeholder="jane.doe@example.com"></b-input>
</b-form>
<div slot="footer">
@@ -328,20 +405,22 @@
<div slot="header">
<strong>Horizontal</strong> Form
</div>
<b-form-fieldset
<b-form-group
label="Email"
label-for="horizEmail"
description="Please enter your email."
:label-cols="3"
:horizontal="true">
<b-form-input type="email" placeholder="Enter Email.."></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="horizEmail" type="email" placeholder="Enter Email.."></b-form-input>
</b-form-group>
<b-form-group
label="Password"
label-for="horizPass"
description="Please enter your password."
:label-cols="3"
:horizontal="true">
<b-form-input type="email" placeholder="Enter Password.."></b-form-input>
</b-form-fieldset>
<b-form-input id="horizPass" type="password" placeholder="Enter Password.."></b-form-input>
</b-form-group>
<div slot="footer">
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -351,16 +430,18 @@
<div slot="header">
<strong>Normal</strong> Form
</div>
<b-form-fieldset
<b-form-group validated
label="Email"
label-for="normalEmail"
description="Please enter your email.">
<b-form-input type="email" placeholder="Enter Email.."></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="normalEmail" type="email" placeholder="Enter Email.." required></b-form-input>
</b-form-group>
<b-form-group validated
label="Password"
label-for="normalPass"
description="Please enter your password.">
<b-form-input type="email" placeholder="Enter Password.."></b-form-input>
</b-form-fieldset>
<b-form-input id="normalPass" type="password" placeholder="Enter Password.." required></b-form-input>
</b-form-group>
<div slot="footer">
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -431,24 +512,29 @@
<div slot="header">
Input <strong>Sizes</strong>
</div>
<b-form-fieldset
<b-form-group
label="Small input"
label-for="smInput"
label-size="sm"
:label-cols="5"
:horizontal="true">
<b-form-input type="text" size="sm" placeholder="size='sm'"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
label="Normal input"
<b-form-input id="smInput" type="text" size="sm" placeholder="size='sm'"></b-form-input>
</b-form-group>
<b-form-group
label="Default input"
label-for="defaultInput"
:label-cols="5"
:horizontal="true">
<b-form-input type="text" placeholder="normal"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
<b-form-input id="defaultInput" type="text" placeholder="normal"></b-form-input>
</b-form-group>
<b-form-group
label="Large input"
label-for="lgInput"
label-size="lg"
:label-cols="5"
:horizontal="true">
<b-form-input type="text" size="lg" placeholder="size='lg'"></b-form-input>
</b-form-fieldset>
<b-form-input id="lgInput" type="text" size="lg" placeholder="size='lg'"></b-form-input>
</b-form-group>
<div slot="footer">
<b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -505,29 +591,37 @@
</b-form>
</b-card-body>
</b-card>
</b-col><!--/.col-->
</b-row><!--/.row-->
</b-col>
</b-row>
<b-row>
<b-col sm="4">
<b-card>
<div slot="header">
<strong>Icon/Text</strong> Groups
</div>
<b-form-fieldset>
<b-input-group left="<i class='fa fa-user'></i>">
<b-form-group>
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<b-form-input type="text" placeholder="Username"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group right="<i class='fa fa-envelope-o'></i>">
</b-form-group>
<b-form-group>
<b-input-group>
<b-form-input type="email" placeholder="Email"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text"><i class="fa fa-envelope-o"></i></span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group left="<i class='fa fa-euro'></i>" right=".00">
</b-form-group>
<b-form-group>
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-euro"></i></span>
</div>
<b-form-input type="text" placeholder="ex. $1.000.000"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text">.00</span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
</b-form-group>
<div slot="footer">
<b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -539,38 +633,39 @@
<div slot="header">
<strong>Buttons</strong> Groups
</div>
<b-form-fieldset>
<b-form-group>
<b-input-group>
<b-form-input type="text" placeholder="Username"></b-form-input>
<!-- Attach Left button -->
<b-input-group-button slot="left">
<b-input-group-button class="input-group-prepend" slot="left">
<b-button variant="primary">
<i class="fa fa-search"></i> Search
</b-button>
</b-input-group-button>
<b-form-input type="text" placeholder="Username"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
</b-form-group>
<b-form-group>
<b-input-group>
<b-form-input type="email" placeholder="Email"></b-form-input>
<!-- Attach Right button -->
<b-input-group-button slot="right">
<b-input-group-button class="input-group-append" slot="right">
<b-button variant="primary">Submit</b-button>
</b-input-group-button>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
</b-form-group>
<b-form-group>
<b-input-group>
<b-form-input type="email" placeholder="Email"></b-form-input>
<!-- Attach Right button -->
<b-input-group-button slot="left">
<!-- Attach Left button -->
<div class="input-group-prepend">
<b-button variant="primary"><i class="fa fa-facebook"></i></b-button>
</b-input-group-button>
<b-input-group-button slot="right">
</div>
<b-form-input type="email" placeholder="Email"></b-form-input>
<!-- Attach Left button -->
<b-input-group-button class="input-group-append" slot="right">
<b-button variant="primary"><i class="fa fa-twitter"></i></b-button>
</b-input-group-button>
</b-input-group>
</b-form-fieldset>
</b-form-group>
<div slot="footer">
<b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -582,10 +677,10 @@
<div slot="header">
<strong>Dropdowns</strong> Groups
</div>
<b-form-fieldset>
<b-form-group>
<b-input-group>
<!-- Attach Left button -->
<b-input-group-button slot="left">
<b-input-group-button class="input-group-prepend" slot="left">
<b-dropdown text="Action" variant="primary">
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
@@ -595,13 +690,13 @@
</b-input-group-button>
<b-form-input placeholder="Username"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
</b-form-group>
<b-form-group>
<b-input-group>
<b-form-input placeholder="Email"></b-form-input>
<!-- Attach Right button -->
<b-input-group-button slot="right">
<b-dropdown text="Action" variant="primary">
<b-input-group-button class="input-group-append" slot="right">
<b-dropdown text="Action" variant="primary" right>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
@@ -609,11 +704,11 @@
</b-dropdown>
</b-input-group-button>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
</b-form-group>
<b-form-group>
<b-input-group>
<!-- Attach Left button -->
<b-input-group-button slot="left">
<b-input-group-button class="input-group-prepend" slot="left">
<b-dropdown text="Split" variant="primary" split>
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
@@ -623,8 +718,8 @@
</b-input-group-button>
<b-form-input placeholder="..."></b-form-input>
<!-- Attach Right button -->
<b-input-group-button slot="right">
<b-dropdown text="Action" variant="primary">
<b-input-group-button class="input-group-append" slot="right">
<b-dropdown text="Action" variant="primary" right>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
@@ -632,7 +727,7 @@
</b-dropdown>
</b-input-group-button>
</b-input-group>
</b-form-fieldset>
</b-form-group>
<div slot="footer">
<b-button type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</b-button>
<b-button type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</b-button>
@@ -756,21 +851,27 @@
<div slot="header">
Example Form
</div>
<b-form-fieldset>
<b-input-group left="Username" right="<i class='fa fa-user'></i>">
<b-form-group>
<b-input-group>
<b-input-group-addon class="input-group-prepend"><span class="input-group-text">Username</span></b-input-group-addon>
<b-form-input type="text"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text"><i class="fa fa-user"></i></span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group left="Email" right="<i class='fa fa-envelope'></i>">
</b-form-group>
<b-form-group>
<b-input-group>
<b-input-group-addon class="input-group-prepend"><span class="input-group-text">Email</span></b-input-group-addon>
<b-form-input type="email"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text"><i class="fa fa-envelope"></i></span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group left="Password" right="<i class='fa fa-asterisk'></i>">
</b-form-group>
<b-form-group>
<b-input-group>
<b-input-group-addon class="input-group-prepend"><span class="input-group-text">Password</span></b-input-group-addon>
<b-form-input type="password"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text"><i class="fa fa-asterisk"></i></span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
</b-form-group>
<div class="form-group form-actions">
<b-button type="submit" size="sm" variant="primary">Submit</b-button>
</div>
@@ -781,21 +882,24 @@
<div slot="header">
Example Form
</div>
<b-form-fieldset>
<b-input-group right="<i class='fa fa-user'></i>">
<b-form-group>
<b-input-group>
<b-form-input type="text" placeholder="Username"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text"><i class="fa fa-user"></i></span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group right="<i class='fa fa-envelope'></i>">
</b-form-group>
<b-form-group>
<b-input-group>
<b-form-input type="email" placeholder="Email"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text"><i class="fa fa-envelope"></i></span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group right="<i class='fa fa-asterisk'></i>">
</b-form-group>
<b-form-group>
<b-input-group>
<b-form-input type="password" placeholder="Password"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text"><i class="fa fa-asterisk"></i></span></b-input-group-addon>
</b-input-group>
</b-form-fieldset>
</b-form-group>
<div class="form-group form-actions">
<b-button type="submit" class="btn btn-sm btn-secondary">Submit</b-button>
</div>
@@ -806,80 +910,109 @@
<div slot="header">
Example Form
</div>
<b-form-fieldset>
<b-input-group left="<i class='fa fa-user'></i>">
<b-form-group>
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div>
<b-form-input type="text" placeholder="Username"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group left="<i class='fa fa-envelope'></i>">
</b-form-group>
<b-form-group>
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<b-form-input type="email" placeholder="Email"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset>
<b-input-group left="<i class='fa fa-asterisk'></i>">
</b-form-group>
<b-form-group>
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-asterisk"></i></span>
</div>
<b-form-input type="password" placeholder="Password"></b-form-input>
</b-input-group>
</b-form-fieldset>
</b-form-group>
<div class="form-group form-actions">
<b-button type="submit" size="sm" variant="success">Submit</b-button>
</div>
</b-card>
</b-col>
</b-row><!--/.row-->
</b-row>
<b-row>
<b-col lg="12">
<b-card>
<b-card no-body>
<div slot="header">
<i class="fa fa-edit"></i> Form Elements
<div class="card-actions">
<a href="#" class="btn btn-setting"><i class="icon-settings"></i></a>
<b-btn class="btn btn-minimize" v-b-toggle.collapse1><i class="icon-arrow-up"></i></b-btn>
<a href="#" class="btn btn-close"><i class="icon-close"></i></a>
</div>
</div>
<b-form-fieldset label="Prepended text" description="Here's some help text">
<b-input-group left="@">
<b-form-input type="email"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset label="Appended text" description="Here's some help text">
<b-input-group right=".00">
<b-form-input type="text"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset label="Append and prepend" description="Here's some help text">
<b-input-group left="$" right=".00">
<b-form-input type="text"></b-form-input>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset label="Append with button" description="Here's some help text">
<b-input-group>
<b-form-input type="text"></b-form-input>
<b-input-group-button slot="right">
<b-button variant="primary">Go!</b-button>
</b-input-group-button>
</b-input-group>
</b-form-fieldset>
<b-form-fieldset label="Two-buttons append">
<b-input-group>
<b-form-input type="text"></b-form-input>
<b-input-group-button slot="right">
<b-button variant="primary">Search</b-button>
</b-input-group-button>
<b-input-group-button slot="right">
<b-button variant="danger">Options</b-button>
</b-input-group-button>
</b-input-group>
</b-form-fieldset>
<div class="form-actions">
<b-button type="submit" variant="primary">Save changes</b-button>
<b-button type="button" variant="secondary">Cancel</b-button>
</div>
<b-collapse id="collapse1" visible>
<b-card-body>
<b-form-group label="Prepended text" label-for="elementsEmail" description="Here's some help text">
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<b-form-input id="elementsEmail" type="email"></b-form-input>
</b-input-group>
</b-form-group>
<b-form-group label="Appended text" label-for="elementsAppend" description="Here's some help text">
<b-input-group>
<b-form-input id="elementsAppend" type="text"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text">.00</span></b-input-group-addon>
</b-input-group>
</b-form-group>
<b-form-group label="Append and prepend" label-for="elementsPrependAppend" description="Here's some help text">
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<b-form-input id="elementsPrependAppend" type="text"></b-form-input>
<b-input-group-addon class="input-group-append"><span class="input-group-text">.00</span></b-input-group-addon>
</b-input-group>
</b-form-group>
<b-form-group label="Append with button" label-for="elementsAppendButton" description="Here's some help text">
<b-input-group>
<b-form-input id="elementsAppendButton" type="text"></b-form-input>
<b-input-group-button class="input-group-append">
<b-button variant="primary">Go!</b-button>
</b-input-group-button>
</b-input-group>
</b-form-group>
<b-form-group label="Two-buttons append" label-for="elementsTwoButtons">
<b-input-group>
<b-form-input id="elementsTwoButtons" type="text"></b-form-input>
<div class="input-group-append">
<b-button variant="primary">Search</b-button>
<b-button variant="danger">Options</b-button>
</div>
</b-input-group>
</b-form-group>
<div class="form-actions">
<b-button type="submit" variant="primary">Save changes</b-button>
<b-button type="button" variant="secondary">Cancel</b-button>
</div>
</b-card-body>
</b-collapse>
</b-card>
</b-col><!--/.col-->
</b-row><!--/.row-->
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'forms',
data () {
return {
selected: [] // Must be an array reference!
}
},
methods: {
click () {
// do nothing
Vue_Full_Project/src/views/base/Jumbotrons.vue
+84
View File
@@ -0,0 +1,84 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Jumbotron</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<b-btn variant="primary" href="#">More Info</b-btn>
</b-jumbotron>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<small>with slots</small>
</div>
<div>
<b-jumbotron>
<template slot="header">
Bootstrap 4
</template>
<template slot="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</template>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<b-btn variant="primary" href="#">Do Something</b-btn>
<b-btn variant="success" href="#">Do Something Else</b-btn>
</b-jumbotron>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<small>variants</small>
</div>
<div>
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
<template slot="header">
Bootstrap 4
</template>
<template slot="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</template>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
</b-jumbotron>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'jumbotrons'
}
</script>
<style scoped>
</style>
Vue_Full_Project/src/views/base/ListGroups.vue
+255
View File
@@ -0,0 +1,255 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap list group</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>active items</small>
</div>
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>disabled items</small>
</div>
<b-list-group>
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>actionable items</small>
</div>
<b-list-group>
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
<b-list-group-item href="#" active>Link with active state</b-list-group-item>
<b-list-group-item href="#">Action links are easy</b-list-group-item>
<b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>buttons</small>
</div>
<b-list-group>
<b-list-group-item button>Button item</b-list-group-item>
<b-list-group-item button>I am a button</b-list-group-item>
<b-list-group-item button disabled>Disabled button</b-list-group-item>
<b-list-group-item button>This is a button too</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>with badges</small>
</div>
<b-list-group>
<b-list-group-item class="d-flex justify-content-between align-items-center">
Cras justo odio
<b-badge variant="primary" pill>14</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<b-badge variant="primary" pill>2</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
Morbi leo risus
<b-badge variant="primary" pill>1</b-badge>
</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>variants</small>
</div>
<b-list-group>
<b-list-group-item>This is a default list group item</b-list-group-item>
<b-list-group-item variant="primary">This is a primary list group item</b-list-group-item>
<b-list-group-item variant="secondary">This is a secondary list group item</b-list-group-item>
<b-list-group-item variant="success">This is a success list group item</b-list-group-item>
<b-list-group-item variant="danger">This is a danger list group item</b-list-group-item>
<b-list-group-item variant="warning">This is a warning list group item</b-list-group-item>
<b-list-group-item variant="info">This is a info list group item</b-list-group-item>
<b-list-group-item variant="light">This is a light list group item</b-list-group-item>
<b-list-group-item variant="dark">This is a dark list group item</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>variants active</small>
</div>
<b-list-group>
<b-list-group-item href="#">This is a default list group item</b-list-group-item>
<b-list-group-item href="#" variant="primary">This is a primary list group item</b-list-group-item>
<b-list-group-item href="#" variant="secondary">This is a secondary list group item</b-list-group-item>
<b-list-group-item href="#" variant="success">This is a success list group item</b-list-group-item>
<b-list-group-item href="#" variant="danger">This is a danger list group item</b-list-group-item>
<b-list-group-item href="#" variant="warning">This is a warning list group item</b-list-group-item>
<b-list-group-item href="#" variant="info">This is a info list group item</b-list-group-item>
<b-list-group-item href="#" variant="light">This is a light list group item</b-list-group-item>
<b-list-group-item href="#" variant="dark">This is a dark list group item</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>inside cards</small>
</div>
<b-card-group deck>
<b-card header="<b>Card with list group</b>">
<b-list-group>
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
</b-list-group>
<p class="card-text mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</p>
</b-card>
<b-card no-body header="<b>Card with flush list group</b>">
<b-list-group flush>
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
</b-list-group>
<b-card-body>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem.
</b-card-body>
</b-card>
</b-card-group>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>List group</strong> <small>custom content</small>
</div>
<b-list-group>
<b-list-group-item href="#" active class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</b-list-group-item>
<b-list-group-item href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</b-list-group-item>
<b-list-group-item href="#" disabled class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</b-list-group-item>
</b-list-group>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'list-groups'
}
</script>
<style scoped>
</style>
Vue_Full_Project/src/views/base/Navbars.vue
+167
View File
@@ -0,0 +1,167 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navbar</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<b-navbar toggleable="md" type="dark" variant="info">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using button-content slot -->
<template slot="button-content">
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<small>brand</small>
</div>
<div>
<!-- Image and text -->
<b-navbar variant="faded" type="light">
<b-navbar-brand tag="h1" href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
BootstrapVue
</b-navbar-brand>
</b-navbar>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<small>text</small>
</div>
<div>
<b-navbar toggleable type="light" variant="light">
<b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
<b-navbar-brand>BootstrapVue</b-navbar-brand>
<b-collapse is-nav id="nav_text_collapse">
<b-navbar-nav>
<b-nav-text>Navbar text</b-nav-text>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<small>dropdown</small>
</div>
<div>
<b-navbar type="dark" variant="primary" toggleable>
<b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
<b-collapse is-nav id="nav_dropdown_collapse">
<b-navbar-nav>
<b-nav-item href="#">Home</b-nav-item>
<b-nav-item href="#">Link</b-nav-item>
<!-- Navbar dropdowns -->
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="User" right>
<b-dropdown-item href="#">Account</b-dropdown-item>
<b-dropdown-item href="#">Settings</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<small>form</small>
</div>
<div>
<b-navbar type="light" variant="light">
<b-nav-form>
<b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
<b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
</b-navbar>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<small>input group</small>
</div>
<div>
<b-navbar type="light" variant="light">
<b-nav-form>
<b-input-group left="@">
<b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
</b-input-group>
</b-nav-form>
</b-navbar>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'navbars'
}
</script>
<style scoped>
</style>
Vue_Full_Project/src/views/base/Navs.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navs</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/nav" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-nav>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navs</strong> <small>tab style</small>
</div>
<div>
<b-nav tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navs</strong> <small>pill style</small>
</div>
<div>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navs</strong> <small>fill tabs</small>
</div>
<div>
<b-nav fill tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Link with a long name </b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navs</strong> <small>justified tabs</small>
</div>
<div>
<b-nav justified tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Link with a long name </b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navs</strong> <small>dropdown support</small>
</div>
<div>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" right>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Navs</strong> <small>vertical variation</small>
</div>
<div>
<b-nav vertical class="w-25">
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'navs'
}
</script>
<style scoped>
</style>
Vue_Full_Project/src/views/base/Paginations.vue
+107
View File
@@ -0,0 +1,107 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Pagination</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<h6>Default</h6>
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<h6>Small</h6>
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<div class="d-sm-down-none">
<h6>Large</h6>
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
</div>
<div>currentPage: {{currentPage}}</div>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small>alignment</small>
</div>
<div>
<h6>Left alignment (default)</h6>
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<h6>Center alignment</h6>
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<h6>Right (end) alignment</h6>
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<div>currentPage: {{currentPage}}</div>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small>navigation</small>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<h6>Default</h6>
<b-pagination-nav base-url="#" :number-of-pages="10" v-model="currentPage"/>
<h6 class="mt-4">With link generator function</h6>
<b-pagination-nav :link-gen="linkGen" :number-of-pages="10" v-model="currentPage"/>
<br>
<div class="mt-4">currentPage: {{currentPage}}</div>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'paginations',
data () {
return {
currentPage: 3
}
},
methods: {
linkGen (pageNum) {
return '#page/' + pageNum + '/foobar'
}
}
}
</script>
<style scoped>
</style>
Vue_Full_Project/src/views/base/Popovers.vue
+210
View File
@@ -0,0 +1,210 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Popovers</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<b-row>
<b-col cols="6">
<div class="my-3 text-center">
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
Hover Me
</b-btn>
</div>
</b-col>
<b-col cols="6">
<div class="my-3 text-center">
<b-btn id="popoverButton-open" variant="primary">Button</b-btn>
<b-popover show target="popoverButton-open" title="Popover">
I start <strong>open</strong>
</b-popover>
</div>
</b-col>
</b-row>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<small>placement</small>
</div>
<div class="my-3">
<b-row>
<b-col md="4" class="py-4 text-center"
v-for="placement in placements" :key="placement">
<b-btn :id="'exPopover1-'+placement" variant="primary">
{{ placement }}
</b-btn>
<b-popover :target="'exPopover1-'+placement"
:placement="placement"
title="Popover!"
triggers="hover focus"
:content="`Placement ${placement}`">
</b-popover>
</b-col>
</b-row>
</div>
</b-card>
<b-card class="d-sm-down-none"
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<small>via properties or slots</small>
</div>
<b-row>
<b-col md="6" class="py-4 text-center">
<b-btn id="exPopover2" variant="primary">Using properties</b-btn>
<b-popover target="exPopover2"
title="Prop Examples"
triggers="hover focus"
content="Embedding content using properties is easy">
</b-popover>
</b-col>
<b-col md="6" class="py-4 text-center">
<b-btn id="exPopover3" variant="primary">Using slots</b-btn>
<b-popover target="exPopover3" triggers="hover focus">
<template slot="title">Content via Slots</template>
Embedding content <span class="text-danger">using slots</span>
affords you <em>greater <strong>control.</strong></em> and
basic HTML support.
</b-popover>
</b-col>
</b-row>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<small>show</small>
</div>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
</div>
<div class="p-2">
<b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Popover</strong>
<small>open/close events</small>
</div>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
</div>
<div class="p-2">
<b-btn class="px-1" @click="onOpen">Open</b-btn>
<b-btn class="px-1" @click="onClose">Close</b-btn>
</div>
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Popover</strong>
<small>enable/disable events</small>
</div>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
</div>
<div class="p-2">
<b-btn class="px-1" @click="onEnable">Enable</b-btn>
<b-btn class="px-1" @click="onDisable">Disable</b-btn>
</div>
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Popover</strong><small><code>v-b-popover</code>directive</small>
</div>
<b-row>
<b-col md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.top="'I am Top'"
title="Popover!"
variant="primary">Top</b-btn>
</b-col>
<b-col md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.left="'I am Left'"
title="Popover!"
variant="primary">Left</b-btn>
</b-col>
<b-col md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.right="'I am Right'"
title="Popover!"
variant="primary">Right</b-btn>
</b-col>
<b-col md="3" class="py-3 text-center">
<b-btn v-b-popover.hover.bottom="'I am Bottom'"
title="Popover!"
variant="primary">Bottom</b-btn>
</b-col>
</b-row>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'popovers',
data () {
return {
placements: [
'topright', 'top', 'topleft',
'bottomright', 'bottom', 'bottomleft',
'righttop', 'right', 'lefttop',
'rightbottom', 'left', 'leftbottom'
],
show: false
}
},
methods: {
onOpen () {
this.$refs.popover1.$emit('open')
},
onClose () {
this.$refs.popover1.$emit('close')
},
onEnable () {
this.$refs.popover2.$emit('enable')
},
onDisable () {
this.$refs.popover2.$emit('disable')
}
}
}
</script>
Vue_Full_Project/src/views/base/ProgressBars.vue
+206
View File
@@ -0,0 +1,206 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Progress</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-progress :value="counter" :max="max" show-progress animated></b-progress>
<b-progress class="mt-1" :max="max" show-value>
<b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
<b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
<b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
</b-progress>
<b-btn class="mt-4" @click="clicked">Click me</b-btn>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Progress</strong> <small>labels</small>
</div>
<div>
<h5>No label</h5>
<b-progress :value="value" :max="max2" class="mb-3"></b-progress>
<h5>Value label</h5>
<b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
<h5>Progress label</h5>
<b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
<h5>Value label with precision</h5>
<b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
<h5>Progress label with precision</h5>
<b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Progress</strong> <small>width</small>
</div>
<div>
<h5>Default width</h5>
<b-progress :value="value3" class="mb-3"></b-progress>
<h5>Custom widths</h5>
<b-progress :value="value3" class="w-75 mb-2"></b-progress>
<b-progress :value="value3" class="w-50 mb-2"></b-progress>
<b-progress :value="value3" class="w-25"></b-progress>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Progress</strong> <small>height</small>
</div>
<div>
<h5>Default height</h5>
<b-progress :value="value3" show-progress class="mb-3"></b-progress>
<h5>Custom heights</h5>
<b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
<b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
<b-progress height="2px" :value="value3"></b-progress>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Progress</strong> <small>variants</small>
</div>
<div>
<div v-for="bar in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
<b-progress :value="bar.value"
:variant="bar.variant"
:key="bar.variant"
></b-progress>
</div>
</div>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Progress</strong> <small>striped</small>
</div>
<div>
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
<b-progress :value="50" variant="info" :striped="striped" class="mb-2"></b-progress>
<b-progress :value="75" variant="warning" :striped="striped" class="mb-2"></b-progress>
<b-progress :value="100" variant="danger" :striped="striped" class="mb-2"></b-progress>
<b-button variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</b-button>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Progress</strong> <small>animated</small>
</div>
<div>
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
<b-progress :value="50" variant="info" striped :animated="animate" class="mb-2"></b-progress>
<b-progress :value="75" variant="warning" striped :animated="animate" class="mb-2"></b-progress>
<b-progress :value="100" variant="danger" :animated="animate" class="mb-3"></b-progress>
<b-button variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</b-button>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Progress</strong> <small>multiple bars</small>
</div>
<div>
<b-progress :max="max3" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
</b-progress>
<b-progress show-progress :max="max3" class="mb-3"></b-progress-bar>
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
</b-progress>
<b-progress show-value striped :max="max3" class="mb-3"></b-progress-bar>
<b-progress-bar variant="primary" :value="values[0]"></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]"></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]"></b-progress-bar>
</b-progress>
<b-progress :max="max3" class="mb-3">
<b-progress-bar variant="primary" :value="values[0]" show-progress></b-progress-bar>
<b-progress-bar variant="success" :value="values[1]" animated show-progress></b-progress-bar>
<b-progress-bar variant="info" :value="values[2]" striped show-progress></b-progress-bar>
</b-progress>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'progress-bars',
data () {
return {
counter: 45,
max: 100,
max2: 50,
value: 33.333333333,
value3: 75,
bars: [
{variant: 'success', value: 75},
{variant: 'info', value: 75},
{variant: 'warning', value: 75},
{variant: 'danger', value: 75},
{variant: 'primary', value: 75},
{variant: 'secondary', value: 75},
{variant: 'dark', value: 75}
],
timer: null,
striped: true,
animate: true,
max3: 100,
values: [ 15, 30, 20 ]
}
},
methods: {
clicked () {
this.counter = Math.random() * this.max
console.log('Change progress to ' +
Math.round(this.counter * 100) / 100)
}
},
mounted () {
this.timer = setInterval(() => {
this.bars.forEach(bar => {
bar.value = 25 + (Math.random() * 75)
})
}, 2000)
},
beforeDestroy () {
clearInterval(this.timer)
this.timer = null
}
}
</script>
<style scoped>
</style>
Vue_Full_Project/src/views/components/Switches.vue → Vue_Full_Project/src/views/base/Switches.vue
+1 -1
View File
@@ -295,7 +295,7 @@
Sizes
</div>
<b-card-body class="p-0">
<b-table hover striped class="table-responsive-sm table-align-middle mb-0" :items="items" :fields="fields">
<b-table hover striped responsive="sm" class="table-align-middle mb-0" :items="items" :fields="fields">
<template slot="example" slot-scope="data">
<c-switch :type="data.value.type" :variant="data.value.variant" :size="data.value.size" :checked="data.value.checked"/>
</template>
Vue_Full_Project/src/views/components/Table.vue → Vue_Full_Project/src/views/base/Table.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<b-card :header="caption">
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" class="table-responsive-sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
<template slot="status" slot-scope="data">
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
</template>
@@ -27,7 +27,7 @@
}
export default {
name: 'table',
name: 'c-table',
props: {
caption: {
type: String,
Vue_Full_Project/src/views/components/Tables.vue → Vue_Full_Project/src/views/base/Tables.vue
View File
Vue_Full_Project/src/views/base/Tooltips.vue
+148
View File
@@ -0,0 +1,148 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Tooltips</strong><small><code>v-b-tooltip</code>directive</small>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<b-row>
<b-col cols="6">
<div class="text-center my-3">
<b-btn v-b-tooltip.hover title="I am a tooltip!">Hover Me</b-btn>
</div>
</b-col>
<b-col cols="6">
<div class="text-center my-3">
<b-btn id="tooltipButton-2" variant="primary">Button</b-btn>
<b-tooltip show target="tooltipButton-2">
I start open
</b-tooltip>
</div>
</b-col>
</b-row>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Tooltips</strong><small><code>b-tooltip</code>component</small>
</div>
<b-row>
<b-col md="6" class="py-4 text-center">
<b-btn id="exButton1" variant="outline-success">Live chat</b-btn>
</b-col>
<b-col md="6" class="py-4 text-center">
<b-btn id="exButton2" variant="outline-success">Html chat</b-btn>
</b-col>
</b-row>
<!-- Tooltip title specified via prop title -->
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
<!-- HTML title specified via default slot -->
<b-tooltip target="exButton2" placement="bottom">
Hello <strong>World!</strong>
</b-tooltip>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Tooltips</strong><small><code>show</code>prop</small>
</div>
<div class="text-center">
<b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
<br><br>
<b-btn @click="show = !show">Toggle Tooltip</b-btn>
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Tooltips</strong><small><code>open close</code>events</small>
</div>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
</div>
<div class="p-2">
<b-btn class="px-1" @click="onOpen">Open</b-btn>
<b-btn class="px-1" @click="onClose">Close</b-btn>
</div>
<b-tooltip ref="tooltip" target="tooltipButton-showEvent">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Tooltips</strong><small><code>enable disable</code>events</small>
</div>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
</div>
<div class="p-2">
<b-btn @click="disabled = !disabled">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
</b-btn>
<b-btn @click="disableByRef">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
</b-btn>
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'tooltips',
data () {
return {
show: true,
disabled: false
}
},
methods: {
onOpen () {
this.$refs.tooltip.$emit('open')
},
onClose () {
this.$refs.tooltip.$emit('close')
},
disableByRef () {
if (this.disabled) {
this.$refs.tooltip2.$emit('enable')
} else {
this.$refs.tooltip2.$emit('disable')
}
}
}
}
</script>
<style scoped>
</style>
Vue_Full_Project/src/views/buttons/ButtonGroups.vue
+197
View File
@@ -0,0 +1,197 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12" >
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap button group</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-button-group>
<b-button>One</b-button>
<b-button>Two</b-button>
<b-button>Three</b-button>
<b-button>Four</b-button>
<b-button class="d-sm-down-none">Five</b-button>
</b-button-group>
<br><br>
<b-button-group>
<b-button class="d-sm-down-none" variant="success">Success</b-button>
<b-button variant="info">Info</b-button>
<b-button variant="warning">Warn</b-button>
<b-button class="d-sm-down-none" variant="primary">Primary</b-button>
<b-button variant="danger">Danger</b-button>
<b-button variant="link">Link</b-button>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Button group</strong> sizing
</div>
<div>
<b-button-group>
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
<br><br>
<b-button-group size="sm">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
<br><br>
<b-button-group size="lg">
<b-button>Left</b-button>
<b-button>Middle</b-button>
<b-button>Right</b-button>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Button group</strong> dropdown support
</div>
<div>
<b-button-group>
<b-button class="d-sm-down-none">Button 1</b-button>
<b-button class="d-sm-down-none">Button 2</b-button>
<b-dropdown right text="Menu" variant="success">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button class="d-sm-down-none">Button 3</b-button>
<b-dropdown right split text="Split Menu" variant="info">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Button group</strong> vertical variation
</div>
<div>
<b-button-group vertical>
<b-button>Top</b-button>
<b-button>Middle</b-button>
<b-button>Bottom</b-button>
</b-button-group>
</div>
</b-card>
</b-col>
<b-col cols="12">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Button toolbar</strong> <small>with button groups</small>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
<b-button-group class="mx-1">
<b-btn class="d-sm-down-none">&laquo;</b-btn>
<b-btn>&lsaquo;</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn class="d-sm-down-none">Edit</b-btn>
<b-btn>Undo</b-btn>
<b-btn>Redo</b-btn>
</b-button-group>
<b-button-group class="mx-1">
<b-btn>&rsaquo;</b-btn>
<b-btn class="d-sm-down-none">&raquo;</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
<hr class="d-sm-down-none"/>
<div>
<b-button-toolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
<b-button-group size="sm" class="mx-1">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
</b-button-group>
<b-input-group size="sm" class="w-25 mx-1">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<b-form-input value="100" class="text-right"></b-form-input>
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</b-input-group>
<b-input-group size="sm" class="w-25 mx-1">
<div class="input-group-prepend">
<span class="input-group-text">Size</span>
</div>
<b-form-select value="Medium" :options="['Large','Medium','Small']"></b-form-select>
</b-input-group>
<b-button-group size="sm" class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
<hr/>
<div>
<b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
<b-button-group class="mx-1 d-sm-down-none">
<b-btn>New</b-btn>
<b-btn>Edit</b-btn>
<b-btn>Undo</b-btn>
</b-button-group>
<b-dropdown class="mx-1" right text="menu">
<b-dropdown-item>Item 1</b-dropdown-item>
<b-dropdown-item>Item 2</b-dropdown-item>
<b-dropdown-item>Item 3</b-dropdown-item>
</b-dropdown>
<b-button-group class="mx-1">
<b-btn>Save</b-btn>
<b-btn>Cancel</b-btn>
</b-button-group>
</b-button-toolbar>
</div>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'button-groups'
}
</script>
Vue_Full_Project/src/views/buttons/Dropdowns.vue
+236
View File
@@ -0,0 +1,236 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Dropdown</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" target="_blank"><small className="text-muted">docs</small></a>
</div>
</div>
<div>
<b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-buttons" text="Dropdown using buttons as menu items" class="m-2">
<b-dropdown-item-button>I'm a button</b-dropdown-item-button>
<b-dropdown-item-button>I'm also a button</b-dropdown-item-button>
<b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
<b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-divider" text="Dropdown with divider" class="m-2">
<b-dropdown-item-button>First item</b-dropdown-item-button>
<b-dropdown-item-button>Second item</b-dropdown-item-button>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button>Separated Item</b-dropdown-item-button>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-header" text="Dropdown with header" class="m-2">
<b-dropdown-header>Dropdown header</b-dropdown-header>
<b-dropdown-item-button>First item</b-dropdown-item-button>
<b-dropdown-item-button>Second Item</b-dropdown-item-button>
</b-dropdown>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Dropdown</strong> <small>positioning</small>
</div>
<div>
<b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
<b-dropdown id="ddown-right" right text="Right align" variant="primary" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="info" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-offset" offset="25" text="Offset Dropdown" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here</b-dropdown-item>
</b-dropdown>
</div>
<div>
<b-dropdown id="ddown-split" split text="Split Dropdown" class="m-2">
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
</div>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Dropdown</strong> <small>hidden caret</small>
</div>
<div>
<b-dropdown variant="link" size="lg" no-caret>
<template slot="button-content">
&#x1f50d;<span class="sr-only">Search</span>
</template>
<b-dropdown-item href="#">Action</b-dropdown-item>
<b-dropdown-item href="#">Another action</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-dropdown>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Dropdown</strong> <small>sizing</small>
</div>
<div>
<b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here</b-dropdown-item-button>
</b-dropdown>
<b-dropdown id="ddown-lg-split" size="lg" split text="Large Split" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
</b-dropdown>
<br>
<b-dropdown id="ddown-sm" size="sm" text="Small" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
</b-dropdown>
<b-dropdown id="ddown-sm-split" size="sm" split text="Small Split" class="m-2">
<b-dropdown-item-button>Action</b-dropdown-item-button>
<b-dropdown-item-button>Another action</b-dropdown-item-button>
<b-dropdown-item-button>Something else here...</b-dropdown-item-button>
</b-dropdown>
</div>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Dropdown</strong> <small>headers and accessibility</small>
</div>
<div>
<b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1">
<b-dropdown-header id="header1">Groups</b-dropdown-header>
<b-dropdown-item-button aria-describedby="header1">Add</b-dropdown-item-button>
<b-dropdown-item-button aria-describedby="header1">Delete</b-dropdown-item-button>
</div>
<div role="group" aria-lableledby="header2">
<b-dropdown-header id="header2">Users</b-dropdown-header>
<b-dropdown-item-button aria-describedby="header2">Add</b-dropdown-item-button>
<b-dropdown-item-button aria-describedby="header2">Delete</b-dropdown-item-button>
</div>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item-button>Something <strong>not</strong> associated with user</b-dropdown-item-button>
</b-dropdown>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Dropdown</strong><small><code>variant</code></small>
</div>
<b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_secondary" text="Secondary" variant="secondary" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_success" text="Success" variant="success" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_warning" text="Warning" variant="warning" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_danger" text="Danger" variant="danger" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_info" text="Info" variant="info" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_light" text="Light" variant="light" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_dark" text="Dark" variant="dark" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
<b-dropdown size="sm" id="ddown_link" text="Link" variant="link" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'dropdowns'
}
</script>
Vue_Full_Project/src/views/components/SocialButtons.vue → Vue_Full_Project/src/views/buttons/SocialButtons.vue
View File
Vue_Full_Project/src/views/components/Buttons.vue → Vue_Full_Project/src/views/buttons/StandardButtons.vue
+1 -1
View File
@@ -225,7 +225,7 @@
<script>
export default {
name: 'buttons',
name: 'standard-buttons',
data: () => {
return { myToggle: false }
}
Vue_Full_Project/src/views/icons/Flags.vue
+1018
View File
File diff suppressed because it is too large Load Diff
Vue_Full_Project/src/views/icons/FontAwesome.vue
+3 -1
View File
@@ -1,7 +1,9 @@
<template>
<div class="animated fadeIn">
<b-card no-body id="new47">
<div slot="header">50 New Icons in 4.7</div>
<div slot="header">
<i class="fa fa-font-awesome"></i> 50 New Icons in 4.7
</div>
<b-card-body>
<b-row class="text-center">
<b-col cols="6" sm="4" md="3" lg="2">
Vue_Full_Project/src/views/notifications/Alerts.vue
+169
View File
@@ -0,0 +1,169 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Alert</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</div>
<div>
<b-alert show variant="primary">Primary Alert</b-alert>
<b-alert show variant="secondary">Secondary Alert</b-alert>
<b-alert show variant="success">Success Alert</b-alert>
<b-alert show variant="danger">Danger Alert</b-alert>
<b-alert show variant="warning">Warning Alert</b-alert>
<b-alert show variant="info">Info Alert</b-alert>
<b-alert show variant="light">Light Alert</b-alert>
<b-alert show variant="dark">Dark Alert</b-alert>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small>
</div>
<div>
<b-alert show variant="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</b-alert>
<b-alert show variant="secondary">
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</b-alert>
<b-alert show variant="success">
Success Alert with <a href="#" class="alert-link">an example link</a>.
</b-alert>
<b-alert show variant="danger">
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</b-alert>
<b-alert show variant="warning">
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</b-alert>
<b-alert show variant="info">
Info Alert with <a href="#" class="alert-link">an example link</a>.
</b-alert>
<b-alert show variant="light">
Light Alert with <a href="#" class="alert-link">an example link</a>.
</b-alert>
<b-alert show variant="dark">
Dark Alert with
<b-link href="#" class="alert-link">an example link</b-link>
.
</b-alert>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i>Alerts</strong>
<small>with additional content</small>
</div>
<b-alert show variant="success">
<h4 class="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can see
how spacing within an alert works with this kind of content.
</p>
<hr>
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</b-alert>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i>Alerts</strong>
<small>dismissible</small>
</div>
<div>
<b-alert show dismissible>
Dismissible Alert!
</b-alert>
<b-alert variant="danger"
dismissible
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false">
Dismissible Alert!
</b-alert>
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</b-btn>
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i>Alerts</strong>
<small>auto dismissible</small>
</div>
<div>
<b-alert :show="dismissCountDown"
dismissible
variant="warning"
@dismissed="dismissCountdown=0"
@dismiss-count-down="countDownChanged">
Alert will dismiss after <strong>{{dismissCountDown}}</strong> seconds...
</b-alert>
<b-alert :show="dismissCountDown"
dismissible
variant="info"
@dismissed="dismissCountdown=0"
@dismiss-count-down="countDownChanged">
Alert will dismiss after {{dismissCountDown}} seconds...
<b-progress variant="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px">
</b-progress>
</b-alert>
<b-btn @click="showAlert" variant="info" class="m-1">
Show alert with timer
</b-btn>
</div>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'alerts',
data () {
return {
dismissSecs: 10,
dismissCountDown: 0,
showDismissibleAlert: false
}
},
methods: {
countDownChanged (dismissCountDown) {
this.dismissCountDown = dismissCountDown
},
showAlert () {
this.dismissCountDown = this.dismissSecs
}
}
}
</script>
Vue_Full_Project/src/views/notifications/Badges.vue
+88
View File
@@ -0,0 +1,88 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-row>
<b-col cols="12" md="6">
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<i className="fa fa-align-justify"></i><strong>Bootstrap Badge</strong>
<div class="card-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" target="_blank"><small className="text-muted">docs</small></a>
</div>
</div>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
<h3>Example heading <b-badge>New</b-badge></h3>
<h4>Example heading <b-badge>New</b-badge></h4>
<h5>Example heading <b-badge>New</b-badge></h5>
<h6>Example heading <b-badge>New</b-badge></h6>
</div>
<div slot="footer">
<b-button variant="primary">
Notifications <b-badge variant="light" :style="{position: 'static'}">4</b-badge>
</b-button>
</div>
</b-card>
</b-col>
<b-col cols="12" md="6">
<b-card header="Badge <small>contextual variations</small>"
header-tag="header"
footer-tag="footer">
<div>
<b-badge variant="primary">Primary</b-badge>
<b-badge variant="secondary">Secondary</b-badge>
<b-badge variant="success">Success</b-badge>
<b-badge variant="danger">Danger</b-badge>
<b-badge variant="warning">Warning</b-badge>
<b-badge variant="info">Info</b-badge>
<b-badge variant="light">Light</b-badge>
<b-badge variant="dark">Dark</b-badge>
</div>
</b-card>
<b-card header="Badge <small>pills</small>"
header-tag="header"
footer-tag="footer">
<div>
<b-badge pill variant="primary">Primary</b-badge>
<b-badge pill variant="secondary">Secondary</b-badge>
<b-badge pill variant="success">Success</b-badge>
<b-badge pill variant="danger">Danger</b-badge>
<b-badge pill variant="warning">Warning</b-badge>
<b-badge pill variant="info">Info</b-badge>
<b-badge pill variant="light">Light</b-badge>
<b-badge pill variant="dark">Dark</b-badge>
</div>
</b-card>
<b-card header="Badge <small>actionable</small>"
header-tag="header"
footer-tag="footer">
<div>
<b-badge href="#" variant="primary">Primary</b-badge>
<b-badge href="#" variant="secondary">Secondary</b-badge>
<b-badge href="#" variant="success">Success</b-badge>
<b-badge href="#" variant="danger">Danger</b-badge>
<b-badge href="#" variant="warning">Warning</b-badge>
<b-badge href="#" variant="info">Info</b-badge>
<b-badge href="#" variant="light">Light</b-badge>
<b-badge href="#" variant="dark">Dark</b-badge>
</div>
</b-card>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'badges',
data () {
return {
}
}
}
</script>
Vue_Full_Project/src/views/components/Modals.vue → Vue_Full_Project/src/views/notifications/Modals.vue
View File
Vue_Full_Project/src/views/pages/Login.vue
+6 -6
View File
@@ -8,14 +8,14 @@
<b-card-body>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<b-input-group class="mb-3">
<div class="input-group-prepend"><span class="input-group-text"><i class="icon-user"></i></span></div>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
</b-input-group>
<b-input-group class="mb-4">
<div class="input-group-prepend"><span class="input-group-text"><i class="icon-lock"></i></span></div>
<input type="password" class="form-control" placeholder="Password">
</div>
</b-input-group>
<b-row>
<b-col cols="6">
<b-button variant="primary" class="px-4">Login</b-button>
Vue_Full_Project/src/views/pages/Page404.vue
+9 -5
View File
@@ -8,13 +8,17 @@
<h4 class="pt-3">Oops! You're lost.</h4>
<p class="text-muted">The page you are looking for was not found.</p>
</div>
<div class="input-prepend input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-search"></i>
</span>
</div>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
<span class="input-group-btn">
<div class="input-group-append">
<b-button variant="info">Search</b-button>
</span>
</div>
</div>
</b-input-group>
</b-col>
</b-row>
</div>
Vue_Full_Project/src/views/pages/Page500.vue
+9 -5
View File
@@ -8,13 +8,17 @@
<h4 class="pt-3">Houston, we have a problem!</h4>
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
</div>
<div class="input-prepend input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<b-input-group>
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-search"></i>
</span>
</div>
<input id="prependedInput" class="form-control" size="16" type="text" placeholder="What are you looking for?">
<span class="input-group-btn">
<div class="input-group-append">
<b-button variant="info">Search</b-button>
</span>
</div>
</div>
</b-input-group>
</b-col>
</b-row>
</div>
Vue_Full_Project/src/views/pages/Register.vue
+20 -12
View File
@@ -7,25 +7,33 @@
<b-card-body class="p-4">
<h1>Register</h1>
<p class="text-muted">Create your account</p>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<b-input-group class="mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</b-input-group>
<div class="input-group mb-3">
<span class="input-group-addon">@</span>
<b-input-group class="mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
</b-input-group>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<b-input-group class="mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password">
</div>
</b-input-group>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<b-input-group class="mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" class="form-control" placeholder="Repeat password">
</div>
</b-input-group>
<b-button variant="success" block>Create Account</b-button>
</b-card-body>
Vue_Full_Project/src/views/theme/Colors.vue
+102
View File
@@ -0,0 +1,102 @@
<template>
<div class="animated fadeIn">
<div class="card">
<div class="card-header">
<i class="icon-drop"></i> Theme colors
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-3 bg-primary">Primary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-secondary">Secondary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-success">Success</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-danger">Danger</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-warning">Warning</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-info">Info</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-light">Light</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-dark">Dark</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="icon-drop"></i> Grays
</div>
<div class="card-body">
<div class="row mb-3">
<div class="col-md-4">
<div class="p-3 bg-gray-100">100</div>
<div class="p-3 bg-gray-200">200</div>
<div class="p-3 bg-gray-300">300</div>
<div class="p-3 bg-gray-400">400</div>
<div class="p-3 bg-gray-500">500</div>
<div class="p-3 bg-gray-600">600</div>
<div class="p-3 bg-gray-700">700</div>
<div class="p-3 bg-gray-800">800</div>
<div class="p-3 bg-gray-900">900</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="icon-drop"></i> Additional colors
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-3 bg-blue">Blue</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-indigo">Indigo</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-purple">Purple</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-pink">Pink</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-red">Red</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-orange">Orange</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-yellow">Yellow</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-green">Green</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-teal">Teal</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-3 bg-cyan">Cyan</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'colors'
}
</script>
Vue_Full_Project/src/views/theme/Typography.vue
+158
View File
@@ -0,0 +1,158 @@
<template>
<div class="animated fadeIn">
<div class="card">
<div class="card-header">
Headings
</div>
<div class="card-body">
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<table class="table">
<thead>
<tr>
<th>Heading</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
</td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
</td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
</td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
</td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
</td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code class="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
</td>
<td><span class="h6">h6. Bootstrap heading</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-header">
Headings
</div>
<div class="card-body">
<p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
<div class="bd-example">
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
Display headings
</div>
<div class="card-body">
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<div class="bd-example bd-example-type">
<table class="table">
<tbody>
<tr>
<td><span class="display-1">Display 1</span></td>
</tr>
<tr>
<td><span class="display-2">Display 2</span></td>
</tr>
<tr>
<td><span class="display-3">Display 3</span></td>
</tr>
<tr>
<td><span class="display-4">Display 4</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
Inline text elements
</div>
<div class="card-body">
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
Description list alignment
</div>
<div class="card-body">
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<div class="bd-example">
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<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>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'typography'
}
</script>
Vue_Full_Project/static/img/flags/ASEAN.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

Vue_Full_Project/static/img/flags/Afghanistan.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

Vue_Full_Project/static/img/flags/African Union.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 959 B

Vue_Full_Project/static/img/flags/Albania.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

Vue_Full_Project/static/img/flags/Algeria.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

Vue_Full_Project/static/img/flags/American Samoa.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

Vue_Full_Project/static/img/flags/Andorra.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

Vue_Full_Project/static/img/flags/Angola.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

Vue_Full_Project/static/img/flags/Anguilla.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

Vue_Full_Project/static/img/flags/Antarctica.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

Vue_Full_Project/static/img/flags/Antigua & Barbuda.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

Vue_Full_Project/static/img/flags/Arab League.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

Vue_Full_Project/static/img/flags/Argentina.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 839 B

Vue_Full_Project/static/img/flags/Armenia.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 787 B

Vue_Full_Project/static/img/flags/Aruba.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

Vue_Full_Project/static/img/flags/Australia.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

Vue_Full_Project/static/img/flags/Austria.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 628 B

Vue_Full_Project/static/img/flags/Azerbaijan.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

Vue_Full_Project/static/img/flags/Bahamas.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

Vue_Full_Project/static/img/flags/Bahrain.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

Vue_Full_Project/static/img/flags/Bangladesh.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

Vue_Full_Project/static/img/flags/Barbados.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

Vue_Full_Project/static/img/flags/Belarus.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

Vue_Full_Project/static/img/flags/Belgium.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 887 B

Vue_Full_Project/static/img/flags/Belize.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

Vue_Full_Project/static/img/flags/Benin.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 773 B

Vue_Full_Project/static/img/flags/Bermuda.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

Vue_Full_Project/static/img/flags/Bhutan.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

Vue_Full_Project/static/img/flags/Bolivia.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

Vue_Full_Project/static/img/flags/Bosnia & Herzegovina.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

Vue_Full_Project/static/img/flags/Botswana.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 752 B

Vue_Full_Project/static/img/flags/Brazil.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

Vue_Full_Project/static/img/flags/Brunei.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

Vue_Full_Project/static/img/flags/Bulgaria.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 624 B

Vue_Full_Project/static/img/flags/Burkina Faso.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

Vue_Full_Project/static/img/flags/Burundi.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

Vue_Full_Project/static/img/flags/CARICOM.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

Vue_Full_Project/static/img/flags/CIS.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

Vue_Full_Project/static/img/flags/Cambodja.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

Vue_Full_Project/static/img/flags/Cameroon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

Vue_Full_Project/static/img/flags/Canada.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

Vue_Full_Project/static/img/flags/Cape Verde.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

Vue_Full_Project/static/img/flags/Cayman Islands.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

Vue_Full_Project/static/img/flags/Central African Republic.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 986 B

Vue_Full_Project/static/img/flags/Chad.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 889 B

Vue_Full_Project/static/img/flags/Chile.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 820 B

Vue_Full_Project/static/img/flags/China.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

Some files were not shown because too many files have changed in this diff Show More