sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 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
+73 -94
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() {
return { const tableItems = [
selected: "Month",
tableItems: [
{ {
avatar: { src: avatar1, status: "success" }, avatar: { src: avatar1, status: 'success' },
user: { user: {
name: "Yiorgos Avraamu", name: 'Yiorgos Avraamu',
new: true, new: true,
registered: "Jan 1, 2021", registered: 'Jan 1, 2021',
}, },
country: { name: "USA", flag: "cif-us" }, country: { name: 'USA', flag: 'cif-us' },
usage: { usage: {
value: 50, value: 50,
period: "Jun 11, 2021 - Jul 10, 2021", period: 'Jun 11, 2021 - Jul 10, 2021',
color: "success", color: 'success',
}, },
payment: { name: "Mastercard", icon: "cib-cc-mastercard" }, payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: "10 sec ago", activity: '10 sec ago',
}, },
{ {
avatar: { src: avatar2, status: "danger" }, avatar: { src: avatar2, status: 'danger' },
user: { user: {
name: "Avram Tarasios", name: 'Avram Tarasios',
new: false, new: false,
registered: "Jan 1, 2021", registered: 'Jan 1, 2021',
}, },
country: { name: "Brazil", flag: "cif-br" }, country: { name: 'Brazil', flag: 'cif-br' },
usage: { usage: {
value: 22, value: 22,
period: "Jun 11, 2021 - Jul 10, 2021", period: 'Jun 11, 2021 - Jul 10, 2021',
color: "info", color: 'info',
}, },
payment: { name: "Visa", icon: "cib-cc-visa" }, payment: { name: 'Visa', icon: 'cib-cc-visa' },
activity: "5 minutes ago", activity: '5 minutes ago',
}, },
{ {
avatar: { src: avatar3, status: "warning" }, avatar: { src: avatar3, status: 'warning' },
user: { name: "Quintin Ed", new: true, registered: "Jan 1, 2021" }, user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
country: { name: "India", flag: "cif-in" }, country: { name: 'India', flag: 'cif-in' },
usage: { usage: {
value: 74, value: 74,
period: "Jun 11, 2021 - Jul 10, 2021", period: 'Jun 11, 2021 - Jul 10, 2021',
color: "warning", color: 'warning',
}, },
payment: { name: "Stripe", icon: "cib-cc-stripe" }, payment: { name: 'Stripe', icon: 'cib-cc-stripe' },
activity: "1 hour ago", activity: '1 hour ago',
}, },
{ {
avatar: { src: avatar4, status: "secondary" }, avatar: { src: avatar4, status: 'secondary' },
user: { name: "Enéas Kwadwo", new: true, registered: "Jan 1, 2021" }, user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
country: { name: "France", flag: "cif-fr" }, country: { name: 'France', flag: 'cif-fr' },
usage: { usage: {
value: 98, value: 98,
period: "Jun 11, 2021 - Jul 10, 2021", period: 'Jun 11, 2021 - Jul 10, 2021',
color: "danger", color: 'danger',
}, },
payment: { name: "PayPal", icon: "cib-cc-paypal" }, payment: { name: 'PayPal', icon: 'cib-cc-paypal' },
activity: "Last month", activity: 'Last month',
}, },
{ {
avatar: { src: avatar5, status: "success" }, avatar: { src: avatar5, status: 'success' },
user: { user: {
name: "Agapetus Tadeáš", name: 'Agapetus Tadeáš',
new: true, new: true,
registered: "Jan 1, 2021", registered: 'Jan 1, 2021',
}, },
country: { name: "Spain", flag: "cif-es" }, country: { name: 'Spain', flag: 'cif-es' },
usage: { usage: {
value: 22, value: 22,
period: "Jun 11, 2021 - Jul 10, 2021", period: 'Jun 11, 2021 - Jul 10, 2021',
color: "primary", color: 'primary',
}, },
payment: { name: "Google Wallet", icon: "cib-cc-apple-pay" }, payment: { name: 'Google Wallet', icon: 'cib-cc-apple-pay' },
activity: "Last week", activity: 'Last week',
}, },
{ {
avatar: { src: avatar6, status: "danger" }, avatar: { src: avatar6, status: 'danger' },
user: { user: {
name: "Friderik Dávid", name: 'Friderik Dávid',
new: true, new: true,
registered: "Jan 1, 2021", registered: 'Jan 1, 2021',
}, },
country: { name: "Poland", flag: "cif-pl" }, country: { name: 'Poland', flag: 'cif-pl' },
usage: { usage: {
value: 43, value: 43,
period: "Jun 11, 2021 - Jul 10, 2021", period: 'Jun 11, 2021 - Jul 10, 2021',
color: "success", color: 'success',
}, },
payment: { name: "Amex", icon: "cib-cc-amex" }, payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: "Last week", activity: 'Last week',
}, },
], ]
tableFields: [
{ key: "avatar", label: "", _classes: "text-center" }, return {
{ key: "user" }, tableItems,
{ 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
+9 -9
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,7 +210,7 @@
<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)
@@ -219,6 +219,6 @@ export default {
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
+30 -19
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
v-for="item in [
{ color: 'primary', textColor: 'primary' }, { color: 'primary', textColor: 'primary' },
{ color: 'secondary', textColor: 'secondary' }, { color: 'secondary', textColor: 'secondary' },
{ color: 'success', textColor: 'success' }, { color: 'success', textColor: 'success' },
{ color: 'danger', textColor: 'danger' }, { color: 'danger', textColor: 'danger' },
{ color: 'warning', textColor: 'warning' }, { color: 'warning', textColor: 'warning' },
{ color: 'info', textColor: 'info' }, { color: 'info', textColor: 'info' },
{ color: 'light'}, { color: 'light' },
{ color: 'dark'} { color: 'dark' },
]" :key="item.color"> ]"
<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
+207 -104
View File
@@ -6,41 +6,46 @@
<strong>Vue Navbars</strong> <strong>Vue Navbars</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<h4 class="mt-4">Basic usage of navbar</h4> <h4 class="mt-4">Basic usage of navbar</h4>
<DocsExample href="components/navbar.html#basic-usage"> <DocsExample href="components/navbar.html#basic-usage">
<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 @click="visible = !visible"/> <CNavbarToggler @click="visible = !visible" />
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav> <CNavbarNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item" :popper="false"> <CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
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"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CCollapse> </CCollapse>
</CContainer> </CContainer>
@@ -49,7 +54,7 @@
<h4 class="mt-4">Vue nav brand</h4> <h4 class="mt-4">Vue nav brand</h4>
<CRow> <CRow>
<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>
@@ -58,7 +63,7 @@
</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>
@@ -67,23 +72,35 @@
</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
src="/images/brand/coreui-signet.svg"
alt=""
width="22"
height="24"
/>
</CNavbarBrand> </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" class="d-inline-block align-top"/> CoreUI <img
src="/images/brand/coreui-signet.svg"
alt=""
width="22"
height="24"
class="d-inline-block align-top"
/>
CoreUI
</CNavbarBrand> </CNavbarBrand>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
@@ -96,13 +113,15 @@
<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
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav> <CNavbarNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Features</CNavLink> <CNavLink href="#">Features</CNavLink>
@@ -116,7 +135,9 @@
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
</CNavbarNav> </CNavbarNav>
@@ -130,8 +151,10 @@
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
<CForm class="d-flex"> <CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/> <CFormInput type="search" class="me-2" placeholder="Search" />
<CButton type="submit" color="success" variant="outline">Search</CButton> <CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
@@ -142,12 +165,13 @@
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand> <CNavbarBrand href="#">Navbar</CNavbarBrand>
<CForm class="d-flex"> <CForm class="d-flex">
<CFormInput type="search" class="me-2" placeholder="Search"/> <CFormInput type="search" class="me-2" placeholder="Search" />
<CButton type="submit" color="success" variant="outline">Search</CButton> <CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
<h4 class="mt-4">Vue navbar with input group</h4> <h4 class="mt-4">Vue navbar with input group</h4>
<DocsExample href="components/navbar.html#forms"> <DocsExample href="components/navbar.html#forms">
@@ -155,7 +179,11 @@
<CForm class="container-fluid"> <CForm class="container-fluid">
<CInputGroup> <CInputGroup>
<CInputGroupText id="basic-addon1">@</CInputGroupText> <CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/> <CFormInput
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</CInputGroup> </CInputGroup>
</CForm> </CForm>
</CNavbar> </CNavbar>
@@ -165,8 +193,20 @@
<DocsExample href="components/navbar.html#forms"> <DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CForm class="container-fluid justify-content-start"> <CForm class="container-fluid justify-content-start">
<CButton type="button" color="success" variant="outline" class="me-2">Main button</CButton> <CButton
<CButton type="button" color="secondary" variant="outline" size="sm">Smaller button</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> </CForm>
</CNavbar> </CNavbar>
</DocsExample> </DocsExample>
@@ -185,109 +225,143 @@
<CNavbar expand="lg" colorScheme="dark" class="bg-dark"> <CNavbar expand="lg" colorScheme="dark" class="bg-dark">
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand> <CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/> <CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav> <CNavbarNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item" :popper="false"> <CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
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="light" variant="outline">Search</CButton> type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="light" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CCollapse> </CCollapse>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
<br/> <br />
<CNavbar expand="lg" colorScheme="dark" class="bg-primary"> <CNavbar expand="lg" colorScheme="dark" class="bg-primary">
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand> <CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/> <CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav> <CNavbarNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item" :popper="false"> <CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
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="light" variant="outline">Search</CButton> type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="light" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CCollapse> </CCollapse>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
<br/> <br />
<CNavbar expand="lg" colorScheme="light" style="background-color:#e3f2fd;"> <CNavbar
expand="lg"
colorScheme="light"
style="background-color: #e3f2fd"
>
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand> <CNavbarBrand href="#">Navbar</CNavbarBrand>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/> <CNavbarToggler
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav> <CNavbarNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item" :popper="false"> <CDropdown variant="nav-item" :popper="false">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownDivider /> <CDropdownDivider />
<CDropdownItem href="#">Something else here</CDropdownItem> <CDropdownItem href="#"
>Something else here</CDropdownItem
>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
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="primary" variant="outline">Search</CButton> type="search"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="primary" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CCollapse> </CCollapse>
</CContainer> </CContainer>
@@ -296,7 +370,7 @@
<h4 class="mt-4">Vue navbar placement</h4> <h4 class="mt-4">Vue navbar placement</h4>
<CRow> <CRow>
<CCol md="6"> <CCol :md="6">
<DocsExample href="components/navbar.html#placement"> <DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light"> <CNavbar colorScheme="light" class="bg-light">
<CContainer fluid> <CContainer fluid>
@@ -305,27 +379,39 @@
</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-top"> <CNavbar
colorScheme="light"
class="bg-light"
placement="fixed-top"
>
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Fixed top</CNavbarBrand> <CNavbarBrand href="#">Fixed top</CNavbarBrand>
</CContainer> </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
colorScheme="light"
class="bg-light"
placement="fixed-bottom"
>
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand> <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
</CContainer> </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
colorScheme="light"
class="bg-light"
placement="sticky-top"
>
<CContainer fluid> <CContainer fluid>
<CNavbarBrand href="#">Sticky top</CNavbarBrand> <CNavbarBrand href="#">Sticky top</CNavbarBrand>
</CContainer> </CContainer>
@@ -339,27 +425,33 @@
<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
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarBrand href="#">Hidden brand</CNavbarBrand> <CNavbarBrand href="#">Hidden brand</CNavbarBrand>
<CNavbarNav class="me-auto mb-2 mb-lg-0"> <CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
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"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CCollapse> </CCollapse>
</CContainer> </CContainer>
@@ -370,26 +462,32 @@
<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
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav class="me-auto mb-2 mb-lg-0"> <CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
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"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CCollapse> </CCollapse>
</CContainer> </CContainer>
@@ -400,33 +498,38 @@
<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
aria-label="Toggle navigation"
aria-expanded="{visible}"
@click="visible = !visible"
/>
<CNavbarBrand href="#">Navbar</CNavbarBrand> <CNavbarBrand href="#">Navbar</CNavbarBrand>
<CCollapse class="navbar-collapse" :visible="visible"> <CCollapse class="navbar-collapse" :visible="visible">
<CNavbarNav class="me-auto mb-2 mb-lg-0"> <CNavbarNav class="me-auto mb-2 mb-lg-0">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Home </CNavLink>
Home
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
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"
class="me-2"
placeholder="Search"
/>
<CButton type="submit" color="success" variant="outline"
>Search</CButton
>
</CForm> </CForm>
</CCollapse> </CCollapse>
</CContainer> </CContainer>
</CNavbar> </CNavbar>
</DocsExample> </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
+77 -106
View File
@@ -10,17 +10,16 @@
</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
styling.
</p> </p>
<DocsExample href="components/nav.html#base-nav"> <DocsExample href="components/nav.html#base-nav">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -29,29 +28,25 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Classes are used throughout, so your markup can be super flexible. Use{' '} Classes are used throughout, so your markup can be super flexible.
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your Use{' '}
items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the
the .nav uses display: flex, the nav links behave the same as nav items would, but order of your items is important, or roll your own with a
without the extra markup. <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> </p>
<DocsExample href="components/nav.html#base-nav"> <DocsExample href="components/nav.html#base-nav">
<CNav component="nav"> <CNav component="nav">
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNav> </CNav>
</DocsExample> </DocsExample>
</CCardBody> </CCardBody>
@@ -68,8 +63,8 @@
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment"> <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
flexbox utilities flexbox utilities
</a> </a>
. By default, navs are left-aligned, but you can easily change them to center or right . By default, navs are left-aligned, but you can easily change them
aligned. to center or right aligned.
</p> </p>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>: Centered with <code>.justify-content-center</code>:
@@ -77,9 +72,7 @@
<DocsExample href="components/nav.html#horizontal-alignment"> <DocsExample href="components/nav.html#horizontal-alignment">
<CNav class="justify-content-center"> <CNav class="justify-content-center">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -88,9 +81,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -100,9 +91,7 @@
<DocsExample href="components/nav.html#base-nav"> <DocsExample href="components/nav.html#base-nav">
<CNav class="justify-content-end"> <CNav class="justify-content-end">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -111,9 +100,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -127,16 +114,16 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Stack your navigation by changing the flex item direction with the{' '} 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>). <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> </p>
<DocsExample href="components/nav.html#vertical"> <DocsExample href="components/nav.html#vertical">
<CNav class="flex-column"> <CNav class="flex-column">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -145,9 +132,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -161,15 +146,14 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class Takes the basic nav from above and adds the
to generate a tabbed interface <code>variant=&#34;tabs&#34;</code> class to generate a tabbed
interface
</p> </p>
<DocsExample href="components/nav.html#tabs"> <DocsExample href="components/nav.html#tabs">
<CNav variant="tabs"> <CNav variant="tabs">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -178,9 +162,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -194,14 +176,13 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead: Take that same HTML, but use
<code>variant=&#34;pills&#34;</code> instead:
</p> </p>
<DocsExample href="components/nav.html#pills"> <DocsExample href="components/nav.html#pills">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -210,9 +191,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -226,17 +205,16 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Force your <code>.nav</code>&#39;s contents to extend the full available width one of Force your <code>.nav</code>&#39;s contents to extend the full
two modifier classes. To proportionately fill all available space with your{' '} available width one of two modifier classes. To proportionately fill
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all all available space with your{' '} <code>.nav-item</code>s, use
horizontal space is occupied, but not every nav item has the same width. <code>layout=&#34;fill&#34;</code>. Notice that all horizontal space
is occupied, but not every nav item has the same width.
</p> </p>
<DocsExample href="components/nav.html#fill-and-justify"> <DocsExample href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="fill"> <CNav variant="pills" layout="fill">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -245,23 +223,20 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal For equal-width elements, use
space will be occupied by nav links, but unlike the .nav-fill above, every nav item <code>layout=&#34;justified&#34;</code>. All horizontal space will
will be the same width. be occupied by nav links, but unlike the .nav-fill above, every nav
item will be the same width.
</p> </p>
<DocsExample href="components/nav.html#fill-and-justify"> <DocsExample href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="justified"> <CNav variant="pills" layout="justified">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
@@ -270,9 +245,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -286,22 +259,24 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
If you need responsive nav variations, consider using a series of{' '} 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 <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a >. While more verbose, these utilities offer greater customization
horizontal layout that fills the available width starting from the small breakpoint. 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> </p>
<DocsExample href="components/nav.html#working-with-flex-utilities"> <DocsExample href="components/nav.html#working-with-flex-utilities">
<CNav component="nav" variant="pills" class="flex-column flex-sm-row"> <CNav
<CNavLink href="#" active> component="nav"
Active variant="pills"
</CNavLink> class="flex-column flex-sm-row"
>
<CNavLink href="#" active> Active </CNavLink>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNav> </CNav>
</DocsExample> </DocsExample>
</CCardBody> </CCardBody>
@@ -316,12 +291,12 @@
<DocsExample href="components/nav.html#tabs-with-dropdowns"> <DocsExample href="components/nav.html#tabs-with-dropdowns">
<CNav> <CNav>
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item"> <CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
@@ -332,9 +307,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -350,12 +323,12 @@
<DocsExample href="components/nav.html#pills-with-dropdowns"> <DocsExample href="components/nav.html#pills-with-dropdowns">
<CNav variant="pills"> <CNav variant="pills">
<CNavItem> <CNavItem>
<CNavLink href="#" active> <CNavLink href="#" active> Active </CNavLink>
Active
</CNavLink>
</CNavItem> </CNavItem>
<CDropdown variant="nav-item"> <CDropdown variant="nav-item">
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle> <CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem href="#">Action</CDropdownItem> <CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem> <CDropdownItem href="#">Another action</CDropdownItem>
@@ -366,9 +339,7 @@
<CNavLink href="#">Link</CNavLink> <CNavLink href="#">Link</CNavLink>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
<CNavLink href="#" disabled> <CNavLink href="#" disabled> Disabled </CNavLink>
Disabled
</CNavLink>
</CNavItem> </CNavItem>
</CNav> </CNav>
</DocsExample> </DocsExample>
@@ -380,6 +351,6 @@
<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
+7 -14
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
+17 -11
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
+17 -11
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
+9 -11
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
+2 -2
View File
@@ -406,6 +406,6 @@
<script> <script>
export default { export default {
name: "ChecksRadios", name: 'ChecksRadios',
}; }
</script> </script>
src/views/forms/FloatingLabels.vue
+57 -30
View File
@@ -1,5 +1,5 @@
<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>
@@ -10,25 +10,36 @@
</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
note that the <code>&lt;CFormInput&gt;</code> must come first so we
can utilize a sibling selector (e.g., <code>~</code>).
</p> </p>
<DocsExample href="forms/floating-labels.html"> <DocsExample href="forms/floating-labels.html">
<CFormFloating class="mb-3"> <CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" /> <CFormInput
type="email"
id="floatingInput"
placeholder="name@example.com"
/>
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel> <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
</CFormFloating> </CFormFloating>
<CFormFloating> <CFormFloating>
<CFormInput type="password" id="floatingPassword" placeholder="Password" /> <CFormInput
type="password"
id="floatingPassword"
placeholder="Password"
/>
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel> <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating> </CFormFloating>
</DocsExample> </DocsExample>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code> When there&#39;s a <code>value</code> already defined,
<code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position. s will automatically adjust to their floated position.
</p> </p>
<DocsExample href="forms/floating-labels.html"> <DocsExample href="forms/floating-labels.html">
@@ -39,7 +50,9 @@
placeholder="name@example.com" placeholder="name@example.com"
defaultValue="test@example.com" defaultValue="test@example.com"
/> />
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel> <CFormLabel htmlFor="floatingInputValue"
>Input with value</CFormLabel
>
</CFormFloating> </CFormFloating>
</DocsExample> </DocsExample>
</CCardBody> </CCardBody>
@@ -52,8 +65,8 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as By default, <code>&lt;CFormTextarea&gt;</code>s will be the same
<code>&lt;CFormInput&gt;</code>s. height as <code>&lt;CFormInput&gt;</code>s.
</p> </p>
<DocsExample href="forms/floating-labels.html#textareas"> <DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating> <CFormFloating>
@@ -65,9 +78,9 @@
</CFormFloating> </CFormFloating>
</DocsExample> </DocsExample>
<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 To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>,
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either do not use the <code>rows</code> attribute. Instead, set an explicit
inline or via custom CSS). <code>height</code> (either inline or via custom CSS).
</p> </p>
<DocsExample href="forms/floating-labels.html#textareas"> <DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating> <CFormFloating>
@@ -89,23 +102,30 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on Other than <code>&lt;CFormInput&gt;</code>, floating labels are only
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike available on <code>&lt;CFormSelect&gt;</code>s. They work in the
<code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll
<code>&lt;CFormLabel&gt;</code> in its floated state. always show the <code>&lt;CFormLabel&gt;</code> in its floated
state.
<strong> <strong>
Selects with <code>size</code> and <code>multiple</code> are not supported. Selects with <code>size</code> and <code>multiple</code> are not
supported.
</strong> </strong>
</p> </p>
<DocsExample href="forms/floating-labels.html#selects"> <DocsExample href="forms/floating-labels.html#selects">
<CFormFloating> <CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example"> <CFormSelect
id="floatingSelect"
aria-label="Floating label select example"
>
<option>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel> <CFormLabel htmlFor="floatingSelect"
>Works with selects</CFormLabel
>
</CFormFloating> </CFormFloating>
</DocsExample> </DocsExample>
</CCardBody> </CCardBody>
@@ -118,8 +138,8 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
When working with the CoreUI for Bootstrap grid system, be sure to place form elements When working with the CoreUI for Bootstrap grid system, be sure to
within column classes. place form elements within column classes.
</p> </p>
<DocsExample href="forms/floating-labels.html#layout"> <DocsExample href="forms/floating-labels.html#layout">
<CRow :xs="{ gutter: 2 }"> <CRow :xs="{ gutter: 2 }">
@@ -131,18 +151,25 @@
placeholder="name@example.com" placeholder="name@example.com"
defaultValue="email@example.com" defaultValue="email@example.com"
/> />
<CFormLabel htmlFor="floatingInputGrid">Email address</CFormLabel> <CFormLabel htmlFor="floatingInputGrid"
>Email address</CFormLabel
>
</CFormFloating> </CFormFloating>
</CCol> </CCol>
<CCol md> <CCol md>
<CFormFloating> <CFormFloating>
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example"> <CFormSelect
id="floatingSelectGrid"
aria-label="Floating label select example"
>
<option>Open this select menu</option> <option>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
</CFormSelect> </CFormSelect>
<CFormLabel htmlFor="floatingSelectGrid">Works with selects</CFormLabel> <CFormLabel htmlFor="floatingSelectGrid"
>Works with selects</CFormLabel
>
</CFormFloating> </CFormFloating>
</CCol> </CCol>
</CRow> </CRow>
@@ -155,6 +182,6 @@
<script> <script>
export default { export default {
name: "FloatingLabels", name: 'FloatingLabels',
}; }
</script> </script>
src/views/forms/InputGroup.vue
+80 -44
View File
@@ -1,18 +1,18 @@
<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">
@@ -33,7 +33,9 @@
</CInputGroup> </CInputGroup>
<CFormLabel for="basic-url">Your vanity URL</CFormLabel> <CFormLabel for="basic-url">Your vanity URL</CFormLabel>
<CInputGroup class="mb-3"> <CInputGroup class="mb-3">
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText> <CInputGroupText id="basic-addon3"
>https://example.com/users/</CInputGroupText
>
<CFormInput id="basic-url" aria-describedby="basic-addon3" /> <CFormInput id="basic-url" aria-describedby="basic-addon3" />
</CInputGroup> </CInputGroup>
<CInputGroup class="mb-3"> <CInputGroup class="mb-3">
@@ -54,16 +56,16 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Wrapping</small> <strong>Vue Input group</strong> <small>Wrapping</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate Input groups wrap by default via <code>flex-wrap: wrap</code> in
custom form field validation within an input group. You may disable this with order to accommodate custom form field validation within an input
<code>.flex-nowrap</code>. group. You may disable this with <code>.flex-nowrap</code>.
</p> </p>
<DocsExample href="forms/input-group.html#wrapping"> <DocsExample href="forms/input-group.html#wrapping">
<CInputGroup class="flex-nowrap"> <CInputGroup class="flex-nowrap">
@@ -78,19 +80,23 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Sizing</small> <strong>Vue Input group</strong> <small>Sizing</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself Add the relative form sizing classes to the
and contents within will automatically resize—no need for repeating the form control <code>&lt;CInputGroup&gt;</code> itself and contents within will
size classes on each element. automatically resize—no need for repeating the form control size
classes on each element.
</p> </p>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong> <strong
>Sizing on the individual input group elements
isn&#39;tsupported.</strong
>
</p> </p>
<DocsExample href="forms/input-group.html#sizing"> <DocsExample href="forms/input-group.html#sizing">
<CInputGroup size="sm" class="mb-3"> <CInputGroup size="sm" class="mb-3">
@@ -101,7 +107,9 @@
/> />
</CInputGroup> </CInputGroup>
<CInputGroup class="mb-3"> <CInputGroup class="mb-3">
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText> <CInputGroupText id="inputGroup-sizing-default"
>Default</CInputGroupText
>
<CFormInput <CFormInput
aria-label="Sizing example input" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default" aria-describedby="inputGroup-sizing-default"
@@ -118,14 +126,15 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Checkboxes and radios</small> <strong>Vue Input group</strong> <small>Checkboxes and radios</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;s addon instead of text. Place any checkbox or radio option within an input group&#39;s addon
instead of text.
</p> </p>
<DocsExample href="forms/input-group.html#checkboxes-and-radios"> <DocsExample href="forms/input-group.html#checkboxes-and-radios">
<CInputGroup class="mb-3"> <CInputGroup class="mb-3">
@@ -152,16 +161,16 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Multiple inputs</small> <strong>Vue Input group</strong> <small>Multiple inputs</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation While multiple <code>&lt;CFormInput&gt;</code>s are supported
styles are only available for input groups with a single visually, validation styles are only available for input groups with
<code>&lt;CFormInput&gt;</code>. a single <code>&lt;CFormInput&gt;</code>.
</p> </p>
<DocsExample href="forms/input-group.html#multiple-inputs"> <DocsExample href="forms/input-group.html#multiple-inputs">
<CInputGroup> <CInputGroup>
@@ -173,24 +182,28 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Multiple addons</small> <strong>Vue Input group</strong> <small>Multiple addons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input Multiple add-ons are supported and can be mixed with checkbox and
versions.. radio input versions..
</p> </p>
<DocsExample href="forms/input-group.html#multiple-addons"> <DocsExample href="forms/input-group.html#multiple-addons">
<CInputGroup class="mb-3"> <CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText> <CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText> <CInputGroupText>0.00</CInputGroupText>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" /> <CFormInput
aria-label="Dollar amount (with dot and two decimal places)"
/>
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" /> <CFormInput
aria-label="Dollar amount (with dot and two decimal places)"
/>
<CInputGroupText>$</CInputGroupText> <CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText> <CInputGroupText>0.00</CInputGroupText>
</CInputGroup> </CInputGroup>
@@ -198,19 +211,24 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Button addons</small> <strong>Vue Input group</strong> <small>Button addons</small>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<p class="text-medium-emphasis small"> <p class="text-medium-emphasis small">
Multiple add-ons are supported and can be mixed with checkbox and radio input Multiple add-ons are supported and can be mixed with checkbox and
versions.. radio input versions..
</p> </p>
<DocsExample href="forms/input-group.html#button-addons"> <DocsExample href="forms/input-group.html#button-addons">
<CInputGroup class="mb-3"> <CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1"> <CButton
type="button"
color="secondary"
variant="outline"
id="button-addon1"
>
Button Button
</CButton> </CButton>
<CFormInput <CFormInput
@@ -225,7 +243,12 @@
aria-label="Recipient's username" aria-label="Recipient's username"
aria-describedby="button-addon2" aria-describedby="button-addon2"
/> />
<CButton type="button" color="secondary" variant="outline" id="button-addon2"> <CButton
type="button"
color="secondary"
variant="outline"
id="button-addon2"
>
Button Button
</CButton> </CButton>
</CInputGroup> </CInputGroup>
@@ -236,7 +259,10 @@
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Button Button
</CButton> </CButton>
<CFormInput placeholder="" aria-label="Example text with two button addons" /> <CFormInput
placeholder=""
aria-label="Example text with two button addons"
/>
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormInput <CFormInput
@@ -254,7 +280,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small> <strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
@@ -322,7 +348,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Segmented buttons</small> <strong>Vue Input group</strong> <small>Segmented buttons</small>
@@ -343,10 +369,14 @@
<CDropdownItem href="#">Separated link</CDropdownItem> <CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu> </CDropdownMenu>
</CDropdown> </CDropdown>
<CFormInput aria-label="Text input with segmented dropdown button" /> <CFormInput
aria-label="Text input with segmented dropdown button"
/>
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormInput aria-label="Text input with segmented dropdown button" /> <CFormInput
aria-label="Text input with segmented dropdown button"
/>
<CDropdown alignment="end" variant="input-group"> <CDropdown alignment="end" variant="input-group">
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Action Action
@@ -365,7 +395,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Custom select</small> <strong>Vue Input group</strong> <small>Custom select</small>
@@ -398,7 +428,10 @@
<CButton type="button" color="secondary" variant="outline"> <CButton type="button" color="secondary" variant="outline">
Button Button
</CButton> </CButton>
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon"> <CFormSelect
id="inputGroupSelect03"
aria-label="Example select with button addon"
>
<option>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
@@ -406,7 +439,10 @@
</CFormSelect> </CFormSelect>
</CInputGroup> </CInputGroup>
<CInputGroup> <CInputGroup>
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon"> <CFormSelect
id="inputGroupSelect04"
aria-label="Example select with button addon"
>
<option>Choose...</option> <option>Choose...</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
@@ -420,7 +456,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol xs=12> <CCol :xs="12">
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Input group</strong> <small>Custom file input</small> <strong>Vue Input group</strong> <small>Custom file input</small>
@@ -480,6 +516,6 @@
<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
+16 -10
View File
@@ -2,18 +2,24 @@
<CRow> <CRow>
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader> <CIcon icon="cil-drop" /> Theme colors </CCardHeader>
<CIcon icon="cil-drop"/> Theme colors
</CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<ColorTheme color="bg-primary"> <ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6> <h6>Brand Primary Color</h6>
</ColorTheme> </ColorTheme>
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme> <ColorTheme color="bg-secondary"
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme> ><h6>Brand Secondary Color</h6></ColorTheme
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme> >
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme> <ColorTheme color="bg-success"
><h6>Brand Success Color</h6></ColorTheme
>
<ColorTheme color="bg-danger"
><h6>Brand Danger Color</h6></ColorTheme
>
<ColorTheme color="bg-warning"
><h6>Brand Warning Color</h6></ColorTheme
>
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme> <ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme> <ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme> <ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
@@ -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
+77 -48
View File
@@ -2,12 +2,12 @@
<CRow> <CRow>
<CCol> <CCol>
<CCard> <CCard>
<CCardHeader> <CCardHeader> Headings </CCardHeader>
Headings
</CCardHeader>
<CCardBody> <CCardBody>
<p>Documentation and examples for Bootstrap typography, <p>
including global settings, headings, body text, lists, and more.</p> Documentation and examples for Bootstrap typography, including
global settings, headings, body text, lists, and more.
</p>
<CTable> <CTable>
<CTableHead> <CTableHead>
<CTableRow> <CTableRow>
@@ -24,7 +24,9 @@
</code> </code>
</p> </p>
</CTableDataCell> </CTableDataCell>
<CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell> <CTableDataCell
><span class="h1">h1. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell> <CTableDataCell>
@@ -34,7 +36,9 @@
</code> </code>
</p> </p>
</CTableDataCell> </CTableDataCell>
<CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell> <CTableDataCell
><span class="h2">h2. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell> <CTableDataCell>
@@ -44,7 +48,9 @@
</code> </code>
</p> </p>
</CTableDataCell> </CTableDataCell>
<CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell> <CTableDataCell
><span class="h3">h3. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell> <CTableDataCell>
@@ -54,7 +60,9 @@
</code> </code>
</p> </p>
</CTableDataCell> </CTableDataCell>
<CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell> <CTableDataCell
><span class="h4">h4. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell> <CTableDataCell>
@@ -64,7 +72,9 @@
</code> </code>
</p> </p>
</CTableDataCell> </CTableDataCell>
<CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell> <CTableDataCell
><span class="h5">h5. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell> <CTableDataCell>
@@ -74,16 +84,16 @@
</code> </code>
</p> </p>
</CTableDataCell> </CTableDataCell>
<CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell> <CTableDataCell
><span class="h6">h6. Bootstrap heading</span></CTableDataCell
>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader> Headings </CCardHeader>
Headings
</CCardHeader>
<CCardBody> <CCardBody>
<p> <p>
<code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h1</code> through
@@ -102,30 +112,36 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader> Display headings </CCardHeader>
Display headings
</CCardHeader>
<CCardBody> <CCardBody>
<p> <p>
Traditional heading elements are designed to work best in the meat Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out, of your page content. When you need a heading to stand out, consider
consider using a <strong>display heading</strong>—a larger, using a <strong>display heading</strong>—a larger, slightly more
slightly more opinionated heading style. opinionated heading style.
</p> </p>
<div class="bd-example bd-example-type"> <div class="bd-example bd-example-type">
<CTable> <CTable>
<CTableBody> <CTableBody>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-1">Display 1</span></CTableDataCell> <CTableDataCell
><span class="display-1">Display 1</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-2">Display 2</span></CTableDataCell> <CTableDataCell
><span class="display-2">Display 2</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-3">Display 3</span></CTableDataCell> <CTableDataCell
><span class="display-3">Display 3</span></CTableDataCell
>
</CTableRow> </CTableRow>
<CTableRow> <CTableRow>
<CTableDataCell><span class="display-4">Display 4</span></CTableDataCell> <CTableDataCell
><span class="display-4">Display 4</span></CTableDataCell
>
</CTableRow> </CTableRow>
</CTableBody> </CTableBody>
</CTable> </CTable>
@@ -133,45 +149,53 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader> Inline text elements </CCardHeader>
Inline text elements
</CCardHeader>
<CCardBody> <CCardBody>
<p> <p>
Traditional heading elements are designed to work best in the meat Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out, of your page content. When you need a heading to stand out, consider
consider using a <strong>display heading</strong>—a larger, using a <strong>display heading</strong>—a larger, slightly more
slightly more opinionated heading style. opinionated heading style.
</p> </p>
<div class="bd-example"> <div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del> <p>
<del>
This line of text is meant to be treated as deleted text. This line of text is meant to be treated as deleted text.
</del></p> </del>
<p><s> </p>
<p>
<s>
This line of text is meant to be treated as no longer accurate. This line of text is meant to be treated as no longer accurate.
</s></p> </s>
<p><ins> </p>
This line of text is meant to be treated as an addition to the document. <p>
</ins></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><u>This line of text will render as underlined</u></p>
<p><small> <p>
<small>
This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print.
</small></p> </small>
<p><sCTableRowong>This line rendered as bold text.</sCTableRowong></p> </p>
<p>
<sCTableRowong>This line rendered as bold text.</sCTableRowong>
</p>
<p><em>This line rendered as italicized text.</em></p> <p><em>This line rendered as italicized text.</em></p>
</div> </div>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader> Description list alignment </CCardHeader>
Description list alignment
</CCardHeader>
<CCardBody> <CCardBody>
<p> <p>
Align terms and descriptions horizontally by using our grid system’s Align terms and descriptions horizontally by using our grid system’s
predefined classes (or semantic mixins). For longer terms, you can predefined classes (or semantic mixins). For longer terms, you can
optionally add a <code class="highlighter-rouge">.text-truncate</code> optionally add a
<code class="highlighter-rouge">.text-truncate</code>
class to truncate the text with an ellipsis. class to truncate the text with an ellipsis.
</p> </p>
<div class="bd-example"> <div class="bd-example">
@@ -183,7 +207,10 @@
<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>
Vestibulum id ligula porta felis euismod semper eget lacinia
odio sem nec elit.
</p>
<p>Donec id elit non mi porta gravida at eget metus.</p> <p>Donec id elit non mi porta gravida at eget metus.</p>
</dd> </dd>
@@ -192,7 +219,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">
Truncated term is truncated
</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
Fusce dapibus, tellus ac cursus commodo, tortor mauris Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. condimentum nibh, ut fermentum massa justo sit amet risus.
@@ -217,6 +246,6 @@
<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">