Add views to sections: buttons, icons, notifications
This commit is contained in:
Marcin Michałek
+89
-89
@@ -119,101 +119,101 @@ export default [
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// _name: 'CNavGroup',
|
||||
// name: 'Buttons',
|
||||
// route: '/buttons',
|
||||
// icon: 'cil-cursor',
|
||||
// children: [
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Buttons',
|
||||
// to: '/buttons/standard-buttons'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Button Dropdowns',
|
||||
// to: '/buttons/dropdowns'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Button Groups',
|
||||
// to: '/buttons/button-groups'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Brand Buttons',
|
||||
// to: '/buttons/brand-buttons'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
_name: 'CNavGroup',
|
||||
name: 'Buttons',
|
||||
route: '/buttons',
|
||||
icon: 'cil-cursor',
|
||||
children: [
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Buttons',
|
||||
to: '/buttons/standard-buttons'
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Button Dropdowns',
|
||||
to: '/buttons/dropdowns'
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Button Groups',
|
||||
to: '/buttons/button-groups'
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Brand Buttons',
|
||||
to: '/buttons/brand-buttons'
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Charts',
|
||||
// to: '/charts',
|
||||
// icon: 'cil-chart-pie'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavGroup',
|
||||
// name: 'Icons',
|
||||
// route: '/icons',
|
||||
// icon: 'cil-star',
|
||||
// children: [
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'CoreUI Icons',
|
||||
// to: '/icons/coreui-icons',
|
||||
// badge: {
|
||||
// color: 'info',
|
||||
// text: 'NEW'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Brands',
|
||||
// to: '/icons/brands'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Flags',
|
||||
// to: '/icons/flags'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavGroup',
|
||||
// name: 'Notifications',
|
||||
// route: '/notifications',
|
||||
// icon: 'cil-bell',
|
||||
// children: [
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Alerts',
|
||||
// to: '/notifications/alerts'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Badges',
|
||||
// to: '/notifications/badges'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Modals',
|
||||
// to: '/notifications/modals'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// _name: 'CNavItem',
|
||||
// name: 'Widgets',
|
||||
// to: '/widgets',
|
||||
// icon: 'cil-calculator',
|
||||
// badge: {
|
||||
// color: 'primary',
|
||||
// text: 'NEW',
|
||||
// shape: 'pill'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
_name: 'CNavGroup',
|
||||
name: 'Icons',
|
||||
route: '/icons',
|
||||
icon: 'cil-star',
|
||||
children: [
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'CoreUI Icons',
|
||||
to: '/icons/coreui-icons',
|
||||
badge: {
|
||||
color: 'info',
|
||||
text: 'NEW'
|
||||
}
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Brands',
|
||||
to: '/icons/brands'
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Flags',
|
||||
to: '/icons/flags'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
_name: 'CNavGroup',
|
||||
name: 'Notifications',
|
||||
route: '/notifications',
|
||||
icon: 'cil-bell',
|
||||
children: [
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Alerts',
|
||||
to: '/notifications/alerts'
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Badges',
|
||||
to: '/notifications/badges'
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Modals',
|
||||
to: '/notifications/modals'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
_name: 'CNavItem',
|
||||
name: 'Widgets',
|
||||
to: '/widgets',
|
||||
icon: 'cil-calculator',
|
||||
badge: {
|
||||
color: 'primary',
|
||||
text: 'NEW',
|
||||
shape: 'pill'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// _name: 'CSidebarNavDivider',
|
||||
// _class: 'm-2'
|
||||
|
||||
@@ -118,6 +118,94 @@ const routes = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/buttons",
|
||||
name: "Buttons",
|
||||
component: {
|
||||
render() {
|
||||
return h(resolveComponent('router-view'))
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/buttons/standard-buttons",
|
||||
name: "Buttons",
|
||||
component: () => import("@/views/buttons/Buttons.vue"),
|
||||
},
|
||||
{
|
||||
path: "/buttons/dropdowns",
|
||||
name: "Button Dropdowns",
|
||||
component: () => import("@/views/buttons/ButtonDropdowns.vue"),
|
||||
},
|
||||
{
|
||||
path: "/buttons/button-groups",
|
||||
name: "Button Groups",
|
||||
component: () => import("@/views/buttons/ButtonGroups.vue"),
|
||||
},
|
||||
{
|
||||
path: "/buttons/brand-buttons",
|
||||
name: "Brand Buttons",
|
||||
component: () => import("@/views/buttons/BrandButtons.vue"),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/icons",
|
||||
name: "Icons",
|
||||
component: {
|
||||
render() {
|
||||
return h(resolveComponent('router-view'))
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/icons/coreui-icons",
|
||||
name: "CoreUI Icons",
|
||||
component: () => import("@/views/icons/CoreUIIcons.vue"),
|
||||
},
|
||||
{
|
||||
path: "/icons/brands",
|
||||
name: "Brands",
|
||||
component: () => import("@/views/icons/Brands.vue"),
|
||||
},
|
||||
{
|
||||
path: "/icons/flags",
|
||||
name: "Flags",
|
||||
component: () => import("@/views/icons/Flags.vue"),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/notifications",
|
||||
name: "Notifications",
|
||||
component: {
|
||||
render() {
|
||||
return h(resolveComponent('router-view'))
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/notifications/alerts",
|
||||
name: "Alerts",
|
||||
component: () => import("@/views/notifications/Alerts.vue"),
|
||||
},
|
||||
{
|
||||
path: "/notifications/badges",
|
||||
name: "Badges",
|
||||
component: () => import("@/views/notifications/Badges.vue"),
|
||||
},
|
||||
{
|
||||
path: "/notifications/modals",
|
||||
name: "Modals",
|
||||
component: () => import("@/views/notifications/Modals.vue"),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/widgets",
|
||||
name: "Widgets",
|
||||
component: () => import("@/views/Widgets.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Widgets</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="">
|
||||
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Widgets",
|
||||
};
|
||||
</script>
|
||||
+53
-2
@@ -6,8 +6,53 @@
|
||||
<strong>Vue Tabs</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="breadcrumbs">
|
||||
|
||||
<Example href="components/tabs.html">
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" @click="activeTabA=1">
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" @click="activeTabA=2">
|
||||
Link
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" @click="activeTabA=3">
|
||||
Link
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
<CTabContent>
|
||||
<CTabPane :visible="activeTabA == 1">
|
||||
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
|
||||
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
|
||||
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
|
||||
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
|
||||
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
|
||||
</CTabPane>
|
||||
<CTabPane :visible="activeTabA == 2">
|
||||
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
|
||||
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
|
||||
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
|
||||
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
|
||||
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
|
||||
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
|
||||
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
|
||||
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
|
||||
accusamus tattooed echo park.
|
||||
</CTabPane>
|
||||
<CTabPane :visible="activeTabA == 3">
|
||||
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
|
||||
organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
|
||||
pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
|
||||
hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
|
||||
pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
|
||||
etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
|
||||
craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
|
||||
</CTabPane>
|
||||
</CTabContent>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
@@ -18,5 +63,11 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "Tabs",
|
||||
data: function(){
|
||||
return {
|
||||
activeTabA: 1,
|
||||
activeTabB: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Brand Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
TODO: check did I should remove brand-buttons
|
||||
|
||||
<Example href="breadcrumbs">
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BrandButtons",
|
||||
data: function(){
|
||||
return {
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
'linkedin',
|
||||
'flickr',
|
||||
'tumblr',
|
||||
'xing',
|
||||
'github',
|
||||
'stackoverflow',
|
||||
'youtube',
|
||||
'dribbble',
|
||||
'instagram',
|
||||
'pinterest',
|
||||
'vk',
|
||||
'yahoo',
|
||||
'behance',
|
||||
'reddit',
|
||||
'vimeo'
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Dropdowns</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
|
||||
<h4 class="mt-4">Single button</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<CDropdown color="secondary">
|
||||
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<CDropdown color="secondary" togglerText="Dropdown button">
|
||||
<CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
|
||||
<CDropdown :color="item" :togglerText="item" variant="btn-group">
|
||||
<CDropdownToggle :color="item">{{item}}</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Split button</h4>
|
||||
<Example href="components/dropdown.html#split-button">
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
|
||||
<CDropdown :color="item" :togglerText="item" variant="btn-group">
|
||||
<CButton :color="item">{{ item }}</CButton>
|
||||
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="components/dropdown.html#sizing">
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CButton color="secondary" size="lg">Large split button</CButton>
|
||||
<CDropdownToggle color="secondary" size="lg" split>Large button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CButton color="secondary" size="sm">Small split button</CButton>
|
||||
<CDropdownToggle color="secondary" size="sm" split>Small button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dark dropdowns</h4>
|
||||
<Example href="components/dropdown.html#dark-dropdowns">
|
||||
<CDropdown color="secondary" dark>
|
||||
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<p>In navbar:</p>
|
||||
<Example href="components/dropdown.html#dark-dropdowns">
|
||||
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarNav>
|
||||
<CDropdown dark variant="nav-item">
|
||||
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Directions</h4>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropup">
|
||||
<CDropdownToggle color="secondary">Dropup</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown color="secondary" direction="dropup">
|
||||
<CButton color="secondary">Split dropup</CButton>
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropend">
|
||||
<CDropdownToggle color="secondary">Dropend</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown color="secondary" direction="dropend">
|
||||
<CButton color="secondary">Split dropend</CButton>
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropstart">
|
||||
<CDropdownToggle color="secondary">Dropstart</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButtonGroup>
|
||||
<CDropdown color="secondary" direction="dropstart">
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="secondary">Split dropstart</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Responsive alignment</h4>
|
||||
<Example href="components/dropdown.html#responsive-alignment">
|
||||
<CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
|
||||
<CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#responsive-alignment">
|
||||
<CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
|
||||
<CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dropdown menu content examples</h4>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded p-4 text-muted" style="max-width: 200px">
|
||||
<p>
|
||||
Some example text that's free-flowing within the dropdown menu.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
And this is more example text.
|
||||
</p>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CForm class="px-4 py-4">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
|
||||
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
|
||||
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormCheck id="dropdownCheck" label="Remember me"/>
|
||||
</div>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CForm>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
|
||||
<CDropdownItem href="#">Forgot password?</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonDropdowns",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Groups</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Basic example</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#basic-example">
|
||||
<CButtonGroup role="group" aria-label="Basic example">
|
||||
<CButton color="primary">Left</CButton>
|
||||
<CButton color="primary">Middle</CButton>
|
||||
<CButton color="primary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#basic-example">
|
||||
<CButtonGroup>
|
||||
<CButton href="#" color="primary" active>Active link</CButton>
|
||||
<CButton href="#" color="primary">Link</CButton>
|
||||
<CButton href="#" color="primary">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Mixed styles</h4>
|
||||
<Example href="components/button-group.html#mixed-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="danger">Left</CButton>
|
||||
<CButton color="warning">Middle</CButton>
|
||||
<CButton color="success">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Outlined styles</h4>
|
||||
<Example href="components/button-group.html#outlined-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic outlined example">
|
||||
<CButton color="primary" variant="outline">Left</CButton>
|
||||
<CButton color="primary" variant="outline">Middle</CButton>
|
||||
<CButton color="primary" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<h4 class="mt-4">Checkbox and radio button groups</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<h4 class="mt-4">Button toolbar</h4>
|
||||
<Example href="components/button-group.html#button-toolbar">
|
||||
<CButtonToolbar role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="primary">1</CButton>
|
||||
<CButton color="primary">2</CButton>
|
||||
<CButton color="primary">3</CButton>
|
||||
<CButton color="primary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="me-2" role="group" aria-label="Second group">
|
||||
<CButton color="secondary">5</CButton>
|
||||
<CButton color="secondary">6</CButton>
|
||||
<CButton color="secondary">7</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="me-2" role="group" aria-label="Third group">
|
||||
<CButton color="info">8</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
<Example href="components/button-group.html#button-toolbar">
|
||||
<CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">1</CButton>
|
||||
<CButton color="secondary" variant="outline">2</CButton>
|
||||
<CButton color="secondary" variant="outline">3</CButton>
|
||||
<CButton color="secondary" variant="outline">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">1</CButton>
|
||||
<CButton color="secondary" variant="outline">2</CButton>
|
||||
<CButton color="secondary" variant="outline">3</CButton>
|
||||
<CButton color="secondary" variant="outline">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="components/button-group.html#sizing">
|
||||
<CButtonGroup size="lg" role="group" aria-label="Large button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br/>
|
||||
<CButtonGroup role="group" aria-label="Default button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br/>
|
||||
<CButtonGroup size="sm" role="group" aria-label="Small button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertical variation</h4>
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonGroups",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/button.html#examples">
|
||||
|
||||
<template v-for="(shape) in [null, 'rounded-pill', 'rounded-0', 'rounded-circle']">
|
||||
<h4 class="mt-4">Shape {{ shape === null ? 'standard' : shape === 'rounded-0' ? ' square' : shape }}:</h4>
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Block buttons</h4>
|
||||
|
||||
<Example href="components/button.html#block-buttons">
|
||||
<div class="d-grid gap-2">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 col-6 mx-auto">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<CButton color="primary" class="me-md-2">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Buttons",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Brands</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<!-- TODO: icons, brands and flags href-s to documentation -->
|
||||
<Example href="">
|
||||
<CRow class="text-center">
|
||||
<template v-for="(brand, brandName) in brands" :key="brandName">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
>
|
||||
<CIcon size="lg" :content="brand"/>
|
||||
<div>{{toKebabCase(brandName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { brandSet as brands } from '@coreui/icons'
|
||||
export default {
|
||||
name: "Brands",
|
||||
data: function(){
|
||||
return {
|
||||
brands: brands
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue CoreUI Icons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="">
|
||||
<CRow class="text-center">
|
||||
<template v-for="(icon, iconName) in freeSet" :key="iconName">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
>
|
||||
<CIcon :content="icon" size="lg"/>
|
||||
<div>{{toKebabCase(iconName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { freeSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: "CoreUIIcons",
|
||||
data: function(){
|
||||
return {
|
||||
freeSet: freeSet
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Flags</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="">
|
||||
<CRow class="text-center">
|
||||
<!-- For using the flags inline with text add the classes
|
||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
||||
span. If you want to have a squared version flag then add the class
|
||||
flag-icon-squared as well. -->
|
||||
<template v-for="(flag, flagName) in flagSet" :key="flagName">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
>
|
||||
<CIcon size="lg" :content="flag"/>
|
||||
<div>{{toKebabCase(flagName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flagSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: "Flags",
|
||||
data: function(){
|
||||
return {
|
||||
flagSet: flagSet
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Alerts</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Alerts examples</h4>
|
||||
<Example href="components/alert.html#examples">
|
||||
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
|
||||
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
|
||||
<CAlert color="success">A simple success alert—check it out!</CAlert>
|
||||
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
|
||||
<CAlert color="warning">A simple warning alert—check it out!</CAlert>
|
||||
<CAlert color="info">A simple info alert—check it out!</CAlert>
|
||||
<CAlert color="light">A simple light alert—check it out!</CAlert>
|
||||
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Link color</h4>
|
||||
<Example href="components/alert.html#link-color">
|
||||
<CAlert color="primary">
|
||||
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="secondary">
|
||||
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="success">
|
||||
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="danger">
|
||||
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="warning">
|
||||
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="info">
|
||||
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="light">
|
||||
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="dark">
|
||||
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Additional content</h4>
|
||||
<Example href="components/alert.html#additional-content">
|
||||
<CAlert color="success" v-bind:visible="true">
|
||||
<CAlertHeading>Well done!</CAlertHeading>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr />
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</CAlert>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dismissing</h4>
|
||||
<Example href="components/alert.html#dismissing">
|
||||
<CAlert color="warning" dismissible @dismiss="alert">
|
||||
<strong>Go right ahead</strong> and click that dimiss over there on the right.
|
||||
</CAlert>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Alerts",
|
||||
methods: {
|
||||
alert: function(){
|
||||
alert("👋 Well, hi there! Thanks for dismissing me.")
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Badges</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Basic usage</h4>
|
||||
<Example href="components/badge.html#basic-usage">
|
||||
<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
|
||||
<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
|
||||
<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
|
||||
<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
|
||||
<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
|
||||
<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
|
||||
</Example>
|
||||
<Example href="components/badge.html#basic-usage">
|
||||
<CButton color="primary">
|
||||
Notifications <CBadge color="secondary">4</CBadge>
|
||||
</CButton>
|
||||
<br>
|
||||
<CButton color="primary">
|
||||
Profile <CBadge color="secondary">9</CBadge>
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</CButton>
|
||||
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Contextual variations</h4>
|
||||
<Example href="components/badge.html#contextual-variations">
|
||||
<CBadge color="primary">primary</CBadge>
|
||||
<CBadge color="success">success</CBadge>
|
||||
<CBadge color="danger">danger</CBadge>
|
||||
<CBadge color="warning">warning</CBadge>
|
||||
<CBadge color="info">info</CBadge>
|
||||
<CBadge color="light">light</CBadge>
|
||||
<CBadge color="dark">dark</CBadge>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pill badges</h4>
|
||||
<Example href="components/badge.html#pill-badges">
|
||||
<CBadge color="primary" shape="rounded-pill">primary</CBadge>
|
||||
<CBadge color="success" shape="rounded-pill">success</CBadge>
|
||||
<CBadge color="danger" shape="rounded-pill">danger</CBadge>
|
||||
<CBadge color="warning" shape="rounded-pill">warning</CBadge>
|
||||
<CBadge color="info" shape="rounded-pill">info</CBadge>
|
||||
<CBadge color="light" shape="rounded-pill">light</CBadge>
|
||||
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Badges",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Modals</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Example</h4>
|
||||
<Example href="components/modal.html#modal-components">
|
||||
<CModal class="show d-block position-static" :backdrop="false" :keyboard="false" visible>
|
||||
<CModalHeader dismiss>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Modal body text goes here.</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary">Close</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Live demo</h4>
|
||||
<Example href="components/modal.html#live-demo">
|
||||
<CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
|
||||
<CModal :visible="visibleLiveDemo" @dismiss="() => { visibleLiveDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleLiveDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleLiveDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Static backdrop</h4>
|
||||
<Example href="components/modal.html#static-backdrop">
|
||||
<CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
|
||||
<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @dismiss="() => { visibleStaticBackdropDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleStaticBackdropDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleStaticBackdropDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Scrolling long content</h4>
|
||||
<Example href="components/modal.html#scrolling-long-content">
|
||||
<CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
|
||||
<CModal :visible="visibleScrollingLongContentDemo" @dismiss="() => { visibleScrollingLongContentDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleScrollingLongContentDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Visible scrollable</h4>
|
||||
<Example href="components/modal.html#scrolling-long-content">
|
||||
<CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
|
||||
<CModal scrollable :visible="visibleScrollableDemo" @dismiss="() => { visibleScrollableDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleScrollableDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertically centered</h4>
|
||||
<Example href="components/modal.html#vertically-centered">
|
||||
<CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
|
||||
<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @dismiss="() => { visibleVerticallyCenteredDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleVerticallyCenteredDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertically scrollable demo</h4>
|
||||
<Example href="components/modal.html#vertically-centered">
|
||||
<CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
|
||||
<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleVerticallyCenteredScrollableDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Tooltips and popovers</h4>
|
||||
<Example href="components/modal.html#tooltips-and-popovers">
|
||||
<CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
|
||||
<CModal :visible="tooltipsAndPopoversDemo" @dismiss="() => { tooltipsAndPopoversDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { tooltipsAndPopoversDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<h5>Popover in a modal</h5>
|
||||
<p>This <CButton color="secondary" v-c-popover="{header: 'Popover title', content: 'Popover body content is set in this property.'}">button</CButton></p>
|
||||
<hr/>
|
||||
<h5>Tooltips in a modal</h5>
|
||||
<p>
|
||||
<CLink v-c-tooltip="'Tooltip'">This link</CLink> and <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
|
||||
</p>
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { tooltipsAndPopoversDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Optional sizes</h4>
|
||||
<Example href="components/modal.html#optional-sizes">
|
||||
<CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
|
||||
<CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
|
||||
<CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
|
||||
<CModal size="xl" :visible="xlDemo" @dismiss="() => { xlDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { xlDemo = false }">
|
||||
<CModalTitle>Extra large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="lg" :visible="lgDemo" @dismiss="() => { lgDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { lgDemo = false }">
|
||||
<CModalTitle>Large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="sm" :visible="smDemo" @dismiss="() => { smDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { smDemo = false }">
|
||||
<CModalTitle>Small modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Fullscreen Modal</h4>
|
||||
<Example href="components/modal.html#fullscreen-modal">
|
||||
<CButton color="primary" @click="() => { fullscreenDemo = true }">Full screen</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenSmDemo = true }">Full screen below sm</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenMdDemo = true }">Full screen below md</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
|
||||
<CModal fullscreen :visible="fullscreenDemo" @dismiss="() => { fullscreenDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { xlDemo = false }">
|
||||
<CModalTitle>Full screen</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="sm" :visible="fullscreenSmDemo" @dismiss="() => { fullscreenSmDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenSmDemo = false }">
|
||||
<CModalTitle>Full screen below sm</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="md" :visible="fullscreenMdDemo" @dismiss="() => { fullscreenMdDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenMdDemo = false }">
|
||||
<CModalTitle>Full screen below md</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="lg" :visible="fullscreenLgDemo" @dismiss="() => { fullscreenLgDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenLgDemo = false }">
|
||||
<CModalTitle>Full screen below lg</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xl" :visible="fullscreenXlDemo" @dismiss="() => { fullscreenXlDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenXlDemo = false }">
|
||||
<CModalTitle>Full screen below xl</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @dismiss="() => { fullscreenXxlDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenXxlDemo = false }">
|
||||
<CModalTitle>Full screen below xxl</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Modals",
|
||||
data: function(){
|
||||
return {
|
||||
visibleLiveDemo: false,
|
||||
visibleStaticBackdropDemo: false,
|
||||
visibleScrollingLongContentDemo: false,
|
||||
visibleScrollableDemo: false,
|
||||
visibleVerticallyCenteredDemo: false,
|
||||
visibleVerticallyCenteredScrollableDemo: false,
|
||||
xlDemo: false,
|
||||
lgDemo: false,
|
||||
smDemo: false,
|
||||
fullscreenDemo: false,
|
||||
fullscreenSmDemo: false,
|
||||
fullscreenMdDemo: false,
|
||||
fullscreenLgDemo: false,
|
||||
fullscreenXlDemo: false,
|
||||
fullscreenXxlDemo: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user