sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: update example views

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-30 14:47:25 +02:00
parent a759550fb5
commit 1f5cad7f05
42 changed files with 2501 additions and 2112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+115 -136
View File
@@ -2,15 +2,15 @@
<div> <div>
<WidgetsStatsA /> <WidgetsStatsA />
<CRow> <CRow>
<CCol md="12"> <CCol :md="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm="5"> <CCol :sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4> <h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-medium-emphasis">January 2021</div> <div class="small text-medium-emphasis">January 2021</div>
</CCol> </CCol>
<CCol sm="7" class="d-none d-md-block"> <CCol :sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-end"> <CButton color="primary" class="float-end">
<CIcon icon="cil-cloud-download" /> <CIcon icon="cil-cloud-download" />
</CButton> </CButton>
@@ -91,14 +91,14 @@
</CRow> </CRow>
<WidgetsStatsD /> <WidgetsStatsD />
<CRow> <CRow>
<CCol md="12"> <CCol :md="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> Traffic &amp; Sales </CCardHeader> <CCardHeader> Traffic &amp; Sales </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol sm="12" lg="6"> <CCol :sm="12" :lg="6">
<CRow> <CRow>
<CCol sm="6"> <CCol :sm="6">
<div <div
class=" class="
border-start border-start-4 border-start-info border-start border-start-4 border-start-info
@@ -111,7 +111,7 @@
<div class="fs-5 fw-semibold">9,123</div> <div class="fs-5 fw-semibold">9,123</div>
</div> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol :sm="6">
<div <div
class=" class="
border-start border-start-4 border-start-danger border-start border-start-4 border-start-danger
@@ -192,9 +192,9 @@
</div> </div>
</div> </div>
</CCol> </CCol>
<CCol sm="12" lg="6"> <CCol :sm="12" :lg="6">
<CRow> <CRow>
<CCol sm="6"> <CCol :sm="6">
<div <div
class=" class="
border-start border-start-4 border-start-warning border-start border-start-4 border-start-warning
@@ -207,7 +207,7 @@
<div class="fs-5 fw-semibold">78,623</div> <div class="fs-5 fw-semibold">78,623</div>
</div> </div>
</CCol> </CCol>
<CCol sm="6"> <CCol :sm="6">
<div <div
class=" class="
border-start border-start-4 border-start-success border-start border-start-4 border-start-success
@@ -341,7 +341,7 @@
<CTableDataCell> <CTableDataCell>
<div>{{ item.user.name }}</div> <div>{{ item.user.name }}</div>
<div class="small text-medium-emphasis"> <div class="small text-medium-emphasis">
<span>{{ item.user.new ? "New" : "Recurring" }}</span> | <span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
{{ item.user.registered }} {{ item.user.registered }}
</div> </div>
</CTableDataCell> </CTableDataCell>
@@ -388,139 +388,118 @@
</template> </template>
<script> <script>
import avatar1 from "./../assets/images/avatars/1.jpg"; import avatar1 from './../assets/images/avatars/1.jpg'
import avatar2 from "./../assets/images/avatars/2.jpg"; import avatar2 from './../assets/images/avatars/2.jpg'
import avatar3 from "./../assets/images/avatars/3.jpg"; import avatar3 from './../assets/images/avatars/3.jpg'
import avatar4 from "./../assets/images/avatars/4.jpg"; import avatar4 from './../assets/images/avatars/4.jpg'
import avatar5 from "./../assets/images/avatars/5.jpg"; import avatar5 from './../assets/images/avatars/5.jpg'
import avatar6 from "./../assets/images/avatars/6.jpg"; import avatar6 from './../assets/images/avatars/6.jpg'
import MainChartExample from "./charts/MainChartExample"; import MainChartExample from './charts/MainChartExample'
import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue' import WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue' import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
export default { export default {
name: "Dashboard", name: 'Dashboard',
components: { components: {
MainChartExample, MainChartExample,
WidgetsStatsA, WidgetsStatsA,
WidgetsStatsD, WidgetsStatsD,
}, },
data() { setup() {
const tableItems = [
{
avatar: { src: avatar1, status: 'success' },
user: {
name: 'Yiorgos Avraamu',
new: true,
registered: 'Jan 1, 2021',
},
country: { name: 'USA', flag: 'cif-us' },
usage: {
value: 50,
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'success',
},
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: '10 sec ago',
},
{
avatar: { src: avatar2, status: 'danger' },
user: {
name: 'Avram Tarasios',
new: false,
registered: 'Jan 1, 2021',
},
country: { name: 'Brazil', flag: 'cif-br' },
usage: {
value: 22,
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'info',
},
payment: { name: 'Visa', icon: 'cib-cc-visa' },
activity: '5 minutes ago',
},
{
avatar: { src: avatar3, status: 'warning' },
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
country: { name: 'India', flag: 'cif-in' },
usage: {
value: 74,
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'warning',
},
payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
activity: '1 hour ago',
},
{
avatar: { src: avatar4, status: 'secondary' },
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
country: { name: 'France', flag: 'cif-fr' },
usage: {
value: 98,
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'danger',
},
payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
activity: 'Last month',
},
{
avatar: { src: avatar5, status: 'success' },
user: {
name: 'Agapetus Tadeáš',
new: true,
registered: 'Jan 1, 2021',
},
country: { name: 'Spain', flag: 'cif-es' },
usage: {
value: 22,
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'primary',
},
payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
activity: 'Last week',
},
{
avatar: { src: avatar6, status: 'danger' },
user: {
name: 'Friderik Dávid',
new: true,
registered: 'Jan 1, 2021',
},
country: { name: 'Poland', flag: 'cif-pl' },
usage: {
value: 43,
period: 'Jun 11, 2021 - Jul 10, 2021',
color: 'success',
},
payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: 'Last week',
},
]
return { return {
selected: "Month", tableItems,
tableItems: [ }
{
avatar: { src: avatar1, status: "success" },
user: {
name: "Yiorgos Avraamu",
new: true,
registered: "Jan 1, 2021",
},
country: { name: "USA", flag: "cif-us" },
usage: {
value: 50,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "success",
},
payment: { name: "Mastercard", icon: "cib-cc-mastercard" },
activity: "10 sec ago",
},
{
avatar: { src: avatar2, status: "danger" },
user: {
name: "Avram Tarasios",
new: false,
registered: "Jan 1, 2021",
},
country: { name: "Brazil", flag: "cif-br" },
usage: {
value: 22,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "info",
},
payment: { name: "Visa", icon: "cib-cc-visa" },
activity: "5 minutes ago",
},
{
avatar: { src: avatar3, status: "warning" },
user: { name: "Quintin Ed", new: true, registered: "Jan 1, 2021" },
country: { name: "India", flag: "cif-in" },
usage: {
value: 74,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "warning",
},
payment: { name: "Stripe", icon: "cib-cc-stripe" },
activity: "1 hour ago",
},
{
avatar: { src: avatar4, status: "secondary" },
user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" },
country: { name: "France", flag: "cif-fr" },
usage: {
value: 98,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "danger",
},
payment: { name: "PayPal", icon: "cib-cc-paypal" },
activity: "Last month",
},
{
avatar: { src: avatar5, status: "success" },
user: {
name: "Agapetus Tadeáš",
new: true,
registered: "Jan 1, 2021",
},
country: { name: "Spain", flag: "cif-es" },
usage: {
value: 22,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "primary",
},
payment: { name: "Google Wallet", icon: "cib-cc-apple-pay" },
activity: "Last week",
},
{
avatar: { src: avatar6, status: "danger" },
user: {
name: "Friderik Dávid",
new: true,
registered: "Jan 1, 2021",
},
country: { name: "Poland", flag: "cif-pl" },
usage: {
value: 43,
period: "Jun 11, 2021 - Jul 10, 2021",
color: "success",
},
payment: { name: "Amex", icon: "cib-cc-amex" },
activity: "Last week",
},
],
tableFields: [
{ key: "avatar", label: "", _classes: "text-center" },
{ key: "user" },
{ key: "country", _classes: "text-center" },
{ key: "usage" },
{ key: "payment", label: "Payment method", _classes: "text-center" },
{ key: "activity" },
],
};
}, },
methods: { }
color(value) {
let $color;
if (value <= 25) {
$color = "info";
} else if (value > 25 && value <= 50) {
$color = "success";
} else if (value > 50 && value <= 75) {
$color = "warning";
} else if (value > 75 && value <= 100) {
$color = "danger";
}
return $color;
},
},
};
</script> </script>
src/views/base/Accordion.vue
+11 -11
View File
@@ -20,7 +20,7 @@
:collapsed="activeKey !== 1" :collapsed="activeKey !== 1"
@click=" @click="
() => { () => {
activeKey === 1 ? (activeKey = 0) : (activeKey = 1); activeKey === 1 ? (activeKey = 0) : (activeKey = 1)
} }
" "
> >
@@ -47,7 +47,7 @@
:collapsed="activeKey !== 2" :collapsed="activeKey !== 2"
@click=" @click="
() => { () => {
activeKey === 2 ? (activeKey = 0) : (activeKey = 2); activeKey === 2 ? (activeKey = 0) : (activeKey = 2)
} }
" "
> >
@@ -74,7 +74,7 @@
:collapsed="activeKey !== 3" :collapsed="activeKey !== 3"
@click=" @click="
() => { () => {
activeKey === 3 ? (activeKey = 0) : (activeKey = 3); activeKey === 3 ? (activeKey = 0) : (activeKey = 3)
} }
" "
> >
@@ -120,7 +120,7 @@
() => { () => {
flushActiveKey === 1 flushActiveKey === 1
? (flushActiveKey = 0) ? (flushActiveKey = 0)
: (flushActiveKey = 1); : (flushActiveKey = 1)
} }
" "
> >
@@ -149,7 +149,7 @@
() => { () => {
flushActiveKey === 2 flushActiveKey === 2
? (flushActiveKey = 0) ? (flushActiveKey = 0)
: (flushActiveKey = 2); : (flushActiveKey = 2)
} }
" "
> >
@@ -178,7 +178,7 @@
() => { () => {
flushActiveKey === 3 flushActiveKey === 3
? (flushActiveKey = 0) ? (flushActiveKey = 0)
: (flushActiveKey = 3); : (flushActiveKey = 3)
} }
" "
> >
@@ -210,15 +210,15 @@
<script> <script>
import { ref } from 'vue' import { ref } from 'vue'
export default { export default {
name: "Accordion", name: 'Accordion',
setup() { setup() {
const activeKey = ref(1) const activeKey = ref(1)
const flushActiveKey = ref(1) const flushActiveKey = ref(1)
return { return {
activeKey, activeKey,
flushActiveKey, flushActiveKey,
} }
} },
}; }
</script> </script>
src/views/base/Breadcrumbs.vue
+2 -2
View File
@@ -60,6 +60,6 @@
<script> <script>
export default { export default {
name: "Breadcrumbs", name: 'Breadcrumbs',
}; }
</script> </script>
src/views/base/Cards.vue
+36 -25
View File
@@ -167,7 +167,7 @@
</p> </p>
<DocsExample href="components/card/#list-groups"> <DocsExample href="components/card/#list-groups">
<CRow> <CRow>
<CCol lg="{4}"> <CCol :lg="4">
<CCard> <CCard>
<CListGroup flush> <CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
@@ -176,7 +176,7 @@
</CListGroup> </CListGroup>
</CCard> </CCard>
</CCol> </CCol>
<CCol lg="{4}"> <CCol :lg="4">
<CCard> <CCard>
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CListGroup flush> <CListGroup flush>
@@ -186,7 +186,7 @@
</CListGroup> </CListGroup>
</CCard> </CCard>
</CCol> </CCol>
<CCol lg="{4}"> <CCol :lg="4">
<CCard> <CCard>
<CListGroup flush> <CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem> <CListGroupItem>Cras justo odio</CListGroupItem>
@@ -342,7 +342,7 @@
</p> </p>
<DocsExample href="components/card/#sizing"> <DocsExample href="components/card/#sizing">
<CRow> <CRow>
<CCol sm="{6}"> <CCol :sm="6">
<CCard> <CCard>
<CCardBody> <CCardBody>
<CCardTitle>Special title treatment</CCardTitle> <CCardTitle>Special title treatment</CCardTitle>
@@ -354,7 +354,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="{6}"> <CCol :sm="6">
<CCard> <CCard>
<CCardBody> <CCardBody>
<CCardTitle>Special title treatment</CCardTitle> <CCardTitle>Special title treatment</CCardTitle>
@@ -542,7 +542,7 @@
</p> </p>
<DocsExample href="components/card/#image-caps"> <DocsExample href="components/card/#image-caps">
<CRow> <CRow>
<CCol lg="{6}"> <CCol :lg="6">
<CCard class="mb-3"> <CCard class="mb-3">
<CCardImage <CCardImage
component="svg" component="svg"
@@ -577,7 +577,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol lg="{6}"> <CCol :lg="6">
<CCard class="mb-3"> <CCard class="mb-3">
<CCardBody> <CCardBody>
<CCardTitle>Card title</CCardTitle> <CCardTitle>Card title</CCardTitle>
@@ -638,7 +638,7 @@
color: 'danger', textColor: 'white' }, { color: 'warning' }, { color: 'danger', textColor: 'white' }, { color: 'warning' }, {
color: 'info', textColor: 'white' }, { color: 'light' }, { color: color: 'info', textColor: 'white' }, { color: 'light' }, { color:
'dark', textColor: 'white' }, ].map((item, index) => ( 'dark', textColor: 'white' }, ].map((item, index) => (
<CCol lg="{4}" key="{index}"> <CCol :lg="4" key="{index}">
<CCard <CCard
color="{item.color}" color="{item.color}"
textColor="{item.textColor}" textColor="{item.textColor}"
@@ -710,21 +710,32 @@
shown below. shown below.
</p> </p>
<DocsExample href="components/card/#top-border"> <DocsExample href="components/card/#top-border">
<template v-for="(item) in [ <template
{ color: 'primary', textColor: 'primary' }, v-for="item in [
{ color: 'secondary', textColor: 'secondary' }, { color: 'primary', textColor: 'primary' },
{ color: 'success', textColor: 'success' }, { color: 'secondary', textColor: 'secondary' },
{ color: 'danger', textColor: 'danger' }, { color: 'success', textColor: 'success' },
{ color: 'warning', textColor: 'warning' }, { color: 'danger', textColor: 'danger' },
{ color: 'info', textColor: 'info' }, { color: 'warning', textColor: 'warning' },
{ color: 'light'}, { color: 'info', textColor: 'info' },
{ color: 'dark'} { color: 'light' },
]" :key="item.color"> { color: 'dark' },
<CCard :textColor="item.textColor" class="mb-3 border-top-3" :class="'border-top-' + item.color" style="max-width: 18rem"> ]"
:key="item.color"
>
<CCard
:textColor="item.textColor"
class="mb-3 border-top-3"
:class="'border-top-' + item.color"
style="max-width: 18rem"
>
<CCardHeader>Header</CCardHeader> <CCardHeader>Header</CCardHeader>
<CCardBody> <CCardBody>
<CCardTitle>{{item.color}} card title</CCardTitle> <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> <CCardText
>Some quick example text to build on the card title and make
up the bulk of the card's content.</CCardText
>
</CCardBody> </CCardBody>
</CCard> </CCard>
</template> </template>
@@ -975,7 +986,7 @@
to equal width across multiple rows, from the medium breakpoint up. to equal width across multiple rows, from the medium breakpoint up.
</p> </p>
<DocsExample href="components/card/#grid-cards"> <DocsExample href="components/card/#grid-cards">
<CRow xs="{ cols: 1, gutter: 4 }" md="{ cols: 2 }"> <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
<CCol xs> <CCol xs>
<CCard> <CCard>
<CCardImage <CCardImage
@@ -1123,7 +1134,7 @@
you&#39;ll see the fourth card wrap. you&#39;ll see the fourth card wrap.
</p> </p>
<DocsExample href="components/card/#grid-cards"> <DocsExample href="components/card/#grid-cards">
<CRow xs="{ cols: 1, gutter: 4 }" md="{ cols: 3 }"> <CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
<CCol xs> <CCol xs>
<CCard> <CCard>
<CCardImage <CCardImage
@@ -1274,6 +1285,6 @@
<script> <script>
export default { export default {
name: "Cards", name: 'Cards',
}; }
</script> </script>
src/views/base/Collapses.vue
+11 -7
View File
@@ -60,7 +60,7 @@
Toggle both elements Toggle both elements
</CButton> </CButton>
<CRow> <CRow>
<CCol xs="6"> <CCol :xs="6">
<CCollapse :visible="visibleA"> <CCollapse :visible="visibleA">
<CCard class="mt-3"> <CCard class="mt-3">
<CCardBody> <CCardBody>
@@ -72,7 +72,7 @@
</CCard> </CCard>
</CCollapse> </CCollapse>
</CCol> </CCol>
<CCol xs="6"> <CCol :xs="6">
<CCollapse :visible="visibleB"> <CCollapse :visible="visibleB">
<CCard class="mt-3"> <CCard class="mt-3">
<CCardBody> <CCardBody>
@@ -93,13 +93,17 @@
</template> </template>
<script> <script>
import { ref } from 'vue'
export default { export default {
name: 'Breadcrumbs', name: 'Collapse',
data() { setup() {
const visible = ref(false)
const visibleA = ref(false)
const visibleB = ref(false)
return { return {
visible: false, visible,
visibleA: false, visibleA,
visibleB: false, visibleB,
} }
}, },
} }
src/views/base/Navbars.vue
+500 -397
View File
@@ -6,427 +6,530 @@
<strong>Vue Navbars</strong> <strong>Vue Navbars</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Basic usage of navbar</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Basic usage of navbar</h4> <h4 class="mt-4">Vue nav brand</h4>
<DocsExample href="components/navbar.html#basic-usage"> <CRow>
<CNavbar expand="lg" colorScheme="light" class="bg-light"> <CCol :md="6">
<CContainer fluid> <DocsExample href="components/navbar.html#brand">
<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>
</DocsExample>
<h4 class="mt-4">Vue nav brand</h4>
<CRow>
<CCol md="6">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Brand as link</CNavbarBrand> <CNavbarBrand href="#">Brand as link</CNavbarBrand>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<DocsExample href="components/navbar.html#brand"> <DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand> <CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<DocsExample href="components/navbar.html#brand"> <DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#"> <CNavbarBrand href="#">
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24"/> <img
</CNavbarBrand> src="/images/brand/coreui-signet.svg"
</CContainer> alt=""
width="22"
height="24"
/>
</CNavbarBrand>
</CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<DocsExample href="components/navbar.html#brand"> <DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#"> <CNavbarBrand href="#">
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24" class="d-inline-block align-top"/> CoreUI <img
</CNavbarBrand> src="/images/brand/coreui-signet.svg"
</CContainer> alt=""
width="22"
height="24"
class="d-inline-block align-top"
/>
CoreUI
</CNavbarBrand>
</CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
</CCol> </CCol>
</CRow> </CRow>
<h4 class="mt-4">Vue navbar with nav</h4> <h4 class="mt-4">Vue navbar with nav</h4>
<DocsExample href="components/navbar.html#nav"> <DocsExample href="components/navbar.html#nav">
<CNavbar expand="lg" colorScheme="light" class="bg-light"> <CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand> <CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/> <CNavbarToggler
<CCollapse class="navbar-collapse" :visible="visible"> aria-label="Toggle navigation"
<CNavbarNav> aria-expanded="{visible}"
<CNavItem> @click="visible = !visible"
<CNavLink href="#" active> />
Home <CCollapse class="navbar-collapse" :visible="visible">
</CNavLink> <CNavbarNav>
</CNavItem> <CNavItem>
<CNavItem> <CNavLink href="#" active> Home </CNavLink>
<CNavLink href="#">Features</CNavLink> </CNavItem>
</CNavItem> <CNavItem>
<CNavItem> <CNavLink href="#">Features</CNavLink>
<CNavLink href="#">Pricing</CNavLink> </CNavItem>
</CNavItem> <CNavItem>
<CDropdown variant="nav-item" :popper="false"> <CNavLink href="#">Pricing</CNavLink>
<CDropdownToggle>Dropdown link</CDropdownToggle> </CNavItem>
<CDropdownMenu> <CDropdown variant="nav-item" :popper="false">
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownToggle>Dropdown link</CDropdownToggle>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownMenu>
<CDropdownDivider /> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
</CDropdownMenu> <CDropdownDivider />
</CDropdown> <CDropdownItem href="#"
</CNavbarNav> >Something else here</CDropdownItem
</CCollapse> >
</CContainer> </CDropdownMenu>
</CNavbar> </CDropdown>
</DocsExample> </CNavbarNav>
</CCollapse>
</CContainer>
</CNavbar>
</DocsExample>
<h4 class="mt-4">Vue navbar with form</h4> <h4 class="mt-4">Vue navbar with form</h4>
<DocsExample href="components/navbar.html#forms"> <DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar with form on right side</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar with input group</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar with buttons</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar with text</h4>
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarText>Navbar text with an inline element</CNavbarText>
</CContainer>
</CNavbar>
</DocsExample>
<h4 class="mt-4">Vue navbar color schemes</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar placement</h4>
<CRow>
<CCol :md="6">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CForm class="d-flex"> <CNavbarBrand href="#">Default</CNavbarBrand>
<CFormInput type="search" class="me-2" placeholder="Search"/> </CContainer>
<CButton type="submit" color="success" variant="outline">Search</CButton>
</CForm>
</CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
<h4 class="mt-4">Vue navbar with form on right side</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar with input group</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar with buttons</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar with text</h4>
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarText>Navbar text with an inline element</CNavbarText>
</CContainer>
</CNavbar>
</DocsExample>
<h4 class="mt-4">Vue navbar color schemes</h4>
<DocsExample 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>
</DocsExample>
<h4 class="mt-4">Vue navbar placement</h4>
<CRow>
<CCol md="6">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Default</CNavbarBrand>
</CContainer>
</CNavbar>
</DocsExample>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<DocsExample href="components/navbar.html#placement"> <DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-top"> <CNavbar
<CContainer fluid> colorScheme="light"
<CNavbarBrand href="#">Fixed top</CNavbarBrand> class="bg-light"
</CContainer> placement="fixed-top"
>
<CContainer fluid>
<CNavbarBrand href="#">Fixed top</CNavbarBrand>
</CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<DocsExample href="components/navbar.html#placement"> <DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-bottom"> <CNavbar
<CContainer fluid> colorScheme="light"
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand> class="bg-light"
</CContainer> placement="fixed-bottom"
>
<CContainer fluid>
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
</CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<DocsExample href="components/navbar.html#placement"> <DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="sticky-top"> <CNavbar
<CContainer fluid> colorScheme="light"
<CNavbarBrand href="#">Sticky top</CNavbarBrand> class="bg-light"
</CContainer> placement="sticky-top"
>
<CContainer fluid>
<CNavbarBrand href="#">Sticky top</CNavbarBrand>
</CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
</CCol> </CCol>
</CRow> </CRow>
<h4 class="mt-4">Vue navbar responsive</h4> <h4 class="mt-4">Vue navbar responsive</h4>
<p>With no CNavbarBrand shown at the smallest breakpoint:</p> <p>With no CNavbarBrand shown at the smallest breakpoint:</p>
<DocsExample href="components/navbar.html#forms"> <DocsExample href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light"> <CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/> <CNavbarToggler
<CCollapse class="navbar-collapse" :visible="visible"> aria-label="Toggle navigation"
<CNavbarBrand href="#">Hidden brand</CNavbarBrand> aria-expanded="{visible}"
<CNavbarNav class="me-auto mb-2 mb-lg-0"> @click="visible = !visible"
<CNavItem> />
<CNavLink href="#" active> <CCollapse class="navbar-collapse" :visible="visible">
Home <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
</CNavLink> <CNavbarNav class="me-auto mb-2 mb-lg-0">
</CNavItem> <CNavItem>
<CNavItem> <CNavLink href="#" active> Home </CNavLink>
<CNavLink href="#">Link</CNavLink> </CNavItem>
</CNavItem> <CNavItem>
<CNavItem> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled> </CNavItem>
Disabled <CNavItem>
</CNavLink> <CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem> </CNavItem>
</CNavbarNav> </CNavbarNav>
<CForm class="d-flex"> <CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/> <CFormInput
<CButton type="submit" color="success" variant="outline">Search</CButton> type="search"
</CForm> class="me-2"
</CCollapse> placeholder="Search"
</CContainer> />
</CNavbar> <CButton type="submit" color="success" variant="outline"
</DocsExample> >Search</CButton
<p>With a brand name shown on the left and toggler on the right:</p> >
<DocsExample href="components/navbar.html#forms"> </CForm>
<CNavbar expand="lg" colorScheme="light" class="bg-light"> </CCollapse>
<CContainer fluid> </CContainer>
<CNavbarBrand href="#">Navbar</CNavbarBrand> </CNavbar>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/> </DocsExample>
<CCollapse class="navbar-collapse" :visible="visible"> <p>With a brand name shown on the left and toggler on the right:</p>
<CNavbarNav class="me-auto mb-2 mb-lg-0"> <DocsExample href="components/navbar.html#forms">
<CNavItem> <CNavbar expand="lg" colorScheme="light" class="bg-light">
<CNavLink href="#" active> <CContainer fluid>
Home <CNavbarBrand href="#">Navbar</CNavbarBrand>
</CNavLink> <CNavbarToggler
</CNavItem> aria-label="Toggle navigation"
<CNavItem> aria-expanded="{visible}"
<CNavLink href="#">Link</CNavLink> @click="visible = !visible"
</CNavItem> />
<CNavItem> <CCollapse class="navbar-collapse" :visible="visible">
<CNavLink href="#" disabled> <CNavbarNav class="me-auto mb-2 mb-lg-0">
Disabled <CNavItem>
</CNavLink> <CNavLink href="#" active> Home </CNavLink>
</CNavItem> </CNavItem>
</CNavbarNav> <CNavItem>
<CForm class="d-flex"> <CNavLink href="#">Link</CNavLink>
<CFormInput type="search" class="me-2" placeholder="Search"/> </CNavItem>
<CButton type="submit" color="success" variant="outline">Search</CButton> <CNavItem>
</CForm> <CNavLink href="#" disabled> Disabled </CNavLink>
</CCollapse> </CNavItem>
</CContainer> </CNavbarNav>
</CNavbar> <CForm class="d-flex">
</DocsExample> <CFormInput
type="search"
<p>With a toggler on the left and brand name on the right:</p> class="me-2"
<DocsExample href="components/navbar.html#forms"> placeholder="Search"
<CNavbar expand="lg" colorScheme="light" class="bg-light"> />
<CContainer fluid> <CButton type="submit" color="success" variant="outline"
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/> >Search</CButton
<CNavbarBrand href="#">Navbar</CNavbarBrand> >
<CCollapse class="navbar-collapse" :visible="visible"> </CForm>
<CNavbarNav class="me-auto mb-2 mb-lg-0"> </CCollapse>
<CNavItem> </CContainer>
<CNavLink href="#" active> </CNavbar>
Home </DocsExample>
</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>
</DocsExample>
<p>With a toggler on the left and brand name on the right:</p>
<DocsExample 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>
</DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
@@ -435,6 +538,6 @@
<script> <script>
export default { export default {
name: "Navbars", name: 'Navbars',
}; }
</script> </script>
src/views/base/Navs.vue
+346 -375
View File
@@ -1,385 +1,356 @@
<template> <template>
<CRow> <CRow>
<CCol :xs="12"> <CCol :xs="12">
<DocsCallout name="Nav" href="components/nav.html" /> <DocsCallout name="Nav" href="components/nav.html" />
</CCol> </CCol>
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Navs</strong> <small>Base navs</small> <strong>Vue Navs</strong> <small>Base navs</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
The base <code>.nav</code> component is built with flexbox and provide a strong The base <code>.nav</code> component is built with flexbox and
foundation for building all types of navigation components. It includes some style provide a strong foundation for building all types of navigation
overrides (for working with lists), some link padding for larger hit areas, and basic components. It includes some style overrides (for working with
disabled styling. lists), some link padding for larger hit areas, and basic disabled
</p> styling.
<DocsExample href="components/nav.html#base-nav"> </p>
<CNav> <DocsExample href="components/nav.html#base-nav">
<CNavItem> <CNav>
<CNavLink href="#" active> <CNavItem>
Active <CNavLink href="#" active> Active </CNavLink>
</CNavLink> </CNavItem>
</CNavItem> <CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled>
Disabled
</CNavLink>
</CNavItem>
</CNav>
</DocsExample>
<p class="text-medium-emphasis small">
Classes are used throughout, so your markup can be super flexible. Use{' '}
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup.
</p>
<DocsExample href="components/nav.html#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled> </CNavItem>
Disabled <CNavItem>
</CNavLink> <CNavLink href="#" disabled> Disabled </CNavLink>
</CNav> </CNavItem>
</DocsExample> </CNav>
</CCardBody> </DocsExample>
</CCard> <p class="text-medium-emphasis small">
</CCol> Classes are used throughout, so your markup can be super flexible.
<CCol :xs="12"> Use{' '}
<CCard class="mb-4"> <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the
<CCardHeader> order of your items is important, or roll your own with a
<strong>Vue Navs</strong> <small>Horizontal alignment</small> <code>&lt;nav&gt;</code> element. Because the .nav uses display:
</CCardHeader> flex, the nav links behave the same as nav items would, but without
<CCardBody> the extra markup.
<p class="text-medium-emphasis small"> </p>
Change the horizontal alignment of your nav with{' '} <DocsExample href="components/nav.html#base-nav">
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment"> <CNav component="nav">
flexbox utilities <CNavLink href="#" active> Active </CNavLink>
</a> <CNavLink href="#">Link</CNavLink>
. By default, navs are left-aligned, but you can easily change them to center or right <CNavLink href="#">Link</CNavLink>
aligned. <CNavLink href="#" disabled> Disabled </CNavLink>
</p> </CNav>
<p class="text-medium-emphasis small"> </DocsExample>
Centered with <code>.justify-content-center</code>: </CCardBody>
</p> </CCard>
<DocsExample href="components/nav.html#horizontal-alignment"> </CCol>
<CNav class="justify-content-center"> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#" active> <CCardHeader>
Active <strong>Vue Navs</strong> <small>Horizontal alignment</small>
</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#">Link</CNavLink> Change the horizontal alignment of your nav with{' '}
</CNavItem> <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
<CNavItem> flexbox utilities
<CNavLink href="#">Link</CNavLink> </a>
</CNavItem> . By default, navs are left-aligned, but you can easily change them
<CNavItem> to center or right aligned.
<CNavLink href="#" disabled> </p>
Disabled <p class="text-medium-emphasis small">
</CNavLink> Centered with <code>.justify-content-center</code>:
</CNavItem> </p>
</CNav> <DocsExample href="components/nav.html#horizontal-alignment">
</DocsExample> <CNav class="justify-content-center">
<p class="text-medium-emphasis small"> <CNavItem>
Right-aligned with <code>.justify-content-end</code>: <CNavLink href="#" active> Active </CNavLink>
</p> </CNavItem>
<DocsExample href="components/nav.html#base-nav"> <CNavItem>
<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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Vertical</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Stack your navigation by changing the flex item direction with the{' '}
<code>.flex-column</code> utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
</p>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Tabs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface
</p>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Pills</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Fill and justify</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Force your <code>.nav</code>&#39;s contents to extend the full available width one of
two modifier classes. To proportionately fill all available space with your{' '}
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
horizontal space is occupied, but not every nav item has the same width.
</p>
<DocsExample 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>
</DocsExample>
<p class="text-medium-emphasis small">
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width.
</p>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Working with flex utilities</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you need responsive nav variations, consider using a series of{' '}
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
verbose, these utilities offer greater customization across responsive breakpoints. In
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
horizontal layout that fills the available width starting from the small breakpoint.
</p>
<DocsExample href="components/nav.html#working-with-flex-utilities">
<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
<CNavLink href="#" active>
Active
</CNavLink>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled> </CNavItem>
Disabled <CNavItem>
</CNavLink> <CNavLink href="#" disabled> Disabled </CNavLink>
</CNav> </CNavItem>
</DocsExample> </CNav>
</CCardBody> </DocsExample>
</CCard> <p class="text-medium-emphasis small">
</CCol> Right-aligned with <code>.justify-content-end</code>:
<CCol :xs="12"> </p>
<CCard class="mb-4"> <DocsExample href="components/nav.html#base-nav">
<CCardHeader> <CNav class="justify-content-end">
<strong>Vue Navs</strong> <small>Tabs with dropdowns</small> <CNavItem>
</CCardHeader> <CNavLink href="#" active> Active </CNavLink>
<CCardBody> </CNavItem>
<DocsExample href="components/nav.html#tabs-with-dropdowns"> <CNavItem>
<CNav> <CNavLink href="#">Link</CNavLink>
<CNavItem> </CNavItem>
<CNavLink href="#" active> <CNavItem>
Active <CNavLink href="#">Link</CNavLink>
</CNavLink> </CNavItem>
</CNavItem> <CNavItem>
<CDropdown variant="nav-item"> <CNavLink href="#" disabled> Disabled </CNavLink>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> </CNavItem>
<CDropdownMenu> </CNav>
<CDropdownItem href="#">Action</CDropdownItem> </DocsExample>
<CDropdownItem href="#">Another action</CDropdownItem> </CCardBody>
<CDropdownItem href="#">Something else here</CDropdownItem> </CCard>
</CDropdownMenu> </CCol>
</CDropdown> <CCol :xs="12">
<CNavItem> <CCard class="mb-4">
<CNavLink href="#">Link</CNavLink> <CCardHeader>
</CNavItem> <strong>Vue Navs</strong> <small>Vertical</small>
<CNavItem> </CCardHeader>
<CNavLink href="#" disabled> <CCardBody>
Disabled <p class="text-medium-emphasis small">
</CNavLink> Stack your navigation by changing the flex item direction with the{'
</CNavItem> '}
</CNav> <code>.flex-column</code> utility. Need to stack them on some
</DocsExample> viewports but not others? Use the responsive versions (e.g.,
</CCardBody> <code>.flex-sm-column</code>).
</CCard> </p>
</CCol> <DocsExample href="components/nav.html#vertical">
<CCol :xs="12"> <CNav class="flex-column">
<CCard class="mb-4"> <CNavItem>
<CCardHeader> <CNavLink href="#" active> Active </CNavLink>
<strong>Vue Navs</strong> <small>Pills with dropdowns</small> </CNavItem>
</CCardHeader> <CNavItem>
<CCardBody> <CNavLink href="#">Link</CNavLink>
<DocsExample href="components/nav.html#pills-with-dropdowns"> </CNavItem>
<CNav variant="pills"> <CNavItem>
<CNavItem> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#" active> </CNavItem>
Active <CNavItem>
</CNavLink> <CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item"> </CNav>
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> </DocsExample>
<CDropdownMenu> </CCardBody>
<CDropdownItem href="#">Action</CDropdownItem> </CCard>
<CDropdownItem href="#">Another action</CDropdownItem> </CCol>
<CDropdownItem href="#">Something else here</CDropdownItem> <CCol :xs="12">
</CDropdownMenu> <CCard class="mb-4">
</CDropdown> <CCardHeader>
<CNavItem> <strong>Vue Navs</strong> <small>Tabs</small>
<CNavLink href="#">Link</CNavLink> </CCardHeader>
</CNavItem> <CCardBody>
<CNavItem> <p class="text-medium-emphasis small">
<CNavLink href="#" disabled> Takes the basic nav from above and adds the
Disabled <code>variant=&#34;tabs&#34;</code> class to generate a tabbed
</CNavLink> interface
</CNavItem> </p>
</CNav> <DocsExample href="components/nav.html#tabs">
</DocsExample> <CNav variant="tabs">
</CCardBody> <CNavItem>
</CCard> <CNavLink href="#" active> Active </CNavLink>
</CCol> </CNavItem>
</CRow> <CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">Link</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNavItem>
</CNav>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Pills</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Take that same HTML, but use
<code>variant=&#34;pills&#34;</code> instead:
</p>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Fill and justify</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Force your <code>.nav</code>&#39;s contents to extend the full
available width one of two modifier classes. To proportionately fill
all available space with your{' '} <code>.nav-item</code>s, use
<code>layout=&#34;fill&#34;</code>. Notice that all horizontal space
is occupied, but not every nav item has the same width.
</p>
<DocsExample 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>
</DocsExample>
<p class="text-medium-emphasis small">
For equal-width elements, use
<code>layout=&#34;justified&#34;</code>. All horizontal space will
be occupied by nav links, but unlike the .nav-fill above, every nav
item will be the same width.
</p>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Working with flex utilities</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
If you need responsive nav variations, consider using a series of{'
'}
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a
>. While more verbose, these utilities offer greater customization
across responsive breakpoints. In the example below, our nav will be
stacked on the lowest breakpoint, then adapt to a horizontal layout
that fills the available width starting from the small breakpoint.
</p>
<DocsExample href="components/nav.html#working-with-flex-utilities">
<CNav
component="nav"
variant="pills"
class="flex-column flex-sm-row"
>
<CNavLink href="#" active> Active </CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled> Disabled </CNavLink>
</CNav>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<DocsExample href="components/nav.html#tabs-with-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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader>
<CCardBody>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template> </template>
<script> <script>
export default { export default {
name: "Navs", name: 'Navs',
}; }
</script> </script>
src/views/base/Paginations.vue
+7 -4
View File
@@ -67,7 +67,8 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Pagination</strong> <small>Disabled and active states</small> <strong>Vue Pagination</strong>
<small>Disabled and active states</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
@@ -84,7 +85,9 @@
disabled links and use custom JavaScript to fully disable their disabled links and use custom JavaScript to fully disable their
functionality. functionality.
</p> </p>
<DocsExample href="components/pagination.html#disabled-and-active-states"> <DocsExample
href="components/pagination.html#disabled-and-active-states"
>
<CPagination aria-label="Page navigation example"> <CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous" disabled> <CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
@@ -176,6 +179,6 @@
<script> <script>
export default { export default {
name: "Paginations", name: 'Paginations',
}; }
</script> </script>
src/views/base/Progress.vue
+2 -2
View File
@@ -209,6 +209,6 @@
<script> <script>
export default { export default {
name: "Progress", name: 'Progress',
}; }
</script> </script>
src/views/base/Tables.vue
+5 -4
View File
@@ -451,8 +451,9 @@
</DocsExample> </DocsExample>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color"> <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities </a Border color utilities
> can be added to change colors: </a>
can be added to change colors:
</p> </p>
<DocsExample href="components/table.html#bordered-tables"> <DocsExample href="components/table.html#bordered-tables">
<CTable bordered borderColor="primary"> <CTable bordered borderColor="primary">
@@ -990,6 +991,6 @@
<script> <script>
export default { export default {
name: "Tables", name: 'Tables',
}; }
</script> </script>
src/views/buttons/ButtonGroups.vue
+76 -45
View File
@@ -70,7 +70,8 @@
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Button Group</strong> <span>Checkbox and radio button groups</span> <strong>Vue Button Group</strong>
<span>Checkbox and radio button groups</span>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p> <p>
@@ -84,12 +85,24 @@
role="group" role="group"
aria-label="Basic checkbox toggle button group" aria-label="Basic checkbox toggle button group"
> >
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btncheck1" <CFormCheck
autoComplete="off" label="Checkbox 1" /> :button="{ color: 'primary', variant: 'outline' }"
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btncheck1"
id="btncheck2" autoComplete="off" label="Checkbox 2" /> autoComplete="off"
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" label="Checkbox 1"
id="btncheck3" autoComplete="off" label="Checkbox 3" /> />
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck2"
autoComplete="off"
label="Checkbox 2"
/>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
id="btncheck3"
autoComplete="off"
label="Checkbox 3"
/>
</CButtonGroup> </CButtonGroup>
</DocsExample> </DocsExample>
<DocsExample <DocsExample
@@ -99,12 +112,29 @@
role="group" role="group"
aria-label="Basic checkbox toggle button group" aria-label="Basic checkbox toggle button group"
> >
<CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }" <CFormCheck
name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1" type="radio"
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }" :button="{ color: 'primary', variant: 'outline' }"
name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2" name="btnradio"
/> <CFormCheck type="radio" :button="{ color: 'primary', variant: 'outline' }" id="btnradio1"
name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3" autoComplete="off"
label="Radio 1"
/>
<CFormCheck
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio2"
autoComplete="off"
label="Radio 2"
/>
<CFormCheck
type="radio"
:button="{ color: 'primary', variant: 'outline' }"
name="btnradio"
id="btnradio3"
autoComplete="off"
label="Radio 3"
/> />
</CButtonGroup> </CButtonGroup>
</DocsExample> </DocsExample>
@@ -127,30 +157,18 @@
role="group" role="group"
aria-label="Toolbar with button groups" aria-label="Toolbar with button groups"
> >
<CButtonGroup <CButtonGroup class="me-2" role="group" aria-label="First group">
class="me-2"
role="group"
aria-label="First group"
>
<CButton color="primary">1</CButton> <CButton color="primary">1</CButton>
<CButton color="primary">2</CButton> <CButton color="primary">2</CButton>
<CButton color="primary">3</CButton> <CButton color="primary">3</CButton>
<CButton color="primary">4</CButton> <CButton color="primary">4</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup <CButtonGroup class="me-2" role="group" aria-label="Second group">
class="me-2"
role="group"
aria-label="Second group"
>
<CButton color="secondary">5</CButton> <CButton color="secondary">5</CButton>
<CButton color="secondary">6</CButton> <CButton color="secondary">6</CButton>
<CButton color="secondary">7</CButton> <CButton color="secondary">7</CButton>
</CButtonGroup> </CButtonGroup>
<CButtonGroup <CButtonGroup class="me-2" role="group" aria-label="Third group">
class="me-2"
role="group"
aria-label="Third group"
>
<CButton color="info">8</CButton> <CButton color="info">8</CButton>
</CButtonGroup> </CButtonGroup>
</CButtonToolbar> </CButtonToolbar>
@@ -166,11 +184,7 @@
role="group" role="group"
aria-label="Toolbar with button groups" aria-label="Toolbar with button groups"
> >
<CButtonGroup <CButtonGroup class="me-2" role="group" aria-label="First group">
class="me-2"
role="group"
aria-label="First group"
>
<CButton color="secondary" variant="outline"> 1 </CButton> <CButton color="secondary" variant="outline"> 1 </CButton>
<CButton color="secondary" variant="outline"> 2 </CButton> <CButton color="secondary" variant="outline"> 2 </CButton>
<CButton color="secondary" variant="outline"> 3 </CButton> <CButton color="secondary" variant="outline"> 3 </CButton>
@@ -190,11 +204,7 @@
role="group" role="group"
aria-label="Toolbar with button groups" aria-label="Toolbar with button groups"
> >
<CButtonGroup <CButtonGroup class="me-2" role="group" aria-label="First group">
class="me-2"
role="group"
aria-label="First group"
>
<CButton color="secondary" variant="outline"> 1 </CButton> <CButton color="secondary" variant="outline"> 1 </CButton>
<CButton color="secondary" variant="outline"> 2 </CButton> <CButton color="secondary" variant="outline"> 2 </CButton>
<CButton color="secondary" variant="outline"> 3 </CButton> <CButton color="secondary" variant="outline"> 3 </CButton>
@@ -373,13 +383,34 @@
role="group" role="group"
aria-label="Vertical button group" aria-label="Vertical button group"
> >
<CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" <CFormCheck
name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio type="radio"
1" defaultChecked /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" :button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio name="vbtnradio"
2" /> <CFormCheck type="radio" :button="{ color: 'danger', variant: 'outline' }" id="vbtnradio1"
name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio autoComplete="off"
3" /> label="Radio
1"
defaultChecked
/>
<CFormCheck
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio2"
autoComplete="off"
label="Radio
2"
/>
<CFormCheck
type="radio"
:button="{ color: 'danger', variant: 'outline' }"
name="vbtnradio"
id="vbtnradio3"
autoComplete="off"
label="Radio
3"
/>
</CButtonGroup> </CButtonGroup>
</DocsExample> </DocsExample>
</CCardBody> </CCardBody>
src/views/buttons/Buttons.vue
+1 -1
View File
@@ -242,7 +242,7 @@
:disabled="state === 'disabled' ? true : false" :disabled="state === 'disabled' ? true : false"
variant="ghost" variant="ghost"
> >
<CIcon icon="{cilBell}" class="me-2" /> <CIcon icon="cil-bell" class="me-2" />
{{ color.charAt(0).toUpperCase() + color.slice(1) }} {{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton> </CButton>
</template> </template>
src/views/charts/CChartDoughnutExample.vue
+7 -14
View File
@@ -1,7 +1,5 @@
<template> <template>
<CChartDoughnut <CChartDoughnut :data="defaultData" />
:data="defaultData"
/>
</template> </template>
<script> <script>
@@ -10,22 +8,17 @@ export default {
name: 'CChartDoughnutExample', name: 'CChartDoughnutExample',
components: { CChartDoughnut }, components: { CChartDoughnut },
computed: { computed: {
defaultData () { defaultData() {
return { return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'], labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [ datasets: [
{ {
backgroundColor: [ backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
'#41B883', data: [40, 20, 80, 10],
'#E46651', },
'#00D8FF',
'#DD1B16'
],
data: [40, 20, 80, 10]
}
], ],
} }
} },
} },
} }
</script> </script>
src/views/charts/CChartLineExample.vue
+8 -8
View File
@@ -1,5 +1,5 @@
<template> <template>
<CChartLine :data="defaultData"/> <CChartLine :data="defaultData" />
</template> </template>
<script> <script>
@@ -8,23 +8,23 @@ export default {
name: 'CChartLineExample', name: 'CChartLineExample',
components: { CChartLine }, components: { CChartLine },
computed: { computed: {
defaultData () { defaultData() {
return { return {
labels: ['months', 'a', 'b', 'c', 'd'], labels: ['months', 'a', 'b', 'c', 'd'],
datasets: [ datasets: [
{ {
label: 'Data One', label: 'Data One',
backgroundColor: 'rgb(228,102,81,0.9)', backgroundColor: 'rgb(228,102,81,0.9)',
data: [30, 39, 10, 50, 30, 70, 35] data: [30, 39, 10, 50, 30, 70, 35],
}, },
{ {
label: 'Data Two', label: 'Data Two',
backgroundColor: 'rgb(0,216,255,0.9)', backgroundColor: 'rgb(0,216,255,0.9)',
data: [39, 80, 40, 35, 40, 20, 45] data: [39, 80, 40, 35, 40, 20, 45],
} },
] ],
} }
} },
} },
} }
</script> </script>
src/views/charts/CChartPieExample.vue
+8 -15
View File
@@ -1,7 +1,5 @@
<template> <template>
<CChartPie <CChartPie :data="defaultData" />
:data="defaultData"
/>
</template> </template>
<script> <script>
@@ -10,22 +8,17 @@ export default {
name: 'CChartPieExample', name: 'CChartPieExample',
components: { CChartPie }, components: { CChartPie },
computed: { computed: {
defaultData () { defaultData() {
return { return {
labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'], labels: ['VueJs', 'EmberJs', 'VueJs', 'AngularJs'],
datasets: [ datasets: [
{ {
backgroundColor: [ backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
'#41B883', data: [40, 20, 80, 10],
'#E46651', },
'#00D8FF', ],
'#DD1B16'
],
data: [40, 20, 80, 10]
}
]
} }
} },
} },
} }
</script> </script>
src/views/charts/CChartPolarAreaExample.vue
+18 -12
View File
@@ -1,7 +1,5 @@
<template> <template>
<CChartPolarArea <CChartPolarArea :data="defaultData" />
:data="defaultData"
/>
</template> </template>
<script> <script>
@@ -10,9 +8,17 @@ export default {
name: 'CChartPolarAreaExample', name: 'CChartPolarAreaExample',
components: { CChartPolarArea }, components: { CChartPolarArea },
computed: { computed: {
defaultData () { defaultData() {
return { return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
@@ -21,7 +27,7 @@ export default {
pointBorderColor: '#fff', pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(179,181,198,1)', pointHoverBackgroundColor: 'rgba(179,181,198,1)',
pointHoverBorderColor: 'rgba(179,181,198,1)', pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40],
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
@@ -30,14 +36,14 @@ export default {
pointBorderColor: '#fff', pointBorderColor: '#fff',
pointHoverBackgroundColor: 'rgba(255,99,132,1)', pointHoverBackgroundColor: 'rgba(255,99,132,1)',
pointHoverBorderColor: 'rgba(255,99,132,1)', pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100],
} },
], ],
options: { options: {
aspectRatio: 1.5 aspectRatio: 1.5,
} },
} }
}, },
} },
} }
</script> </script>
src/views/charts/CChartRadarExample.vue
+19 -13
View File
@@ -1,7 +1,5 @@
<template> <template>
<CChartRadar <CChartRadar :data="defaultData" />
:data="defaultData"
/>
</template> </template>
<script> <script>
@@ -10,9 +8,17 @@ export default {
name: 'CChartRadarExample', name: 'CChartRadarExample',
components: { CChartRadar }, components: { CChartRadar },
computed: { computed: {
defaultData () { defaultData() {
return { return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running',
],
datasets: [ datasets: [
{ {
label: '2020', label: '2020',
@@ -23,7 +29,7 @@ export default {
pointHoverBackgroundColor: '#fff', pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)', pointHoverBorderColor: 'rgba(179,181,198,1)',
tooltipLabelColor: 'rgba(179,181,198,1)', tooltipLabelColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40],
}, },
{ {
label: '2021', label: '2021',
@@ -34,14 +40,14 @@ export default {
pointHoverBackgroundColor: '#fff', pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)', pointHoverBorderColor: 'rgba(255,99,132,1)',
tooltipLabelColor: 'rgba(255,99,132,1)', tooltipLabelColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100],
} },
], ],
options: { options: {
aspectRatio: 1.5 aspectRatio: 1.5,
} },
} }
}, },
} },
} }
</script> </script>
src/views/charts/Charts.vue
+10 -12
View File
@@ -2,42 +2,40 @@
<CRow> <CRow>
<CCol :md="6" class="mb-4"> <CCol :md="6" class="mb-4">
<CCard> <CCard>
<CCardHeader> <CCardHeader> Line Chart </CCardHeader>
Line Chart
</CCardHeader>
<CCardBody> <CCardBody>
<CChartLineExample/> <CChartLineExample />
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol :md="6" class="mb-4"> <CCol :md="6" class="mb-4">
<CCard> <CCard>
<CCardHeader>Bar Chart</CCardHeader> <CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody> <CCardBody><CChartBarExample /></CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol :md="6" class="mb-4"> <CCol :md="6" class="mb-4">
<CCard> <CCard>
<CCardHeader>Doughnut Chart</CCardHeader> <CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody> <CCardBody><CChartDoughnutExample /></CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol :md="6" class="mb-4"> <CCol :md="6" class="mb-4">
<CCard> <CCard>
<CCardHeader>Radar Chart</CCardHeader> <CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody> <CCardBody><CChartRadarExample /></CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol :md="6" class="mb-4"> <CCol :md="6" class="mb-4">
<CCard> <CCard>
<CCardHeader>Pie Chart</CCardHeader> <CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody> <CCardBody><CChartPieExample /></CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol :md="6" class="mb-4"> <CCol :md="6" class="mb-4">
<CCard> <CCard>
<CCardHeader>Polar Area Chart</CCardHeader> <CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody> <CCardBody><CChartPolarAreaExample /></CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
@@ -48,7 +46,7 @@ import * as Charts from './index.js'
export default { export default {
name: 'Charts', name: 'Charts',
components: { components: {
...Charts ...Charts,
} },
} }
</script> </script>
src/views/charts/MainChartExample.vue
+23 -23
View File
@@ -10,27 +10,27 @@
</template> </template>
<script> <script>
import { CChart } from "@coreui/vue-chartjs"; import { CChart } from '@coreui/vue-chartjs'
import { getStyle, hexToRgba } from "@coreui/utils/src"; import { getStyle, hexToRgba } from '@coreui/utils/src'
function random(min, max) { function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min); return Math.floor(Math.random() * (max - min + 1) + min)
} }
export default { export default {
name: "MainChartExample", name: 'MainChartExample',
components: { components: {
CChart, CChart,
}, },
setup() { setup() {
const data = { const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [ datasets: [
{ {
label: "My First dataset", label: 'My First dataset',
backgroundColor: hexToRgba(getStyle("--cui-info"), 10), backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
borderColor: getStyle("--cui-info"), borderColor: getStyle('--cui-info'),
pointHoverBackgroundColor: getStyle("--cui-info"), pointHoverBackgroundColor: getStyle('--cui-info'),
borderWidth: 2, borderWidth: 2,
data: [ data: [
random(50, 200), random(50, 200),
@@ -44,10 +44,10 @@ export default {
fill: true, fill: true,
}, },
{ {
label: "My Second dataset", label: 'My Second dataset',
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: getStyle("--cui-success"), borderColor: getStyle('--cui-success'),
pointHoverBackgroundColor: getStyle("--cui-success"), pointHoverBackgroundColor: getStyle('--cui-success'),
borderWidth: 2, borderWidth: 2,
data: [ data: [
random(50, 200), random(50, 200),
@@ -60,16 +60,16 @@ export default {
], ],
}, },
{ {
label: "My Third dataset", label: 'My Third dataset',
backgroundColor: "transparent", backgroundColor: 'transparent',
borderColor: getStyle("--cui-danger"), borderColor: getStyle('--cui-danger'),
pointHoverBackgroundColor: getStyle("--cui-danger"), pointHoverBackgroundColor: getStyle('--cui-danger'),
borderWidth: 1, borderWidth: 1,
borderDash: [8, 5], borderDash: [8, 5],
data: [65, 65, 65, 65, 65, 65, 65], data: [65, 65, 65, 65, 65, 65, 65],
}, },
], ],
}; }
const options = { const options = {
maintainAspectRatio: false, maintainAspectRatio: false,
@@ -104,18 +104,18 @@ export default {
hoverBorderWidth: 3, hoverBorderWidth: 3,
}, },
}, },
}; }
return { return {
data, data,
options, options,
}; }
}, },
methods: { methods: {
aa(value, value2) { aa(value, value2) {
console.log(value); console.log(value)
console.log(value2); console.log(value2)
}, },
}, },
}; }
</script> </script>
src/views/charts/index.js
+1 -1
View File
@@ -11,5 +11,5 @@ export {
CChartDoughnutExample, CChartDoughnutExample,
CChartRadarExample, CChartRadarExample,
CChartPieExample, CChartPieExample,
CChartPolarAreaExample CChartPolarAreaExample,
} }
src/views/forms/ChecksRadios.vue
+3 -3
View File
@@ -209,7 +209,7 @@
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Group checkboxes or radios on the same horizontal row by adding Group checkboxes or radios on the same horizontal row by adding
<code>inline</code> boolean property to any <code>inline</code> boolean property to any
<code>&lt;CFormCheck&gt;</code>. <code>&lt;CFormCheck&gt;</code>.
</p> </p>
<DocsExample href="forms/checks-radios.html#inline"> <DocsExample href="forms/checks-radios.html#inline">
@@ -406,6 +406,6 @@
<script> <script>
export default { export default {
name: "ChecksRadios", name: 'ChecksRadios',
}; }
</script> </script>
src/views/forms/FloatingLabels.vue
+181 -154
View File
@@ -1,160 +1,187 @@
<template> <template>
<CRow> <CRow>
<CCol :xs="12"> <CCol :xs="12">
<DocsCallout name="Floating Label" href="forms/floating-labels.html" /> <DocsCallout name="Floating Label" href="forms/floating-labels.html" />
</CCol> </CCol>
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Floating labels</strong> <strong>Vue Floating labels</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code> Wrap a pair of <code>&lt;CFormInput&gt;</code> and
elements in <code>CFormFloating</code> to enable floating labels with textual form <code>&lt;CFormLabel&gt;</code> elements in
fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code> <code>CFormFloating</code> to enable floating labels with textual
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> form fields. A <code>placeholder</code> is required on each
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so <code>&lt;CFormInput&gt;</code> as our method of CSS-only floating
we can utilize a sibling selector (e.g., <code>~</code>). labels uses the <code>:placeholder-shown</code> pseudo-element. Also
</p> note that the <code>&lt;CFormInput&gt;</code> must come first so we
<DocsExample href="forms/floating-labels.html"> can utilize a sibling selector (e.g., <code>~</code>).
<CFormFloating class="mb-3"> </p>
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" /> <DocsExample href="forms/floating-labels.html">
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel> <CFormFloating class="mb-3">
</CFormFloating> <CFormInput
<CFormFloating> type="email"
<CFormInput type="password" id="floatingPassword" placeholder="Password" /> id="floatingInput"
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel> placeholder="name@example.com"
</CFormFloating> />
</DocsExample> <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
<p class="text-medium-emphasis small"> </CFormFloating>
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code> <CFormFloating>
s will automatically adjust to their floated position. <CFormInput
</p> type="password"
<DocsExample href="forms/floating-labels.html"> id="floatingPassword"
<CFormFloating> placeholder="Password"
<CFormInput />
type="email" <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
id="floatingInputValue" </CFormFloating>
placeholder="name@example.com" </DocsExample>
defaultValue="test@example.com" <p class="text-medium-emphasis small">
/> When there&#39;s a <code>value</code> already defined,
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel> <code>&lt;CFormLabel&gt;</code>
</CFormFloating> s will automatically adjust to their floated position.
</DocsExample> </p>
</CCardBody> <DocsExample href="forms/floating-labels.html">
</CCard> <CFormFloating>
</CCol> <CFormInput
<CCol :xs="12"> type="email"
<CCard class="mb-4"> id="floatingInputValue"
<CCardHeader> placeholder="name@example.com"
<strong>Vue Floating labels</strong> <small>Textareas</small> defaultValue="test@example.com"
</CCardHeader> />
<CCardBody> <CFormLabel htmlFor="floatingInputValue"
<p class="text-medium-emphasis small"> >Input with value</CFormLabel
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as >
<code>&lt;CFormInput&gt;</code>s. </CFormFloating>
</p> </DocsExample>
<DocsExample href="forms/floating-labels.html#textareas"> </CCardBody>
<CFormFloating> </CCard>
<CFormTextarea </CCol>
id="floatingTextarea" <CCol :xs="12">
placeholder="Leave a comment here" <CCard class="mb-4">
></CFormTextarea> <CCardHeader>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel> <strong>Vue Floating labels</strong> <small>Textareas</small>
</CFormFloating> </CCardHeader>
</DocsExample> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the By default, <code>&lt;CFormTextarea&gt;</code>s will be the same
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either height as <code>&lt;CFormInput&gt;</code>s.
inline or via custom CSS). </p>
</p> <DocsExample href="forms/floating-labels.html#textareas">
<DocsExample href="forms/floating-labels.html#textareas"> <CFormFloating>
<CFormFloating> <CFormTextarea
<CFormTextarea id="floatingTextarea"
placeholder="Leave a comment here" placeholder="Leave a comment here"
id="floatingTextarea2" ></CFormTextarea>
style="height: 100px" <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
></CFormTextarea> </CFormFloating>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel> </DocsExample>
</CFormFloating> <p class="text-medium-emphasis small">
</DocsExample> To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>,
</CCardBody> do not use the <code>rows</code> attribute. Instead, set an explicit
</CCard> <code>height</code> (either inline or via custom CSS).
</CCol> </p>
<CCol :xs="12"> <DocsExample href="forms/floating-labels.html#textareas">
<CCard class="mb-4"> <CFormFloating>
<CCardHeader> <CFormTextarea
<strong>Vue Floating labels</strong> <small>Selects</small> placeholder="Leave a comment here"
</CCardHeader> id="floatingTextarea2"
<CCardBody> style="height: 100px"
<p class="text-medium-emphasis small"> ></CFormTextarea>
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on <CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike </CFormFloating>
<code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the </DocsExample>
<code>&lt;CFormLabel&gt;</code> in its floated state. </CCardBody>
<strong> </CCard>
Selects with <code>size</code> and <code>multiple</code> are not supported. </CCol>
</strong> <CCol :xs="12">
</p> <CCard class="mb-4">
<DocsExample href="forms/floating-labels.html#selects"> <CCardHeader>
<CFormFloating> <strong>Vue Floating labels</strong> <small>Selects</small>
<CFormSelect id="floatingSelect" aria-label="Floating label select example"> </CCardHeader>
<option>Open this select menu</option> <CCardBody>
<option value="1">One</option> <p class="text-medium-emphasis small">
<option value="2">Two</option> Other than <code>&lt;CFormInput&gt;</code>, floating labels are only
<option value="3">Three</option> available on <code>&lt;CFormSelect&gt;</code>s. They work in the
</CFormSelect> same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel> always show the <code>&lt;CFormLabel&gt;</code> in its floated
</CFormFloating> state.
</DocsExample> <strong>
</CCardBody> Selects with <code>size</code> and <code>multiple</code> are not
</CCard> supported.
</CCol> </strong>
<CCol :xs="12"> </p>
<CCard class="mb-4"> <DocsExample href="forms/floating-labels.html#selects">
<CCardHeader> <CFormFloating>
<strong>Vue Floating labels</strong> <small>Layout</small> <CFormSelect
</CCardHeader> id="floatingSelect"
<CCardBody> aria-label="Floating label select example"
<p class="text-medium-emphasis small"> >
When working with the CoreUI for Bootstrap grid system, be sure to place form elements <option>Open this select menu</option>
within column classes. <option value="1">One</option>
</p> <option value="2">Two</option>
<DocsExample href="forms/floating-labels.html#layout"> <option value="3">Three</option>
<CRow :xs="{ gutter: 2 }"> </CFormSelect>
<CCol md> <CFormLabel htmlFor="floatingSelect"
<CFormFloating> >Works with selects</CFormLabel
<CFormInput >
type="email" </CFormFloating>
id="floatingInputGrid" </DocsExample>
placeholder="name@example.com" </CCardBody>
defaultValue="email@example.com" </CCard>
/> </CCol>
<CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel> <CCol :xs="12">
</CFormFloating> <CCard class="mb-4">
</CCol> <CCardHeader>
<CCol md> <strong>Vue Floating labels</strong> <small>Layout</small>
<CFormFloating> </CCardHeader>
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example"> <CCardBody>
<option>Open this select menu</option> <p class="text-medium-emphasis small">
<option value="1">One</option> When working with the CoreUI for Bootstrap grid system, be sure to
<option value="2">Two</option> place form elements within column classes.
<option value="3">Three</option> </p>
</CFormSelect> <DocsExample href="forms/floating-labels.html#layout">
<CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel> <CRow :xs="{ gutter: 2 }">
</CFormFloating> <CCol md>
</CCol> <CFormFloating>
</CRow> <CFormInput
</DocsExample> type="email"
</CCardBody> id="floatingInputGrid"
</CCard> placeholder="name@example.com"
</CCol> defaultValue="email@example.com"
</CRow> />
<CFormLabel htmlFor="floatingInputGrid"
>Email address</CFormLabel
>
</CFormFloating>
</CCol>
<CCol md>
<CFormFloating>
<CFormSelect
id="floatingSelectGrid"
aria-label="Floating label select example"
>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid"
>Works with selects</CFormLabel
>
</CFormFloating>
</CCol>
</CRow>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template> </template>
<script> <script>
export default { export default {
name: "FloatingLabels", name: 'FloatingLabels',
}; }
</script> </script>
src/views/forms/InputGroup.vue
+509 -473
View File
@@ -1,485 +1,521 @@
<template> <template>
<CRow> <CRow>
<CCol xs=12> <CCol :xs="12">
<DocsCallout name="Input Group" href="forms/input-group.html" /> <DocsCallout name="Input Group" href="forms/input-group.html" />
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Basic example</small> <strong>Vue Input group</strong> <small>Basic example</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Place one add-on or button on either side of an input. You may also place one on both Place one add-on or button on either side of an input. You may also
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the place one on both sides of an input. Remember to place
input group. <code>&lt;CFormLabel&gt;</code>s outside the input group.
</p> </p>
<DocsExample href="forms/input-group.html"> <DocsExample href="forms/input-group.html">
<CInputGroup class="mb-3"> <CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText> <CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput <CFormInput
placeholder="Username" placeholder="Username"
aria-label="Username" aria-label="Username"
aria-describedby="basic-addon1" aria-describedby="basic-addon1"
/>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput
placeholder="Recipient&#39;s username"
aria-label="Recipient&#39;s username"
aria-describedby="basic-addon2"
/>
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
</CInputGroup>
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon3"
>https://example.com/users/</CInputGroupText
>
<CFormInput id="basic-url" aria-describedby="basic-addon3" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CFormInput aria-label="Amount (to the nearest dollar)" />
<CInputGroupText>.00</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
<CFormInput placeholder="Username" aria-label="Username" />
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Server" aria-label="Server" />
</CInputGroup>
<CInputGroup>
<CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Wrapping</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Input groups wrap by default via <code>flex-wrap: wrap</code> in
order to accommodate custom form field validation within an input
group. You may disable this with <code>.flex-nowrap</code>.
</p>
<DocsExample href="forms/input-group.html#wrapping">
<CInputGroup class="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
</CInputGroup>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Add the relative form sizing classes to the
<code>&lt;CInputGroup&gt;</code> itself and contents within will
automatically resize—no need for repeating the form control size
classes on each element.
</p>
<p class="text-medium-emphasis small">
<strong
>Sizing on the individual input group elements
isn&#39;tsupported.</strong
>
</p>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;s addon
instead of text.
</p>
<DocsExample href="forms/input-group.html#checkboxes-and-radios">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck
type="checkbox"
value=""
aria-label="Checkbox for following text input"
/> />
</CInputGroup> </CInputGroupText>
<CInputGroup class="mb-3"> <CFormInput aria-label="Text input with checkbox" />
<CFormInput </CInputGroup>
placeholder="Recipient&#39;s username" <CInputGroup>
aria-label="Recipient&#39;s username" <CInputGroupText>
aria-describedby="basic-addon2" <CFormCheck
type="radio"
value=""
aria-label="Radio button for following text input"
/> />
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText> </CInputGroupText>
</CInputGroup> <CFormInput aria-label="Text input with radio button" />
<CFormLabel for="basic-url">Your vanity URL</CFormLabel> </CInputGroup>
<CInputGroup class="mb-3"> </DocsExample>
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText> </CCardBody>
<CFormInput id="basic-url" aria-describedby="basic-addon3" /> </CCard>
</CInputGroup> </CCol>
<CInputGroup class="mb-3"> <CCol :xs="12">
<CInputGroupText>$</CInputGroupText> <CCard class="mb-4">
<CFormInput aria-label="Amount (to the nearest dollar)" /> <CCardHeader>
<CInputGroupText>.00</CInputGroupText> <strong>Vue Input group</strong> <small>Multiple inputs</small>
</CInputGroup> </CCardHeader>
<CInputGroup class="mb-3"> <CCardBody>
<CFormInput placeholder="Username" aria-label="Username" /> <p class="text-medium-emphasis small">
<CInputGroupText>@</CInputGroupText> While multiple <code>&lt;CFormInput&gt;</code>s are supported
<CFormInput placeholder="Server" aria-label="Server" /> visually, validation styles are only available for input groups with
</CInputGroup> a single <code>&lt;CFormInput&gt;</code>.
<CInputGroup> </p>
<CInputGroupText>With textarea</CInputGroupText> <DocsExample href="forms/input-group.html#multiple-inputs">
<CFormTextarea aria-label="With textarea"></CFormTextarea> <CInputGroup>
</CInputGroup> <CInputGroupText>First and last name</CInputGroupText>
</DocsExample> <CFormInput aria-label="First name" />
</CCardBody> <CFormInput aria-label="Last name" />
</CCard> </CInputGroup>
</CCol> </DocsExample>
<CCol xs=12> </CCardBody>
<CCard class="mb-4"> </CCard>
<CCardHeader> </CCol>
<strong>Vue Input group</strong> <small>Wrapping</small> <CCol :xs="12">
</CCardHeader> <CCard class="mb-4">
<CCardBody> <CCardHeader>
<p class="text-medium-emphasis small"> <strong>Vue Input group</strong> <small>Multiple addons</small>
Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate </CCardHeader>
custom form field validation within an input group. You may disable this with <CCardBody>
<code>.flex-nowrap</code>. <p class="text-medium-emphasis small">
</p> Multiple add-ons are supported and can be mixed with checkbox and
<DocsExample href="forms/input-group.html#wrapping"> radio input versions..
<CInputGroup class="flex-nowrap"> </p>
<CInputGroupText id="addon-wrapping">@</CInputGroupText> <DocsExample href="forms/input-group.html#multiple-addons">
<CFormInput <CInputGroup class="mb-3">
placeholder="Username" <CInputGroupText>$</CInputGroupText>
aria-label="Username" <CInputGroupText>0.00</CInputGroupText>
aria-describedby="addon-wrapping" <CFormInput
/> aria-label="Dollar amount (with dot and two decimal places)"
</CInputGroup> />
</DocsExample> </CInputGroup>
</CCardBody> <CInputGroup>
</CCard> <CFormInput
</CCol> aria-label="Dollar amount (with dot and two decimal places)"
<CCol xs=12> />
<CCard class="mb-4"> <CInputGroupText>$</CInputGroupText>
<CCardHeader> <CInputGroupText>0.00</CInputGroupText>
<strong>Vue Input group</strong> <small>Sizing</small> </CInputGroup>
</CCardHeader> </DocsExample>
<CCardBody> </CCardBody>
<p class="text-medium-emphasis small"> </CCard>
Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself </CCol>
and contents within will automatically resize—no need for repeating the form control <CCol :xs="12">
size classes on each element. <CCard class="mb-4">
</p> <CCardHeader>
<p class="text-medium-emphasis small"> <strong>Vue Input group</strong> <small>Button addons</small>
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong> </CCardHeader>
</p> <CCardBody>
<DocsExample href="forms/input-group.html#sizing"> <p class="text-medium-emphasis small">
<CInputGroup size="sm" class="mb-3"> Multiple add-ons are supported and can be mixed with checkbox and
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText> radio input versions..
<CFormInput </p>
aria-label="Sizing example input" <DocsExample href="forms/input-group.html#button-addons">
aria-describedby="inputGroup-sizing-sm" <CInputGroup class="mb-3">
/> <CButton
</CInputGroup> type="button"
<CInputGroup class="mb-3"> color="secondary"
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText> variant="outline"
<CFormInput id="button-addon1"
aria-label="Sizing example input" >
aria-describedby="inputGroup-sizing-default" Button
/> </CButton>
</CInputGroup> <CFormInput
<CInputGroup size="lg"> placeholder=""
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText> aria-label="Example text with button addon"
<CFormInput aria-describedby="button-addon1"
aria-label="Sizing example input" />
aria-describedby="inputGroup-sizing-lg" </CInputGroup>
/> <CInputGroup class="mb-3">
</CInputGroup> <CFormInput
</DocsExample> placeholder="Recipient's username"
</CCardBody> aria-label="Recipient's username"
</CCard> aria-describedby="button-addon2"
</CCol> />
<CCol xs=12> <CButton
<CCard class="mb-4"> type="button"
<CCardHeader> color="secondary"
<strong>Vue Input group</strong> <small>Checkboxes and radios</small> variant="outline"
</CCardHeader> id="button-addon2"
<CCardBody> >
<p class="text-medium-emphasis small"> Button
Place any checkbox or radio option within an input group&#39;s addon instead of text. </CButton>
</p> </CInputGroup>
<DocsExample href="forms/input-group.html#checkboxes-and-radios"> <CInputGroup class="mb-3">
<CInputGroup class="mb-3"> <CButton type="button" color="secondary" variant="outline">
<CInputGroupText> Button
<CFormCheck </CButton>
type="checkbox" <CButton type="button" color="secondary" variant="outline">
value="" Button
aria-label="Checkbox for following text input" </CButton>
/> <CFormInput
</CInputGroupText> placeholder=""
<CFormInput aria-label="Text input with checkbox" /> aria-label="Example text with two button addons"
</CInputGroup> />
<CInputGroup> </CInputGroup>
<CInputGroupText> <CInputGroup>
<CFormCheck <CFormInput
type="radio" placeholder="Recipient's username"
value="" aria-label="Recipient's username with two button addons"
aria-label="Radio button for following text input" />
/> <CButton type="button" color="secondary" variant="outline">
</CInputGroupText> Button
<CFormInput aria-label="Text input with radio button" /> </CButton>
</CInputGroup> <CButton type="button" color="secondary" variant="outline">
</DocsExample> Button
</CCardBody> </CButton>
</CCard> </CInputGroup>
</CCol> </DocsExample>
<CCol xs=12> </CCardBody>
<CCard class="mb-4"> </CCard>
<CCardHeader> </CCol>
<strong>Vue Input group</strong> <small>Multiple inputs</small> <CCol :xs="12">
</CCardHeader> <CCard class="mb-4">
<CCardBody> <CCardHeader>
<p class="text-medium-emphasis small"> <strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation </CCardHeader>
styles are only available for input groups with a single <CCardBody>
<code>&lt;CFormInput&gt;</code>. <DocsExample href="forms/input-group.html#buttons-with-dropdowns">
</p> <CInputGroup class="mb-3">
<DocsExample href="forms/input-group.html#multiple-inputs"> <CDropdown variant="input-group">
<CInputGroup> <CDropdownToggle color="secondary" variant="outline">
<CInputGroupText>First and last name</CInputGroupText> Dropdown
<CFormInput aria-label="First name" /> </CDropdownToggle>
<CFormInput aria-label="Last name" /> <CDropdownMenu>
</CInputGroup> <CDropdownItem href="#">Action</CDropdownItem>
</DocsExample> <CDropdownItem href="#">Another action</CDropdownItem>
</CCardBody> <CDropdownItem href="#">Something else here</CDropdownItem>
</CCard> <CDropdownDivider />
</CCol> <CDropdownItem href="#">Separated link</CDropdownItem>
<CCol xs=12> </CDropdownMenu>
<CCard class="mb-4"> </CDropdown>
<CCardHeader> <CFormInput aria-label="Text input with dropdown button" />
<strong>Vue Input group</strong> <small>Multiple addons</small> </CInputGroup>
</CCardHeader> <CInputGroup class="mb-3">
<CCardBody> <CFormInput aria-label="Text input with dropdown button" />
<p class="text-medium-emphasis small"> <CDropdown alignment="end" variant="input-group">
Multiple add-ons are supported and can be mixed with checkbox and radio input <CDropdownToggle color="secondary" variant="outline">
versions.. Dropdown
</p> </CDropdownToggle>
<DocsExample href="forms/input-group.html#multiple-addons"> <CDropdownMenu>
<CInputGroup class="mb-3"> <CDropdownItem href="#">Action</CDropdownItem>
<CInputGroupText>$</CInputGroupText> <CDropdownItem href="#">Another action</CDropdownItem>
<CInputGroupText>0.00</CInputGroupText> <CDropdownItem href="#">Something else here</CDropdownItem>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" /> <CDropdownDivider />
</CInputGroup> <CDropdownItem href="#">Separated link</CDropdownItem>
<CInputGroup> </CDropdownMenu>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" /> </CDropdown>
<CInputGroupText>$</CInputGroupText> </CInputGroup>
<CInputGroupText>0.00</CInputGroupText> <CInputGroup>
</CInputGroup> <CDropdown variant="input-group">
</DocsExample> <CDropdownToggle color="secondary" variant="outline">
</CCardBody> Dropdown
</CCard> </CDropdownToggle>
</CCol> <CDropdownMenu>
<CCol xs=12> <CDropdownItem href="#">Action</CDropdownItem>
<CCard class="mb-4"> <CDropdownItem href="#">Another action</CDropdownItem>
<CCardHeader> <CDropdownItem href="#">Something else here</CDropdownItem>
<strong>Vue Input group</strong> <small>Button addons</small> <CDropdownDivider />
</CCardHeader> <CDropdownItem href="#">Separated link</CDropdownItem>
<CCardBody> </CDropdownMenu>
<p class="text-medium-emphasis small"> </CDropdown>
Multiple add-ons are supported and can be mixed with checkbox and radio input <CFormInput aria-label="Text input with 2 dropdown buttons" />
versions.. <CDropdown alignment="end" variant="input-group">
</p> <CDropdownToggle color="secondary" variant="outline">
<DocsExample href="forms/input-group.html#button-addons"> Dropdown
<CInputGroup class="mb-3"> </CDropdownToggle>
<CButton type="button" color="secondary" variant="outline" id="button-addon1"> <CDropdownMenu>
Button <CDropdownItem href="#">Action</CDropdownItem>
</CButton> <CDropdownItem href="#">Another action</CDropdownItem>
<CFormInput <CDropdownItem href="#">Something else here</CDropdownItem>
placeholder="" <CDropdownDivider />
aria-label="Example text with button addon" <CDropdownItem href="#">Separated link</CDropdownItem>
aria-describedby="button-addon1" </CDropdownMenu>
/> </CDropdown>
</CInputGroup> </CInputGroup>
<CInputGroup class="mb-3"> </DocsExample>
<CFormInput </CCardBody>
placeholder="Recipient's username" </CCard>
aria-label="Recipient's username" </CCol>
aria-describedby="button-addon2" <CCol :xs="12">
/> <CCard class="mb-4">
<CButton type="button" color="secondary" variant="outline" id="button-addon2"> <CCardHeader>
Button <strong>Vue Input group</strong> <small>Segmented buttons</small>
</CButton> </CCardHeader>
</CInputGroup> <CCardBody>
<CInputGroup class="mb-3"> <DocsExample href="forms/input-group.html#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Button Action
</CButton> </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"> <CButton type="button" color="secondary" variant="outline">
Button Action
</CButton> </CButton>
<CFormInput placeholder="" aria-label="Example text with two button addons" /> <CDropdownToggle color="secondary" variant="outline" split />
</CInputGroup> <CDropdownMenu>
<CInputGroup> <CDropdownItem href="#">Action</CDropdownItem>
<CFormInput <CDropdownItem href="#">Another action</CDropdownItem>
placeholder="Recipient's username" <CDropdownItem href="#">Something else here</CDropdownItem>
aria-label="Recipient's username with two button addons" <CDropdownDivider />
/> <CDropdownItem href="#">Separated link</CDropdownItem>
<CButton type="button" color="secondary" variant="outline"> </CDropdownMenu>
Button </CDropdown>
</CButton> </CInputGroup>
<CButton type="button" color="secondary" variant="outline"> </DocsExample>
Button </CCardBody>
</CButton> </CCard>
</CInputGroup> </CCol>
</DocsExample> <CCol :xs="12">
</CCardBody> <CCard class="mb-4">
</CCard> <CCardHeader>
</CCol> <strong>Vue Input group</strong> <small>Custom select</small>
<CCol xs=12> </CCardHeader>
<CCard class="mb-4"> <CCardBody>
<CCardHeader> <DocsExample href="forms/input-group.html#custom-select">
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small> <CInputGroup class="mb-3">
</CCardHeader> <CInputGroupText component="label" for="inputGroupSelect01">
<CCardBody> Options
<DocsExample href="forms/input-group.html#buttons-with-dropdowns"> </CInputGroupText>
<CInputGroup class="mb-3"> <CFormSelect id="inputGroupSelect01">
<CDropdown variant="input-group"> <option>Choose...</option>
<CDropdownToggle color="secondary" variant="outline"> <option value="1">One</option>
Dropdown <option value="2">Two</option>
</CDropdownToggle> <option value="3">Three</option>
<CDropdownMenu> </CFormSelect>
<CDropdownItem href="#">Action</CDropdownItem> </CInputGroup>
<CDropdownItem href="#">Another action</CDropdownItem> <CInputGroup class="mb-3">
<CDropdownItem href="#">Something else here</CDropdownItem> <CFormSelect id="inputGroupSelect02">
<CDropdownDivider /> <option>Choose...</option>
<CDropdownItem href="#">Separated link</CDropdownItem> <option value="1">One</option>
</CDropdownMenu> <option value="2">Two</option>
</CDropdown> <option value="3">Three</option>
<CFormInput aria-label="Text input with dropdown button" /> </CFormSelect>
</CInputGroup> <CInputGroupText component="label" for="inputGroupSelect02">
<CInputGroup class="mb-3"> Options
<CFormInput aria-label="Text input with dropdown button" /> </CInputGroupText>
<CDropdown alignment="end" variant="input-group"> </CInputGroup>
<CDropdownToggle color="secondary" variant="outline"> <CInputGroup class="mb-3">
Dropdown <CButton type="button" color="secondary" variant="outline">
</CDropdownToggle> Button
<CDropdownMenu> </CButton>
<CDropdownItem href="#">Action</CDropdownItem> <CFormSelect
<CDropdownItem href="#">Another action</CDropdownItem> id="inputGroupSelect03"
<CDropdownItem href="#">Something else here</CDropdownItem> aria-label="Example select with button addon"
<CDropdownDivider /> >
<CDropdownItem href="#">Separated link</CDropdownItem> <option>Choose...</option>
</CDropdownMenu> <option value="1">One</option>
</CDropdown> <option value="2">Two</option>
</CInputGroup> <option value="3">Three</option>
<CInputGroup> </CFormSelect>
<CDropdown variant="input-group"> </CInputGroup>
<CDropdownToggle color="secondary" variant="outline"> <CInputGroup>
Dropdown <CFormSelect
</CDropdownToggle> id="inputGroupSelect04"
<CDropdownMenu> aria-label="Example select with button addon"
<CDropdownItem href="#">Action</CDropdownItem> >
<CDropdownItem href="#">Another action</CDropdownItem> <option>Choose...</option>
<CDropdownItem href="#">Something else here</CDropdownItem> <option value="1">One</option>
<CDropdownDivider /> <option value="2">Two</option>
<CDropdownItem href="#">Separated link</CDropdownItem> <option value="3">Three</option>
</CDropdownMenu> </CFormSelect>
</CDropdown> <CButton type="button" color="secondary" variant="outline">
<CFormInput aria-label="Text input with 2 dropdown buttons" /> Button
<CDropdown alignment="end" variant="input-group"> </CButton>
<CDropdownToggle color="secondary" variant="outline"> </CInputGroup>
Dropdown </DocsExample>
</CDropdownToggle> </CCardBody>
<CDropdownMenu> </CCard>
<CDropdownItem href="#">Action</CDropdownItem> </CCol>
<CDropdownItem href="#">Another action</CDropdownItem> <CCol :xs="12">
<CDropdownItem href="#">Something else here</CDropdownItem> <CCard class="mb-4">
<CDropdownDivider /> <CCardHeader>
<CDropdownItem href="#">Separated link</CDropdownItem> <strong>Vue Input group</strong> <small>Custom file input</small>
</CDropdownMenu> </CCardHeader>
</CDropdown> <CCardBody>
</CInputGroup> <DocsExample href="forms/input-group.html#custom-file-input">
</DocsExample> <CInputGroup class="mb-3">
</CCardBody> <CInputGroupText component="label" for="inputGroupFile01">
</CCard> Upload
</CCol> </CInputGroupText>
<CCol xs=12> <CFormInput type="file" id="inputGroupFile01" />
<CCard class="mb-4"> </CInputGroup>
<CCardHeader> <CInputGroup class="mb-3">
<strong>Vue Input group</strong> <small>Segmented buttons</small> <CFormInput type="file" id="inputGroupFile02" />
</CCardHeader> <CInputGroupText component="label" for="inputGroupFile02">
<CCardBody> Upload
<DocsExample href="forms/input-group.html#segmented-buttons"> </CInputGroupText>
<CInputGroup class="mb-3"> </CInputGroup>
<CDropdown variant="input-group"> <CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline"> <CButton
Action type="button"
</CButton> color="secondary"
<CDropdownToggle color="secondary" variant="outline" split /> variant="outline"
<CDropdownMenu> id="inputGroupFileAddon03"
<CDropdownItem href="#">Action</CDropdownItem> >
<CDropdownItem href="#">Another action</CDropdownItem> Button
<CDropdownItem href="#">Something else here</CDropdownItem> </CButton>
<CDropdownDivider /> <CFormInput
<CDropdownItem href="#">Separated link</CDropdownItem> type="file"
</CDropdownMenu> id="inputGroupFile03"
</CDropdown> aria-describedby="inputGroupFileAddon03"
<CFormInput aria-label="Text input with segmented dropdown button" /> aria-label="Upload"
</CInputGroup> />
<CInputGroup> </CInputGroup>
<CFormInput aria-label="Text input with segmented dropdown button" /> <CInputGroup>
<CDropdown alignment="end" variant="input-group"> <CFormInput
<CButton type="button" color="secondary" variant="outline"> type="file"
Action id="inputGroupFile04"
</CButton> aria-describedby="inputGroupFileAddon04"
<CDropdownToggle color="secondary" variant="outline" split /> aria-label="Upload"
<CDropdownMenu> />
<CDropdownItem href="#">Action</CDropdownItem> <CButton
<CDropdownItem href="#">Another action</CDropdownItem> type="button"
<CDropdownItem href="#">Something else here</CDropdownItem> color="secondary"
<CDropdownDivider /> variant="outline"
<CDropdownItem href="#">Separated link</CDropdownItem> id="inputGroupFileAddon04"
</CDropdownMenu> >
</CDropdown> Button
</CInputGroup> </CButton>
</DocsExample> </CInputGroup>
</CCardBody> </DocsExample>
</CCard> </CCardBody>
</CCol> </CCard>
<CCol xs=12> </CCol>
<CCard class="mb-4"> </CRow>
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs=12>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template> </template>
<script> <script>
export default { export default {
name: "InputGroup", name: 'InputGroup',
}; }
</script> </script>
src/views/forms/Layout.vue
+3 -3
View File
@@ -76,14 +76,14 @@
<CFormLabel for="inputCity">City</CFormLabel> <CFormLabel for="inputCity">City</CFormLabel>
<CFormInput id="inputCity" /> <CFormInput id="inputCity" />
</CCol> </CCol>
<CCol md="{4}"> <CCol :md="4">
<CFormLabel for="inputState">State</CFormLabel> <CFormLabel for="inputState">State</CFormLabel>
<CFormSelect id="inputState"> <CFormSelect id="inputState">
<option>Choose...</option> <option>Choose...</option>
<option>...</option> <option>...</option>
</CFormSelect> </CFormSelect>
</CCol> </CCol>
<CCol md="{2}"> <CCol :md="2">
<CFormLabel for="inputZip">Zip</CFormLabel> <CFormLabel for="inputZip">Zip</CFormLabel>
<CFormInput id="inputZip" /> <CFormInput id="inputZip" />
</CCol> </CCol>
@@ -266,7 +266,7 @@
</p> </p>
<DocsExample href="forms/layout.html#column-sizing"> <DocsExample href="forms/layout.html#column-sizing">
<CRow class="g-3"> <CRow class="g-3">
<CCol sm="{7}"> <CCol :sm="7">
<CFormInput placeholder="City" aria-label="City" /> <CFormInput placeholder="City" aria-label="City" />
</CCol> </CCol>
<CCol sm> <CCol sm>
src/views/forms/Range.vue
+3 -5
View File
@@ -5,9 +5,7 @@
</CCol> </CCol>
<CCol :xs="12"> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
<strong>Vue Range</strong> <small></small>
</CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Create custom Create custom
@@ -87,6 +85,6 @@
<script> <script>
export default { export default {
name: "Range", name: 'Range',
}; }
</script> </script>
src/views/forms/Select.vue
+2 -2
View File
@@ -111,6 +111,6 @@
<script> <script>
export default { export default {
name: "Select", name: 'Select',
}; }
</script> </script>
src/views/forms/Validation.vue
+36 -36
View File
@@ -28,7 +28,7 @@
:validated="validatedCustom01" :validated="validatedCustom01"
@submit="handleSubmitCustom01" @submit="handleSubmitCustom01"
> >
<CCol md="4"> <CCol :md="4">
<CFormLabel for="validationCustom01">Email</CFormLabel> <CFormLabel for="validationCustom01">Email</CFormLabel>
<CFormInput <CFormInput
id="validationCustom01" id="validationCustom01"
@@ -37,7 +37,7 @@
/> />
<CFormFeedback valid> Looks good! </CFormFeedback> <CFormFeedback valid> Looks good! </CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol :md="4">
<CFormLabel for="validationCustom02">Email</CFormLabel> <CFormLabel for="validationCustom02">Email</CFormLabel>
<CFormInput <CFormInput
id="validationCustom02" id="validationCustom02"
@@ -46,7 +46,7 @@
/> />
<CFormFeedback valid> Looks good! </CFormFeedback> <CFormFeedback valid> Looks good! </CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol :md="4">
<CFormLabel for="validationCustomUsername">Username</CFormLabel> <CFormLabel for="validationCustomUsername">Username</CFormLabel>
<CInputGroup class="has-validation"> <CInputGroup class="has-validation">
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText> <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
@@ -61,14 +61,14 @@
</CFormFeedback> </CFormFeedback>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<CFormLabel for="validationCustom03">City</CFormLabel> <CFormLabel for="validationCustom03">City</CFormLabel>
<CFormInput id="validationCustom03" required /> <CFormInput id="validationCustom03" required />
<CFormFeedback invalid> <CFormFeedback invalid>
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol :md="3">
<CFormLabel for="validationCustom04">City</CFormLabel> <CFormLabel for="validationCustom04">City</CFormLabel>
<CFormSelect id="validationCustom04"> <CFormSelect id="validationCustom04">
<option disabled>Choose...</option> <option disabled>Choose...</option>
@@ -78,7 +78,7 @@
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol :md="3">
<CFormLabel for="validationCustom05">City</CFormLabel> <CFormLabel for="validationCustom05">City</CFormLabel>
<CFormInput id="validationCustom05" required /> <CFormInput id="validationCustom05" required />
<CFormFeedback invalid> <CFormFeedback invalid>
@@ -127,7 +127,7 @@
:validated="validatedDefault01" :validated="validatedDefault01"
@submit="handleSubmitDefault01" @submit="handleSubmitDefault01"
> >
<CCol md="4"> <CCol :md="4">
<CFormLabel for="validationDefault01">Email</CFormLabel> <CFormLabel for="validationDefault01">Email</CFormLabel>
<CFormInput <CFormInput
id="validationDefault01" id="validationDefault01"
@@ -136,7 +136,7 @@
/> />
<CFormFeedback valid> Looks good! </CFormFeedback> <CFormFeedback valid> Looks good! </CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol :md="4">
<CFormLabel for="validationDefault02">Email</CFormLabel> <CFormLabel for="validationDefault02">Email</CFormLabel>
<CFormInput <CFormInput
id="validationDefault02" id="validationDefault02"
@@ -145,7 +145,7 @@
/> />
<CFormFeedback valid> Looks good! </CFormFeedback> <CFormFeedback valid> Looks good! </CFormFeedback>
</CCol> </CCol>
<CCol md="4"> <CCol :md="4">
<CFormLabel for="validationDefaultUsername" <CFormLabel for="validationDefaultUsername"
>Username</CFormLabel >Username</CFormLabel
> >
@@ -162,14 +162,14 @@
</CFormFeedback> </CFormFeedback>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol md="6"> <CCol :md="6">
<CFormLabel for="validationDefault03">City</CFormLabel> <CFormLabel for="validationDefault03">City</CFormLabel>
<CFormInput id="validationDefault03" required /> <CFormInput id="validationDefault03" required />
<CFormFeedback invalid> <CFormFeedback invalid>
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol :md="3">
<CFormLabel for="validationDefault04">City</CFormLabel> <CFormLabel for="validationDefault04">City</CFormLabel>
<CFormSelect id="validationDefault04"> <CFormSelect id="validationDefault04">
<option disabled>Choose...</option> <option disabled>Choose...</option>
@@ -179,7 +179,7 @@
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3"> <CCol :md="3">
<CFormLabel for="validationDefault05">City</CFormLabel> <CFormLabel for="validationDefault05">City</CFormLabel>
<CFormInput id="validationDefault05" required /> <CFormInput id="validationDefault05" required />
<CFormFeedback invalid> <CFormFeedback invalid>
@@ -226,7 +226,7 @@
</p> </p>
<DocsExample href="forms/validation.html#server-side"> <DocsExample href="forms/validation.html#server-side">
<CForm class="row g-3 needs-validation"> <CForm class="row g-3 needs-validation">
<CCol :md="4"> <CCol ::md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel> <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
<CFormInput <CFormInput
type="text" type="text"
@@ -237,7 +237,7 @@
/> />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol :md="4"> <CCol ::md="4">
<CFormLabel htmlFor="validationServer02">Email</CFormLabel> <CFormLabel htmlFor="validationServer02">Email</CFormLabel>
<CFormInput <CFormInput
type="text" type="text"
@@ -248,7 +248,7 @@
/> />
<CFormFeedback valid>Looks good!</CFormFeedback> <CFormFeedback valid>Looks good!</CFormFeedback>
</CCol> </CCol>
<CCol :md="4"> <CCol ::md="4">
<CFormLabel htmlFor="validationServerUsername" <CFormLabel htmlFor="validationServerUsername"
>Username</CFormLabel >Username</CFormLabel
> >
@@ -432,7 +432,7 @@
:validated="validatedTooltip01" :validated="validatedTooltip01"
@submit="handleSubmitTooltip01" @submit="handleSubmitTooltip01"
> >
<CCol md="4" class="position-relative"> <CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip01">Email</CFormLabel> <CFormLabel for="validationTooltip01">Email</CFormLabel>
<CFormInput <CFormInput
id="validationTooltip01" id="validationTooltip01"
@@ -441,7 +441,7 @@
/> />
<CFormFeedback tooltip valid> Looks good! </CFormFeedback> <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol> </CCol>
<CCol md="4" class="position-relative"> <CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltip02">Email</CFormLabel> <CFormLabel for="validationTooltip02">Email</CFormLabel>
<CFormInput <CFormInput
id="validationTooltip02" id="validationTooltip02"
@@ -450,7 +450,7 @@
/> />
<CFormFeedback tooltip valid> Looks good! </CFormFeedback> <CFormFeedback tooltip valid> Looks good! </CFormFeedback>
</CCol> </CCol>
<CCol md="4" class="position-relative"> <CCol :md="4" class="position-relative">
<CFormLabel for="validationTooltipUsername" <CFormLabel for="validationTooltipUsername"
>Username</CFormLabel >Username</CFormLabel
> >
@@ -467,14 +467,14 @@
</CFormFeedback> </CFormFeedback>
</CInputGroup> </CInputGroup>
</CCol> </CCol>
<CCol md="6" class="position-relative"> <CCol :md="6" class="position-relative">
<CFormLabel for="validationTooltip03">City</CFormLabel> <CFormLabel for="validationTooltip03">City</CFormLabel>
<CFormInput id="validationTooltip03" required /> <CFormInput id="validationTooltip03" required />
<CFormFeedback tooltip invalid> <CFormFeedback tooltip invalid>
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3" class="position-relative"> <CCol :md="3" class="position-relative">
<CFormLabel for="validationTooltip04">City</CFormLabel> <CFormLabel for="validationTooltip04">City</CFormLabel>
<CFormSelect id="validationTooltip04" required> <CFormSelect id="validationTooltip04" required>
<option disabled value="">Choose...</option> <option disabled value="">Choose...</option>
@@ -484,7 +484,7 @@
Please provide a valid city. Please provide a valid city.
</CFormFeedback> </CFormFeedback>
</CCol> </CCol>
<CCol md="3" class="position-relative"> <CCol :md="3" class="position-relative">
<CFormLabel for="validationTooltip05">City</CFormLabel> <CFormLabel for="validationTooltip05">City</CFormLabel>
<CFormInput id="validationTooltip05" required /> <CFormInput id="validationTooltip05" required />
<CFormFeedback tooltip invalid> <CFormFeedback tooltip invalid>
@@ -504,39 +504,39 @@
<script> <script>
export default { export default {
name: "Validation", name: 'Validation',
data: () => { data: () => {
return { return {
validatedCustom01: null, validatedCustom01: null,
validatedDefault01: null, validatedDefault01: null,
validatedTooltip01: null, validatedTooltip01: null,
}; }
}, },
methods: { methods: {
handleSubmitCustom01(event) { handleSubmitCustom01(event) {
const form = event.currentTarget; const form = event.currentTarget
if (form.checkValidity() === false) { if (form.checkValidity() === false) {
event.preventDefault(); event.preventDefault()
event.stopPropagation(); event.stopPropagation()
} }
this.validatedCustom01 = true; this.validatedCustom01 = true
}, },
handleSubmitDefault01(event) { handleSubmitDefault01(event) {
const form = event.currentTarget; const form = event.currentTarget
if (form.checkValidity() === false) { if (form.checkValidity() === false) {
event.preventDefault(); event.preventDefault()
event.stopPropagation(); event.stopPropagation()
} }
this.validatedDefault01 = true; this.validatedDefault01 = true
}, },
handleSubmitTooltip01(event) { handleSubmitTooltip01(event) {
const form = event.currentTarget; const form = event.currentTarget
if (form.checkValidity() === false) { if (form.checkValidity() === false) {
event.preventDefault(); event.preventDefault()
event.stopPropagation(); event.stopPropagation()
} }
this.validatedTooltip01 = true; this.validatedTooltip01 = true
}, },
}, },
}; }
</script> </script>
src/views/icons/Brands.vue
+14 -15
View File
@@ -3,14 +3,14 @@
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Vue Brands</strong> <strong>Vue CoreUI Brand Icons</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<template v-for="(brand, brandName) in brands" :key="brandName"> <template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" col="3" sm="2"> <CCol class="mb-5" :xs="3" :sm="2">
<CIcon size="lg" :content="brand" /> <CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(brandName) }}</div> <div>{{ toKebabCase(iconName) }}</div>
</CCol> </CCol>
</template> </template>
</CRow> </CRow>
@@ -21,18 +21,17 @@
</template> </template>
<script> <script>
import { brandSet as brands } from '@coreui/icons' import { brandSet } from '@coreui/icons'
export default { export default {
name: 'Brands', name: 'CoreUIIcons',
data: function () { setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = brandSet
return { return {
brands: brands, icons,
toKebabCase
} }
}, }
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
},
},
} }
</script> </script>
src/views/icons/CoreUIIcons.vue
+10 -11
View File
@@ -7,9 +7,9 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<template v-for="(icon, iconName) in freeSet" :key="iconName"> <template v-for="(icon, iconName) in icons" :key="iconName">
<CCol class="mb-5" col="3" sm="2"> <CCol class="mb-5" :xs="3" :sm="2">
<CIcon :content="icon" size="lg" /> <CIcon :content="icon" size="xxl" />
<div>{{ toKebabCase(iconName) }}</div> <div>{{ toKebabCase(iconName) }}</div>
</CCol> </CCol>
</template> </template>
@@ -24,15 +24,14 @@
import { freeSet } from '@coreui/icons' import { freeSet } from '@coreui/icons'
export default { export default {
name: 'CoreUIIcons', name: 'CoreUIIcons',
data: function () { setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = freeSet
return { return {
freeSet: freeSet, icons,
toKebabCase
} }
}, }
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
},
},
} }
</script> </script>
src/views/icons/Flags.vue
+13 -19
View File
@@ -3,19 +3,14 @@
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Vue Flags</strong> <strong>Vue CoreUI Flag Icons</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<!-- For using the flags inline with text add the classes <template v-for="(icon, iconName) in icons" :key="iconName">
<code>.flag-icon</code> and <code>.flag-icon-xx</code> <CCol class="mb-5" :xs="3" :sm="2">
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <CIcon :content="icon" size="xxl" />
span. If you want to have a squared version flag then add the class <div>{{ toKebabCase(iconName) }}</div>
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> </CCol>
</template> </template>
</CRow> </CRow>
@@ -28,16 +23,15 @@
<script> <script>
import { flagSet } from '@coreui/icons' import { flagSet } from '@coreui/icons'
export default { export default {
name: 'Flags', name: 'CoreUIIcons',
data: function () { setup() {
const toKebabCase = (str) => str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
const icons = flagSet
return { return {
flagSet: flagSet, icons,
toKebabCase
} }
}, }
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
},
},
} }
</script> </script>
src/views/notifications/Alerts.vue
+7 -7
View File
@@ -10,10 +10,10 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Vue Alert is prepared for any length of text, as well as an Vue Alert is prepared for any length of text, as well as an optional
optional close button. For a styling, use one of the close button. For a styling, use one of the
<strong>required</strong> contextual <code>color</code> props <strong>required</strong> contextual <code>color</code> props (e.g.,
(e.g., <code>primary</code>). For inline dismissal, use the <code>primary</code>). For inline dismissal, use the
<a <a
href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing" href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
> >
@@ -149,11 +149,11 @@
<script> <script>
export default { export default {
name: "Alerts", name: 'Alerts',
methods: { methods: {
alert: function () { alert: function () {
alert("👋 Well, hi there! Thanks for dismissing me."); alert('👋 Well, hi there! Thanks for dismissing me.')
}, },
}, },
}; }
</script> </script>
src/views/notifications/Badges.vue
+2 -2
View File
@@ -93,6 +93,6 @@
<script> <script>
export default { export default {
name: "Badges", name: 'Badges',
}; }
</script> </script>
src/views/notifications/Modals.vue
+33 -16
View File
@@ -1024,25 +1024,42 @@
</template> </template>
<script> <script>
import { ref } from 'vue'
export default { export default {
name: 'Modals', name: 'Modals',
data: function () { setup() {
const visibleLiveDemo = ref(false)
const visibleStaticBackdropDemo = ref(false)
const visibleScrollingLongContentDemo = ref(false)
const visibleScrollableDemo = ref(false)
const visibleVerticallyCenteredDemo = ref(false)
const visibleVerticallyCenteredScrollableDemo = ref(false)
const xlDemo = ref(false)
const lgDemo = ref(false)
const smDemo = ref(false)
const fullscreenDemo = ref(false)
const fullscreenSmDemo = ref(false)
const fullscreenMdDemo = ref(false)
const fullscreenLgDemo = ref(false)
const fullscreenXlDemo = ref(false)
const fullscreenXxlDemo = ref(false)
return { return {
visibleLiveDemo: false, visibleLiveDemo,
visibleStaticBackdropDemo: false, visibleStaticBackdropDemo,
visibleScrollingLongContentDemo: false, visibleScrollingLongContentDemo,
visibleScrollableDemo: false, visibleScrollableDemo,
visibleVerticallyCenteredDemo: false, visibleVerticallyCenteredDemo,
visibleVerticallyCenteredScrollableDemo: false, visibleVerticallyCenteredScrollableDemo,
xlDemo: false, xlDemo,
lgDemo: false, lgDemo,
smDemo: false, smDemo,
fullscreenDemo: false, fullscreenDemo,
fullscreenSmDemo: false, fullscreenSmDemo,
fullscreenMdDemo: false, fullscreenMdDemo,
fullscreenLgDemo: false, fullscreenLgDemo,
fullscreenXlDemo: false, fullscreenXlDemo,
fullscreenXxlDemo: false, fullscreenXxlDemo,
} }
}, },
} }
src/views/pages/Login.vue
+70
View File
@@ -0,0 +1,70 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="8">
<CCardGroup>
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="text-medium-emphasis">Sign In to your account</p>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-user" />
</CInputGroupText>
<CFormInput
placeholder="Username"
autoComplete="username"
/>
</CInputGroup>
<CInputGroup class="mb-4">
<CInputGroupText>
<CIcon icon="cil-lock-locked" />
</CInputGroupText>
<CFormInput
type="password"
placeholder="Password"
autoComplete="current-password"
/>
</CInputGroup>
<CRow>
<CCol :xs="6">
<CButton color="primary" class="px-4"> Login </CButton>
</CCol>
<CCol :xs="6" class="text-right">
<CButton color="link" class="px-0">
Forgot password?
</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard class="text-white bg-primary py-5" style="width: 44%">
<CCardBody class="text-center">
<div>
<h2>Sign up</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
<CButton color="light" variant="outline" class="mt-3">
Register Now!
</CButton>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Login',
}
</script>
src/views/pages/Page404.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="6">
<div class="clearfix">
<h1 class="float-start display-3 me-4">404</h1>
<h4 class="pt-3">Oops! You're lost.</h4>
<p class="text-medium-emphasis float-start">
The page you are looking for was not found.
</p>
</div>
<CInputGroup class="input-prepend">
<CInputGroupText>
<CIcon icon="cil-magnifying-glass" />
</CInputGroupText>
<CFormInput type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Page404',
}
</script>
src/views/pages/Page500.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="6">
<span class="clearfix">
<h1 class="float-start display-3 me-4">500</h1>
<h4 class="pt-3">Houston, we have a problem!</h4>
<p class="text-medium-emphasis float-start">
The page you are looking for is temporarily unavailable.
</p>
</span>
<CInputGroup class="input-prepend">
<CInputGroupText>
<CIcon icon="cil-magnifying-glass" />
</CInputGroupText>
<CFormInput type="text" placeholder="What are you looking for?" />
<CButton color="info">Search</CButton>
</CInputGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Page500',
}
</script>
src/views/pages/Register.vue
+57
View File
@@ -0,0 +1,57 @@
<template>
<div class="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow class="justify-content-center">
<CCol :md="9" :lg="7" :xl="6">
<CCard class="mx-4">
<CCardBody class="p-4">
<CForm>
<h1>Register</h1>
<p class="text-medium-emphasis">Create your account</p>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-user" />
</CInputGroupText>
<CFormInput placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>@</CInputGroupText>
<CFormInput placeholder="Email" autoComplete="email" />
</CInputGroup>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-lock-locked" />
</CInputGroupText>
<CFormInput
type="password"
placeholder="Password"
autoComplete="new-password"
/>
</CInputGroup>
<CInputGroup class="mb-4">
<CInputGroupText>
<CIcon icon="cil-lock-locked" />
</CInputGroupText>
<CFormInput
type="password"
placeholder="Repeat password"
autoComplete="new-password"
/>
</CInputGroup>
<div class="d-grid">
<CButton color="success">Create Account</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Register',
}
</script>
src/views/theme/ColorTheme.vue
+4 -6
View File
@@ -1,21 +1,19 @@
<template> <template>
<CCol xl="2" md="4" sm="6" :xs="12" class="mb-4"> <CCol :xl="2" :md="4" :sm="6" :xs="12" class="mb-4">
<div <div
:class="['theme-color w-75 rounded mb-3', color]" :class="['theme-color w-75 rounded mb-3', color]"
style="padding-top:75%;" style="padding-top: 75%"
></div> ></div>
<slot></slot> <slot></slot>
<ColorView/> <ColorView />
</CCol> </CCol>
</template> </template>
<script> <script>
//import ColorView from './ColorView'
export default { export default {
name: 'ColorTheme', name: 'ColorTheme',
// components: { ColorView },
props: { props: {
color: String, color: String,
} },
} }
</script> </script>
src/views/theme/Colors.vue
+28 -22
View File
@@ -1,25 +1,31 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader> <CIcon icon="cil-drop" /> Theme colors </CCardHeader>
<CIcon icon="cil-drop"/> Theme colors <CCardBody>
</CCardHeader> <CRow>
<CCardBody> <ColorTheme color="bg-primary">
<CRow> <h6>Brand Primary Color</h6>
<ColorTheme color="bg-primary"> </ColorTheme>
<h6>Brand Primary Color</h6> <ColorTheme color="bg-secondary"
</ColorTheme> ><h6>Brand Secondary Color</h6></ColorTheme
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme> >
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme> <ColorTheme color="bg-success"
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme> ><h6>Brand Success Color</h6></ColorTheme
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme> >
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme> <ColorTheme color="bg-danger"
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme> ><h6>Brand Danger Color</h6></ColorTheme
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme> >
</CRow> <ColorTheme color="bg-warning"
</CCardBody> ><h6>Brand Warning Color</h6></ColorTheme
</CCard> >
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
</CRow>
</CCardBody>
</CCard>
</CCol> </CCol>
</CRow> </CRow>
</template> </template>
@@ -27,7 +33,7 @@
<script> <script>
import ColorTheme from './ColorTheme' import ColorTheme from './ColorTheme'
export default { export default {
name: "Colors", name: 'Colors',
components: { ColorTheme } components: { ColorTheme },
}; }
</script> </script>
src/views/theme/Typography.vue
+226 -197
View File
@@ -1,222 +1,251 @@
<template> <template>
<CRow> <CRow>
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader> Headings </CCardHeader>
Headings <CCardBody>
</CCardHeader> <p>
<CCardBody> Documentation and examples for Bootstrap typography, including
<p>Documentation and examples for Bootstrap typography, global settings, headings, body text, lists, and more.
including global settings, headings, body text, lists, and more.</p> </p>
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Heading</CTableHeaderCell>
<CTableHeaderCell>Example</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Headings
</CCardHeader>
<CCardBody>
<p>
<code class="highlighter-rouge">.h1</code> through
<code class="highlighter-rouge">.h6</code>
classes are also available, for when you want to match the font
styling of a heading but cannot use the associated HTML element.
</p>
<div class="bd-example">
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Display headings
</CCardHeader>
<CCardBody>
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style.
</p>
<div class="bd-example bd-example-type">
<CTable> <CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Heading</CTableHeaderCell>
<CTableHeaderCell>Example</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody> <CTableBody>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-1">Display 1</span></CTableDataCell> <CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell
><span class="h1">h1. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-2">Display 2</span></CTableDataCell> <CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell
><span class="h2">h2. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-3">Display 3</span></CTableDataCell> <CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell
><span class="h3">h3. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-4">Display 4</span></CTableDataCell> <CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell
><span class="h4">h4. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell
><span class="h5">h5. Bootstrap heading</span></CTableDataCell
>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell
><span class="h6">h6. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</div> </CCardBody>
</CCardBody> </CCard>
</CCard> <CCard>
<CCard> <CCardHeader> Headings </CCardHeader>
<CCardHeader> <CCardBody>
Inline text elements <p>
</CCardHeader> <code class="highlighter-rouge">.h1</code> through
<CCardBody> <code class="highlighter-rouge">.h6</code>
<p> classes are also available, for when you want to match the font
Traditional heading elements are designed to work best in the meat styling of a heading but cannot use the associated HTML element.
of your page content. When you need a heading to stand out, </p>
consider using a <strong>display heading</strong>—a larger, <div class="bd-example">
slightly more opinionated heading style. <p class="h1">h1. Bootstrap heading</p>
</p> <p class="h2">h2. Bootstrap heading</p>
<div class="bd-example"> <p class="h3">h3. Bootstrap heading</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p class="h4">h4. Bootstrap heading</p>
<p><del> <p class="h5">h5. Bootstrap heading</p>
This line of text is meant to be treated as deleted text. <p class="h6">h6. Bootstrap heading</p>
</del></p> </div>
<p><s> </CCardBody>
This line of text is meant to be treated as no longer accurate. </CCard>
</s></p> <CCard>
<p><ins> <CCardHeader> Display headings </CCardHeader>
This line of text is meant to be treated as an addition to the document. <CCardBody>
</ins></p> <p>
<p><u>This line of text will render as underlined</u></p> Traditional heading elements are designed to work best in the meat
<p><small> of your page content. When you need a heading to stand out, consider
This line of text is meant to be treated as fine print. using a <strong>display heading</strong>—a larger, slightly more
</small></p> opinionated heading style.
<p><sCTableRowong>This line rendered as bold text.</sCTableRowong></p> </p>
<p><em>This line rendered as italicized text.</em></p> <div class="bd-example bd-example-type">
</div> <CTable>
</CCardBody> <CTableBody>
</CCard> <CTableRow>
<CCard> <CTableDataCell
<CCardHeader> ><span class="display-1">Display 1</span></CTableDataCell
Description list alignment >
</CCardHeader> </CTableRow>
<CCardBody> <CTableRow>
<p> <CTableDataCell
Align terms and descriptions horizontally by using our grid system’s ><span class="display-2">Display 2</span></CTableDataCell
predefined classes (or semantic mixins). For longer terms, you can >
optionally add a <code class="highlighter-rouge">.text-truncate</code> </CTableRow>
class to truncate the text with an ellipsis. <CTableRow>
</p> <CTableDataCell
<div class="bd-example"> ><span class="display-3">Display 3</span></CTableDataCell
<dl class="row"> >
<dt class="col-sm-3">Description lists</dt> </CTableRow>
<dd class="col-sm-9"> <CTableRow>
A description list is perfect for defining terms. <CTableDataCell
</dd> ><span class="display-4">Display 4</span></CTableDataCell
>
</CTableRow>
</CTableBody>
</CTable>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader> Inline text elements </CCardHeader>
<CCardBody>
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out, consider
using a <strong>display heading</strong>—a larger, slightly more
opinionated heading style.
</p>
<div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p>
<del>
This line of text is meant to be treated as deleted text.
</del>
</p>
<p>
<s>
This line of text is meant to be treated as no longer accurate.
</s>
</p>
<p>
<ins>
This line of text is meant to be treated as an addition to the
document.
</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
<p>
<small>
This line of text is meant to be treated as fine print.
</small>
</p>
<p>
<sCTableRowong>This line rendered as bold text.</sCTableRowong>
</p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader> Description list alignment </CCardHeader>
<CCardBody>
<p>
Align terms and descriptions horizontally by using our grid system’s
predefined classes (or semantic mixins). For longer terms, you can
optionally add a
<code class="highlighter-rouge">.text-truncate</code>
class to truncate the text with an ellipsis.
</p>
<div class="bd-example">
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">
A description list is perfect for defining terms.
</dd>
<dt class="col-sm-3">Euismod</dt> <dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> <p>
<p>Donec id elit non mi porta gravida at eget metus.</p> Vestibulum id ligula porta felis euismod semper eget lacinia
</dd> odio sem nec elit.
</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt> <dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod.
</dd> </dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dt class="col-sm-3 text-truncate">
<dd class="col-sm-9"> Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris </dt>
condimentum nibh, ut fermentum massa justo sit amet risus. <dd class="col-sm-9">
</dd> Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</dd>
<dt class="col-sm-3">Nesting</dt> <dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<dl class="row"> <dl class="row">
<dt class="col-sm-4">Nested definition list</dt> <dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8"> <dd class="col-sm-8">
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc. Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
</dd> </dd>
</dl> </dl>
</dd> </dd>
</dl> </dl>
</div> </div>
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
</template> </template>
<script> <script>
export default { export default {
name: "Typography", name: 'Typography',
}; }
</script> </script>
src/views/widgets/Widgets.vue
+30 -30
View File
@@ -652,37 +652,37 @@
</template> </template>
<script> <script>
import { getStyle } from "@coreui/utils"; import { getStyle } from '@coreui/utils'
import { CChart } from "@coreui/vue-chartjs"; import { CChart } from '@coreui/vue-chartjs'
import WidgetsStatsA from "./WidgetsStatsTypeA.vue"; import WidgetsStatsA from './WidgetsStatsTypeA.vue'
import WidgetsStatsD from "./WidgetsStatsTypeD.vue"; import WidgetsStatsD from './WidgetsStatsTypeD.vue'
import Example from "../../components/DocsExample.vue"; import Example from '../../components/DocsExample.vue'
export default { export default {
name: "Widgets", name: 'Widgets',
components: { components: {
CChart, CChart,
WidgetsStatsA, WidgetsStatsA,
WidgetsStatsD, WidgetsStatsD,
Example, Example,
}, },
data() { setup() {
const widgetStatsE = { const widgetStatsE = {
labels: [ labels: [
"M", 'M',
"T", 'T',
"W", 'W',
"T", 'T',
"F", 'F',
"S", 'S',
"S", 'S',
"M", 'M',
"T", 'T',
"W", 'W',
"T", 'T',
"F", 'F',
"S", 'S',
"S", 'S',
"M", 'M',
], ],
optionsBar: { optionsBar: {
maintainAspectRatio: false, maintainAspectRatio: false,
@@ -724,19 +724,19 @@ export default {
}, },
}, },
}, },
}; }
return { return {
getStyle, getStyle,
widgetStatsE, widgetStatsE,
widgetProgressIconItems: [ widgetProgressIconItems: [
{ color: "primary", icon: "cil-puzzle" }, { color: 'primary', icon: 'cil-puzzle' },
{ color: "success", icon: "cil-speedometer" }, { color: 'success', icon: 'cil-speedometer' },
{ color: "danger", icon: "cil-cursor" }, { color: 'danger', icon: 'cil-cursor' },
{ color: "info", icon: "cil-drop" }, { color: 'info', icon: 'cil-drop' },
{ color: "secondary", icon: "cil-pencil" }, { color: 'secondary', icon: 'cil-pencil' },
], ],
}; }
}, },
}; }
</script> </script>
src/views/widgets/WidgetsStatsTypeA.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<template> <template>
<CRow> <CRow>
<CCol :xs="3"> <CCol :xs="3">
<CWidgetStatsA class="mb-3" color="primary"> <CWidgetStatsA class="mb-4" color="primary">
<template #value <template #value
>26K >26K
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">
@@ -96,7 +96,7 @@
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="3">
<CWidgetStatsA class="mb-3" color="info"> <CWidgetStatsA class="mb-4" color="info">
<template #value <template #value
>$6.200 >$6.200
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">
@@ -190,7 +190,7 @@
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="3">
<CWidgetStatsA class="mb-3" color="warning"> <CWidgetStatsA class="mb-4" color="warning">
<template #value <template #value
>2.49% >2.49%
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">
@@ -271,7 +271,7 @@
</CWidgetStatsA> </CWidgetStatsA>
</CCol> </CCol>
<CCol :xs="3"> <CCol :xs="3">
<CWidgetStatsA class="mb-3" color="danger"> <CWidgetStatsA class="mb-4" color="danger">
<template #value <template #value
>44K >44K
<span class="fs-6 fw-normal"> <span class="fs-6 fw-normal">