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

refactor: update example views

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