feat: add views - in base section
This commit is contained in:
Marcin Michałek
Generated
+49749
File diff suppressed because it is too large
Load Diff
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
+77
-75
@@ -40,81 +40,83 @@ export default [
|
||||
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 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: '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'
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -39,6 +39,83 @@ 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-bars",
|
||||
name: "Progress Bars",
|
||||
component: () => import("@/views/base/ProgressBars.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"),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Cards</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4>Standard</h4>
|
||||
<Example href="components/cards.html#example">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</Example>
|
||||
<h4 class="mt-4">Horizontal</h4>
|
||||
<Example href="components/cards.html#horizontal">
|
||||
<CCard class="mb-3" style="max=width: 540px">
|
||||
<CRow class="g-0">
|
||||
<CCol :md="4">
|
||||
<CCardImage component="svg" class="docs-placeholder-img rounded-0" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></CCardImage>
|
||||
</CCol>
|
||||
<CCol :md="8">
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
|
||||
<CCardText><small class="text-muted">Last updated 3 mins ago</small></CCardText>
|
||||
</CCardBody>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Styles</h4>
|
||||
<Example href="components/cards.html#card-styles">
|
||||
<CRow>
|
||||
<template v-for="(item) in [
|
||||
{ color: 'primary', textColor: 'white' },
|
||||
{ color: 'secondary', textColor: 'white' },
|
||||
{ color: 'success', textColor: 'white' },
|
||||
{ color: 'danger', textColor: 'white' },
|
||||
{ color: 'warning' },
|
||||
{ color: 'info', textColor: 'white' },
|
||||
{ color: 'light' },
|
||||
{ color: 'dark', textColor: 'white' }
|
||||
]">
|
||||
<CCol lg="2" md="3" sm="4" xs="6">
|
||||
<CCard :color="item.color" :textColor="item.textColor" class="mb-3" style="max-width: 18rem">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{{item.color}} card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-for="(item) in [
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
{ color: 'secondary', textColor: 'secondary' },
|
||||
{ color: 'success', textColor: 'success' },
|
||||
{ color: 'danger', textColor: 'danger' },
|
||||
{ color: 'warning', textColor: 'warning' },
|
||||
{ color: 'info', textColor: 'info' },
|
||||
{ color: 'light'},
|
||||
{ color: 'dark'}
|
||||
]">
|
||||
<CCol lg="2" md="3" sm="4" xs="6">
|
||||
<CCard :textColor="item.textColor" class="mb-3" :class="'border-' + item.color" style="max-width: 18rem">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{{item.color}} card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-for="(item) in [
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
{ color: 'secondary', textColor: 'secondary' },
|
||||
{ color: 'success', textColor: 'success' },
|
||||
{ color: 'danger', textColor: 'danger' },
|
||||
{ color: 'warning', textColor: 'warning' },
|
||||
{ color: 'info', textColor: 'info' },
|
||||
{ color: 'light'},
|
||||
{ color: 'dark'}
|
||||
]">
|
||||
<CCol lg="2" md="3" sm="4" xs="6">
|
||||
<CCard :textColor="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardTitle>{{item.color}} card title</CCardTitle>
|
||||
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Card groups</h4>
|
||||
<Example href="components/cards.html#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This card has supporting text below as a natural lead-in to additional content.</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardImage component="svg" orientation="top" class="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CCardText>
|
||||
</CCardBody>
|
||||
<CCardFooter><small class="text-muted">Last updated 3 mins ago</small></CCardFooter>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Cards",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4>Slides only</h4>
|
||||
<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>
|
||||
<h4 class="mt-4">With controls</h4>
|
||||
<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>
|
||||
<h4 class="mt-4">With indicators</h4>
|
||||
<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>
|
||||
<h4 class="mt-4">With caption</h4>
|
||||
<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>
|
||||
<h4 class="mt-4">With caption</h4>
|
||||
<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>
|
||||
<h4 class="mt-4">Dark variant</h4>
|
||||
<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>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Collapses</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4>Toggle</h4>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Paginations</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Basic example</h4>
|
||||
<Example href="components/pagination.html#overview">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem href="#">Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue pagination with icons</h4>
|
||||
<Example href="components/pagination.html#working-with-icons">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous" href="#"><span aria-hidden="true">«</span></CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next" href="#"><span aria-hidden="true">»</span></CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pagination disabled and active states</h4>
|
||||
<Example href="components/pagination.html#disabled-and-active-states">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous" href="#" disabled><span aria-hidden="true">«</span></CPaginationItem>
|
||||
<CPaginationItem href="#" active>1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next" href="#"><span aria-hidden="true">»</span></CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pagination sizing</h4>
|
||||
<Example href="components/pagination.html#sizing">
|
||||
<CPagination size="lg" aria-label="Page navigation example">
|
||||
<CPaginationItem href="#">Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
<Example href="components/pagination.html#sizing">
|
||||
<CPagination size="sm" aria-label="Page navigation example">
|
||||
<CPaginationItem href="#">Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Vue pagination alignment</h4>
|
||||
<p>Pagination alignment enter</p>
|
||||
<Example href="components/pagination.html#alignment">
|
||||
<CPagination class="justify-content-center" aria-label="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
<p>Pagination alignment end</p>
|
||||
<Example href="components/pagination.html#alignment">
|
||||
<CPagination class="justify-content-center" aria-label="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem href="#">1</CPaginationItem>
|
||||
<CPaginationItem href="#">2</CPaginationItem>
|
||||
<CPaginationItem href="#">3</CPaginationItem>
|
||||
<CPaginationItem href="#">Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Paginations",
|
||||
};
|
||||
</script>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress Bar</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Progress bar example</h4>
|
||||
<Example href="components/progress.html#basic-usage">
|
||||
<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>
|
||||
|
||||
<h4 class="mt-4">Progress bar with labels</h4>
|
||||
<Example href="components/progress.html#labels">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="25">25%</CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar with set height</h4>
|
||||
<Example href="components/progress.html#height">
|
||||
<CProgress height="1" class="mb-3">
|
||||
<CProgressBar :value="25"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress height="20" class="mb-3">
|
||||
<CProgressBar :value="25"></CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar color</h4>
|
||||
<Example href="components/progress.html#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>
|
||||
|
||||
<h4 class="mt-4">Progress bar multiple bars</h4>
|
||||
<Example href="components/progress.html#multiple-bars">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="15"/>
|
||||
<CProgressBar color="success" :value="30"/>
|
||||
<CProgressBar color="info" :value="20"/>
|
||||
</CProgress>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Progress bar striped</h4>
|
||||
<Example href="components/progress.html#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>
|
||||
|
||||
<h4 class="mt-4">Progress bar animated stripes</h4>
|
||||
<Example href="components/progress.html#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: "Breadcrumbs",
|
||||
};
|
||||
</script>
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Tabs</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="breadcrumbs">
|
||||
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tabs",
|
||||
};
|
||||
</script>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user