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

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-26 17:41:07 +02:00
parent 4bd77fc24d b61206112f
commit c7f687982d
96 changed files with 12979 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+3 -2
View File
@@ -17,8 +17,9 @@
"@coreui/coreui": "^4.0.1",
"@coreui/icons": "^2.0.1",
"@coreui/icons-vue": "2.0.0-alpha.0",
"@coreui/utils": "1.3.1",
"@coreui/vue": "^4.0.0-alpha.0",
"@coreui/utils": "^1.3.1",
"@coreui/vue": "^4.0.0-alpha.2",
"@coreui/vue-chartjs": "2.0.0-alpha.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
public/images/angular.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

public/images/avatars/1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

public/images/avatars/2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

public/images/avatars/3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/images/avatars/4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/images/avatars/5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

public/images/avatars/6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/images/avatars/7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

public/images/avatars/8.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

public/images/brand/coreui-signet.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="102px" height="116px" viewBox="0 0 102 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Untitled 3</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="coreui-signet" fill="#3C4B64" fill-rule="nonzero">
<path d="M96,25.091 L57,2.5743 C53.2871871,0.430706461 48.7128129,0.430706461 45,2.5743 L6,25.091 C2.292246,27.239646 0.00690676667,31.1979678 0,35.4833 L0,80.5167 C0.00688629146,84.8020377 2.29223099,88.760369 6,90.909 L45,113.4256 C48.7127742,115.569338 53.2872258,115.569338 57,113.4256 L96,90.909 C99.707769,88.760369 101.993114,84.8020377 102,80.5167 L102,35.4833 C101.993093,31.1979678 99.707754,27.239646 96,25.091 Z M94,80.5167 C94,81.9457261 93.2375729,83.266187 92,83.9807 L53,106.4974 C51.7623957,107.211931 50.2376043,107.211931 49,106.4974 L10,83.9807 C8.76242713,83.266187 8,81.9457261 8,80.5167 L8,35.4833 C8,34.0542382 8.76239619,32.7337309 10,32.0192 L49,9.5025 C50.2376043,8.78796882 51.7623957,8.78796882 53,9.5025 L92,32.0192 C93.2376038,32.7337309 94,34.0542382 94,35.4833 L94,80.5167 Z" id="Shape"></path>
<path d="M74.0216,71.0379 L71.1556,71.0379 C70.4827717,71.0379163 69.8208181,71.2076524 69.231,71.5314 L51.95,81.0167 L32,69.4981 L32,46.5206 L51.95,35.002 L69.2394,44.457 C69.8278903,44.7788245 70.4878603,44.9474965 71.1586,44.9475 L74.0218,44.9475 C75.1263695,44.9475 76.0218,44.0520695 76.0218,42.9475 L76.0218,40.2357 C76.0218,39.5046907 75.6230914,38.8318844 74.9818,38.481 L55.793,27.9854 C53.3404536,26.651551 50.3714915,26.6856213 47.9502,28.0754 L28,39.5929 C25.5282949,41.025705 24.0048155,43.6646378 24,46.5216 L24,69.4976 C24,72.3557593 25.5247614,74.9968204 28,76.4259 L47.95,87.9444 C50.3719491,89.3331078 53.3408366,89.3663802 55.7933,88.0323 L74.9833,77.5012 C75.623333,77.1499602 76.021125,76.4778764 76.0211,75.7478 L76.0211,73.0378 C76.0210448,71.9334648 75.1259352,71.0381761 74.0216,71.0379 L74.0216,71.0379 Z" id="Path"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

public/images/react.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

public/images/vue.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

public/images/vue400.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

public/img/avatars/1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

public/img/avatars/2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

public/img/avatars/3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/img/avatars/4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/img/avatars/5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

public/img/avatars/6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/img/avatars/7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

public/img/avatars/8.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

src/_nav.js
+261 -206
View File
@@ -1,217 +1,272 @@
export default [
{
_name: 'CNavItem',
name: 'Dashboard',
to: '/dashboard',
icon: 'cil-speedometer',
_name: "CNavItem",
name: "Dashboard",
to: "/dashboard",
icon: "cil-speedometer",
badge: {
color: 'primary',
text: 'NEW'
}
color: "primary",
text: "NEW",
},
},
// {
// _name: 'CNavTitle',
// name: 'Theme'
// },
// {
// _name: 'CNavItem',
// name: 'Colors',
// to: '/theme/colors',
// icon: 'cil-drop'
// },
// {
// _name: 'CNavItem',
// name: 'Typography',
// to: '/theme/typography',
// icon: 'cil-pencil'
// },
// {
// _name: 'CNavTitle',
// name: 'Components'
// },
{
_name: 'CNavGroup',
name: 'Base',
route: '/base',
icon: 'cil-puzzle',
_name: "CNavTitle",
name: "Theme",
},
{
_name: "CNavItem",
name: "Colors",
to: "/theme/colors",
icon: "cil-drop",
},
{
_name: "CNavItem",
name: "Typography",
to: "/theme/typography",
icon: "cil-pencil",
},
{
_name: "CNavTitle",
name: "Components",
},
{
_name: "CNavGroup",
name: "Base",
route: "/base",
icon: "cil-puzzle",
children: [
{
_name: 'CNavItem',
name: 'Breadcrumbs',
to: '/base/breadcrumbs'
_name: "CNavItem",
name: "Accordion",
to: "/base/accordion",
},
// {
// _name: 'CNavItem',
// name: 'Cards',
// to: '/base/cards'
// },
// {
// _name: 'CNavItem',
// name: 'Carousels',
// to: '/base/carousels'
// },
// {
// _name: 'CNavItem',
// name: 'Collapses',
// to: '/base/collapses'
// },
// {
// _name: 'CNavItem',
// name: 'Forms',
// to: '/base/forms'
// },
// {
// _name: 'CNavItem',
// name: 'Jumbotrons',
// to: '/base/jumbotrons'
// },
// {
// _name: 'CNavItem',
// name: 'List Groups',
// to: '/base/list-groups'
// },
// {
// _name: 'CNavItem',
// name: 'Navs',
// to: '/base/navs'
// },
// {
// _name: 'CNavItem',
// name: 'Navbars',
// to: '/base/navbars'
// },
// {
// _name: 'CNavItem',
// name: 'Paginations',
// to: '/base/paginations'
// },
// {
// _name: 'CNavItem',
// name: 'Popovers',
// to: '/base/popovers'
// },
// {
// _name: 'CNavItem',
// name: 'Progress Bars',
// to: '/base/progress-bars'
// },
// {
// _name: 'CNavItem',
// name: 'Switches',
// to: '/base/switches'
// },
// {
// _name: 'CNavItem',
// name: 'Tables',
// to: '/base/tables'
// },
// {
// _name: 'CNavItem',
// name: 'Tabs',
// to: '/base/tabs'
// },
// {
// _name: 'CNavItem',
// name: 'Tooltips',
// to: '/base/tooltips'
// }
]
{
_name: "CNavItem",
name: "Breadcrumbs",
to: "/base/breadcrumbs",
},
{
_name: "CNavItem",
name: "Cards",
to: "/base/cards",
},
{
_name: "CNavItem",
name: "Carousels",
to: "/base/carousels",
},
{
_name: "CNavItem",
name: "Collapses",
to: "/base/collapses",
},
{
_name: "CNavItem",
name: "Forms",
to: "/base/forms",
},
/*
{
_name: 'CNavItem',
name: 'Jumbotrons',
to: '/base/jumbotrons'
},
*/
{
_name: "CNavItem",
name: "List Groups",
to: "/base/list-groups",
},
{
_name: "CNavItem",
name: "Navs",
to: "/base/navs",
},
{
_name: "CNavItem",
name: "Navbars",
to: "/base/navbars",
},
{
_name: "CNavItem",
name: "Paginations",
to: "/base/paginations",
},
{
_name: "CNavItem",
name: "Popovers",
to: "/base/popovers",
},
{
_name: "CNavItem",
name: "Progress",
to: "/base/progress",
},
{
_name: "CNavItem",
name: "Switches",
to: "/base/switches",
},
{
_name: "CNavItem",
name: "Tables",
to: "/base/tables",
},
{
_name: "CNavItem",
name: "Tabs",
to: "/base/tabs",
},
{
_name: "CNavItem",
name: "Tooltips",
to: "/base/tooltips",
},
],
},
{
_name: "CNavGroup",
name: "Buttons",
route: "/buttons",
icon: "cil-cursor",
children: [
{
_name: "CNavItem",
name: "Buttons",
to: "/buttons/standard-buttons",
},
{
_name: "CNavItem",
name: "Button Dropdowns",
to: "/buttons/dropdowns",
},
{
_name: "CNavItem",
name: "Button Groups",
to: "/buttons/button-groups",
},
// {
// _name: 'CNavItem',
// name: 'Brand Buttons',
// to: '/buttons/brand-buttons'
// }
],
},
{
_name: "CNavGroup",
name: "Forms",
route: "/forms",
icon: "cil-star",
children: [
{
_name: "CNavItem",
name: "Form Control",
to: "/forms/form-control",
},
{
_name: "CNavItem",
name: "Select",
to: "/forms/select",
},
{
_name: "CNavItem",
name: "Checks & Radios",
to: "/forms/checks-radios",
},
{
_name: "CNavItem",
name: "Range",
to: "/forms/range",
},
{
_name: "CNavItem",
name: "Input Group",
to: "/forms/input-group",
},
{
_name: "CNavItem",
name: "Floating Labels",
to: "/forms/floating-labels",
},
{
_name: "CNavItem",
name: "Layout",
to: "/forms/layout",
},
{
_name: "CNavItem",
name: "Validation",
to: "/forms/validation",
},
],
},
{
_name: "CNavItem",
name: "Charts",
to: "/charts",
icon: "cil-chart-pie",
},
{
_name: "CNavGroup",
name: "Icons",
route: "/icons",
icon: "cil-star",
children: [
{
_name: "CNavItem",
name: "CoreUI Icons",
to: "/icons/coreui-icons",
badge: {
color: "info",
text: "NEW",
},
},
{
_name: "CNavItem",
name: "Brands",
to: "/icons/brands",
},
{
_name: "CNavItem",
name: "Flags",
to: "/icons/flags",
},
],
},
{
_name: "CNavGroup",
name: "Notifications",
route: "/notifications",
icon: "cil-bell",
children: [
{
_name: "CNavItem",
name: "Alerts",
to: "/notifications/alerts",
},
{
_name: "CNavItem",
name: "Badges",
to: "/notifications/badges",
},
{
_name: "CNavItem",
name: "Modals",
to: "/notifications/modals",
},
],
},
{
_name: "CNavItem",
name: "Widgets",
to: "/widgets",
icon: "cil-calculator",
badge: {
color: "primary",
text: "NEW",
shape: "pill",
},
},
// {
// _name: 'CNavGroup',
// name: 'Buttons',
// route: '/buttons',
// icon: 'cil-cursor',
// children: [
// {
// _name: 'CNavItem',
// name: 'Buttons',
// to: '/buttons/standard-buttons'
// },
// {
// _name: 'CNavItem',
// name: 'Button Dropdowns',
// to: '/buttons/dropdowns'
// },
// {
// _name: 'CNavItem',
// name: 'Button Groups',
// to: '/buttons/button-groups'
// },
// {
// _name: 'CNavItem',
// name: 'Brand Buttons',
// to: '/buttons/brand-buttons'
// }
// ]
// },
// {
// _name: 'CNavItem',
// name: 'Charts',
// to: '/charts',
// icon: 'cil-chart-pie'
// },
// {
// _name: 'CNavGroup',
// name: 'Icons',
// route: '/icons',
// icon: 'cil-star',
// children: [
// {
// _name: 'CNavItem',
// name: 'CoreUI Icons',
// to: '/icons/coreui-icons',
// badge: {
// color: 'info',
// text: 'NEW'
// }
// },
// {
// _name: 'CNavItem',
// name: 'Brands',
// to: '/icons/brands'
// },
// {
// _name: 'CNavItem',
// name: 'Flags',
// to: '/icons/flags'
// }
// ]
// },
// {
// _name: 'CNavGroup',
// name: 'Notifications',
// route: '/notifications',
// icon: 'cil-bell',
// children: [
// {
// _name: 'CNavItem',
// name: 'Alerts',
// to: '/notifications/alerts'
// },
// {
// _name: 'CNavItem',
// name: 'Badges',
// to: '/notifications/badges'
// },
// {
// _name: 'CNavItem',
// name: 'Modals',
// to: '/notifications/modals'
// }
// ]
// },
// {
// _name: 'CNavItem',
// name: 'Widgets',
// to: '/widgets',
// icon: 'cil-calculator',
// badge: {
// color: 'primary',
// text: 'NEW',
// shape: 'pill'
// }
// },
// {
// _name: 'CSidebarNavDivider',
// _class: 'm-2'
@@ -264,4 +319,4 @@ export default [
// _class: 'bg-danger text-white',
// target: '_blank'
// }
]
];
src/assets/icons/icons.js
+4
View File
@@ -25,7 +25,9 @@ import {
} from "@coreui/icons";
import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from "@coreui/icons";
import {
cilArrowBottom,
cilArrowRight,
cilArrowTop,
cilBan,
cilBasket,
cilBell,
@@ -80,7 +82,9 @@ export const iconsSet = Object.assign(
{},
{ logo },
{
cilArrowBottom,
cilArrowRight,
cilArrowTop,
cilBan,
cilBasket,
cilBell,
src/assets/images/avatars/1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

src/assets/images/avatars/2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

src/assets/images/avatars/3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

src/assets/images/avatars/4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

src/assets/images/avatars/5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/assets/images/avatars/6.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/assets/images/avatars/7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

src/assets/images/avatars/8.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

src/assets/images/avatars/9.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

src/components/AppFooter.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
</div>
<div class="mfs-auto">
<span class="mr-1" target="_blank">Powered by</span>
<span class="me-1" target="_blank">Powered by</span>
<a href="https://coreui.io/vue">CoreUI for Vue</a>
</div>
</CFooter>
src/components/AppHeader.vue
+89 -40
View File
@@ -1,52 +1,101 @@
<template>
<CHeader position="sticky" class="mb-4">
<CHeaderToggler class="ms-md-3" @click="$store.commit('toggleSidebar')">
<CIcon name="cil-menu" size="lg" />
</CHeaderToggler>
<CHeaderBrand class="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand>
<CHeaderNav class="d-md-down-none me-auto">
<CNavItem>
<CNavLink
href="/dashboard"
<CContainer fluid>
<CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
<CIcon icon="cil-menu" size="lg" />
</CHeaderToggler>
<CHeaderBrand class="mx-auto d-lg-none" to="/">
<CIcon name="logo" height="48" alt="Logo" />
</CHeaderBrand>
<CHeaderNav class="d-md-down-none me-auto">
<CNavItem>
<CNavLink href="/dashboard"> Dashboard </CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Users</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Settings</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav class="me-4">
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon icon="cil-bell" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon icon="cil-list" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon icon="cil-envelope-open" size="lg" />
</CNavLink>
</CNavItem>
<AppHeaderDropdownAccnt />
</CHeaderNav>
</CContainer>
<CHeaderDivider />
<CContainer fluid>
<CBreadcrumb class="d-md-down-none me-auto mb-0">
<CBreadcrumbItem
v-for="item in currentRoute"
:href="item.to"
:active="item.to === '' ? true : false"
>
Dashboard
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Users</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Settings</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav class="me-4">
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon name="cil-bell" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon name="cil-list" />
</CNavLink>
</CNavItem>
<CNavItem class="d-md-down-none mx-2">
<CNavLink>
<CIcon name="cil-envelope-open" />
</CNavLink>
</CNavItem>
<!-- <TheHeaderDropdownAccnt/> -->
</CHeaderNav>
{{ item.name }}
</CBreadcrumbItem>
</CBreadcrumb>
</CContainer>
</CHeader>
</template>
<script>
// import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
import AppHeaderDropdownAccnt from "./AppHeaderDropdownAccnt";
import router from "../router";
export default {
name: "AppHeader",
components: {},
components: {
AppHeaderDropdownAccnt,
},
data: function () {
return {
currentRoute: [],
};
},
methods: {
upperCaseFirstChar: function (string) {
return string.substr(0, 1).toUpperCase() + string.substr(1);
},
makeCurrentRoute: function () {
let result = [];
let path = router.currentRoute._value.path;
let temp = path.split("/");
let to = "";
if (temp.length <= 2) {
result.push({ to: "", name: router.currentRoute._value.name });
} else {
for (let i = 1; i < temp.length - 1; i++) {
for (let j = 1; j <= i; j++) {
to += `/${temp[j]}`;
}
result.push({ to: to, name: this.upperCaseFirstChar(temp[i]) });
}
result.push({ to: "", name: router.currentRoute._value.name });
}
return result;
},
},
watch: {
$route(to, from) {
this.currentRoute = this.makeCurrentRoute();
},
},
mounted: function () {
this.currentRoute = this.makeCurrentRoute();
},
};
</script>
src/components/AppHeaderDropdownAccnt.vue
+59
View File
@@ -0,0 +1,59 @@
<template>
<CDropdown variant="nav-item">
<CDropdownToggle placement="bottom-end" class="py-0" :caret="false">
<CAvatar :src="avatar" size="md"/>
</CDropdownToggle>
<CDropdownMenu>
<CDropdownHeader tag="div" class="text-center" color="light">
<strong>Account</strong>
</CDropdownHeader>
<CDropdownItem>
<CIcon icon="cil-bell" /> Updates
<CBadge color="info" class="ms-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-envelope-open" /> Messages
<CBadge color="success" class="ms-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-task" /> Tasks
<CBadge color="danger" class="ms-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-comment-square" /> Comments
<CBadge color="warning" class="ms-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownHeader tag="div" class="text-center" color="light">
<strong>Settings</strong>
</CDropdownHeader>
<CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
<CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-dollar" /> Payments
<CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon icon="cil-file" /> Projects
<CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownDivider />
<CDropdownItem>
<CIcon icon="cil-shield-alt" /> Lock Account
</CDropdownItem>
<CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
<script>
import avatar from './../assets/images/avatars/8.jpg'
export default {
name: "AppHeaderDropdownAccnt",
data() {
return {
avatar: avatar,
itemsCount: 42,
};
},
};
</script>
src/components/AppSidebar.vue
+6 -1
View File
@@ -1,5 +1,5 @@
<template>
<CSidebar position="fixed" selfHiding="md">
<CSidebar position="fixed" selfHiding="md" :class="sidebarClass">
<CSidebarBrand>
<CIcon
customClasses="sidebar-brand-full"
@@ -26,5 +26,10 @@ export default {
components: {
AppSidebarNav,
},
computed: {
sidebarClass () {
return this.$store.state.sidebarClass
}
}
};
</script>
src/components/AppSidebarNav.js
+2 -2
View File
@@ -33,7 +33,7 @@ const AppSidebarNav = defineComponent({
[
item.icon &&
h(resolveComponent("CIcon"), {
customClasses: "nav-icon",
customClassName: "nav-icon",
name: item.icon,
}),
item.name,
@@ -65,7 +65,7 @@ const AppSidebarNav = defineComponent({
{
togglerContent: () => [
h(resolveComponent("CIcon"), {
customClasses: "nav-icon",
customClassName: "nav-icon",
name: item.icon,
}),
item.name,
src/components/Example.vue
+2 -2
View File
@@ -3,12 +3,12 @@
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
<CIcon name="cil-media-play" class="me-2" />
<CIcon icon="cil-media-play" class="me-2" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink :href="href" target="_blank">
<CIcon name="cil-code" class="me-2" />
<CIcon icon="cil-code" class="me-2" />
Code
</CNavLink>
</CNavItem>
src/layouts/DefaultLayout.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<AppSidebar />
<div class="wrapper d-flex flex-column min-vh-100 bg-light">
<AppHeader />
<div className="body flex-grow-1 px-3">
<div class="body flex-grow-1 px-3">
<CContainer lg>
<router-view />
</CContainer>
src/router/index.js
+246 -2
View File
@@ -22,15 +22,39 @@ const routes = [
component: () =>
import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue"),
},
{
path: "/theme",
name: "Theme",
redirect: "/theme/typography",
},
{
path: "/theme/colors",
name: "Colors",
component: () => import("@/views/theme/Colors.vue"),
},
{
path: "/theme/typography",
name: "Typography",
component: () => import("@/views/theme/Typography.vue"),
},
{
path: "/base",
name: "Base",
component: {
render() {
return h(resolveComponent('router-view'))
}
return h(resolveComponent("router-view"));
},
},
redirect: "/base/breadcrumbs",
children: [
{
path: "/base/accordion",
name: "Accordion",
component: () =>
import(
/* webpackChunkName: "dashboard" */ "@/views/base/Accordion.vue"
),
},
{
path: "/base/breadcrumbs",
name: "Breadcrumbs",
@@ -39,8 +63,228 @@ const routes = [
/* webpackChunkName: "dashboard" */ "@/views/base/Breadcrumbs.vue"
),
},
{
path: "/base/cards",
name: "Cards",
component: () => import("@/views/base/Cards.vue"),
},
{
path: "/base/carousels",
name: "Carousels",
component: () => import("@/views/base/Carousels.vue"),
},
{
path: "/base/collapses",
name: "Collapses",
component: () => import("@/views/base/Collapses.vue"),
},
{
path: "/base/forms",
name: "Forms",
component: () => import("@/views/base/Forms.vue"),
},
/*
{
path: "/base/jumbotrons",
name: "Jumbotrons",
component: () => import("@/views/base/Jumbotrons.vue"),
},
*/
{
path: "/base/list-groups",
name: "List Groups",
component: () => import("@/views/base/ListGroups.vue"),
},
{
path: "/base/navs",
name: "Navs",
component: () => import("@/views/base/Navs.vue"),
},
{
path: "/base/navbars",
name: "Navbars",
component: () => import("@/views/base/Navbars.vue"),
},
{
path: "/base/paginations",
name: "Paginations",
component: () => import("@/views/base/Paginations.vue"),
},
{
path: "/base/popovers",
name: "Popovers",
component: () => import("@/views/base/Popovers.vue"),
},
{
path: "/base/progress",
name: "Progress",
component: () => import("@/views/base/Progress.vue"),
},
{
path: "/base/switches",
name: "Switches",
component: () => import("@/views/base/Switches.vue"),
},
{
path: "/base/tables",
name: "Tables",
component: () => import("@/views/base/Tables.vue"),
},
{
path: "/base/tabs",
name: "Tabs",
component: () => import("@/views/base/Tabs.vue"),
},
{
path: "/base/tooltips",
name: "Tooltips",
component: () => import("@/views/base/Tooltips.vue"),
},
],
},
{
path: "/buttons",
name: "Buttons",
component: {
render() {
return h(resolveComponent("router-view"));
},
},
redirect: "/buttons/standard-buttons",
children: [
{
path: "/buttons/standard-buttons",
name: "Buttons",
component: () => import("@/views/buttons/Buttons.vue"),
},
{
path: "/buttons/dropdowns",
name: "Button Dropdowns",
component: () => import("@/views/buttons/ButtonDropdowns.vue"),
},
{
path: "/buttons/button-groups",
name: "Button Groups",
component: () => import("@/views/buttons/ButtonGroups.vue"),
},
],
},
{
path: "/forms",
name: "Forms",
component: {
render() {
return h(resolveComponent("router-view"));
},
},
redirect: "/forms/form-control",
children: [
{
path: "/forms/form-control",
name: "Form Control",
component: () => import("@/views/forms/FormControl.vue"),
},
{
path: "/forms/select",
name: "Select",
component: () => import("@/views/forms/Select.vue"),
},
{
path: "/forms/checks-radios",
name: "Checks & Radios",
component: () => import("@/views/forms/ChecksRadios.vue"),
},
{
path: "/forms/range",
name: "Range",
component: () => import("@/views/forms/Range.vue"),
},
{
path: "/forms/input-group",
name: "Input Group",
component: () => import("@/views/forms/InputGroup.vue"),
},
{
path: "/forms/floating-labels",
name: "Floating Labels",
component: () => import("@/views/forms/FloatingLabels.vue"),
},
{
path: "/forms/layout",
name: "Layout",
component: () => import("@/views/forms/Layout.vue"),
},
{
path: "/forms/validation",
name: "Validation",
component: () => import("@/views/forms/Validation.vue"),
},
],
},
{
path: "/charts",
name: "Charts",
component: () => import("@/views/charts/Charts.vue"),
},
{
path: "/icons",
name: "Icons",
component: {
render() {
return h(resolveComponent("router-view"));
},
},
redirect: "/icons/coreui-icons",
children: [
{
path: "/icons/coreui-icons",
name: "CoreUI Icons",
component: () => import("@/views/icons/CoreUIIcons.vue"),
},
{
path: "/icons/brands",
name: "Brands",
component: () => import("@/views/icons/Brands.vue"),
},
{
path: "/icons/flags",
name: "Flags",
component: () => import("@/views/icons/Flags.vue"),
},
],
},
{
path: "/notifications",
name: "Notifications",
component: {
render() {
return h(resolveComponent("router-view"));
},
},
redirect: "/notifications/alerts",
children: [
{
path: "/notifications/alerts",
name: "Alerts",
component: () => import("@/views/notifications/Alerts.vue"),
},
{
path: "/notifications/badges",
name: "Badges",
component: () => import("@/views/notifications/Badges.vue"),
},
{
path: "/notifications/modals",
name: "Modals",
component: () => import("@/views/notifications/Modals.vue"),
},
],
},
{
path: "/widgets",
name: "Widgets",
component: () => import("@/views/widgets/Widgets.vue"),
},
],
},
// {
src/store/index.js
+10 -2
View File
@@ -2,9 +2,17 @@ import { createStore } from "vuex";
export default createStore({
state: {
sidebarShow: true,
sidebarClass: '',
},
mutations: {
toggleSidebar (state) {
if(state.sidebarClass === ''){
state.sidebarClass = 'sidebar-self-hiding-xxl'
}else{
state.sidebarClass = ''
}
}
},
mutations: {},
actions: {},
modules: {},
});
src/views/Dashboard.vue
+512 -2
View File
@@ -1,16 +1,526 @@
<template>
<div>
<MainChartExample style="height: 300px; margin-top: 40px" />
<WidgetsStatsA />
<CRow>
<CCol md="12">
<CCard class="mb-4">
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-medium-emphasis">November 2017</div>
</CCol>
<CCol sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-end">
<CIcon icon="cil-cloud-download" />
</CButton>
<CButtonGroup
class="float-end me-3"
role="group"
aria-label="Basic outlined example"
>
<CButton color="secondary" variant="outline">Day</CButton>
<CButton color="secondary" variant="outline" active
>Month</CButton
>
<CButton color="secondary" variant="outline">Year</CButton>
</CButtonGroup>
</CCol>
</CRow>
<CRow>
<MainChartExample
style="height: 300px; max-height: 300px; margin-top: 40px"
/>
</CRow>
</CCardBody>
<CCardFooter>
<CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
<CCol class="mb-sm-2 mb-0">
<div class="text-medium-emphasis">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
class="mt-2"
color="success"
thin
:precision="1"
:value="40"
/>
</CCol>
<CCol class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-medium-emphasis">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
class="mt-2"
color="info"
thin
:precision="1"
:value="20"
/>
</CCol>
<CCol class="mb-sm-2 mb-0">
<div class="text-medium-emphasis">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
class="mt-2"
color="warning"
thin
:precision="1"
:value="60"
/>
</CCol>
<CCol class="mb-sm-2 mb-0">
<div class="text-medium-emphasis">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
class="mt-2"
color="danger"
thin
:precision="1"
:value="80"
/>
</CCol>
<CCol class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-medium-emphasis">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress class="mt-2" :value="40" thin :precision="1" />
</CCol>
</CRow>
</CCardFooter>
</CCard>
</CCol>
</CRow>
<WidgetsStatsD />
<CRow>
<CCol md="12">
<CCard class="mb-4">
<CCardHeader> Traffic &amp; Sales </CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<div
class="
border-start border-start-4 border-start-info
py-1
px-3
mb-3
"
>
<div class="text-medium-emphasis small">New Clients</div>
<div class="fs-5 fw-semibold">9,123</div>
</div>
</CCol>
<CCol sm="6">
<div
class="
border-start border-start-4 border-start-danger
py-1
px-3
mb-3
"
>
<div class="text-medium-emphasis small">
Recurring Clients
</div>
<div class="fs-5 fw-semibold">22,643</div>
</div>
</CCol>
</CRow>
<hr class="mt-0" />
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text"> Monday </span>
</div>
<div class="progress-group-bars">
<CProgress thin color="info" :value="34" />
<CProgress thin color="danger" :value="78" />
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text"> Tuesday </span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="56" color="info" />
<CProgress thin :value="94" color="danger" />
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text"> Wednesday </span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="12" color="info" />
<CProgress thin :value="67" color="danger" />
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text"> Thursday </span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="43" color="info" />
<CProgress thin :value="91" color="danger" />
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text"> Friday </span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="22" color="info" />
<CProgress thin :value="73" color="danger" />
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text"> Saturday </span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="53" color="info" />
<CProgress thin :value="82" color="danger" />
</div>
</div>
<div class="progress-group mb-4">
<div class="progress-group-prepend">
<span class="progress-group-text"> Sunday </span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="9" color="info" />
<CProgress thin :value="69" color="danger" />
</div>
</div>
</CCol>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<div
class="
border-start border-start-4 border-start-warning
py-1
px-3
mb-3
"
>
<div class="text-medium-emphasis small">Pageviews</div>
<div class="fs-5 fw-semibold">78,623</div>
</div>
</CCol>
<CCol sm="6">
<div
class="
border-start border-start-4 border-start-success
py-1
px-3
mb-3
"
>
<div class="text-medium-emphasis small">Organic</div>
<div class="fs-5 fw-semibold">49,123</div>
</div>
</CCol>
</CRow>
<hr class="mt-0" />
<div class="progress-group">
<div class="progress-group-header">
<CIcon icon="cil-user" class="me-2" size="lg" />
<span class="title">Male</span>
<span class="ms-auto font-weight-bold">43%</span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="43" color="warning" />
</div>
</div>
<div class="progress-group mb-5">
<div class="progress-group-header">
<CIcon icon="cil-user-female" class="me-2" size="lg" />
<span class="title">Female</span>
<span class="ms-auto font-weight-bold">37%</span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="37" color="warning" />
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon icon="cil-globe-alt" class="me-2" size="lg" />
<span class="title">Organic Search</span>
<span class="ms-auto font-weight-bold">
191,235
<span class="text-medium-emphasis small">(56%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="56" color="success" />
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
icon="cib-facebook"
height="17"
class="me-2"
size="lg"
/>
<span class="title">Facebook</span>
<span class="ms-auto font-weight-bold">
51,223
<span class="text-medium-emphasis small">(15%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="15" color="success" />
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
icon="cib-twitter"
height="17"
class="me-2"
size="lg"
/>
<span class="title">Twitter</span>
<span class="ms-auto font-weight-bold">
37,564
<span class="text-medium-emphasis small">(11%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="11" color="success" />
</div>
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon
icon="cib-linkedin"
height="17"
class="me-2"
size="lg"
/>
<span class="title">LinkedIn</span>
<span class="ms-auto font-weight-bold">
27,319
<span class="text-medium-emphasis small">&nbsp;(8%)</span>
</span>
</div>
<div class="progress-group-bars">
<CProgress thin :value="8" color="success" />
</div>
</div>
</CCol>
</CRow>
<br />
<CTable align="middle" class="mb-0 border" hover responsive>
<CTableHead color="light">
<CTableRow>
<CTableHeaderCell class="text-center">
<CIcon name="{cilPeople}" />
</CTableHeaderCell>
<CTableHeaderCell>User</CTableHeaderCell>
<CTableHeaderCell class="text-center"
>Country</CTableHeaderCell
>
<CTableHeaderCell>Usage</CTableHeaderCell>
<CTableHeaderCell class="text-center"
>Payment Method</CTableHeaderCell
>
<CTableHeaderCell>Activity</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow v-for="item in tableItems" :key="item.name">
<CTableDataCell class="text-center">
<CAvatar
size="md"
:src="item.avatar.src"
:status="item.avatar.status"
/>
</CTableDataCell>
<CTableDataCell>
<div>{{ item.user.name }}</div>
<div class="small text-medium-emphasis">
<span>{{ item.user.new ? "New" : "Recurring" }}</span> |
{{ item.user.registered }}
</div>
</CTableDataCell>
<CTableDataCell class="text-center">
<CIcon
size="xl"
:name="item.country.flag"
:title="item.country.name"
/>
</CTableDataCell>
<CTableDataCell>
<div class="clearfix">
<div class="float-start">
<strong>{{ item.usage.value }}%</strong>
</div>
<div class="float-end">
<small class="text-medium-emphasis">
{{ item.usage.period }}
</small>
</div>
</div>
<CProgress
thin
:color="item.usage.color"
:value="item.usage.value"
/>
</CTableDataCell>
<CTableDataCell class="text-center">
<CIcon size="xl" :name="item.payment.icon" />
</CTableDataCell>
<CTableDataCell>
<div class="small text-medium-emphasis">Last login</div>
<strong>{{ item.activity }}</strong>
</CTableDataCell>
</CTableRow>
<CTableRow> </CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
</CCol>
</CRow>
</div>
</template>
<script>
import avatar1 from "./../assets/images/avatars/1.jpg";
import avatar2 from "./../assets/images/avatars/2.jpg";
import avatar3 from "./../assets/images/avatars/3.jpg";
import avatar4 from "./../assets/images/avatars/4.jpg";
import avatar5 from "./../assets/images/avatars/5.jpg";
import avatar6 from "./../assets/images/avatars/6.jpg";
import MainChartExample from "./charts/MainChartExample";
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
export default {
name: "Dashboard",
components: {
MainChartExample,
WidgetsStatsA,
WidgetsStatsD,
},
data() {
return {
selected: "Month",
tableItems: [
{
avatar: { src: avatar1, status: "success" },
user: {
name: "Yiorgos Avraamu",
new: true,
registered: "Jan 1, 2021",
},
country: { name: "USA", flag: "cif-us" },
usage: {
value: 50,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "success",
},
payment: { name: "Mastercard", icon: "cib-cc-mastercard" },
activity: "10 sec ago",
},
{
avatar: { src: avatar2, status: "danger" },
user: {
name: "Avram Tarasios",
new: false,
registered: "Jan 1, 2021",
},
country: { name: "Brazil", flag: "cif-br" },
usage: {
value: 22,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "info",
},
payment: { name: "Visa", icon: "cib-cc-visa" },
activity: "5 minutes ago",
},
{
avatar: { src: avatar3, status: "warning" },
user: { name: "Quintin Ed", new: true, registered: "Jan 1, 2021" },
country: { name: "India", flag: "cif-in" },
usage: {
value: 74,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "warning",
},
payment: { name: "Stripe", icon: "cib-stripe" },
activity: "1 hour ago",
},
{
avatar: { src: avatar4, status: "" },
user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" },
country: { name: "France", flag: "cif-fr" },
usage: {
value: 98,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "danger",
},
payment: { name: "PayPal", icon: "cib-paypal" },
activity: "Last month",
},
{
avatar: { src: avatar5, status: "success" },
user: {
name: "Agapetus Tadeáš",
new: true,
registered: "Jan 1, 2021",
},
country: { name: "Spain", flag: "cif-es" },
usage: {
value: 22,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "primary",
},
payment: { name: "Google Wallet", icon: "cib-google-pay" },
activity: "Last week",
},
{
avatar: { src: avatar6, status: "danger" },
user: {
name: "Friderik Dávid",
new: true,
registered: "Jan 1, 2021",
},
country: { name: "Poland", flag: "cif-pl" },
usage: {
value: 43,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "success",
},
payment: { name: "Amex", icon: "cib-cc-amex" },
activity: "Last week",
},
],
tableFields: [
{ key: "avatar", label: "", _classes: "text-center" },
{ key: "user" },
{ key: "country", _classes: "text-center" },
{ key: "usage" },
{ key: "payment", label: "Payment method", _classes: "text-center" },
{ key: "activity" },
],
};
},
methods: {
color(value) {
let $color;
if (value <= 25) {
$color = "info";
} else if (value > 25 && value <= 50) {
$color = "success";
} else if (value > 50 && value <= 75) {
$color = "warning";
} else if (value > 75 && value <= 100) {
$color = "danger";
}
return $color;
},
},
};
</script>
src/views/base/Accordion.vue
+224
View File
@@ -0,0 +1,224 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Accordion</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content.
</p>
<Example href="components/accordion">
<CAccordion>
<CAccordionItem>
<CAccordionHeader>
<CAccordionButton
:collapsed="activeKey !== 1"
@click="
() => {
activeKey === 1 ? (activeKey = 0) : (activeKey = 1);
}
"
>
Accordion Item #1
</CAccordionButton>
</CAccordionHeader>
<CAccordionCollapse :visible="activeKey === 1">
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It
is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the
transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
<CAccordionItem>
<CAccordionHeader>
<CAccordionButton
:collapsed="activeKey !== 2"
@click="
() => {
activeKey === 2 ? (activeKey = 0) : (activeKey = 2);
}
"
>
Accordion Item #2
</CAccordionButton>
</CAccordionHeader>
<CAccordionCollapse :visible="activeKey === 2">
<CAccordionBody>
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the
transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
<CAccordionItem>
<CAccordionHeader>
<CAccordionButton
:collapsed="activeKey !== 3"
@click="
() => {
activeKey === 3 ? (activeKey = 0) : (activeKey = 3);
}
"
>
Accordion Item #3
</CAccordionButton>
</CAccordionHeader>
<CAccordionCollapse :visible="activeKey === 3">
<CAccordionBody>
<strong>This is the third item's accordion body.</strong> It
is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the
transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
</CAccordion>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Accordion</strong> <small>Flush</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>flush</code> to remove the default
<code>background-color</code>, some borders, and some rounded
corners to render accordions edge-to-edge with their parent
container.
</p>
<Example href="components/accordion#flush">
<CAccordion flush>
<CAccordionItem>
<CAccordionHeader>
<CAccordionButton
:collapsed="flushActiveKey !== 1"
@click="
() => {
flushActiveKey === 1
? (flushActiveKey = 0)
: (flushActiveKey = 1);
}
"
>
Accordion Item #1
</CAccordionButton>
</CAccordionHeader>
<CAccordionCollapse :visible="flushActiveKey === 1">
<CAccordionBody>
<strong>This is the first item's accordion body.</strong> It
is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the
transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
<CAccordionItem>
<CAccordionHeader>
<CAccordionButton
:collapsed="flushActiveKey !== 2"
@click="
() => {
flushActiveKey === 2
? (flushActiveKey = 0)
: (flushActiveKey = 2);
}
"
>
Accordion Item #2
</CAccordionButton>
</CAccordionHeader>
<CAccordionCollapse :visible="flushActiveKey === 2">
<CAccordionBody>
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the
transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
<CAccordionItem>
<CAccordionHeader>
<CAccordionButton
:collapsed="flushActiveKey !== 3"
@click="
() => {
flushActiveKey === 3
? (flushActiveKey = 0)
: (flushActiveKey = 3);
}
"
>
Accordion Item #3
</CAccordionButton>
</CAccordionHeader>
<CAccordionCollapse :visible="flushActiveKey === 3">
<CAccordionBody>
<strong>This is the third item's accordion body.</strong> It
is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any
of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go
within the <code>.accordion-body</code>, though the
transition does limit overflow.
</CAccordionBody>
</CAccordionCollapse>
</CAccordionItem>
</CAccordion>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import { ref } from 'vue'
export default {
name: "Accordion",
setup() {
const activeKey = ref(1)
const flushActiveKey = ref(1)
return {
activeKey,
flushActiveKey,
}
}
};
</script>
src/views/base/Breadcrumbs.vue
+41 -9
View File
@@ -1,24 +1,56 @@
<template>
<CRow>
<CCol>
<CCard>
<CCol :xs="12">
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Breadcrumb</strong>
</CCardHeader>
<CCardBody>
<Example href="breadcrumbs">
<p class="text-medium-emphasis small">
The breadcrumb navigation provides links back to each previous page
the user navigated through and shows the current location in a
website or an application. You don’t have to add separators, because
they automatically added in CSS through
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
<code>::before</code>
</a>
and
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
<code>content</code>
</a>
.
</p>
<Example href="components/breadcrumb">
<CBreadcrumb>
<CBreadcrumbItem active>Home</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>Library</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
<CBreadcrumbItem href="#">Library</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink href="#">Library</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>Data</CBreadcrumbItem>
</CBreadcrumb>
<CBreadcrumb>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink href="#">Library</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem>
<CLink href="#">Data</CLink>
</CBreadcrumbItem>
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
</CBreadcrumb>
</Example>
</CCardBody>
</CCard>
src/views/base/Cards.vue
+1279
View File
File diff suppressed because it is too large Load Diff
src/views/base/Carousels.vue
+255
View File
@@ -0,0 +1,255 @@
<template>
<CRow>
<CCol>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>Slide only</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Here’s a carousel with slides
</p>
<Example href="components/carousel.html#slides-only">
<CCarousel>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>With controls</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Adding in the previous and next controls by
<code>controls</code> property.
</p>
<Example href="components/carousel.html#with-controls">
<CCarousel controls>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>With indicators</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can attach the indicators to the carousel, lengthwise the
controls, too.
</p>
<Example href="components/carousel.html#with-indicators">
<CCarousel controls indicators>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>With captions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can add captions to slides with the
<code>&lt;CCarouselCaption&gt;</code> element within any
<code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
on smaller viewports, as shown below, with optional
<a href="https://coreui.io/4.0/utilities/display"
>display utilities</a
>. We hide them with <code>.d-none</code> and draw them back on
medium-sized devices with <code>.d-md-block</code>.
</p>
<Example href="components/carousel.html#with-captions">
<CCarousel controls indicators>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
Some representative placeholder content for the first slide.
</p>
</CCarouselCaption>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
Some representative placeholder content for the first slide.
</p>
</CCarouselCaption>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
<CCarouselCaption class="d-none d-md-block">
<h5>First slide label</h5>
<p>
Some representative placeholder content for the first slide.
</p>
</CCarouselCaption>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>Crossfade</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
animate slides with a fade transition instead of a slide.
</p>
<Example href="components/carousel.html#crossfade">
<CCarousel controls indicators transition="crossfade">
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>Dark variant</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>dark</code> property to the <code>CCarousel</code> for
darker controls, indicators, and captions. Controls have been
inverted from their default white fill with the
<code>filter</code> CSS property. Captions and controls have
additional Sass variables that customize the <code>color</code> and
<code>background-color</code>.
</p>
<Example href="components/carousel.html#dark-variant">
<CCarousel controls indicators dark>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/vue.jpg"
alt="slide 1"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/react.jpg"
alt="slide 2"
/>
</CCarouselItem>
<CCarouselItem>
<img
class="d-block w-100"
src="/images/angular.jpg"
alt="slide 3"
/>
</CCarouselItem>
</CCarousel>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Carousels",
};
</script>
src/views/base/Collapses.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<CRow>
<CCol>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You can use a link or a button component.
</p>
<Example href="components/collapse.html#example">
<CButton color="primary" href="#" @click="visible = !visible"
>Link</CButton
>
<CButton color="primary" @click="visible = !visible"
>Button</CButton
>
<CCollapse :visible="visible">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</Example>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong> <small> multi target</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<h4 class="mt-4">Toggle multiple targets</h4>
<Example href="components/collapse.html#multiple-targets">
<CButton color="primary" @click="visibleA = !visibleA"
>Toggle first element</CButton
>
<CButton color="primary" @click="visibleB = !visibleB"
>Toggle second element</CButton
>
<CButton
color="primary"
@click="
() => {
visibleA = !visibleA;
visibleB = !visibleB;
}
"
>
Toggle both elements
</CButton>
<CRow>
<CCol xs="6">
<CCollapse :visible="visibleA">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</CCol>
<CCol xs="6">
<CCollapse :visible="visibleB">
<CCard class="mt-3">
<CCardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</CCardBody>
</CCard>
</CCollapse>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Breadcrumbs",
data() {
return {
visible: false,
visibleA: false,
visibleB: false,
};
},
};
</script>
src/views/base/Forms.vue
+817
View File
@@ -0,0 +1,817 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Forms</strong>
</CCardHeader>
<CCardBody>
<CRow>
<CCol md="6">
<h4>Overview</h4>
<Example href="forms/overview.html#overview">
<CForm>
<div class="mb-3">
<CFormLabel for="exampleInputEmail1">Email address</CFormLabel>
<CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
<CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
</div>
<div class="mb-3">
<CFormLabel for="exampleInputPassword1">Email Password</CFormLabel>
<CFormInput type="password" id="exampleInputPassword1" />
</div>
<CFormCheck
class="mb-3"
label="Check me out"
/>
<CButton type="submit" color="primary">
Submit
</CButton>
</CForm>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Disabled fieldset example</h4>
<Example href="forms/overview.html#disabled-forms">
<CForm>
<fieldset disabled>
<div class="mb-3">
<CFormLabel for="disabledTextInput">Disabled input</CFormLabel>
<CFormInput id="disabledTextInput" placeholder="Disabled input" />
</div>
<div class="mb-3">
<CFormLabel for="disabledSelect">Disabled select menu</CFormLabel>
<CFormSelect id="disabledSelect">
<option>Disabled select</option>
</CFormSelect>
</div>
<div class="mb-3">
<CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
</div>
<CButton type="submit">Submit</CButton>
</fieldset>
</CForm>
</Example>
</CCol>
</CRow>
<h4 class="mt-4">Sizing</h4>
<Example href="forms/form-control.html#sizing">
<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
<br/>
<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
<br/>
<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
</Example>
<h4 class="mt-4">Input file</h4>
<Example href="forms/form-control.html#file-input">
<div class="mb-3">
<CFormLabel for="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile"/>
</div>
<div class="mb-3">
<CFormLabel for="formFileMultiple">Multiple files input example</CFormLabel>
<CFormInput type="file" id="formFileMultiple" multiple/>
</div>
<div class="mb-3">
<CFormLabel for="formFileDisabled">Disabled file input example</CFormLabel>
<CFormInput type="file" id="formFileDisabled" disabled/>
</div>
<div class="mb-3">
<CFormLabel for="formFileSm">Small file input example</CFormLabel>
<CFormInput type="file" size="sm" id="formFileSm"/>
</div>
<div>
<CFormLabel for="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg"/>
</div>
</Example>
<h4 class="mt-4">Color</h4>
<Example href="forms/form-control.html#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />
</Example>
<h4 class="mt-4">Select</h4>
<Example href="forms/select.html#default">
<CRow>
<CCol md="3">
<CFormSelect class="mb-3" aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol md="3">
<CFormSelect size="lg" class="mb-3" aria-label="Large select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol md="3">
<CFormSelect size="sm" class="mb-3" aria-label="Small select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol md="3">
<CFormSelect size="lg" class="mb-3" multiple aria-label="Multiple select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol md="3">
<CFormSelect htmlSize="3" class="mb-3" multiple aria-label="size 3 select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol md="3">
<CFormSelect aria-label="Disabled select example" class="mb-3" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Checks</h4>
<Example href="forms/checks-radios.html#checks">
<CRow>
<CCol md="4">
<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
</CCol>
<CCol md="4">
<CFormCheck label="Disabled checkbox" disabled/>
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Radios</h4>
<Example href="forms/checks-radios.html#radios">
<CRow>
<CCol md="4">
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
</CCol>
<CCol md="4">
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Switches</h4>
<Example href="forms/checks-radios.html#switches">
<CRow>
<CCol md="4">
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
</CCol>
<CCol md="4">
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Inline Checks and Radios</h4>
<Example href="forms/checks-radios.html#inline">
<CRow>
<CCol md="4">
<h5 class="mt-2 mb-2">Checks</h5>
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
</CCol>
<CCol md="4">
<h5 class="mt-2 mb-2">Radios</h5>
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Toggle buttons</h4>
<Example href="forms/checks-radios.html#checkbox-toggle-buttons">
<CRow>
<CCol md="4">
<h5 class="mt-2 mb-2">Checkbox toggle buttons</h5>
<div class="mb-2">
<CFormCheck :button="{ color: 'primary' }" id="btn-check" autoComplete="off" label="Single toggle"/>
</div>
<div class="mb-2">
<CFormCheck :button="{ color: 'primary' }" id="btn-check-2" autoComplete="off" label="Checked" defaultChecked/>
</div>
<div class="mb-2">
<CFormCheck :button="{ color: 'primary' }" id="btn-check-3" autoComplete="off" label="Disabled" disabled/>
</div>
</CCol>
<CCol md="4">
<h5 class="mt-2 mb-2">Radio toggle buttons</h5>
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
</CCol>
<CCol md="4">
<h5 class="mt-2 mb-2">Outlined styles</h5>
<div>
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
</div>
<div>
<CFormCheck :button="{ color: 'secondary', variant: 'outline' }" id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
</div>
<div>
<CFormCheck :button="{ color: 'success', variant: 'outline' }" type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
<CFormCheck :button="{ color: 'danger', variant: 'outline' }" type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
</div>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Range</h4>
<Example href="forms/range.html#overview">
<CRow>
<CCol md="6">
<CFormLabel for="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1"/>
</CCol>
<CCol md="6">
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled/>
</CCol>
<CCol md="6">
<CFormLabel for="customRange2">Example range max="5"</CFormLabel>
<CFormRange min="0" max="5" defaultValue="3" id="customRange2"/>
</CCol>
<CCol md="6">
<CFormLabel for="customRange3">Example range step="0.5"</CFormLabel>
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3"/>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Floating labels</h4>
<Example href="forms/floating-labels.html#example">
<CRow>
<CCol md="6">
<h5 class="mt-2 mb-2">Input</h5>
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel for="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel for="exampleFormControlPassword">Password</CFormLabel>
</CFormFloating>
</CCol>
<CCol md="6">
<h5 class="mt-2 mb-2">Input with value</h5>
<CFormFloating>
<CFormInput
type="email"
id="floatingInputValue"
placeholder="name@example.com"
value="test@example.com"
/>
<CFormLabel for="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</CCol>
<CCol md="6">
<h5 class="mt-2 mb-2">Text areas</h5>
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
placeholder="Leave a comment here"
></CFormTextarea>
<CFormLabel for="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</CCol>
<CCol md="6">
<h5 class="mt-2 mb-2">Select</h5>
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel for="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</CCol>
</CRow>
</Example>
<h4 class="mt-4">Vue input group (basic example)</h4>
<Example href="forms/input-group.html#basic-example">
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
</CInputGroup>
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
<CFormInput id="basic-url" aria-describedby="basic-addon3"/>
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CFormInput aria-label="Amount (to the nearest dollar)"/>
<CInputGroupText>.00</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput placeholder="Username" aria-label="Username"/>
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Server" aria-label="Server"/>
</CInputGroup>
<CInputGroup>
<CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</Example>
<CRow>
<CCol md="6">
<h4 class="mt-4">Input group sizing</h4>
<Example href="forms/input-group.html#sizing">
<CInputGroup size="sm" class="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
</CInputGroup>
<CInputGroup size="lg">
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Checkboxes and radios</h4>
<Example href="forms/input-group.html#checkboxes-and-radios">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
</CInputGroupText>
<CFormInput aria-label="Text input with checkbox"/>
</CInputGroup>
<CInputGroup>
<CInputGroupText>
<CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
</CInputGroupText>
<CFormInput aria-label="Text input with radio button"/>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Multiple inputs</h4>
<Example href="forms/input-group.html#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormInput aria-label="First name"/>
<CFormInput aria-label="Last name"/>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Multiple addons</h4>
<Example href="forms/input-group.html#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Button addons</h4>
<Example href="forms/input-group.html#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
<CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
<CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline">Button</CButton>
<CButton type="button" color="secondary" variant="outline">Button</CButton>
<CFormInput placeholder="" aria-label="Example text with two button addons"/>
</CInputGroup>
<CInputGroup>
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
<CButton type="button" color="secondary" variant="outline">Button</CButton>
<CButton type="button" color="secondary" variant="outline">Button</CButton>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Buttons with dropdowns</h4>
<Example href="forms/input-group.html#buttons-with-dropdowns">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with dropdown button"/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput aria-label="Text input with dropdown button"/>
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
<CInputGroup>
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with 2 dropdown buttons"/>
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Segmented buttons</h4>
<Example href="forms/input-group.html#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">Action</CButton>
<CDropdownToggle color="secondary" variant="outline" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with segmented dropdown button"/>
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Text input with segmented dropdown button"/>
<CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline">Action</CButton>
<CDropdownToggle color="secondary" variant="outline" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Custom select</h4>
<Example href="forms/input-group.html#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">Options</CInputGroupText>
<CFormSelect id="inputGroupSelect01">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormSelect id="inputGroupSelect02">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CInputGroupText component="label" for="inputGroupSelect02">Options</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline">Button</CButton>
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CInputGroup>
<CInputGroup>
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CButton type="button" color="secondary" variant="outline">Button</CButton>
</CInputGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Custom file input</h4>
<Example href="forms/input-group.html#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">Upload</CInputGroupText>
<CFormInput type="file" id="inputGroupFile01"/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput type="file" id="inputGroupFile02"/>
<CInputGroupText component="label" for="inputGroupFile02">Upload</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
<CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
</CInputGroup>
<CInputGroup>
<CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
</CInputGroup>
</Example>
</CCol>
</CRow>
<CRow>
<CCol md="8">
<h4 class="mt-4">Horizonstal form</h4>
<Example href="forms/layout.html#horizontal-form">
<CForm>
<CRow class="mb-3">
<CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">Email</CFormLabel>
<CCol sm="10">
<CFormInput type="email" id="inputEmail3"/>
</CCol>
</CRow>
<CRow class="mb-3">
<CFormLabel for="inputPassword3" class="col-sm-2 col-form-label">Password</CFormLabel>
<CCol sm="10">
<CFormInput type="password" id="inputPassword3"/>
</CCol>
</CRow>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<CCol sm="10">
<CFormCheck type="radio" name="gridRadios" id="gridRadios1" value="option1" label="First radio" defaultChecked/>
<CFormCheck type="radio" name="gridRadios" id="gridRadios2" value="option2" label="Second radio"/>
<CFormCheck type="radio" name="gridRadios" id="gridRadios3" value="option3" label="Third disabled radio" disabled/>
</CCol>
</fieldset>
<CRow class="mb-3">
<div class="col-sm-10 offset-sm-2">
<CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
</div>
</CRow>
<CButton type="submit">Sign in</CButton>
</CForm>
</Example>
</CCol>
</CRow>
<h4 class="mt-4">Vue form validation custom styles</h4>
<Example href="forms/validation.html#custom-styles">
<CForm class="row g-3 needs-validation" noValidate :validated="validatedCustom01" @submit="handleSubmitCustom01">
<CCol md="4">
<CFormLabel for="validationCustom01">Email</CFormLabel>
<CFormInput id="validationCustom01" defaultValue="Mark" required/>
<CFormFeedback valid>
Looks good!
</CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationCustom02">Email</CFormLabel>
<CFormInput id="validationCustom02" defaultValue="Otto" required/>
<CFormFeedback valid>
Looks good!
</CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput id="validationCustomUsername" defaultValue="" aria-describedby="inputGroupPrepend" required/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CFormLabel for="validationCustom03">City</CFormLabel>
<CFormInput id="validationCustom03" required/>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04">
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationCustom05">City</CFormLabel>
<CFormInput id="validationCustom05" required/>
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
<h4 class="mt-4">Vue form validation browser defaults</h4>
<Example href="forms/validation.html#browser-defaults">
<CForm class="row g-3 needs-validation" :validated="validatedDefault01" @submit="handleSubmitDefault01">
<CCol md="4">
<CFormLabel for="validationDefault01">Email</CFormLabel>
<CFormInput id="validationDefault01" defaultValue="Mark" required/>
<CFormFeedback valid>
Looks good!
</CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationDefault02">Email</CFormLabel>
<CFormInput id="validationDefault02" defaultValue="Otto" required/>
<CFormFeedback valid>
Looks good!
</CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationDefaultUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormInput id="validationDefaultUsername" defaultValue="" aria-describedby="inputGroupPrepend02" required/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CFormLabel for="validationDefault03">City</CFormLabel>
<CFormInput id="validationDefault03" required/>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04">
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationDefault05">City</CFormLabel>
<CFormInput id="validationDefault05" required/>
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
<h4 class="mt-4">Validation styles for components</h4>
<Example href="forms/validation.html#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
<CFormTextarea id="validationTextarea" placeholder="Required example textarea" invalid required></CFormTextarea>
<CFormFeedback invalid>
Please enter a message in the textarea.
</CFormFeedback>
</div>
<CFormCheck class="mb-3" id="validationFormCheck1" label="Check this checkbox" required/>
<CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
<CFormCheck type="radio" name="radio-stacked" id="validationFormCheck2" label="Check this checkbox" required/>
<CFormCheck class="mb-3" type="radio" name="radio-stacked" id="validationFormCheck3" label="Or toggle this other radio" required/>
<CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
<div class="mb-3">
<CFormSelect required aria-label="select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
</div>
<div class="mb-3">
<CFormInput type="file" id="validationTextarea" aria-label="file example" required />
<CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
</div>
<div class="mb-3">
<CButton type="submit" color="primary" disabled>Submit form</CButton>
</div>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Forms",
data: () => {
return {
validatedCustom01: null,
validatedDefault01: null,
validatedTooltip01: null,
}
},
methods: {
handleSubmitCustom01(event) {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
this.validatedCustom01 = true
},
handleSubmitDefault01(event) {
const form = event.currentTarget
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
}
this.validatedDefault01 = true
},
}
};
</script>
src/views/base/ListGroups.vue
+177
View File
@@ -0,0 +1,177 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue List Groups</strong>
</CCardHeader>
<CCardBody>
<CRow>
<CCol md="6">
<h4>Basic example</h4>
<Example href="components/list-group.html#basic-example">
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Active items</h4>
<Example href="components/list-group.html#active-items">
<CListGroup>
<CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Disabled items</h4>
<Example href="components/list-group.html#disabled-items">
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Links</h4>
<Example href="components/list-group.html#links-and-buttons">
<CListGroup>
<CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem>
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem>
<CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem>
<CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Buttons</h4>
<Example href="components/list-group.html#links-and-buttons">
<CListGroup>
<CListGroupItem component="button" active>Cras justo odio</CListGroupItem>
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem component="button">Morbi leo risus</CListGroupItem>
<CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem>
<CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Flush</h4>
<Example href="components/list-group.html#flush">
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Horizonstal</h4>
<Example href="components/list-group.html#horizontal">
<template v-for="(item) in ['', '-sm', '-md', '-lg', '-xl', '-xxl']">
<CListGroup class="mb-2" :layout="'horizontal' + item">
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
</CListGroup>
</template>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Contextual classes</h4>
<Example href="components/list-group.html#contextual-classes">
<CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" :color="item">A simple {{item}} list group item</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Change component to link</h4>
<Example href="components/list-group.html#contextual-classes">
<CListGroup>
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" component="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Vue list groups with badge</h4>
<Example href="components/list-group.html#with-badges">
<CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio<CBadge color="primary" shape="rounded-pill">14</CBadge></CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in<CBadge color="primary" shape="rounded-pill">2</CBadge></CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus<CBadge color="primary" shape="rounded-pill">1</CBadge></CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Custom content</h4>
<Example href="components/list-group.html#custom-content">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<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>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<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>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<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>
</CListGroupItem>
</CListGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Checkboxes and radios</h4>
<Example href="components/list-group.html#checkboxes-and-radios">
<CListGroup>
<CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem>
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem>
<CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem>
<CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem>
<CListGroupItem><CFormCheck label="Vestibulum at eros"/></CListGroupItem>
</CListGroup>
</Example>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "ListGroups",
};
</script>
src/views/base/Navbars.vue
+440
View File
@@ -0,0 +1,440 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Navbars</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Basic usage of navbar</h4>
<Example href="components/navbar.html#basic-usage">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler @click="visible = !visible"/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Vue nav brand</h4>
<CRow>
<CCol md="6">
<Example href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Brand as link</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24"/>
</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24" class="d-inline-block align-top"/> CoreUI
</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
</CRow>
<h4 class="mt-4">Vue navbar with nav</h4>
<Example href="components/navbar.html#nav">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Features</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Pricing</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle>Dropdown link</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Vue navbar with form</h4>
<Example href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
</CForm>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Vue navbar with form on right side</h4>
<Example href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
</CForm>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Vue navbar with input group</h4>
<Example href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CForm class="container-fluid">
<CInputGroup>
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</CInputGroup>
</CForm>
</CNavbar>
</Example>
<h4 class="mt-4">Vue navbar with buttons</h4>
<Example href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CForm class="container-fluid justify-content-start">
<CButton type="button" color="success" variant="outline" class="me-2">Main button</CButton>
<CButton type="button" color="secondary" variant="outline" size="sm">Smaller button</CButton>
</CForm>
</CNavbar>
</Example>
<h4 class="mt-4">Vue navbar with text</h4>
<Example href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarText>Navbar text with an inline element</CNavbarText>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Vue navbar color schemes</h4>
<Example href="components/navbar.html#color-schemes">
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="light" variant="outline">Search</CButton>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
<br/>
<CNavbar expand="lg" colorScheme="dark" class="bg-primary">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="light" variant="outline">Search</CButton>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
<br/>
<CNavbar expand="lg" colorScheme="light" style="background-color:#e3f2fd;">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav>
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="primary" variant="outline">Search</CButton>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Vue navbar placement</h4>
<CRow>
<CCol md="6">
<Example href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Default</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-top">
<CContainer fluid>
<CNavbarBrand href="#">Fixed top</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-bottom">
<CContainer fluid>
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="sticky-top">
<CContainer fluid>
<CNavbarBrand href="#">Sticky top</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</CCol>
</CRow>
<h4 class="mt-4">Vue navbar responsive</h4>
<p>With no CNavbarBrand shown at the smallest breakpoint:</p>
<Example href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarBrand href="#">Hidden brand</CNavbarBrand>
<CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
</Example>
<p>With a brand name shown on the left and toggler on the right:</p>
<Example href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
</Example>
<p>With a toggler on the left and brand name on the right:</p>
<Example href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem>
<CNavLink href="#" active>
Home
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNavbarNav>
<CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/>
<CButton type="submit" color="success" variant="outline">Search</CButton>
</CForm>
</CCollapse>
</CContainer>
</CNavbar>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Navbars",
};
</script>
src/views/base/Navs.vue
+250
View File
@@ -0,0 +1,250 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Nav</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Base Nav</h4>
<Example href="components/nav.html#base-nav">
<CNav>
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Nav horizontal alignment</h4>
<Example href="components/nav.html#horizontal-alignment">
<CNav class="justify-content-center">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Nav right alignment</h4>
<Example href="components/nav.html#horizontal-alignment">
<CNav class="justify-content-end">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Vertical nav</h4>
<Example href="components/nav.html#vertical">
<CNav class="flex-column">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Tabs nav</h4>
<Example href="components/nav.html#tabs">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Pills nav</h4>
<Example href="components/nav.html#pills">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Fill nav</h4>
<Example href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Justified nav</h4>
<Example href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="justified">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Vue nav with dropdown</h4>
<Example href="components/nav.html#using-dropdowns">
<CNav>
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
<h4 class="mt-4">Vue pills nav with dropdown</h4>
<Example href="components/nav.html#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
Active
</CNavLink>
</CNavItem>
<CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Navs",
};
</script>
src/views/base/Paginations.vue
+181
View File
@@ -0,0 +1,181 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Pagination" href="components/pagination" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Pagination</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
We use a large block of connected links for our pagination, making
links hard to miss and easily scalable—all while providing large hit
areas. Pagination is built with list HTML elements so screen readers
can announce the number of available links. Use a wrapping
<code>&lt;nav&gt;</code> element to identify it as a navigation
section to screen readers and other assistive technologies.
</p>
<p class="text-medium-emphasis small">
In addition, as pages likely have more than one such navigation
section, it&#39;s advisable to provide a descriptive
<code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect
its purpose. For example, if the pagination component is used to
navigate between a set of search results, an appropriate label could
be <code>aria-label=&#34;Search results pages&#34;</code>.
</p>
<DocsExample href="components/pagination">
<CPagination aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Pagination</strong> <small>Working with icons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Looking to use an icon or symbol in place of text for some
pagination links? Be sure to provide proper screen reader support
with <code>aria</code> attributes.
</p>
<DocsExample href="components/pagination#working-with-icons">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Pagination</strong> <small>Disabled and active states</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Pagination links are customizable for different circumstances. Use
<code>disabled</code> for links that appear un-clickable and
<code>.active</code> to indicate the current page.
</p>
<p class="text-medium-emphasis small">
While the <code>disabled</code> prop uses
<code>pointer-events: none</code> to <em>try</em> to disable the
link functionality of <code>&lt;a&gt;</code>s, that CSS property is
not yet standardized and doesn&#39;taccount for keyboard navigation.
As such, we always add <code>tabindex=&#34;-1&#34;</code> on
disabled links and use custom JavaScript to fully disable their
functionality.
</p>
<DocsExample href="components/pagination#disabled-and-active-states">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
</CPaginationItem>
<CPaginationItem active>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</CPaginationItem>
</CPagination>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Pagination</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Fancy larger or smaller pagination? Add
<code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for
additional sizes.
</p>
<DocsExample href="components/pagination#sizing">
<CPagination size="lg" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</DocsExample>
<DocsExample href="components/pagination#sizing">
<CPagination size="sm" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Pagination</strong> <small>Alignment</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Change the alignment of pagination components with
<a href="https://coreui.io/docs/utilities/flex/"
>flexbox utilities</a
>.
</p>
<DocsExample href="components/pagination#aligment">
<CPagination
class="justify-content-center"
aria-label="Page navigation example"
>
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</DocsExample>
<DocsExample href="components/pagination#aligment">
<CPagination
class="justify-content-end"
aria-label="Page navigation example"
>
<CPaginationItem disabled>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
<CPaginationItem>2</CPaginationItem>
<CPaginationItem>3</CPaginationItem>
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Paginations",
};
</script>
src/views/base/Popovers.vue
+36
View File
@@ -0,0 +1,36 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Popovers</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Vue popover example</h4>
<Example href="directives/popover.html#example">
<CButton
color="danger"
size="lg"
v-c-popover="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}"
>
Click to toggle popover
</CButton>
</Example>
<h4 class="mt-4">Vue popovers four directions</h4>
<Example href="directives/popover.html#four-directions">
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Popover on top</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Popovers",
};
</script>
src/views/base/Progress.vue
+214
View File
@@ -0,0 +1,214 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Progress" href="components/progress" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Progress components are built with two HTML elements, some CSS to
set the width, and a few attributes. We don&#39;tuse
<a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"
>
the HTML5 <code>&lt;progress&gt;</code> element
</a>
, ensuring you can stack progress bars, animate them, and place text
labels over them.
</p>
<Example href="components/progress">
<CProgress class="mb-3">
<CProgressBar :value="0" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar :value="25" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar :value="50" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar :value="75" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar :value="100" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Labels</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add labels to your progress bars by placing text within the
<code>&lt;CProgressBar&gt;</code>.
</p>
<Example href="components/progress#labels">
<CProgress class="mb-3">
<CProgressBar :value="25">25%</CProgressBar>
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Height</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
We only set a <code>height</code> value on the
<code>&lt;CProgress&gt;</code>, so if you change that value the
inner <code>&lt;CProgressBar&gt;</code> will automatically resize
accordingly.
</p>
<Example href="components/progress#height">
<CProgress :height="1" class="mb-3">
<CProgressBar :value="25"></CProgressBar>
</CProgress>
<CProgress :height="20" class="mb-3">
<CProgressBar :value="25"></CProgressBar>
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Backgrounds</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use <code>color</code> prop to change the appearance of individual
progress bars.
</p>
<Example href="components/progress#backgrounds">
<CProgress class="mb-3">
<CProgressBar color="success" :value="25" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="info" :value="50" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="warning" :value="75" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="danger" :value="100" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Multiple bars</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need.
</p>
<Example href="components/progress#multiple-bars">
<CProgress class="mb-3">
<CProgressBar :value="15" />
<CProgressBar color="success" :value="30" />
<CProgressBar color="info" :value="20" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Striped</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>variant=&#34;striped&#34;</code> to any
<code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
over the progress bar&#39;s background color.
</p>
<Example href="components/progress#striped">
<CProgress class="mb-3">
<CProgressBar color="success" variant="striped" :value="25" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="info" variant="striped" :value="50" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="warning" variant="striped" :value="75" />
</CProgress>
<CProgress class="mb-3">
<CProgressBar color="danger" variant="striped" :value="100" />
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Animated stripes</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
The striped gradient can also be animated. Add
<code>animated</code> property to
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to
left via CSS3 animations.
</p>
<Example href="components/progress#animated-stripes">
<CProgress class="mb-3">
<CProgressBar
color="success"
variant="striped"
animated
:value="25"
/>
</CProgress>
<CProgress class="mb-3">
<CProgressBar
color="info"
variant="striped"
animated
:value="50"
/>
</CProgress>
<CProgress class="mb-3">
<CProgressBar
color="warning"
variant="striped"
animated
:value="75"
/>
</CProgress>
<CProgress class="mb-3">
<CProgressBar
color="danger"
variant="striped"
animated
:value="100"
/>
</CProgress>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Progress",
};
</script>
src/views/base/Switches.vue
+41
View File
@@ -0,0 +1,41 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Switches</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios.html#switches">
<CRow>
<CCol md="4">
<CFormSwitch label="Default switch checkbox input" />
<CFormSwitch label="Checked switch checkbox input" defaultChecked />
<CFormSwitch label="Disabled switch checkbox input" disabled />
<CFormSwitch label="Disabled checked switch checkbox input" defaultChecked disabled />
</CCol>
<CCol md="4">
<CFormSwitch label="Large switch" size="lg"/>
<CFormSwitch label="Large switch" defaultChecked size="lg"/>
<CFormSwitch label="Large switch" disabled size="lg"/>
<CFormSwitch label="Large switch" defaultChecked disabled size="lg"/>
</CCol>
<CCol md="4">
<CFormSwitch label="Extra-large switch" size="xl"/>
<CFormSwitch label="Extra-large switch" defaultChecked size="xl"/>
<CFormSwitch label="Extra-large switch" disabled size="xl"/>
<CFormSwitch label="Extra-large switch" defaultChecked disabled size="xl"/>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Switches",
};
</script>
src/views/base/Tables.vue
+995
View File
@@ -0,0 +1,995 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Table" href="components/table" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Using the most basic table CoreUI, here&#39;s how
<code>&lt;CTable&gt;</code>-based tables look in CoreUI.
</p>
<Example href="components/table">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Variants</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use contextual classes to color tables, table rows or individual
cells.
</p>
<Example href="components/table#variants">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">Default</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="primary">
<CTableHeaderCell scope="row">Primary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="secondary">
<CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="success">
<CTableHeaderCell scope="row">Success</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="danger">
<CTableHeaderCell scope="row">Danger</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="warning">
<CTableHeaderCell scope="row">Warning</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="info">
<CTableHeaderCell scope="row">Info</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="light">
<CTableHeaderCell scope="row">Light</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
<CTableRow color="dark">
<CTableHeaderCell scope="row">Dark</CTableHeaderCell>
<CTableDataCell>Cell</CTableDataCell>
<CTableDataCell>Cell</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Striped rows</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use <code>striped</code> property to add zebra-striping to any table
row within the <code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#striped-rows">
<CTable striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<p class="text-medium-emphasis small">
These classes can also be added to table variants:
</p>
<Example href="components/table#striped-rows">
<CTable color="dark" striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#striped-rows">
<CTable color="success" striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Hoverable rows</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use <code>hover</code> property to enable a hover state on table
rows within a <code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#hoverable-rows">
<CTable hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
<CTable striped hover>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Active tables</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#active-tables">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow active>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2" active>
Larry the Bird
</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#active-tables">
<CTable color="dark">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow active>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2" active>
Larry the Bird
</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Bordered tables</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>bordered</code> property for borders on all sides of the
table and cells.
</p>
<Example href="components/table#bordered-tables">
<CTable bordered>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<p class="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities </a
> can be added to change colors:
</p>
<Example href="components/table#bordered-tables">
<CTable bordered borderColor="primary">
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Tables without borders</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>borderless</code> property for a table without borders.
</p>
<Example href="components/table#tables-without-borders">
<CTable borderless>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#tables-without-borders">
<CTable color="dark" borderless>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Small tables</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add <code>small</code> property to make any
<code>&lt;CTable&gt;</code> more compact by cutting all cell
<code>padding</code> in half.
</p>
<Example href="components/table#small-tables">
<CTable small>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Vertical alignment</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Table cells of <code>&lt;CTableHead&gt;</code> are always vertical
aligned to the bottom. Table cells in
<code>&lt;CTableBody&gt;</code> inherit their alignment from
<code>&lt;CTable&gt;</code> and are aligned to the the top by
default. Use the align property to re-align where needed.
</p>
<Example href="components/table#vertical-alignment">
<CTable align="middle" responsive>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col" class="w-25">
Heading 1
</CTableHeaderCell>
<CTableHeaderCell scope="col" class="w-25">
Heading 2
</CTableHeaderCell>
<CTableHeaderCell scope="col" class="w-25">
Heading 3
</CTableHeaderCell>
<CTableHeaderCell scope="col" class="w-25">
Heading 4
</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from
the table
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from
the table
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from
the table
</CTableDataCell>
<CTableDataCell>
This here is some placeholder text, intended to take up
quite a bit of vertical space, to demonsCTableRowate how the
vertical alignment works in the preceding cells.
</CTableDataCell>
</CTableRow>
<CTableRow align="bottom">
<CTableDataCell>
This cell inherits <code>vertical-align: bottom;</code> from
the table row
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: bottom;</code> from
the table row
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: bottom;</code> from
the table row
</CTableDataCell>
<CTableDataCell>
This here is some placeholder text, intended to take up
quite a bit of vertical space, to demonsCTableRowate how the
vertical alignment works in the preceding cells.
</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from
the table
</CTableDataCell>
<CTableDataCell>
This cell inherits <code>vertical-align: middle;</code> from
the table
</CTableDataCell>
<CTableDataCell align="top"
>This cell is aligned to the top.</CTableDataCell
>
<CTableDataCell>
This here is some placeholder text, intended to take up
quite a bit of vertical space, to demonsCTableRowate how the
vertical alignment works in the preceding cells.
</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Nesting</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Border styles, active styles, and table variants are not inherited
by nested tables.
</p>
<Example href="components/table#nesting">
<CTable striped>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell colSpan="4">
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col"
>Header</CTableHeaderCell
>
<CTableHeaderCell scope="col"
>Header</CTableHeaderCell
>
<CTableHeaderCell scope="col"
>Header</CTableHeaderCell
>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">A</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">B</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">C</CTableHeaderCell>
<CTableDataCell>First</CTableDataCell>
<CTableDataCell>Last</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CTableHeaderCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Table head</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Similar to tables and dark tables, use the modifier prop
<code>color=&#34;light&#34;</code> or
<code>color=&#34;dark&#34;</code> to make
<code>&lt;CTableHead&gt;</code>s appear light or dark gray.
</p>
<Example href="components/table#table-head">
<CTable>
<CTableHead color="light">
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Larry</CTableDataCell>
<CTableDataCell>the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#table-head">
<CTable>
<CTableHead color="dark">
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Table foot</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#table-foot">
<CTable>
<CTableHead color="light">
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
<CTableHead>
<CTableRow>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
<CTableDataCell>Footer</CTableDataCell>
</CTableRow>
</CTableHead>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Captions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
A <code>&lt;CTableCaption&gt;</code> functions like a heading for a
table. It helps users with screen readers to find a table and
understand what it&#39;s about and decide if they want to read it.
</p>
<Example href="components/table#captions">
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Larry</CTableDataCell>
<CTableDataCell>the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
<p class="text-medium-emphasis small">
You can also put the <code>&lt;CTableCaption&gt;</code> on the top
of the table with <code>caption=&#34;top&#34;</code>.
</p>
<Example href="components/table#captions">
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
<CTableRow>
<CTableHeaderCell scope="col">#</CTableHeaderCell>
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableHeaderCell scope="row">1</CTableHeaderCell>
<CTableDataCell>Mark</CTableDataCell>
<CTableDataCell>Otto</CTableDataCell>
<CTableDataCell>@mdo</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">2</CTableHeaderCell>
<CTableDataCell>Jacob</CTableDataCell>
<CTableDataCell>Thornton</CTableDataCell>
<CTableDataCell>@fat</CTableDataCell>
</CTableRow>
<CTableRow>
<CTableHeaderCell scope="row">3</CTableHeaderCell>
<CTableDataCell>Larry</CTableDataCell>
<CTableDataCell>the Bird</CTableDataCell>
<CTableDataCell>@twitter</CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Tables",
};
</script>
src/views/base/Tabs.vue
+73
View File
@@ -0,0 +1,73 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Tabs</strong>
</CCardHeader>
<CCardBody>
<Example href="components/tabs.html">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" @click="activeTabA=1">
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" @click="activeTabA=2">
Link
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" @click="activeTabA=3">
Link
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane :visible="activeTabA == 1">
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</CTabPane>
<CTabPane :visible="activeTabA == 2">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
accusamus tattooed echo park.
</CTabPane>
<CTabPane :visible="activeTabA == 3">
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
</CTabPane>
</CTabContent>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Tabs",
data: function(){
return {
activeTabA: 1,
activeTabB: 1
}
}
};
</script>
src/views/base/Tooltips.vue
+46
View File
@@ -0,0 +1,46 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Tooltips</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Tooltips example</h4>
<Example href="directives/tooltip.html">
<p class="text-medium-emphasis">
Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
haven't heard of them.
Photo booth beard raw denim letterpress vegan messenger
bag stumptown. Farm-to-table seitan, mcsweeney's fixie
sustainable quinoa 8-bit american apparel
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
terry richardson vinyl chambray. Beard stumptown,
cardigans banh mi lomo thundercats. Tofu biodiesel
williamsburg marfa, four loko mcsweeney''s cleanse
vegan chambray. A really ironic artisan
<CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
scenester farm-to-table banksy Austin
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
freegan cred raw denim single-origin coffee viral.
</p>
</Example>
<h4 class="mt-4">Tooltips placements</h4>
<Example href="directives/tooltip.html">
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Tooltip on top</CButton>
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Tooltip on right</CButton>
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Tooltip on bottom</CButton>
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Tooltips",
};
</script>
src/views/buttons/BrandButtons.vue
+81
View File
@@ -0,0 +1,81 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Brand Buttons</strong>
</CCardHeader>
<CCardBody>
TODO: check did I should remove brand-buttons
<Example href="breadcrumbs">
<template v-for="(brandName, key) in brands" :key="key">
<CButton
:name="brandName"
:color="brandName"
class="btn-brand"
>
<CIcon :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
<template v-for="(brandName, key) in brands" :key="key">
<CButton
:name="brandName"
size="sm"
:color="brandName"
class="btn-brand"
>
<CIcon size="sm" :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
<template v-for="(brandName, key) in brands" :key="key">
<CButton
:name="brandName"
size="lg"
:color="brandName"
class="btn-brand"
>
<CIcon size="lg" :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "BrandButtons",
data: function(){
return {
brands: [
'facebook',
'twitter',
'linkedin',
'flickr',
'tumblr',
'xing',
'github',
'stackoverflow',
'youtube',
'dribbble',
'instagram',
'pinterest',
'vk',
'yahoo',
'behance',
'reddit',
'vimeo'
]
}
}
};
</script>
src/views/buttons/ButtonDropdowns.vue
+305
View File
@@ -0,0 +1,305 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Button Dropdowns</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Single button</h4>
<CRow>
<CCol md="6">
<Example href="components/dropdown.html#single-button">
<CDropdown color="secondary">
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCol>
<CCol md="6">
<Example href="components/dropdown.html#single-button">
<CDropdown color="secondary" togglerText="Dropdown button">
<CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</CCol>
</CRow>
<Example href="components/dropdown.html#single-button">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CDropdownToggle :color="item">{{item}}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
</Example>
<h4 class="mt-4">Split button</h4>
<Example href="components/dropdown.html#split-button">
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
<CDropdown :color="item" :togglerText="item" variant="btn-group">
<CButton :color="item">{{ item }}</CButton>
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
</Example>
<h4 class="mt-4">Sizing</h4>
<Example href="components/dropdown.html#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="lg">Large split button</CButton>
<CDropdownToggle color="secondary" size="lg" split>Large button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CButton color="secondary" size="sm">Small split button</CButton>
<CDropdownToggle color="secondary" size="sm" split>Small button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<h4 class="mt-4">Dark dropdowns</h4>
<Example href="components/dropdown.html#dark-dropdowns">
<CDropdown color="secondary" dark>
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<p>In navbar:</p>
<Example href="components/dropdown.html#dark-dropdowns">
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarNav>
<CDropdown dark variant="nav-item">
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CNavbarNav>
</CContainer>
</CNavbar>
</Example>
<h4 class="mt-4">Directions</h4>
<Example href="components/dropdown.html#directions">
<CDropdown color="secondary" direction="dropup">
<CDropdownToggle color="secondary">Dropup</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown color="secondary" direction="dropup">
<CButton color="secondary">Split dropup</CButton>
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown.html#directions">
<CDropdown color="secondary" direction="dropend">
<CDropdownToggle color="secondary">Dropend</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown color="secondary" direction="dropend">
<CButton color="secondary">Split dropend</CButton>
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown.html#directions">
<CDropdown color="secondary" direction="dropstart">
<CDropdownToggle color="secondary">Dropstart</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButtonGroup>
<CDropdown color="secondary" direction="dropstart">
<CDropdownToggle color="secondary" split/>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButton color="secondary">Split dropstart</CButton>
</CButtonGroup>
</Example>
<h4 class="mt-4">Responsive alignment</h4>
<Example href="components/dropdown.html#responsive-alignment">
<CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
<CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown.html#responsive-alignment">
<CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
<CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<h4 class="mt-4">Dropdown menu content examples</h4>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded py-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
</div>
</Example>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded py-2">
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</div>
</Example>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded p-4 text-muted" style="max-width: 200px">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</Example>
<Example href="components/dropdown.html#menu-content">
<div class="border rounded py-2">
<CForm class="px-4 py-4">
<div class="mb-3">
<CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
</div>
<div class="mb-3">
<CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
</div>
<div class="mb-3">
<CFormCheck id="dropdownCheck" label="Remember me"/>
</div>
<CButton type="submit">Sign in</CButton>
</CForm>
<CDropdownDivider/>
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
<CDropdownItem href="#">Forgot password?</CDropdownItem>
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "ButtonDropdowns",
};
</script>
src/views/buttons/ButtonGroups.vue
+232
View File
@@ -0,0 +1,232 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Button Groups</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Basic example</h4>
<CRow>
<CCol md="6">
<Example href="components/button-group.html#basic-example">
<CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton>
<CButton color="primary">Middle</CButton>
<CButton color="primary">Right</CButton>
</CButtonGroup>
</Example>
</CCol>
<CCol md="6">
<Example href="components/button-group.html#basic-example">
<CButtonGroup>
<CButton href="#" color="primary" active>Active link</CButton>
<CButton href="#" color="primary">Link</CButton>
<CButton href="#" color="primary">Link</CButton>
</CButtonGroup>
</Example>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<h4 class="mt-4">Mixed styles</h4>
<Example href="components/button-group.html#mixed-styles">
<CButtonGroup role="group" aria-label="Basic mixed styles example">
<CButton color="danger">Left</CButton>
<CButton color="warning">Middle</CButton>
<CButton color="success">Right</CButton>
</CButtonGroup>
</Example>
</CCol>
<CCol md="6">
<h4 class="mt-4">Outlined styles</h4>
<Example href="components/button-group.html#outlined-styles">
<CButtonGroup role="group" aria-label="Basic outlined example">
<CButton color="primary" variant="outline">Left</CButton>
<CButton color="primary" variant="outline">Middle</CButton>
<CButton color="primary" variant="outline">Right</CButton>
</CButtonGroup>
</Example>
</CCol>
</CRow>
<h4 class="mt-4">Checkbox and radio button groups</h4>
<CRow>
<CCol md="6">
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
</CButtonGroup>
</Example>
</CCol>
<CCol md="6">
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
</CButtonGroup>
</Example>
</CCol>
</CRow>
<h4 class="mt-4">Button toolbar</h4>
<Example href="components/button-group.html#button-toolbar">
<CButtonToolbar role="group" aria-label="Toolbar with button groups">
<CButtonGroup class="me-2" role="group" aria-label="First group">
<CButton color="primary">1</CButton>
<CButton color="primary">2</CButton>
<CButton color="primary">3</CButton>
<CButton color="primary">4</CButton>
</CButtonGroup>
<CButtonGroup class="me-2" role="group" aria-label="Second group">
<CButton color="secondary">5</CButton>
<CButton color="secondary">6</CButton>
<CButton color="secondary">7</CButton>
</CButtonGroup>
<CButtonGroup class="me-2" role="group" aria-label="Third group">
<CButton color="info">8</CButton>
</CButtonGroup>
</CButtonToolbar>
</Example>
<Example href="components/button-group.html#button-toolbar">
<CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups">
<CButtonGroup class="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline">1</CButton>
<CButton color="secondary" variant="outline">2</CButton>
<CButton color="secondary" variant="outline">3</CButton>
<CButton color="secondary" variant="outline">4</CButton>
</CButtonGroup>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
</CInputGroup>
</CButtonToolbar>
<CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups">
<CButtonGroup class="me-2" role="group" aria-label="First group">
<CButton color="secondary" variant="outline">1</CButton>
<CButton color="secondary" variant="outline">2</CButton>
<CButton color="secondary" variant="outline">3</CButton>
<CButton color="secondary" variant="outline">4</CButton>
</CButtonGroup>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
</CInputGroup>
</CButtonToolbar>
</Example>
<h4 class="mt-4">Sizing</h4>
<Example href="components/button-group.html#sizing">
<CButtonGroup size="lg" role="group" aria-label="Large button group">
<CButton color="dark" variant="outline">Left</CButton>
<CButton color="dark" variant="outline">Middle</CButton>
<CButton color="dark" variant="outline">Right</CButton>
</CButtonGroup>
<br/>
<CButtonGroup role="group" aria-label="Default button group">
<CButton color="dark" variant="outline">Left</CButton>
<CButton color="dark" variant="outline">Middle</CButton>
<CButton color="dark" variant="outline">Right</CButton>
</CButtonGroup>
<br/>
<CButtonGroup size="sm" role="group" aria-label="Small button group">
<CButton color="dark" variant="outline">Left</CButton>
<CButton color="dark" variant="outline">Middle</CButton>
<CButton color="dark" variant="outline">Right</CButton>
</CButtonGroup>
</Example>
<h4 class="mt-4">Vertical variation</h4>
<CRow>
<CCol md="4">
<Example href="components/button-group.html#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
</CButtonGroup>
</Example>
</CCol>
<CCol md="4">
<Example href="components/button-group.html#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CDropdown variant="btn-group">
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
</CCol>
<CCol md="4">
<Example href="components/button-group.html#vertical-variation">
<CButtonGroup vertical role="group" aria-label="Vertical button group">
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
</CButtonGroup>
</Example>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "ButtonGroups",
};
</script>
src/views/buttons/Buttons.vue
+185
View File
@@ -0,0 +1,185 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Buttons</strong>
</CCardHeader>
<CCardBody>
<Example href="components/button.html#examples">
<template v-for="(shape) in [null, 'rounded-pill', 'rounded-0', 'rounded-circle']">
<h4 class="mt-4">Shape {{ shape === null ? 'standard' : shape === 'rounded-0' ? ' square' : shape }}:</h4>
<CRow>
<CCol md="12" class="mt-4">
<strong>Standard</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" class="m-2" :shape="shape">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Standard disabled</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" disabled class="m-2" :shape="shape">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" class="m-2" :shape="shape">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline disabled</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" class="m-2" :shape="shape">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost disabled</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape">{{item}}</CButton>
</template>
</CCol>
</CRow>
<CRow>
<CCol md="12" class="mt-4">
<strong>Standard size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Standard disabled size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline disabled size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost disabled size="sm"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
</template>
</CCol>
</CRow>
<CRow>
<CCol md="12" class="mt-4">
<strong>Standard size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Standard disabled size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant outline disabled size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
<CCol md="12" class="mt-4">
<strong>Variant ghost disabled size="lg"</strong>
<br>
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
</template>
</CCol>
</CRow>
</template>
</Example>
<h4 class="mt-4">Block buttons</h4>
<Example href="components/button.html#block-buttons">
<div class="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
<br><br>
<div class="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
<br><br>
<div class="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
<br><br>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton color="primary" class="me-md-2">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Buttons",
};
</script>
src/views/charts/CChartBarExample.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<CChartBar
:data="defaultData"
/>
</template>
<script>
import { CChartBar } from '@coreui/vue-chartjs'
export default {
name: 'CChartBarExample',
components: { CChartBar },
computed: {
defaultData () {
return {
labels: ['months'],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
}
}
}
}
</script>
src/views/charts/CChartBarSimple.vue
+65
View File
@@ -0,0 +1,65 @@
<template>
<CChartBar
:data="computedData"
/>
</template>
<script>
import { CChartBar } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartBarSimple',
components: { CChartBar },
props: {
...CChartBar.props,
backgroundColor: {
type: String,
default: '#f87979'
},
pointHoverBackgroundColor: String,
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: Boolean
},
computed: {
defaultOptions () {
return {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
}
}
},
computedData () {
return {
labels: ['4','5','6','7','8','9','10','11','12','13','14','15'],
datasets: [
{
data: this.dataPoints,
backgroundColor: getColor(this.backgroundColor),
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
label: this.label,
barPercentage: 0.5,
categoryPercentage: 1
}
],
options: this.defaultOptions
}
},
}
}
</script>
src/views/charts/CChartDoughnutExample.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<CChartDoughnut
:data="defaultData"
/>
</template>
<script>
import { CChartDoughnut } from '@coreui/vue-chartjs'
export default {
name: 'CChartDoughnutExample',
components: { CChartDoughnut },
computed: {
defaultData () {
return {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
],
}
}
}
}
</script>
src/views/charts/CChartLineExample.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<CChartLine :data="defaultData"/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
export default {
name: 'CChartLineExample',
components: { CChartLine },
computed: {
defaultData () {
return {
labels: ['months', 'a', 'b', 'c', 'd'],
datasets: [
{
label: 'Data One',
backgroundColor: 'rgb(228,102,81,0.9)',
data: [30, 39, 10, 50, 30, 70, 35]
},
{
label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45]
}
]
}
}
}
}
</script>
src/views/charts/CChartLineSimple.vue
+83
View File
@@ -0,0 +1,83 @@
<template>
<CChartLine
:data="computedData"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartLineSimple',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: {
type: Boolean,
default: true
},
pointHoverBackgroundColor: String
},
computed: {
pointHoverColor () {
if (this.pointHoverBackgroundColor) {
return this.pointHoverBackgroundColor
} else if (this.backgroundColor !== 'transparent') {
return this.backgroundColor
}
return this.borderColor
},
computedData () {
return {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
datasets: [
{
data: this.dataPoints,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: getColor(this.pointHoverColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
],
options: {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
}
},
}
}
</script>
src/views/charts/CChartLineSimplePointed.vue
+100
View File
@@ -0,0 +1,100 @@
<template>
<CChartLine
:data="computedData"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartLineSimplePointed',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: {
type: Boolean,
default: true
},
pointHoverBackgroundColor: String
},
computed: {
pointHoverColor () {
if (this.pointHoverBackgroundColor) {
return this.pointHoverBackgroundColor
} else if (this.backgroundColor !== 'transparent') {
return this.backgroundColor
}
return this.borderColor
},
computedData () {
return {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
datasets: [
{
data: this.dataPoints,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: getColor(this.pointHoverColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
],
options: {
scales: {
xAxes: [
{
offset: true,
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent'
}
}
],
yAxes: [
{
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, this.dataPoints) - 5,
max: Math.max.apply(Math, this.dataPoints) + 5
}
}
]
},
elements: {
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
}
},
}
}
</script>
src/views/charts/CChartPieExample.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<CChartPie
:data="defaultData"
/>
</template>
<script>
import { CChartPie } from '@coreui/vue-chartjs'
export default {
name: 'CChartPieExample',
components: { CChartPie },
computed: {
defaultData () {
return {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
}
}
}
}
</script>
src/views/charts/CChartPolarAreaExample.vue
+43
View File
@@ -0,0 +1,43 @@
<template>
<CChartPolarArea
:data="defaultData"
/>
</template>
<script>
import { CChartPolarArea } from '@coreui/vue-chartjs'
export default {
name: 'CChartPolarAreaExample',
components: { CChartPolarArea },
computed: {
defaultData () {
return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.5)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.5)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
],
options: {
aspectRatio: 1.5
}
}
},
}
}
</script>
src/views/charts/CChartRadarExample.vue
+47
View File
@@ -0,0 +1,47 @@
<template>
<CChartRadar
:data="defaultData"
/>
</template>
<script>
import { CChartRadar } from '@coreui/vue-chartjs'
export default {
name: 'CChartRadarExample',
components: { CChartRadar },
computed: {
defaultData () {
return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: '2020',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: '2021',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
],
options: {
aspectRatio: 1.5
}
}
},
}
}
</script>
src/views/charts/Charts.vue
+76
View File
@@ -0,0 +1,76 @@
<template>
<CRow>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>
Line Chart
</CCardHeader>
<CCardBody>
<CChartLineExample/>
</CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple line chart</CCardHeader>
<CCardBody>
<CChartLineSimple border-color="success" labels="months"/>
</CCardBody>
</CCard>
</CCol>
<!--
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple pointed chart</CCardHeader>
<CCardBody><CChartLineSimplePointed :pointed="true" border-color="warning"/></CCardBody>
</CCard>
</CCol>
-->
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple bar chart</CCardHeader>
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import * as Charts from './index.js'
export default {
name: 'Charts',
components: {
...Charts
}
}
</script>
src/views/charts/index.js
+21
View File
@@ -0,0 +1,21 @@
import CChartLineSimple from './CChartLineSimple'
import CChartLineSimplePointed from './CChartLineSimplePointed'
import CChartBarSimple from './CChartBarSimple'
import CChartLineExample from './CChartLineExample'
import CChartBarExample from './CChartBarExample'
import CChartDoughnutExample from './CChartDoughnutExample'
import CChartRadarExample from './CChartRadarExample'
import CChartPieExample from './CChartPieExample'
import CChartPolarAreaExample from './CChartPolarAreaExample'
export {
CChartLineSimple,
CChartLineSimplePointed,
CChartBarSimple,
CChartLineExample,
CChartBarExample,
CChartDoughnutExample,
CChartRadarExample,
CChartPieExample,
CChartPolarAreaExample
}
src/views/forms/ChecksRadios.vue
+411
View File
@@ -0,0 +1,411 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Checkbox</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios">
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck
id="flexCheckChecked"
label="Checked checkbox"
defaultChecked
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Checkbox</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
</p>
<Example href="forms/checks-radios#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck
label="Disabled checked checkbox"
defaultChecked
disabled
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Radio</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> attribute and the associated
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
</p>
<Example href="forms/checks-radios#radios">
<CFormCheck
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
label="Default radio"
/>
<CFormCheck
type="radio"
name="flexRadioDefault"
id="flexRadioDefault2"
label="Checked radio"
defaultChecked
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Radio</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#disabled-1">
<CFormCheck
type="radio"
name="flexRadioDisabled"
id="flexRadioDisabled"
label="Disabled radio"
disabled
/>
<CFormCheck
type="radio"
name="flexRadioDisabled"
id="flexRadioCheckedDisabled"
label="Disabled checked radio"
defaultChecked
disabled
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Switches</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
A switch has the markup of a custom checkbox but uses the
<code>switch</code> boolean properly to render a toggle switch.
Switches also support the <code>disabled</code> attribute.
</p>
<Example href="forms/checks-radios#switches">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
/>
<CFormSwitch
label="Checked switch checkbox input"
id="formSwitchCheckChecked"
defaultChecked
/>
<CFormSwitch
label="Disabled switch checkbox input"
id="formSwitchCheckDisabled"
disabled
/>
<CFormSwitch
label="Disabled checked switch checkbox input"
id="formSwitchCheckCheckedDisabled"
defaultChecked
disabled
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Switches</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#sizes">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
/>
<CFormSwitch
size="lg"
label="Large switch checkbox input"
id="formSwitchCheckDefaultLg"
/>
<CFormSwitch
size="xl"
label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Checks and Radios</strong>
<small>Default layout (stacked)</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By default, any number of checkboxes and radios that are immediate
sibling will be vertically stacked and appropriately spaced.
</p>
<Example href="forms/checks-radios#default-stacked">
<CFormCheck id="defaultCheck1" label="Default checkbox" />
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</Example>
<Example href="forms/checks-radios#default-stacked">
<CFormCheck
type="radio"
name="exampleRadios"
id="exampleRadios1"
value="option1"
label="Default radio"
defaultChecked
/>
<CFormCheck
type="radio"
name="exampleRadios"
id="exampleRadios2"
value="option2"
label="Second default radio"
/>
<CFormCheck
type="radio"
name="exampleRadios"
id="exampleRadios3"
value="option3"
label="Disabled radio"
disabled
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Checks and Radios</strong> <small>Inline</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Group checkboxes or radios on the same horizontal row by adding
<code>inline</code> boolean property to any
<code>&lt;CFormCheck&gt;</code>.
</p>
<Example href="forms/checks-radios#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck
inline
id="inlineCheckbox3"
value="option3"
label="3 (disabled)"
disabled
/>
</Example>
<Example href="forms/checks-radios#inline">
<CFormCheck
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox1"
value="option1"
label="1"
/>
<CFormCheck
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox2"
value="option2"
label="2"
/>
<CFormCheck
inline
type="radio"
name="inlineRadioOptions"
id="inlineCheckbox3"
value="option3"
label="3 (disabled)"
disabled
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Checks and Radios</strong> <small>Without labels</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Remember to still provide some form of accessible name for assistive
technologies (for instance, using <code>aria-label</code>).
</p>
<Example href="forms/checks-radios#without-labels">
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div>
<div>
<CFormCheck
type="radio"
name="radioNoLabel"
id="radioNoLabel"
value=""
aria-label="..."
/>
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Toggle buttons</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create button-like checkboxes and radio buttons by using
<code>button</code> boolean property on the
<code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed.
</p>
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check"
autoComplete="off"
label="Single toggle"
/>
</Example>
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
autoComplete="off"
label="Checked"
defaultChecked
/>
</Example>
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
autoComplete="off"
label="Disabled"
disabled
/>
</Example>
<h3>Radio toggle buttons</h3>
<Example href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option1"
autoComplete="off"
label="Checked"
defaultChecked
/>
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option2"
autoComplete="off"
label="Radio"
/>
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option3"
autoComplete="off"
label="Radio"
disabled
/>
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
name="options"
id="option4"
autoComplete="off"
label="Radio"
/>
</Example>
<h3>Outlined styles</h3>
<p class="text-medium-emphasis small">
Different variants of button, such at the various outlined styles,
are supported.
</p>
<Example href="forms/checks-radios#toggle-buttons">
<div>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btn-check-outlined"
autoComplete="off"
label="Single toggle"
/>
</div>
<div>
<CFormCheck
:button="{ color: 'secondary', variant: 'outline' }"
id="btn-check-2-outlined"
autoComplete="off"
label="Checked"
defaultChecked
/>
</div>
<div>
<CFormCheck
:button="{ color: 'success', variant: 'outline' }"
type="radio"
name="options-outlined"
id="success-outlined"
autoComplete="off"
label="Radio"
defaultChecked
/>
<CFormCheck
:button="{ color: 'danger', variant: 'outline' }"
type="radio"
name="options-outlined"
id="danger-outlined"
autoComplete="off"
label="Radio"
/>
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "ChecksRadios",
};
</script>
src/views/forms/FloatingLabels.vue
+160
View File
@@ -0,0 +1,160 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Floating Label" href="forms/floating-label" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>
elements in <code>CFormFloating</code> to enable floating labels with textual form
fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
we can utilize a sibling selector (e.g., <code>~</code>).
</p>
<Example href="forms/floating-labels">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating>
<CFormFloating>
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
</Example>
<p class="text-medium-emphasis small">
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<Example href="forms/floating-labels">
<CFormFloating>
<CFormInput
type="email"
id="floatingInputValue"
placeholder="name@example.com"
defaultValue="test@example.com"
/>
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Textareas</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
<code>&lt;CFormInput&gt;</code>s.
</p>
<Example href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
placeholder="Leave a comment here"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</Example>
<p class="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<Example href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
id="floatingTextarea2"
style="height: 100px"
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Selects</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike
<code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the
<code>&lt;CFormLabel&gt;</code> in its floated state.
<strong>
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<Example href="forms/floating-labels#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Layout</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<Example href="forms/floating-labels#layout">
<CRow :xs="{ gutter: 2 }">
<CCol md>
<CFormFloating>
<CFormInput
type="email"
id="floatingInputGrid"
placeholder="name@example.com"
defaultValue="email@example.com"
/>
<CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel>
</CFormFloating>
</CCol>
<CCol md>
<CFormFloating>
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel>
</CFormFloating>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "FloatingLabels",
};
</script>
src/views/forms/FormControl.vue
+271
View File
@@ -0,0 +1,271 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Control" href="forms/form-control" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control">
<CForm>
<div class="mb-3">
<CFormLabel for="exampleFormControlInput1"
>Email address</CFormLabel
>
<CFormInput
type="email"
id="exampleFormControlInput1"
placeholder="name@example.com"
/>
</div>
<div class="mb-3">
<CFormLabel for="exampleFormControlTextarea1"
>Example textarea</CFormLabel
>
<CFormTextarea
id="exampleFormControlTextarea1"
rows="3"
></CFormTextarea>
</div>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Set heights using <code>size</code> property like
<code>size=&#34;lg&#34;</code> and
<code>size=&#34;sm&#34;</code>.
</p>
<Example href="forms/form-control#sizing">
<CFormInput
type="text"
size="lg"
placeholder="Large input"
aria-label="lg input example"
/>
<br />
<CFormInput
type="text"
placeholder="Default input"
aria-label="default input example"
/>
<br />
<CFormInput
type="text"
size="sm"
placeholder="Small input"
aria-label="sm input example"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
<Example href="forms/form-control#disabled">
<CFormInput
type="text"
placeholder="Disabled input"
aria-label="Disabled input example"
disabled
/>
<br />
<CFormInput
type="text"
placeholder="Disabled readonly input"
aria-label="Disabled input example"
disabled
readOnly
/>
<br />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>readOnly</code> boolean attribute on an input to
prevent modification of the input&#39;s value. Read-only inputs
appear lighter (just like disabled inputs), but retain the standard
cursor.
</p>
<Example href="forms/form-control#readonly">
<CFormInput
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
readOnly
/>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly plain text</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you want to have <code>&lt;input readonly&gt;</code> elements in
your form styled as plain text, use the
<code>plainText</code> boolean property to remove the default form
field styling and preserve the correct margin and padding.
</p>
<Example href="components/accordion">
<CRow class="mb-3">
<CFormLabel
for="staticEmail"
class="col-sm-2 col-form-label"
>
Email
</CFormLabel>
<div class="col-sm-10">
<CFormInput
type="text"
id="staticEmail"
defaultValue="email@example.com"
readOnly
plainText
/>
</div>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="inputPassword"
class="col-sm-2 col-form-label"
>
Password
</CFormLabel>
<div class="col-sm-10">
<CFormInput type="password" id="inputPassword" />
</div>
</CRow>
</Example>
<Example href="components/accordion">
<CForm class="row g-3">
<div class="col-auto">
<CFormLabel for="staticEmail2" class="visually-hidden">
Email
</CFormLabel>
<CFormInput
type="text"
id="staticEmail2"
defaultValue="email@example.com"
readOnly
plainText
/>
</div>
<div class="col-auto">
<CFormLabel
for="inputPassword2"
class="visually-hidden"
>
Password
</CFormLabel>
<CFormInput
type="password"
id="inputPassword2"
placeholder="Password"
/>
</div>
<div class="col-auto">
<CButton type="submit" class="mb-3">
Confirm identity
</CButton>
</div>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#file-input">
<div class="mb-3">
<CFormLabel for="formFile"
>Default file input example</CFormLabel
>
<CFormInput type="file" id="formFile" />
</div>
<div class="mb-3">
<CFormLabel for="formFileMultiple"
>Multiple files input example</CFormLabel
>
<CFormInput type="file" id="formFileMultiple" multiple />
</div>
<div class="mb-3">
<CFormLabel for="formFileDisabled"
>Disabled file input example</CFormLabel
>
<CFormInput type="file" id="formFileDisabled" disabled />
</div>
<div class="mb-3">
<CFormLabel for="formFileSm"
>Small file input example</CFormLabel
>
<CFormInput type="file" size="sm" id="formFileSm" />
</div>
<div>
<CFormLabel for="formFileLg"
>Large file input example</CFormLabel
>
<CFormInput type="file" size="lg" id="formFileLg" />
</div>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
id="exampleColorInput"
defaultValue="#563d7c"
title="Choose your color"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "FormControl",
};
</script>
src/views/forms/InputGroup.vue
+485
View File
@@ -0,0 +1,485 @@
<template>
<CRow>
<CCol xs=12>
<DocsCallout name="Input Group" href="forms/input-group" />
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Place one add-on or button on either side of an input. You may also place one on both
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<Example href="forms/input-group">
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput
placeholder="Recipient&#39;s username"
aria-label="Recipient&#39;s username"
aria-describedby="basic-addon2"
/>
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
</CInputGroup>
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
<CFormInput id="basic-url" aria-describedby="basic-addon3" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CFormInput aria-label="Amount (to the nearest dollar)" />
<CInputGroupText>.00</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput placeholder="Username" aria-label="Username" />
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Server" aria-label="Server" />
</CInputGroup>
<CInputGroup>
<CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Wrapping</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
custom form field validation within an input group. You may disable this with
<code>.flex-nowrap</code>.
</p>
<Example href="forms/input-group#wrapping">
<CInputGroup class="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself
and contents within will automatically resize—no need for repeating the form control
size classes on each element.
</p>
<p class="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p>
<Example href="forms/input-group#sizing">
<CInputGroup size="sm" class="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
/>
</CInputGroup>
<CInputGroup size="lg">
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
<CFormInput
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg"
/>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;s addon instead of text.
</p>
<Example href="forms/input-group#checkboxes-and-radios">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck
type="checkbox"
value=""
aria-label="Checkbox for following text input"
/>
</CInputGroupText>
<CFormInput aria-label="Text input with checkbox" />
</CInputGroup>
<CInputGroup>
<CInputGroupText>
<CFormCheck
type="radio"
value=""
aria-label="Radio button for following text input"
/>
</CInputGroupText>
<CFormInput aria-label="Text input with radio button" />
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Multiple inputs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
styles are only available for input groups with a single
<code>&lt;CFormInput&gt;</code>.
</p>
<Example href="forms/input-group#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormInput aria-label="First name" />
<CFormInput aria-label="Last name" />
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Multiple addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Button addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
</CButton>
<CFormInput
placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1"
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<CButton type="button" color="secondary" variant="outline" id="button-addon2">
Button
</CButton>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CFormInput placeholder="" aria-label="Example text with two button addons" />
</CInputGroup>
<CInputGroup>
<CFormInput
placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
/>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#buttons-with-dropdowns">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with dropdown button" />
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput aria-label="Text input with dropdown button" />
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
<CInputGroup>
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with 2 dropdown buttons" />
<CDropdown alignment="end" variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
Action
</CButton>
<CDropdownToggle color="secondary" variant="outline" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<CFormInput aria-label="Text input with segmented dropdown button" />
</CInputGroup>
<CInputGroup>
<CFormInput aria-label="Text input with segmented dropdown button" />
<CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline">
Action
</CButton>
<CDropdownToggle color="secondary" variant="outline" split />
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
<CDropdownDivider />
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">
Options
</CInputGroupText>
<CFormSelect id="inputGroupSelect01">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormSelect id="inputGroupSelect02">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CInputGroupText component="label" for="inputGroupSelect02">
Options
</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CInputGroup>
<CInputGroup>
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CButton type="button" color="secondary" variant="outline">
Button
</CButton>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">
Upload
</CInputGroupText>
<CFormInput type="file" id="inputGroupFile01" />
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput type="file" id="inputGroupFile02" />
<CInputGroupText component="label" for="inputGroupFile02">
Upload
</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CButton
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon03"
>
Button
</CButton>
<CFormInput
type="file"
id="inputGroupFile03"
aria-describedby="inputGroupFileAddon03"
aria-label="Upload"
/>
</CInputGroup>
<CInputGroup>
<CFormInput
type="file"
id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04"
aria-label="Upload"
/>
<CButton
type="button"
color="secondary"
variant="outline"
id="inputGroupFileAddon04"
>
Button
</CButton>
</CInputGroup>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "InputGroup",
};
</script>
src/views/forms/Layout.vue
+482
View File
@@ -0,0 +1,482 @@
<template>
<CRow>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Form grid</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
More complex forms can be built using our grid classes. Use these
for form layouts that require multiple columns, varied widths, and
additional alignment options.
</p>
<Example href="forms/layout#form-grid">
<CRow>
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
</CCol>
<CCol xs>
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Gutters</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By adding
<a href="https://coreui.io/docs/layout/gutters/"
>gutter modifier classes</a
>
, you can have control over the gutter width in as well the inline
as block direction.
</p>
<Example href="forms/layout#gutters">
<CRow class="g-3">
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
</CCol>
<CCol xs>
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
<p class="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<Example href="forms/layout#gutters">
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
<CFormInput type="email" id="inputEmail4" />
</CCol>
<CCol :md="6">
<CFormLabel for="inputPassword4">Password</CFormLabel>
<CFormInput type="password" id="inputPassword4" />
</CCol>
<CCol :xs="12">
<CFormLabel for="inputAddress">Address</CFormLabel>
<CFormInput id="inputAddress" placeholder="1234 Main St" />
</CCol>
<CCol :xs="12">
<CFormLabel for="inputAddress2">Address 2</CFormLabel>
<CFormInput
id="inputAddress2"
placeholder="Apartment, studio, or floor"
/>
</CCol>
<CCol :md="6">
<CFormLabel for="inputCity">City</CFormLabel>
<CFormInput id="inputCity" />
</CCol>
<CCol md="{4}">
<CFormLabel for="inputState">State</CFormLabel>
<CFormSelect id="inputState">
<option>Choose...</option>
<option>...</option>
</CFormSelect>
</CCol>
<CCol md="{2}">
<CFormLabel for="inputZip">Zip</CFormLabel>
<CFormInput id="inputZip" />
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="gridCheck"
label="Check me out"
/>
</CCol>
<CCol :xs="12">
<CButton type="submit" color="primary">Sign in</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Horizontal form</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create horizontal forms with the grid by adding the
<code>.row</code> class to form groups and using the
<code>.col-*-*</code> classes to specify the width of your labels
and controls. Be sure to add <code>.col-form-label</code> to your
<code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically
centered with their associated form controls.
</p>
<p class="text-medium-emphasis small">
At times, you maybe need to use margin or padding utilities to
create that perfect alignment you need. For example, we&#39;ve
removed the <code>padding-top</code> on our stacked radio inputs
label to better align the text baseline.
</p>
<Example href="forms/layout#horizontal-form">
<CForm>
<CRow class="mb-3">
<CFormLabel
for="inputEmail3"
class="col-sm-2 col-form-label"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput type="email" id="inputEmail3" />
</CCol>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="inputPassword3"
class="col-sm-2 col-form-label"
>
Password
</CFormLabel>
<CCol :sm="10">
<CFormInput type="password" id="inputPassword3" />
</CCol>
</CRow>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<CCol :sm="10">
<CFormCheck
type="radio"
name="gridRadios"
id="gridRadios1"
value="option1"
label="First radio"
defaultChecked
/>
<CFormCheck
type="radio"
name="gridRadios"
id="gridRadios2"
value="option2"
label="Second radio"
/>
<CFormCheck
type="radio"
name="gridRadios"
id="gridRadios3"
value="option3"
label="Third disabled radio"
disabled
/>
</CCol>
</fieldset>
<CRow class="mb-3">
<div class="col-sm-10 offset-sm-2">
<CFormCheck
type="checkbox"
id="gridCheck1"
label="Example checkbox"
/>
</div>
</CRow>
<CButton type="submit" color="primary">Sign in</CButton>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Horizontal form label sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Be sure to use <code>.col-form-label-sm</code> or
<code>.col-form-label-lg</code> to your
<code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to
correctly follow the size of <code>.form-control-lg</code> and
<code>.form-control-sm</code>.
</p>
<Example href="forms/layout#horizontal-form-label-sizing">
<CRow class="mb-3">
<CFormLabel
for="colFormLabelSm"
class="col-sm-2 col-form-label col-form-label-sm"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
class="form-control form-control-sm"
id="colFormLabelSm"
placeholder="col-form-label-sm"
/>
</CCol>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="colFormLabel"
class="col-sm-2 col-form-label"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
id="colFormLabel"
placeholder="col-form-label"
/>
</CCol>
</CRow>
<CRow>
<CFormLabel
for="colFormLabelLg"
class="col-sm-2 col-form-label col-form-label-lg"
>
Email
</CFormLabel>
<CCol :sm="10">
<CFormInput
type="email"
class="form-control form-control-lg"
id="colFormLabelLg"
placeholder="col-form-label-lg"
/>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Column sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
As shown in the previous examples, our grid system allows you to
place any number of
<code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>.
They&#39;ll split the available width equally between them. You may
also pick a subset of your columns to take up more or less space,
while the remaining <code>&lt;CCol&gt;</code>s equally split the
rest, with specific column classes like
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<Example href="forms/layout#column-sizing">
<CRow class="g-3">
<CCol sm="{7}">
<CFormInput placeholder="City" aria-label="City" />
</CCol>
<CCol sm>
<CFormInput placeholder="State" aria-label="State" />
</CCol>
<CCol sm>
<CFormInput placeholder="Zip" aria-label="Zip" />
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Auto-sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
The example below uses a flexbox utility to vertically center the
contents and changes
<code>&lt;CCol&gt;</code> to
<code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your columns
only take up as much space as needed. Put another way, the column
sizes itself based on the contents.
</p>
<Example href="forms/layout#auto-sizing">
<CForm class="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInput"
>
Name
</CFormLabel>
<CFormInput id="autoSizingInput" placeholder="Jane Doe" />
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInputGroup"
>
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput
id="autoSizingInputGroup"
placeholder="Username"
/>
</CInputGroup>
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingSelect"
>
Preference
</CFormLabel>
<CFormSelect id="autoSizingSelect">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck"
label="Remember me"
/>
</CCol>
<CCol xs="auto">
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
<p class="text-medium-emphasis small">
You can then remix that once again with size-specific column
classes.
</p>
<Example href="forms/layout#auto-sizing">
<CForm class="row gx-3 gy-2 align-items-center">
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeInputName"
>
Name
</CFormLabel>
<CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
</CCol>
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeInputGroupUsername"
>
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput
id="specificSizeInputGroupUsername"
placeholder="Username"
/>
</CInputGroup>
</CCol>
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeSelect"
>
Preference
</CFormLabel>
<CFormSelect id="specificSizeSelect">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol xs="auto">
<CFormCheck
type="checkbox"
id="autoSizingCheck2"
label="Remember me"
/>
</CCol>
<CCol xs="auto">
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Layout</strong> <small>Inline forms</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create
horizontal layouts. By adding
<a href="https://coreui.io/docs/layout/gutters/"
>gutter modifier classes</a
>, we will have gutters in horizontal and vertical directions. The
<code>.align-items-center</code> aligns the form elements to the
middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
</p>
<Example href="forms/layout#inline-forms">
<CForm class="row row-cols-lg-auto g-3 align-items-center">
<CCol :xs="12">
<CFormLabel
class="visually-hidden"
for="inlineFormInputGroupUsername"
>
Username
</CFormLabel>
<CInputGroup>
<CInputGroupText>@</CInputGroupText>
<CFormInput
id="inlineFormInputGroupUsername"
placeholder="Username"
/>
</CInputGroup>
</CCol>
<CCol :xs="12">
<CFormLabel
class="visually-hidden"
for="inlineFormSelectPref"
>
Preference
</CFormLabel>
<CFormSelect id="inlineFormSelectPref">
<option>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="inlineFormCheck"
label="Remember me"
/>
</CCol>
<CCol :xs="12">
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Layout",
};
</script>
src/views/forms/Range.vue
+92
View File
@@ -0,0 +1,92 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Range" href="forms/range" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small></small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Create custom
<code>&lt;input type=&#34;range&#34;&gt;</code> controls with
<code>&lt;CFormRange&gt;</code>.
</p>
<Example href="forms/range">
<CFormLabel for="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
<Example href="forms/range#disabled">
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Min and max</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Range inputs have implicit values for <code>min</code> and
<code>max</code>— <code>0</code> and <code>100</code>, respectively.
You may specify new values for those using the <code>min</code> and
<code>max</code> attributes.
</p>
<Example href="forms/range#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Steps</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
By default, range inputs &#34;snap&#34; to integer values. To change
this, you can specify a <code>step</code> value. In the example
below, we double the number of steps by using
<code>step=&#34;0.5&#34;</code>.
</p>
<Example href="forms/range#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
:min="0"
:max="5"
:step="0.5"
defaultValue="3"
id="customRange3"
/>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Range",
};
</script>
src/views/forms/Select.vue
+116
View File
@@ -0,0 +1,116 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Select" href="forms/select" />
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<Example href="forms/select">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
class="mb-3"
aria-label="Large select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormSelect
size="sm"
class="mb-3"
aria-label="Small select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
<p class="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
aria-label="Multiple select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<Example href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
aria-label="Multiple select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the <code>disabled</code> boolean attribute on a select to give
it a grayed out appearance and remove pointer events.
</p>
<Example href="forms/select#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Select",
};
</script>
src/views/forms/Validation.vue
+545
View File
@@ -0,0 +1,545 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Validation" href="forms/validation" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Custom styles</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
For custom CoreUI form validation messages, you&#39;ll need to add
the
<code>noValidate</code> boolean property to your
<code>&lt;CForm&gt;</code>. This disables the browser default
feedback tooltips, but still provides access to the form validation
APIs in JavaScript. Try to submit the form below; our JavaScript
will intercept the submit button and relay feedback to you. When
attempting to submit, you&#39;ll see the <code>:invalid</code> and
<code>:valid</code> styles applied to your form controls.
</p>
<p class="text-medium-emphasis small">
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
</p>
<Example href="forms/validation">
<CForm
class="row g-3 needs-validation"
noValidate
:validated="validatedCustom01"
@submit="handleSubmitCustom01"
>
<CCol md="4">
<CFormLabel for="validationCustom01">Email</CFormLabel>
<CFormInput
id="validationCustom01"
defaultValue="Mark"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationCustom02">Email</CFormLabel>
<CFormInput
id="validationCustom02"
defaultValue="Otto"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationCustomUsername"
defaultValue=""
aria-describedby="inputGroupPrepend"
required
/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CFormLabel for="validationCustom03">City</CFormLabel>
<CFormInput id="validationCustom03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04">
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationCustom05">City</CFormLabel>
<CFormInput id="validationCustom05" required />
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
label="Agree to terms and conditions"
required
/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Browser defaults</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Not interested in custom validation feedback messages or writing
JavaScript to change form behaviors? All good, you can use the
browser defaults. Try submitting the form below. Depending on your
browser and OS, you&#39;ll see a slightly different style of
feedback.
</p>
<p class="text-medium-emphasis small">
While these feedback styles cannot be styled with CSS, you can still
customize the feedback text through JavaScript.
</p>
<Example href="forms/validation#browser-defaults">
<CForm
class="row g-3 needs-validation"
:validated="validatedDefault01"
@submit="handleSubmitDefault01"
>
<CCol md="4">
<CFormLabel for="validationDefault01">Email</CFormLabel>
<CFormInput
id="validationDefault01"
defaultValue="Mark"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationDefault02">Email</CFormLabel>
<CFormInput
id="validationDefault02"
defaultValue="Otto"
required
/>
<CFormFeedback valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4">
<CFormLabel for="validationDefaultUsername"
>Username</CFormLabel
>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
<CFormInput
id="validationDefaultUsername"
defaultValue=""
aria-describedby="inputGroupPrepend02"
required
/>
<CFormFeedback invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6">
<CFormLabel for="validationDefault03">City</CFormLabel>
<CFormInput id="validationDefault03" required />
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04">
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3">
<CFormLabel for="validationDefault05">City</CFormLabel>
<CFormInput id="validationDefault05" required />
<CFormFeedback invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
label="Agree to terms and conditions"
required
/>
<CFormFeedback invalid>
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Server side</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
We recommend using client-side validation, but in case you require
server-side validation, you can indicate invalid and valid form
fields with <code>invalid</code> and <code>valid</code> boolean
properties.
</p>
<p class="text-medium-emphasis small">
For invalid fields, ensure that the invalid feedback/error message
is associated with the relevant form field using
<code>aria-describedby</code> (noting that this attribute allows
more than one <code>id</code> to be referenced, in case the field
already points to additional form text).
</p>
<Example href="forms/validation#server-side">
<CForm class="row g-3 needs-validation">
<CCol :md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer01"
defaultValue="Mark"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormInput
type="text"
id="validationServer02"
defaultValue="Otto"
valid
required
/>
<CFormFeedback valid>Looks good!</CFormFeedback>
</CCol>
<CCol :md="4">
<CFormLabel htmlFor="validationServerUsername"
>Username</CFormLabel
>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
<CFormInput
type="text"
id="validationServerUsername"
defaultValue=""
aria-describedby="inputGroupPrepend03"
invalid
required
/>
<CFormFeedback invalid
>Please choose a username.</CFormFeedback
>
</CInputGroup>
</CCol>
<CCol :md="6">
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
<CFormInput
type="text"
id="validationServer03"
invalid
required
/>
<CFormFeedback invalid
>Please provide a valid city.</CFormFeedback
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
<CFormSelect id="validationServer04" invalid>
<option disabled>Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback invalid
>Please provide a valid city.</CFormFeedback
>
</CCol>
<CCol :md="3">
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
<CFormInput
type="text"
id="validationServer05"
invalid
required
/>
<CFormFeedback invalid
>Please provide a valid zip.</CFormFeedback
>
</CCol>
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
label="Agree to terms and conditions"
invalid
required
/>
<CFormFeedback invalid
>You must agree before submitting.</CFormFeedback
>
</CCol>
<CCol :xs="12">
<CButton color="primary" type="submit"> Submit form </CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Supported elements</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Validation styles are available for the following form controls and
components:
</p>
<ul>
<li><code>&lt;CFormInput&gt;</code>s</li>
<li><code>&lt;CFormSelect&gt;</code>s</li>
<li><code>&lt;CFormCheck&gt;</code>s</li>
</ul>
<Example href="forms/validation#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label"
>Textarea</CFormLabel
>
<CFormTextarea
id="validationTextarea"
placeholder="Required example textarea"
invalid
required
></CFormTextarea>
<CFormFeedback invalid>
Please enter a message in the textarea.
</CFormFeedback>
</div>
<CFormCheck
class="mb-3"
id="validationFormCheck1"
label="Check this checkbox"
required
/>
<CFormFeedback invalid
>Example invalid feedback text</CFormFeedback
>
<CFormCheck
type="radio"
name="radio-stacked"
id="validationFormCheck2"
label="Check this checkbox"
required
/>
<CFormCheck
class="mb-3"
type="radio"
name="radio-stacked"
id="validationFormCheck3"
label="Or toggle this other radio"
required
/>
<CFormFeedback invalid
>More example invalid feedback text</CFormFeedback
>
<div class="mb-3">
<CFormSelect required aria-label="select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormFeedback invalid
>Example invalid select feedback</CFormFeedback
>
</div>
<div class="mb-3">
<CFormInput
type="file"
id="validationTextarea"
aria-label="file example"
required
/>
<CFormFeedback invalid
>Example invalid form file feedback</CFormFeedback
>
</div>
<div class="mb-3">
<CButton type="submit" color="primary" disabled
>Submit form</CButton
>
</div>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Validation</strong> <small>Tooltips</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If your form layout allows it, you can swap the text for the tooltip
to display validation feedback in a styled tooltip. Be sure to have
a parent with
<code>position: relative</code> on it for tooltip positioning. In
the example below, our column classes have this already, but your
project may require an alternative setup.
</p>
<Example href="forms/validation#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
:validated="validatedTooltip01"
@submit="handleSubmitTooltip01"
>
<CCol md="4" class="position-relative">
<CFormLabel for="validationTooltip01">Email</CFormLabel>
<CFormInput
id="validationTooltip01"
defaultValue="Mark"
required
/>
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4" class="position-relative">
<CFormLabel for="validationTooltip02">Email</CFormLabel>
<CFormInput
id="validationTooltip02"
defaultValue="Otto"
required
/>
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol>
<CCol md="4" class="position-relative">
<CFormLabel for="validationTooltipUsername"
>Username</CFormLabel
>
<CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
<CFormInput
id="validationTooltipUsername"
defaultValue=""
aria-describedby="inputGroupPrepend"
required
/>
<CFormFeedback tooltip invalid>
Please choose a username.
</CFormFeedback>
</CInputGroup>
</CCol>
<CCol md="6" class="position-relative">
<CFormLabel for="validationTooltip03">City</CFormLabel>
<CFormInput id="validationTooltip03" required />
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" class="position-relative">
<CFormLabel for="validationTooltip04">City</CFormLabel>
<CFormSelect id="validationTooltip04" required>
<option disabled value="">Choose...</option>
<option>...</option>
</CFormSelect>
<CFormFeedback tooltip invalid>
Please provide a valid city.
</CFormFeedback>
</CCol>
<CCol md="3" class="position-relative">
<CFormLabel for="validationTooltip05">City</CFormLabel>
<CFormInput id="validationTooltip05" required />
<CFormFeedback tooltip invalid>
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12" class="position-relative">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Validation",
data: () => {
return {
validatedCustom01: null,
validatedDefault01: null,
validatedTooltip01: null,
};
},
methods: {
handleSubmitCustom01(event) {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
this.validatedCustom01 = true;
},
handleSubmitDefault01(event) {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
this.validatedDefault01 = true;
},
handleSubmitTooltip01(event) {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
this.validatedTooltip01 = true;
},
},
};
</script>
src/views/icons/Brands.vue
+45
View File
@@ -0,0 +1,45 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Brands</strong>
</CCardHeader>
<CCardBody>
<!-- TODO: icons, brands and flags href-s to documentation -->
<Example href="">
<CRow class="text-center">
<template v-for="(brand, brandName) in brands" :key="brandName">
<CCol
class="mb-5"
col="3"
sm="2"
>
<CIcon size="lg" :content="brand"/>
<div>{{toKebabCase(brandName)}}</div>
</CCol>
</template>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import { brandSet as brands } from '@coreui/icons'
export default {
name: "Brands",
data: function(){
return {
brands: brands
}
},
methods: {
toKebabCase (str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
}
},
};
</script>
src/views/icons/CoreUIIcons.vue
+44
View File
@@ -0,0 +1,44 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue CoreUI Icons</strong>
</CCardHeader>
<CCardBody>
<Example href="">
<CRow class="text-center">
<template v-for="(icon, iconName) in freeSet" :key="iconName">
<CCol
class="mb-5"
col="3"
sm="2"
>
<CIcon :content="icon" size="lg"/>
<div>{{toKebabCase(iconName)}}</div>
</CCol>
</template>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import { freeSet } from '@coreui/icons'
export default {
name: "CoreUIIcons",
data: function(){
return {
freeSet: freeSet
}
},
methods: {
toKebabCase (str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
}
},
};
</script>
src/views/icons/Flags.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Flags</strong>
</CCardHeader>
<CCardBody>
<Example href="">
<CRow class="text-center">
<!-- For using the flags inline with text add the classes
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
span. If you want to have a squared version flag then add the class
flag-icon-squared as well. -->
<template v-for="(flag, flagName) in flagSet" :key="flagName">
<CCol
class="mb-5"
col="3"
sm="2"
>
<CIcon size="lg" :content="flag"/>
<div>{{toKebabCase(flagName)}}</div>
</CCol>
</template>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import { flagSet } from '@coreui/icons'
export default {
name: "Flags",
data: function(){
return {
flagSet: flagSet
}
},
methods: {
toKebabCase (str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
}
},
};
</script>
src/views/notifications/Alerts.vue
+82
View File
@@ -0,0 +1,82 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Alerts</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Alerts examples</h4>
<Example href="components/alert.html#examples">
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
<CAlert color="success">A simple success alert—check it out!</CAlert>
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
<CAlert color="warning">A simple warning alert—check it out!</CAlert>
<CAlert color="info">A simple info alert—check it out!</CAlert>
<CAlert color="light">A simple light alert—check it out!</CAlert>
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
</Example>
<h4 class="mt-4">Link color</h4>
<Example href="components/alert.html#link-color">
<CAlert color="primary">
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="secondary">
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="success">
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="danger">
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="warning">
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="info">
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="light">
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="dark">
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
</Example>
<h4 class="mt-4">Additional content</h4>
<Example href="components/alert.html#additional-content">
<CAlert color="success" v-bind:visible="true">
<CAlertHeading>Well done!</CAlertHeading>
<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>
</CAlert>
</Example>
<h4 class="mt-4">Dismissing</h4>
<Example href="components/alert.html#dismissing">
<CAlert color="warning" dismissible @dismiss="alert">
<strong>Go right ahead</strong> and click that dimiss over there on the right.
</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Alerts",
methods: {
alert: function(){
alert("👋 Well, hi there! Thanks for dismissing me.")
},
}
};
</script>
src/views/notifications/Badges.vue
+61
View File
@@ -0,0 +1,61 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Badges</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Basic usage</h4>
<Example href="components/badge.html#basic-usage">
<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
</Example>
<Example href="components/badge.html#basic-usage">
<CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
<br>
<CButton color="primary">
Profile <CBadge color="secondary">9</CBadge>
<span class="visually-hidden">unread messages</span>
</CButton>
</Example>
<h4 class="mt-4">Contextual variations</h4>
<Example href="components/badge.html#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
<CBadge color="warning">warning</CBadge>
<CBadge color="info">info</CBadge>
<CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge>
</Example>
<h4 class="mt-4">Pill badges</h4>
<Example href="components/badge.html#pill-badges">
<CBadge color="primary" shape="rounded-pill">primary</CBadge>
<CBadge color="success" shape="rounded-pill">success</CBadge>
<CBadge color="danger" shape="rounded-pill">danger</CBadge>
<CBadge color="warning" shape="rounded-pill">warning</CBadge>
<CBadge color="info" shape="rounded-pill">info</CBadge>
<CBadge color="light" shape="rounded-pill">light</CBadge>
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Badges",
};
</script>
src/views/notifications/Modals.vue
+433
View File
@@ -0,0 +1,433 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Modals</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Example</h4>
<Example href="components/modal.html#modal-components">
<CModal class="show d-block position-static" :backdrop="false" :keyboard="false" visible>
<CModalHeader dismiss>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>Modal body text goes here.</CModalBody>
<CModalFooter>
<CButton color="secondary">Close</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
<h4 class="mt-4">Live demo</h4>
<Example href="components/modal.html#live-demo">
<CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
<CModal :visible="visibleLiveDemo" @dismiss="() => { visibleLiveDemo = false }">
<CModalHeader dismiss @dismiss="() => { visibleLiveDemo = false }">
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
<CModalFooter>
<CButton color="secondary" @click="() => { visibleLiveDemo = false }">
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
<h4 class="mt-4">Static backdrop</h4>
<Example href="components/modal.html#static-backdrop">
<CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @dismiss="() => { visibleStaticBackdropDemo = false }">
<CModalHeader dismiss @dismiss="() => { visibleStaticBackdropDemo = false }">
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
<CModalFooter>
<CButton color="secondary" @click="() => { visibleStaticBackdropDemo = false }">
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
<h4 class="mt-4">Scrolling long content</h4>
<Example href="components/modal.html#scrolling-long-content">
<CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
<CModal :visible="visibleScrollingLongContentDemo" @dismiss="() => { visibleScrollingLongContentDemo = false }">
<CModalHeader dismiss @dismiss="() => { visibleScrollingLongContentDemo = false }">
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
</CModalBody>
</CModal>
</Example>
<h4 class="mt-4">Visible scrollable</h4>
<Example href="components/modal.html#scrolling-long-content">
<CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
<CModal scrollable :visible="visibleScrollableDemo" @dismiss="() => { visibleScrollableDemo = false }">
<CModalHeader dismiss @dismiss="() => { visibleScrollableDemo = false }">
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
auctor fringilla.
</p>
</CModalBody>
</CModal>
</Example>
<h4 class="mt-4">Vertically centered</h4>
<Example href="components/modal.html#vertically-centered">
<CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @dismiss="() => { visibleVerticallyCenteredDemo = false }">
<CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredDemo = false }">
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</CModalBody>
<CModalFooter>
<CButton color="secondary" @click="() => { visibleVerticallyCenteredDemo = false }">
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
<h4 class="mt-4">Vertically scrollable demo</h4>
<Example href="components/modal.html#vertically-centered">
<CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
<CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</CModalBody>
<CModalFooter>
<CButton color="secondary" @click="() => { visibleVerticallyCenteredScrollableDemo = false }">
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
<h4 class="mt-4">Tooltips and popovers</h4>
<Example href="components/modal.html#tooltips-and-popovers">
<CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
<CModal :visible="tooltipsAndPopoversDemo" @dismiss="() => { tooltipsAndPopoversDemo = false }">
<CModalHeader dismiss @dismiss="() => { tooltipsAndPopoversDemo = false }">
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>
<h5>Popover in a modal</h5>
<p>This <CButton color="secondary" v-c-popover="{header: 'Popover title', content: 'Popover body content is set in this property.'}">button</CButton></p>
<hr/>
<h5>Tooltips in a modal</h5>
<p>
<CLink v-c-tooltip="'Tooltip'">This link</CLink> and <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
</p>
</CModalBody>
<CModalFooter>
<CButton color="secondary" @click="() => { tooltipsAndPopoversDemo = false }">
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
<h4 class="mt-4">Optional sizes</h4>
<Example href="components/modal.html#optional-sizes">
<CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
<CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
<CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
<CModal size="xl" :visible="xlDemo" @dismiss="() => { xlDemo = false }">
<CModalHeader dismiss @dismiss="() => { xlDemo = false }">
<CModalTitle>Extra large modal</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
<CModal size="lg" :visible="lgDemo" @dismiss="() => { lgDemo = false }">
<CModalHeader dismiss @dismiss="() => { lgDemo = false }">
<CModalTitle>Large modal</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
<CModal size="sm" :visible="smDemo" @dismiss="() => { smDemo = false }">
<CModalHeader dismiss @dismiss="() => { smDemo = false }">
<CModalTitle>Small modal</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
</Example>
<h4 class="mt-4">Fullscreen Modal</h4>
<Example href="components/modal.html#fullscreen-modal">
<CButton color="primary" @click="() => { fullscreenDemo = true }">Full screen</CButton>
<CButton color="primary" @click="() => { fullscreenSmDemo = true }">Full screen below sm</CButton>
<CButton color="primary" @click="() => { fullscreenMdDemo = true }">Full screen below md</CButton>
<CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
<CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
<CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
<CModal fullscreen :visible="fullscreenDemo" @dismiss="() => { fullscreenDemo = false }">
<CModalHeader dismiss @dismiss="() => { xlDemo = false }">
<CModalTitle>Full screen</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
<CModal fullscreen="sm" :visible="fullscreenSmDemo" @dismiss="() => { fullscreenSmDemo = false }">
<CModalHeader dismiss @dismiss="() => { fullscreenSmDemo = false }">
<CModalTitle>Full screen below sm</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
<CModal fullscreen="md" :visible="fullscreenMdDemo" @dismiss="() => { fullscreenMdDemo = false }">
<CModalHeader dismiss @dismiss="() => { fullscreenMdDemo = false }">
<CModalTitle>Full screen below md</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
<CModal fullscreen="lg" :visible="fullscreenLgDemo" @dismiss="() => { fullscreenLgDemo = false }">
<CModalHeader dismiss @dismiss="() => { fullscreenLgDemo = false }">
<CModalTitle>Full screen below lg</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
<CModal fullscreen="xl" :visible="fullscreenXlDemo" @dismiss="() => { fullscreenXlDemo = false }">
<CModalHeader dismiss @dismiss="() => { fullscreenXlDemo = false }">
<CModalTitle>Full screen below xl</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @dismiss="() => { fullscreenXxlDemo = false }">
<CModalHeader dismiss @dismiss="() => { fullscreenXxlDemo = false }">
<CModalTitle>Full screen below xxl</CModalTitle>
</CModalHeader>
<CModalBody>
...
</CModalBody>
</CModal>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Modals",
data: function(){
return {
visibleLiveDemo: false,
visibleStaticBackdropDemo: false,
visibleScrollingLongContentDemo: false,
visibleScrollableDemo: false,
visibleVerticallyCenteredDemo: false,
visibleVerticallyCenteredScrollableDemo: false,
xlDemo: false,
lgDemo: false,
smDemo: false,
fullscreenDemo: false,
fullscreenSmDemo: false,
fullscreenMdDemo: false,
fullscreenLgDemo: false,
fullscreenXlDemo: false,
fullscreenXxlDemo: false,
}
}
};
</script>
src/views/theme/ColorTheme.vue
+21
View File
@@ -0,0 +1,21 @@
<template>
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
<div
:class="['theme-color w-75 rounded mb-3', color]"
style="padding-top:75%;"
></div>
<slot></slot>
<ColorView/>
</CCol>
</template>
<script>
//import ColorView from './ColorView'
export default {
name: 'ColorTheme',
// components: { ColorView },
props: {
color: String,
}
}
</script>
src/views/theme/Colors.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<CIcon icon="cil-drop"/> Theme colors
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6>
</ColorTheme>
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import ColorTheme from './ColorTheme'
export default {
name: "Colors",
components: { ColorTheme }
};
</script>
src/views/theme/Typography.vue
+222
View File
@@ -0,0 +1,222 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
Headings
</CCardHeader>
<CCardBody>
<p>Documentation and examples for Bootstrap typography,
including global settings, headings, body text, lists, and more.</p>
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Heading</CTableHeaderCell>
<CTableHeaderCell>Example</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Headings
</CCardHeader>
<CCardBody>
<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>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Display headings
</CCardHeader>
<CCardBody>
<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">
<CTable>
<CTableBody>
<CTableRow>
<CTableDataCell><span class="display-1">Display 1</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-2">Display 2</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-3">Display 3</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-4">Display 4</span></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Inline text elements
</CCardHeader>
<CCardBody>
<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><sCTableRowong>This line rendered as bold text.</sCTableRowong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Description list alignment
</CCardHeader>
<CCardBody>
<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 nunc.
</dd>
</dl>
</dd>
</dl>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Typography",
};
</script>
src/views/widgets/Widgets.vue
+742
View File
@@ -0,0 +1,742 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Widgets</strong>
</CCardHeader>
<CCardBody>
<Example href="">
<WidgetsStatsA />
</Example>
<Example href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'success', value: 75 }"
>
<template #text>Widget helper text</template>
<template #title>Widget title</template>
<template #value>89.9%</template>
</CWidgetStatsB>
</CCol>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'info', value: 75 }"
text="Widget helper text"
title="Widget title"
value="12.124"
/>
</CCol>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'warning', value: 75 }"
text="Widget helper text"
title="Widget title"
value="$98.111,00"
/>
</CCol>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
:progress="{ color: 'primary', value: 75 }"
text="Widget helper text"
title="Widget title"
value="2TB"
/>
</CCol>
</CRow>
</Example>
<Example href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
color="success"
inverse
:progress="{ value: 75 }"
>
<template #text>Widget helper text</template>
<template #title>Widget title</template>
<template #value>89.9%</template>
</CWidgetStatsB>
</CCol>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
color="info"
inverse
:progress="{ value: 75 }"
text="Widget helper text"
title="Widget title"
value="12.124"
/>
</CCol>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
color="warning"
inverse
:progress="{ value: 75 }"
text="Widget helper text"
title="Widget title"
value="$98.111,00"
/>
</CCol>
<CCol :xs="3">
<CWidgetStatsB
class="mb-3"
color="primary"
inverse
:progress="{ value: 75 }"
text="Widget helper text"
title="Widget title"
value="2TB"
/>
</CCol>
</CRow>
</Example>
<Example href="">
<CRow>
<CCol :xs="2">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
type="bar"
style="height: 40px; width: 80px"
:data="{
labels: widgetStatsE.labels,
datasets: [
{
backgroundColor: getStyle('--cui-danger'),
borderColor: 'transparent',
borderWidth: 1,
data: [
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
45, 47,
],
},
],
}"
:options="widgetStatsE.optionsBar"
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
type="bar"
style="height: 40px; width: 80px"
:data="{
labels: widgetStatsE.labels,
datasets: [
{
backgroundColor: getStyle('--cui-primary'),
borderColor: 'transparent',
borderWidth: 1,
data: [
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
45, 47,
],
},
],
}"
:options="widgetStatsE.optionsBar"
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
type="bar"
style="height: 40px; width: 80px"
:data="{
labels: widgetStatsE.labels,
datasets: [
{
backgroundColor: getStyle('--cui-warning'),
borderColor: 'transparent',
borderWidth: 1,
data: [
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
45, 47,
],
},
],
}"
:options="widgetStatsE.optionsBar"
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
type="line"
style="height: 40px; width: 80px"
:data="{
labels: widgetStatsE.labels,
datasets: [
{
backgroundColor: 'transparent',
borderColor: getStyle('--cui-success'),
borderWidth: 2,
data: [
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
45, 47,
],
},
],
}"
:options="widgetStatsE.optionsLine"
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
type="line"
style="height: 40px; width: 80px"
:data="{
labels: widgetStatsE.labels,
datasets: [
{
backgroundColor: 'transparent',
borderColor: getStyle('--cui-warning'),
borderWidth: 2,
data: [
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
45, 47,
],
},
],
}"
:options="widgetStatsE.optionsLine"
/>
</CWidgetStatsE>
</CCol>
<CCol :xs="2">
<CWidgetStatsE title="title" value="1,123">
<CChart
class="mx-auto"
type="line"
style="height: 40px; width: 80px"
:data="{
labels: widgetStatsE.labels,
datasets: [
{
backgroundColor: 'transparent',
borderColor: getStyle('--cui-info'),
borderWidth: 2,
data: [
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
45, 47,
],
},
],
}"
:options="widgetStatsE.optionsLine"
/>
</CWidgetStatsE>
</CCol>
</CRow>
</Example>
<Example href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-settings" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-user" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-moon" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-bell" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
</CRow>
</Example>
<Example href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-settings" size="xl" />
</template>
<template #footer>
<CLink
class="font-weight-bold font-xs text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon
icon="cil-arrow-right"
class="ms-auto"
width="16"
/>
</CLink>
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-user" size="xl" />
</template>
<template #footer>
<CLink
class="font-weight-bold font-xs text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon
icon="cil-arrow-right"
class="ms-auto"
width="16"
/>
</CLink>
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-moon" size="xl" />
</template>
<template #footer>
<CLink
class="font-weight-bold font-xs text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon
icon="cil-arrow-right"
class="ms-auto"
width="16"
/>
</CLink>
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
<template #icon>
<CIcon icon="cil-bell" size="xl" />
</template>
<template #footer>
<CLink
class="font-weight-bold font-xs text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
>
View more
<CIcon
icon="cil-arrow-right"
class="ms-auto"
width="16"
/>
</CLink>
</template>
</CWidgetStatsF>
</CCol>
</CRow>
</Example>
<Example href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsF
color="primary"
:padding="false"
title="Title"
value="$1.999,50"
>
<template #icon>
<CIcon icon="cil-settings" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF
color="info"
:padding="false"
title="Title"
value="$1.999,50"
>
<template #icon>
<CIcon icon="cil-user" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF
color="warning"
:padding="false"
title="Title"
value="$1.999,50"
>
<template #icon>
<CIcon icon="cil-moon" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
<CCol :xs="3">
<CWidgetStatsF
color="danger"
:padding="false"
title="Title"
value="$1.999,50"
>
<template #icon>
<CIcon icon="cil-bell" size="xl" />
</template>
</CWidgetStatsF>
</CCol>
</CRow>
</Example>
<Example href="">
<WidgetsStatsD />
</Example>
<Example href="">
<CCardGroup>
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'info', value: 75 }"
title="Visitors"
value="87.500"
>
<template #icon
><CIcon icon="cil-people" height="36"
/></template>
</CWidgetStatsC>
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'success', value: 75 }"
title="New Clients"
value="385"
>
<template #icon
><CIcon icon="cil-user-follow" height="36"
/></template>
</CWidgetStatsC>
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'warning', value: 75 }"
title="Products sold"
value="1238"
>
<template #icon
><CIcon icon="cil-basket" height="36"
/></template>
</CWidgetStatsC>
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'primary', value: 75 }"
title="Returning Visitors"
value="28%"
>
<template #icon
><CIcon icon="cil-chart-pie" height="36"
/></template>
</CWidgetStatsC>
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'danger', value: 75 }"
title="Avg. Time"
value="5:34:11"
>
<template #icon
><CIcon icon="cil-speedometer" height="36"
/></template>
</CWidgetStatsC>
</CCardGroup>
</Example>
<Example href="">
<CRow>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'info', value: 75 }"
title="Visitors"
value="87.500"
>
<template #icon
><CIcon icon="cil-people" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'success', value: 75 }"
title="New Clients"
value="385"
>
<template #icon
><CIcon icon="cil-user-follow" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'warning', value: 75 }"
title="Products sold"
value="1238"
>
<template #icon
><CIcon icon="cil-basket" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'primary', value: 75 }"
title="Returning Visitors"
value="28%"
>
<template #icon
><CIcon icon="cil-chart-pie" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'danger', value: 75 }"
title="Avg. Time"
value="5:34:11"
>
<template #icon
><CIcon icon="cil-speedometer" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
:progress="{ color: 'info', value: 75 }"
title="Comments"
value="972"
>
<template #icon
><CIcon icon="cil-speech" height="36"
/></template>
</CWidgetStatsC>
</CCol>
</CRow>
</Example>
<Example href="">
<CRow>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
color="info"
inverse
:progress="{ value: 75 }"
title="Visitors"
value="87.500"
>
<template #icon
><CIcon icon="cil-people" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
color="success"
inverse
:progress="{ value: 75 }"
title="New Clients"
value="385"
>
<template #icon
><CIcon icon="cil-user-follow" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
color="warning"
inverse
:progress="{ value: 75 }"
title="Products sold"
value="1238"
>
<template #icon
><CIcon icon="cil-basket" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
color="primary"
inverse
:progress="{ value: 75 }"
title="Returning Visitors"
value="28%"
>
<template #icon
><CIcon icon="cil-chart-pie" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
color="danger"
inverse
:progress="{ value: 75 }"
title="Avg. Time"
value="5:34:11"
>
<template #icon
><CIcon icon="cil-speedometer" height="36"
/></template>
</CWidgetStatsC>
</CCol>
<CCol :xs="2">
<CWidgetStatsC
class="mb-3"
color="info"
inverse
:progress="{ value: 75 }"
title="Comments"
value="972"
>
<template #icon
><CIcon icon="cil-speech" height="36"
/></template>
</CWidgetStatsC>
</CCol>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import { getStyle } from "@coreui/utils";
import { CChart } from "@coreui/vue-chartjs";
import WidgetsStatsA from "./WidgetsStatsTypeA.vue";
import WidgetsStatsD from "./WidgetsStatsTypeD.vue";
import Example from "../../components/Example.vue";
export default {
name: "Widgets",
components: {
CChart,
WidgetsStatsA,
WidgetsStatsD,
Example,
},
data() {
const widgetStatsE = {
labels: [
"M",
"T",
"W",
"T",
"F",
"S",
"S",
"M",
"T",
"W",
"T",
"F",
"S",
"S",
"M",
],
optionsBar: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
optionsLine: {
maintainAspectRatio: false,
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
},
},
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
};
return {
getStyle,
widgetStatsE,
widgetProgressIconItems: [
{ color: "primary", icon: "cil-puzzle" },
{ color: "success", icon: "cil-speedometer" },
{ color: "danger", icon: "cil-cursor" },
{ color: "info", icon: "cil-drop" },
{ color: "secondary", icon: "cil-pencil" },
],
};
},
};
</script>
src/views/widgets/WidgetsStatsTypeA.vue
+379
View File
@@ -0,0 +1,379 @@
<template>
<CRow>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="primary">
<template #value
>26K
<span class="fs-6 fw-normal">
(-12.4% <CIcon icon="cil-arrow-bottom" />)
</span>
</template>
<template #title>Users</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
<template #chart>
<CChart
type="line"
class="mt-3 mx-3"
style="height: 70px"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#321fdb',
data: [65, 59, 84, 84, 51, 55, 40],
},
],
}"
:options="{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
min: 30,
max: 89,
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
elements: {
line: {
borderWidth: 1,
tension: 0.4,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
}"
/>
</template>
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="info">
<template #value
>$6.200
<span class="fs-6 fw-normal">
(40.9% <CIcon icon="cil-arrow-top" />)
</span>
</template>
<template #title>Income</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
<template #chart>
<CChart
type="line"
class="mt-3 mx-3"
style="height: 70px"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#39f',
data: [1, 18, 9, 17, 34, 22, 11],
},
],
}"
:options="{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
},
},
y: {
min: -9,
max: 39,
display: false,
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
elements: {
line: {
borderWidth: 1,
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4,
},
},
}"
/>
</template>
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="warning">
<template #value
>2.49%
<span class="fs-6 fw-normal">
(84.7% <CIcon icon="cil-arrow-top" />)
</span>
</template>
<template #title>Conversion Rate</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
<template #chart>
<CChart
type="line"
class="mt-3"
style="height: 70px"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [78, 81, 80, 45, 34, 12, 40],
fill: true,
},
],
}"
:options="{
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
elements: {
line: {
borderWidth: 2,
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
},
},
}"
/>
</template>
</CWidgetStatsA>
</CCol>
<CCol :xs="3">
<CWidgetStatsA class="mb-3" color="danger">
<template #value
>44K
<span class="fs-6 fw-normal">
(-23.6% <CIcon icon="cil-arrow-bottom" />)
</span>
</template>
<template #title>Sessions</template>
<template #action>
<CDropdown placement="bottom-end">
<CDropdownToggle
color="transparent"
class="p-0 text-white"
:caret="false"
>
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</template>
<template #chart>
<CChart
type="bar"
class="mt-3 mx-3"
style="height: 70px"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
'January',
'February',
'March',
'April',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,255,255,.2)',
borderColor: 'rgba(255,255,255,.55)',
data: [
78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,
82,
],
barPercentage: 0.6,
},
],
}"
:options="{
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
display: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
y: {
grid: {
display: false,
drawBorder: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
},
}"
/>
</template>
</CWidgetStatsA>
</CCol>
</CRow>
</template>
<script>
import { CChart } from "@coreui/vue-chartjs";
export default {
name: "WidgetsStatsA",
components: {
CChart,
},
};
</script>
src/views/widgets/WidgetsStatsTypeD.vue
+215
View File
@@ -0,0 +1,215 @@
<template>
<CRow>
<CCol :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #3b5998"
:values="[
{ title: 'friends', value: '89K' },
{ title: 'feeds', value: '459' },
]"
>
<template #icon
><CIcon icon="cib-facebook" height="52" class="my-4 text-white"
/></template>
<template #chart>
<CChart
class="position-absolute w-100 h-100"
type="line"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [65, 59, 84, 84, 51, 55, 40],
fill: true,
},
],
}"
:options="options"
/>
</template>
</CWidgetStatsD>
</CCol>
<CCol :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #00aced"
:values="[
{ title: 'followers', value: '973k' },
{ title: 'tweets', value: '1.792' },
]"
>
<template #icon
><CIcon icon="cib-twitter" height="52" class="my-4 text-white"
/></template>
<template #chart>
<CChart
class="position-absolute w-100 h-100"
type="line"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [1, 13, 9, 17, 34, 41, 38],
fill: true,
},
],
}"
:options="options"
/>
</template>
</CWidgetStatsD>
</CCol>
<CCol :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
style="--cui-card-cap-bg: #4875b4"
:values="[
{ title: 'contacts', value: '500' },
{ title: 'feeds', value: '1.292' },
]"
>
<template #icon
><CIcon icon="cib-linkedin" height="52" class="my-4 text-white"
/></template>
<template #chart>
<CChart
class="position-absolute w-100 h-100"
type="line"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [78, 81, 80, 45, 34, 12, 40],
fill: true,
},
],
}"
:options="options"
/>
</template>
</CWidgetStatsD>
</CCol>
<CCol :sm="6" :lg="3">
<CWidgetStatsD
class="mb-4"
color="warning"
:values="[
{ title: 'events', value: '12+' },
{ title: 'meetings', value: '4' },
]"
>
<template #icon
><CIcon icon="cil-calendar" height="52" class="my-4 text-white"
/></template>
<template #chart>
<CChart
class="position-absolute w-100 h-100"
type="line"
:data="{
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
],
datasets: [
{
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.55)',
pointHoverBackgroundColor: '#fff',
borderWidth: 2,
data: [35, 23, 56, 22, 97, 23, 64],
fill: true,
},
],
}"
:options="options"
/>
</template>
</CWidgetStatsD>
</CCol>
</CRow>
</template>
<script>
import { CChart } from "@coreui/vue-chartjs";
export default {
name: "WidgetsStatsD",
components: {
CChart,
},
setup() {
const options = {
elements: {
line: {
tension: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
},
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
};
return {
options,
};
},
};
</script>
yarn.lock
+356 -323
View File
File diff suppressed because it is too large Load Diff