refactor: update examples
This commit is contained in:
Łukasz Holeczek
+512
-2
@@ -1,16 +1,526 @@
|
||||
<template>
|
||||
<div>
|
||||
<MainChartExample style="height: 300px; margin-top: 40px" />
|
||||
<WidgetsStatsA />
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="5">
|
||||
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
|
||||
<div class="small text-medium-emphasis">November 2017</div>
|
||||
</CCol>
|
||||
<CCol sm="7" class="d-none d-md-block">
|
||||
<CButton color="primary" class="float-end">
|
||||
<CIcon icon="cil-cloud-download" />
|
||||
</CButton>
|
||||
<CButtonGroup
|
||||
class="float-end me-3"
|
||||
role="group"
|
||||
aria-label="Basic outlined example"
|
||||
>
|
||||
<CButton color="secondary" variant="outline">Day</CButton>
|
||||
<CButton color="secondary" variant="outline" active
|
||||
>Month</CButton
|
||||
>
|
||||
<CButton color="secondary" variant="outline">Year</CButton>
|
||||
</CButtonGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<MainChartExample
|
||||
style="height: 300px; max-height: 300px; margin-top: 40px"
|
||||
/>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
|
||||
<CCol class="mb-sm-2 mb-0">
|
||||
<div class="text-medium-emphasis">Visits</div>
|
||||
<strong>29.703 Users (40%)</strong>
|
||||
<CProgress
|
||||
class="mt-2"
|
||||
color="success"
|
||||
thin
|
||||
:precision="1"
|
||||
:value="40"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-medium-emphasis">Unique</div>
|
||||
<strong>24.093 Users (20%)</strong>
|
||||
<CProgress
|
||||
class="mt-2"
|
||||
color="info"
|
||||
thin
|
||||
:precision="1"
|
||||
:value="20"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol class="mb-sm-2 mb-0">
|
||||
<div class="text-medium-emphasis">Pageviews</div>
|
||||
<strong>78.706 Views (60%)</strong>
|
||||
<CProgress
|
||||
class="mt-2"
|
||||
color="warning"
|
||||
thin
|
||||
:precision="1"
|
||||
:value="60"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol class="mb-sm-2 mb-0">
|
||||
<div class="text-medium-emphasis">New Users</div>
|
||||
<strong>22.123 Users (80%)</strong>
|
||||
<CProgress
|
||||
class="mt-2"
|
||||
color="danger"
|
||||
thin
|
||||
:precision="1"
|
||||
:value="80"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol class="mb-sm-2 mb-0 d-md-down-none">
|
||||
<div class="text-medium-emphasis">Bounce Rate</div>
|
||||
<strong>Average Rate (40.15%)</strong>
|
||||
<CProgress class="mt-2" :value="40" thin :precision="1" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<WidgetsStatsD />
|
||||
<CRow>
|
||||
<CCol md="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader> Traffic & Sales </CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-info
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
>
|
||||
<div class="text-medium-emphasis small">New Clients</div>
|
||||
<div class="fs-5 fw-semibold">9,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-danger
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
>
|
||||
<div class="text-medium-emphasis small">
|
||||
Recurring Clients
|
||||
</div>
|
||||
<div class="fs-5 fw-semibold">22,643</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0" />
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Monday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin color="info" :value="34" />
|
||||
<CProgress thin color="danger" :value="78" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Tuesday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="56" color="info" />
|
||||
<CProgress thin :value="94" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Wednesday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="12" color="info" />
|
||||
<CProgress thin :value="67" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Thursday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="43" color="info" />
|
||||
<CProgress thin :value="91" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Friday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="22" color="info" />
|
||||
<CProgress thin :value="73" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Saturday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="53" color="info" />
|
||||
<CProgress thin :value="82" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-4">
|
||||
<div class="progress-group-prepend">
|
||||
<span class="progress-group-text"> Sunday </span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="9" color="info" />
|
||||
<CProgress thin :value="69" color="danger" />
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="12" lg="6">
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-warning
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
>
|
||||
<div class="text-medium-emphasis small">Pageviews</div>
|
||||
<div class="fs-5 fw-semibold">78,623</div>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<div
|
||||
class="
|
||||
border-start border-start-4 border-start-success
|
||||
py-1
|
||||
px-3
|
||||
mb-3
|
||||
"
|
||||
>
|
||||
<div class="text-medium-emphasis small">Organic</div>
|
||||
<div class="fs-5 fw-semibold">49,123</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<hr class="mt-0" />
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon icon="cil-user" class="me-2" size="lg" />
|
||||
<span class="title">Male</span>
|
||||
<span class="ms-auto font-weight-bold">43%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="43" color="warning" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group mb-5">
|
||||
<div class="progress-group-header">
|
||||
<CIcon icon="cil-user-female" class="me-2" size="lg" />
|
||||
<span class="title">Female</span>
|
||||
<span class="ms-auto font-weight-bold">37%</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="37" color="warning" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon icon="cil-globe-alt" class="me-2" size="lg" />
|
||||
<span class="title">Organic Search</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
191,235
|
||||
<span class="text-medium-emphasis small">(56%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="56" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
icon="cib-facebook"
|
||||
height="17"
|
||||
class="me-2"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="title">Facebook</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
51,223
|
||||
<span class="text-medium-emphasis small">(15%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="15" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
icon="cib-twitter"
|
||||
height="17"
|
||||
class="me-2"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
37,564
|
||||
<span class="text-medium-emphasis small">(11%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="11" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-group">
|
||||
<div class="progress-group-header">
|
||||
<CIcon
|
||||
icon="cib-linkedin"
|
||||
height="17"
|
||||
class="me-2"
|
||||
size="lg"
|
||||
/>
|
||||
<span class="title">LinkedIn</span>
|
||||
<span class="ms-auto font-weight-bold">
|
||||
27,319
|
||||
<span class="text-medium-emphasis small"> (8%)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="progress-group-bars">
|
||||
<CProgress thin :value="8" color="success" />
|
||||
</div>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<br />
|
||||
<CTable align="middle" class="mb-0 border" hover responsive>
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell class="text-center">
|
||||
<CIcon name="{cilPeople}" />
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell>User</CTableHeaderCell>
|
||||
<CTableHeaderCell class="text-center"
|
||||
>Country</CTableHeaderCell
|
||||
>
|
||||
<CTableHeaderCell>Usage</CTableHeaderCell>
|
||||
<CTableHeaderCell class="text-center"
|
||||
>Payment Method</CTableHeaderCell
|
||||
>
|
||||
<CTableHeaderCell>Activity</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow v-for="item in tableItems" :key="item.name">
|
||||
<CTableDataCell class="text-center">
|
||||
<CAvatar
|
||||
size="md"
|
||||
:src="item.avatar.src"
|
||||
:status="item.avatar.status"
|
||||
/>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div>{{ item.user.name }}</div>
|
||||
<div class="small text-medium-emphasis">
|
||||
<span>{{ item.user.new ? "New" : "Recurring" }}</span> |
|
||||
{{ item.user.registered }}
|
||||
</div>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell class="text-center">
|
||||
<CIcon
|
||||
size="xl"
|
||||
:name="item.country.flag"
|
||||
:title="item.country.name"
|
||||
/>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div class="clearfix">
|
||||
<div class="float-start">
|
||||
<strong>{{ item.usage.value }}%</strong>
|
||||
</div>
|
||||
<div class="float-end">
|
||||
<small class="text-medium-emphasis">
|
||||
{{ item.usage.period }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<CProgress
|
||||
thin
|
||||
:color="item.usage.color"
|
||||
:value="item.usage.value"
|
||||
/>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell class="text-center">
|
||||
<CIcon size="xl" :name="item.payment.icon" />
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
<div class="small text-medium-emphasis">Last login</div>
|
||||
<strong>{{ item.activity }}</strong>
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow> </CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</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 WidgetsStatsA from './widgets/WidgetsStatsTypeA.vue'
|
||||
import WidgetsStatsD from './widgets/WidgetsStatsTypeD.vue'
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
components: {
|
||||
MainChartExample,
|
||||
WidgetsStatsA,
|
||||
WidgetsStatsD,
|
||||
},
|
||||
data() {
|
||||
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-stripe" },
|
||||
activity: "1 hour ago",
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar4, status: "" },
|
||||
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-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-google-pay" },
|
||||
activity: "Last week",
|
||||
},
|
||||
{
|
||||
avatar: { src: avatar6, status: "danger" },
|
||||
user: {
|
||||
name: "Friderik Dávid",
|
||||
new: true,
|
||||
registered: "Jan 1, 2021",
|
||||
},
|
||||
country: { name: "Poland", flag: "cif-pl" },
|
||||
usage: {
|
||||
value: 43,
|
||||
period: "Jun 11, 2021 - Jul 10, 2021",
|
||||
color: "success",
|
||||
},
|
||||
payment: { name: "Amex", icon: "cib-cc-amex" },
|
||||
activity: "Last week",
|
||||
},
|
||||
],
|
||||
tableFields: [
|
||||
{ key: "avatar", label: "", _classes: "text-center" },
|
||||
{ key: "user" },
|
||||
{ key: "country", _classes: "text-center" },
|
||||
{ key: "usage" },
|
||||
{ key: "payment", label: "Payment method", _classes: "text-center" },
|
||||
{ key: "activity" },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
color(value) {
|
||||
let $color;
|
||||
if (value <= 25) {
|
||||
$color = "info";
|
||||
} else if (value > 25 && value <= 50) {
|
||||
$color = "success";
|
||||
} else if (value > 50 && value <= 75) {
|
||||
$color = "warning";
|
||||
} else if (value > 75 && value <= 100) {
|
||||
$color = "danger";
|
||||
}
|
||||
return $color;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Accordion</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Click the accordions below to expand/collapse the accordion content.
|
||||
</p>
|
||||
<Example href="components/accordion">
|
||||
<CAccordion>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="activeKey !== 1"
|
||||
@click="
|
||||
() => {
|
||||
activeKey === 1 ? (activeKey = 0) : (activeKey = 1);
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #1
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="activeKey === 1">
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="activeKey !== 2"
|
||||
@click="
|
||||
() => {
|
||||
activeKey === 2 ? (activeKey = 0) : (activeKey = 2);
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #2
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="activeKey === 2">
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong>
|
||||
It is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="activeKey !== 3"
|
||||
@click="
|
||||
() => {
|
||||
activeKey === 3 ? (activeKey = 0) : (activeKey = 3);
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #3
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="activeKey === 3">
|
||||
<CAccordionBody>
|
||||
<strong>This is the third item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Accordion</strong> <small>Flush</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>flush</code> to remove the default
|
||||
<code>background-color</code>, some borders, and some rounded
|
||||
corners to render accordions edge-to-edge with their parent
|
||||
container.
|
||||
</p>
|
||||
<Example href="components/accordion#flush">
|
||||
<CAccordion flush>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="flushActiveKey !== 1"
|
||||
@click="
|
||||
() => {
|
||||
flushActiveKey === 1
|
||||
? (flushActiveKey = 0)
|
||||
: (flushActiveKey = 1);
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #1
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="flushActiveKey === 1">
|
||||
<CAccordionBody>
|
||||
<strong>This is the first item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="flushActiveKey !== 2"
|
||||
@click="
|
||||
() => {
|
||||
flushActiveKey === 2
|
||||
? (flushActiveKey = 0)
|
||||
: (flushActiveKey = 2);
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #2
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="flushActiveKey === 2">
|
||||
<CAccordionBody>
|
||||
<strong>This is the second item's accordion body.</strong>
|
||||
It is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
</CAccordionItem>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader>
|
||||
<CAccordionButton
|
||||
:collapsed="flushActiveKey !== 3"
|
||||
@click="
|
||||
() => {
|
||||
flushActiveKey === 3
|
||||
? (flushActiveKey = 0)
|
||||
: (flushActiveKey = 3);
|
||||
}
|
||||
"
|
||||
>
|
||||
Accordion Item #3
|
||||
</CAccordionButton>
|
||||
</CAccordionHeader>
|
||||
<CAccordionCollapse :visible="flushActiveKey === 3">
|
||||
<CAccordionBody>
|
||||
<strong>This is the third item's accordion body.</strong> It
|
||||
is hidden by default, until the collapse plugin adds the
|
||||
appropriate classes that we use to style each element. These
|
||||
classes control the overall appearance, as well as the
|
||||
showing and hiding via CSS transitions. You can modify any
|
||||
of this with custom CSS or overriding our default variables.
|
||||
It's also worth noting that just about any HTML can go
|
||||
within the <code>.accordion-body</code>, though the
|
||||
transition does limit overflow.
|
||||
</CAccordionBody>
|
||||
</CAccordionCollapse>
|
||||
</CAccordionItem>
|
||||
</CAccordion>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
export default {
|
||||
name: "Accordion",
|
||||
setup() {
|
||||
const activeKey = ref(1)
|
||||
const flushActiveKey = ref(1)
|
||||
|
||||
return {
|
||||
activeKey,
|
||||
flushActiveKey,
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,24 +1,56 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Breadcrumb</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="breadcrumbs">
|
||||
<p class="text-medium-emphasis small">
|
||||
The breadcrumb navigation provides links back to each previous page
|
||||
the user navigated through and shows the current location in a
|
||||
website or an application. You don’t have to add separators, because
|
||||
they automatically added in CSS through
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
|
||||
<code>::before</code>
|
||||
</a>
|
||||
and
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
|
||||
<code>content</code>
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<Example href="components/breadcrumb">
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem active>Home</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Home</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Library</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem href="#">Home</CBreadcrumbItem>
|
||||
<CBreadcrumbItem href="#">Library</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Home</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Library</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Data</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Home</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Library</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Data</CLink>
|
||||
</CBreadcrumbItem>
|
||||
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
|
||||
</CBreadcrumb>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong> <small>Slide only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Here’s a carousel with slides
|
||||
</p>
|
||||
<Example href="components/carousel.html#slides-only">
|
||||
<CCarousel>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong> <small>With controls</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Adding in the previous and next controls by
|
||||
<code>controls</code> property.
|
||||
</p>
|
||||
<Example href="components/carousel.html#with-controls">
|
||||
<CCarousel controls>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong> <small>With indicators</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can attach the indicators to the carousel, lengthwise the
|
||||
controls, too.
|
||||
</p>
|
||||
<Example href="components/carousel.html#with-indicators">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong> <small>With captions</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can add captions to slides with the
|
||||
<code><CCarouselCaption></code> element within any
|
||||
<code><CCarouselItem></code>. They can be immediately hidden
|
||||
on smaller viewports, as shown below, with optional
|
||||
<a href="https://coreui.io/4.0/utilities/display"
|
||||
>display utilities</a
|
||||
>. We hide them with <code>.d-none</code> and draw them back on
|
||||
medium-sized devices with <code>.d-md-block</code>.
|
||||
</p>
|
||||
<Example href="components/carousel.html#with-captions">
|
||||
<CCarousel controls indicators>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>
|
||||
Some representative placeholder content for the first slide.
|
||||
</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>
|
||||
Some representative placeholder content for the first slide.
|
||||
</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
<CCarouselCaption class="d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>
|
||||
Some representative placeholder content for the first slide.
|
||||
</p>
|
||||
</CCarouselCaption>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong> <small>Crossfade</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>transition="crossfade"</code> to your carousel to
|
||||
animate slides with a fade transition instead of a slide.
|
||||
</p>
|
||||
<Example href="components/carousel.html#crossfade">
|
||||
<CCarousel controls indicators transition="crossfade">
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Carousels</strong> <small>Dark variant</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>dark</code> property to the <code>CCarousel</code> for
|
||||
darker controls, indicators, and captions. Controls have been
|
||||
inverted from their default white fill with the
|
||||
<code>filter</code> CSS property. Captions and controls have
|
||||
additional Sass variables that customize the <code>color</code> and
|
||||
<code>background-color</code>.
|
||||
</p>
|
||||
<Example href="components/carousel.html#dark-variant">
|
||||
<CCarousel controls indicators dark>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/vue.jpg"
|
||||
alt="slide 1"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/react.jpg"
|
||||
alt="slide 2"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
<CCarouselItem>
|
||||
<img
|
||||
class="d-block w-100"
|
||||
src="/images/angular.jpg"
|
||||
alt="slide 3"
|
||||
/>
|
||||
</CCarouselItem>
|
||||
</CCarousel>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Carousels",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Collapse</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can use a link or a button component.
|
||||
</p>
|
||||
<Example href="components/collapse.html#example">
|
||||
<CButton color="primary" href="#" @click="visible = !visible"
|
||||
>Link</CButton
|
||||
>
|
||||
<CButton color="primary" @click="visible = !visible"
|
||||
>Button</CButton
|
||||
>
|
||||
<CCollapse :visible="visible">
|
||||
<CCard class="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life
|
||||
accusamus terry richardson ad squid. Nihil anim keffiyeh
|
||||
helvetica, craft beer labore wes anderson cred nesciunt
|
||||
sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Collapse</strong> <small> multi target</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
A <code><CButton></code> can show and hide multiple elements.
|
||||
</p>
|
||||
<h4 class="mt-4">Toggle multiple targets</h4>
|
||||
<Example href="components/collapse.html#multiple-targets">
|
||||
<CButton color="primary" @click="visibleA = !visibleA"
|
||||
>Toggle first element</CButton
|
||||
>
|
||||
<CButton color="primary" @click="visibleB = !visibleB"
|
||||
>Toggle second element</CButton
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
@click="
|
||||
() => {
|
||||
visibleA = !visibleA;
|
||||
visibleB = !visibleB;
|
||||
}
|
||||
"
|
||||
>
|
||||
Toggle both elements
|
||||
</CButton>
|
||||
<CRow>
|
||||
<CCol xs="6">
|
||||
<CCollapse :visible="visibleA">
|
||||
<CCard class="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life
|
||||
accusamus terry richardson ad squid. Nihil anim keffiyeh
|
||||
helvetica, craft beer labore wes anderson cred nesciunt
|
||||
sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
<CCol xs="6">
|
||||
<CCollapse :visible="visibleB">
|
||||
<CCard class="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life
|
||||
accusamus terry richardson ad squid. Nihil anim keffiyeh
|
||||
helvetica, craft beer labore wes anderson cred nesciunt
|
||||
sapiente ea proident.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Breadcrumbs",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visibleA: false,
|
||||
visibleB: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,817 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Forms</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4>Overview</h4>
|
||||
<Example href="forms/overview.html#overview">
|
||||
<CForm>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleInputEmail1">Email address</CFormLabel>
|
||||
<CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
|
||||
<CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleInputPassword1">Email Password</CFormLabel>
|
||||
<CFormInput type="password" id="exampleInputPassword1" />
|
||||
</div>
|
||||
<CFormCheck
|
||||
class="mb-3"
|
||||
label="Check me out"
|
||||
/>
|
||||
<CButton type="submit" color="primary">
|
||||
Submit
|
||||
</CButton>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Disabled fieldset example</h4>
|
||||
<Example href="forms/overview.html#disabled-forms">
|
||||
<CForm>
|
||||
<fieldset disabled>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="disabledTextInput">Disabled input</CFormLabel>
|
||||
<CFormInput id="disabledTextInput" placeholder="Disabled input" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="disabledSelect">Disabled select menu</CFormLabel>
|
||||
<CFormSelect id="disabledSelect">
|
||||
<option>Disabled select</option>
|
||||
</CFormSelect>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
|
||||
</div>
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</fieldset>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="forms/form-control.html#sizing">
|
||||
<CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
|
||||
<br/>
|
||||
<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
|
||||
<br/>
|
||||
<CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
|
||||
</Example>
|
||||
<h4 class="mt-4">Input file</h4>
|
||||
<Example href="forms/form-control.html#file-input">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFile">Default file input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFile"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileMultiple">Multiple files input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFileMultiple" multiple/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileDisabled">Disabled file input example</CFormLabel>
|
||||
<CFormInput type="file" id="formFileDisabled" disabled/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileSm">Small file input example</CFormLabel>
|
||||
<CFormInput type="file" size="sm" id="formFileSm"/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormLabel for="formFileLg">Large file input example</CFormLabel>
|
||||
<CFormInput type="file" size="lg" id="formFileLg"/>
|
||||
</div>
|
||||
</Example>
|
||||
<h4 class="mt-4">Color</h4>
|
||||
<Example href="forms/form-control.html#color">
|
||||
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
|
||||
<CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />
|
||||
</Example>
|
||||
<h4 class="mt-4">Select</h4>
|
||||
<Example href="forms/select.html#default">
|
||||
<CRow>
|
||||
<CCol md="3">
|
||||
<CFormSelect class="mb-3" aria-label="Default select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect size="lg" class="mb-3" aria-label="Large select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect size="sm" class="mb-3" aria-label="Small select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect size="lg" class="mb-3" multiple aria-label="Multiple select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect htmlSize="3" class="mb-3" multiple aria-label="size 3 select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormSelect aria-label="Disabled select example" class="mb-3" disabled>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Checks</h4>
|
||||
<Example href="forms/checks-radios.html#checks">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
|
||||
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormCheck label="Disabled checkbox" disabled/>
|
||||
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Radios</h4>
|
||||
<Example href="forms/checks-radios.html#radios">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
|
||||
<CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
|
||||
<CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Switches</h4>
|
||||
<Example href="forms/checks-radios.html#switches">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
|
||||
<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
|
||||
<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
|
||||
<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
|
||||
<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
|
||||
<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Inline Checks and Radios</h4>
|
||||
<Example href="forms/checks-radios.html#inline">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Checks</h5>
|
||||
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
|
||||
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
|
||||
<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Radios</h5>
|
||||
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
|
||||
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
|
||||
<CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Toggle buttons</h4>
|
||||
<Example href="forms/checks-radios.html#checkbox-toggle-buttons">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Checkbox toggle buttons</h5>
|
||||
<div class="mb-2">
|
||||
<CFormCheck :button="{ color: 'primary' }" id="btn-check" autoComplete="off" label="Single toggle"/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<CFormCheck :button="{ color: 'primary' }" id="btn-check-2" autoComplete="off" label="Checked" defaultChecked/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<CFormCheck :button="{ color: 'primary' }" id="btn-check-3" autoComplete="off" label="Disabled" disabled/>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Radio toggle buttons</h5>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
|
||||
<CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<h5 class="mt-2 mb-2">Outlined styles</h5>
|
||||
<div>
|
||||
<CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck :button="{ color: 'secondary', variant: 'outline' }" id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck :button="{ color: 'success', variant: 'outline' }" type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
|
||||
<CFormCheck :button="{ color: 'danger', variant: 'outline' }" type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Range</h4>
|
||||
<Example href="forms/range.html#overview">
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="customRange1">Example range</CFormLabel>
|
||||
<CFormRange id="customRange1"/>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
|
||||
<CFormRange id="disabledRange" disabled/>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="customRange2">Example range max="5"</CFormLabel>
|
||||
<CFormRange min="0" max="5" defaultValue="3" id="customRange2"/>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="customRange3">Example range step="0.5"</CFormLabel>
|
||||
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Floating labels</h4>
|
||||
<Example href="forms/floating-labels.html#example">
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Input</h5>
|
||||
<CFormFloating class="mb-3">
|
||||
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
|
||||
<CFormLabel for="floatingInput">Email address</CFormLabel>
|
||||
</CFormFloating>
|
||||
<CFormFloating>
|
||||
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
|
||||
<CFormLabel for="exampleFormControlPassword">Password</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Input with value</h5>
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="floatingInputValue"
|
||||
placeholder="name@example.com"
|
||||
value="test@example.com"
|
||||
/>
|
||||
<CFormLabel for="floatingInputValue">Input with value</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Text areas</h5>
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
id="floatingTextarea"
|
||||
placeholder="Leave a comment here"
|
||||
></CFormTextarea>
|
||||
<CFormLabel for="floatingTextarea">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h5 class="mt-2 mb-2">Select</h5>
|
||||
<CFormFloating>
|
||||
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormLabel for="floatingSelect">Works with selects</CFormLabel>
|
||||
</CFormFloating>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue input group (basic example)</h4>
|
||||
<Example href="forms/input-group.html#basic-example">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
||||
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
|
||||
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
|
||||
<CFormInput id="basic-url" aria-describedby="basic-addon3"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CFormInput aria-label="Amount (to the nearest dollar)"/>
|
||||
<CInputGroupText>.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput placeholder="Username" aria-label="Username"/>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Server" aria-label="Server"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>With textarea</CInputGroupText>
|
||||
<CFormTextarea aria-label="With textarea"></CFormTextarea>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Input group sizing</h4>
|
||||
<Example href="forms/input-group.html#sizing">
|
||||
<CInputGroup size="sm" class="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
|
||||
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
|
||||
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup size="lg">
|
||||
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
|
||||
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Checkboxes and radios</h4>
|
||||
<Example href="forms/input-group.html#checkboxes-and-radios">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>
|
||||
<CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with checkbox"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>
|
||||
<CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with radio button"/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Multiple inputs</h4>
|
||||
<Example href="forms/input-group.html#multiple-inputs">
|
||||
<CInputGroup>
|
||||
<CInputGroupText>First and last name</CInputGroupText>
|
||||
<CFormInput aria-label="First name"/>
|
||||
<CFormInput aria-label="Last name"/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
|
||||
<h4 class="mt-4">Multiple addons</h4>
|
||||
<Example href="forms/input-group.html#multiple-addons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
|
||||
<h4 class="mt-4">Button addons</h4>
|
||||
<Example href="forms/input-group.html#button-addons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
|
||||
<CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CFormInput placeholder="" aria-label="Example text with two button addons"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
</CInputGroup>
|
||||
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
|
||||
<h4 class="mt-4">Buttons with dropdowns</h4>
|
||||
<Example href="forms/input-group.html#buttons-with-dropdowns">
|
||||
<CInputGroup class="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with dropdown button"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput aria-label="Text input with dropdown button"/>
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with 2 dropdown buttons"/>
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Segmented buttons</h4>
|
||||
<Example href="forms/input-group.html#segmented-buttons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">Action</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button"/>
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">Action</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Custom select</h4>
|
||||
<Example href="forms/input-group.html#custom-select">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText component="label" for="inputGroupSelect01">Options</CInputGroupText>
|
||||
<CFormSelect id="inputGroupSelect01">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormSelect id="inputGroupSelect02">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CInputGroupText component="label" for="inputGroupSelect02">Options</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CButton type="button" color="secondary" variant="outline">Button</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Custom file input</h4>
|
||||
<Example href="forms/input-group.html#custom-file-input">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText component="label" for="inputGroupFile01">Upload</CInputGroupText>
|
||||
<CFormInput type="file" id="inputGroupFile01"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput type="file" id="inputGroupFile02"/>
|
||||
<CInputGroupText component="label" for="inputGroupFile02">Upload</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
|
||||
<CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
|
||||
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="8">
|
||||
<h4 class="mt-4">Horizonstal form</h4>
|
||||
<Example href="forms/layout.html#horizontal-form">
|
||||
<CForm>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">Email</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormInput type="email" id="inputEmail3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel for="inputPassword3" class="col-sm-2 col-form-label">Password</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormInput type="password" id="inputPassword3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<fieldset class="row mb-3">
|
||||
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
|
||||
<CCol sm="10">
|
||||
<CFormCheck type="radio" name="gridRadios" id="gridRadios1" value="option1" label="First radio" defaultChecked/>
|
||||
<CFormCheck type="radio" name="gridRadios" id="gridRadios2" value="option2" label="Second radio"/>
|
||||
<CFormCheck type="radio" name="gridRadios" id="gridRadios3" value="option3" label="Third disabled radio" disabled/>
|
||||
</CCol>
|
||||
</fieldset>
|
||||
<CRow class="mb-3">
|
||||
<div class="col-sm-10 offset-sm-2">
|
||||
<CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
|
||||
</div>
|
||||
</CRow>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CForm>
|
||||
</Example>
|
||||
|
||||
</CCol>
|
||||
</CRow>
|
||||
<h4 class="mt-4">Vue form validation custom styles</h4>
|
||||
<Example href="forms/validation.html#custom-styles">
|
||||
<CForm class="row g-3 needs-validation" noValidate :validated="validatedCustom01" @submit="handleSubmitCustom01">
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustom01">Email</CFormLabel>
|
||||
<CFormInput id="validationCustom01" defaultValue="Mark" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustom02">Email</CFormLabel>
|
||||
<CFormInput id="validationCustom02" defaultValue="Otto" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormInput id="validationCustomUsername" defaultValue="" aria-describedby="inputGroupPrepend" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="validationCustom03">City</CFormLabel>
|
||||
<CFormInput id="validationCustom03" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationCustom04">City</CFormLabel>
|
||||
<CFormSelect id="validationCustom04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationCustom05">City</CFormLabel>
|
||||
<CFormInput id="validationCustom05" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
|
||||
<CFormFeedback invalid>
|
||||
You must agree before submitting.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">Submit form</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue form validation browser defaults</h4>
|
||||
<Example href="forms/validation.html#browser-defaults">
|
||||
<CForm class="row g-3 needs-validation" :validated="validatedDefault01" @submit="handleSubmitDefault01">
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefault01">Email</CFormLabel>
|
||||
<CFormInput id="validationDefault01" defaultValue="Mark" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefault02">Email</CFormLabel>
|
||||
<CFormInput id="validationDefault02" defaultValue="Otto" required/>
|
||||
<CFormFeedback valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefaultUsername">Username</CFormLabel>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
|
||||
<CFormInput id="validationDefaultUsername" defaultValue="" aria-describedby="inputGroupPrepend02" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="validationDefault03">City</CFormLabel>
|
||||
<CFormInput id="validationDefault03" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationDefault04">City</CFormLabel>
|
||||
<CFormSelect id="validationDefault04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationDefault05">City</CFormLabel>
|
||||
<CFormInput id="validationDefault05" required/>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
|
||||
<CFormFeedback invalid>
|
||||
You must agree before submitting.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">Submit form</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
|
||||
|
||||
|
||||
<h4 class="mt-4">Validation styles for components</h4>
|
||||
<Example href="forms/validation.html#supported-elements">
|
||||
<CForm :validated="true">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
|
||||
<CFormTextarea id="validationTextarea" placeholder="Required example textarea" invalid required></CFormTextarea>
|
||||
<CFormFeedback invalid>
|
||||
Please enter a message in the textarea.
|
||||
</CFormFeedback>
|
||||
</div>
|
||||
<CFormCheck class="mb-3" id="validationFormCheck1" label="Check this checkbox" required/>
|
||||
<CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
|
||||
<CFormCheck type="radio" name="radio-stacked" id="validationFormCheck2" label="Check this checkbox" required/>
|
||||
<CFormCheck class="mb-3" type="radio" name="radio-stacked" id="validationFormCheck3" label="Or toggle this other radio" required/>
|
||||
<CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
|
||||
<div class="mb-3">
|
||||
<CFormSelect required aria-label="select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormInput type="file" id="validationTextarea" aria-label="file example" required />
|
||||
<CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CButton type="submit" color="primary" disabled>Submit form</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Forms",
|
||||
data: () => {
|
||||
return {
|
||||
validatedCustom01: null,
|
||||
validatedDefault01: null,
|
||||
validatedTooltip01: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmitCustom01(event) {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.validatedCustom01 = true
|
||||
},
|
||||
handleSubmitDefault01(event) {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
this.validatedDefault01 = true
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue List Groups</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4>Basic example</h4>
|
||||
<Example href="components/list-group.html#basic-example">
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Active items</h4>
|
||||
<Example href="components/list-group.html#active-items">
|
||||
<CListGroup>
|
||||
<CListGroupItem active>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Disabled items</h4>
|
||||
<Example href="components/list-group.html#disabled-items">
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Links</h4>
|
||||
<Example href="components/list-group.html#links-and-buttons">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#" active>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#" disabled>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Buttons</h4>
|
||||
<Example href="components/list-group.html#links-and-buttons">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="button" active>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem component="button">Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem component="button">Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem component="button" disabled>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Flush</h4>
|
||||
<Example href="components/list-group.html#flush">
|
||||
<CListGroup flush>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Horizonstal</h4>
|
||||
<Example href="components/list-group.html#horizontal">
|
||||
<template v-for="(item) in ['', '-sm', '-md', '-lg', '-xl', '-xxl']">
|
||||
<CListGroup class="mb-2" :layout="'horizontal' + item">
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
</CListGroup>
|
||||
</template>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Contextual classes</h4>
|
||||
<Example href="components/list-group.html#contextual-classes">
|
||||
<CListGroup>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" :color="item">A simple {{item}} list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Change component to link</h4>
|
||||
<Example href="components/list-group.html#contextual-classes">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']" component="a" href="#" :color="item">A simple {{item}} list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Vue list groups with badge</h4>
|
||||
<Example href="components/list-group.html#with-badges">
|
||||
<CListGroup>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio<CBadge color="primary" shape="rounded-pill">14</CBadge></CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in<CBadge color="primary" shape="rounded-pill">2</CBadge></CListGroupItem>
|
||||
<CListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus<CBadge color="primary" shape="rounded-pill">1</CBadge></CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Custom content</h4>
|
||||
<Example href="components/list-group.html#custom-content">
|
||||
<CListGroup>
|
||||
<CListGroupItem component="a" href="#" active>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem component="a" href="#">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Checkboxes and radios</h4>
|
||||
<Example href="components/list-group.html#checkboxes-and-radios">
|
||||
<CListGroup>
|
||||
<CListGroupItem><CFormCheck label="Cras justo odio"/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="Dapibus ac facilisis in" defaultChecked/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="Morbi leo risus" defaultChecked/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="orta ac consectetur ac"/></CListGroupItem>
|
||||
<CListGroupItem><CFormCheck label="Vestibulum at eros"/></CListGroupItem>
|
||||
</CListGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ListGroups",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Navbars</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
<h4 class="mt-4">Basic usage of navbar</h4>
|
||||
<Example href="components/navbar.html#basic-usage">
|
||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarToggler @click="visible = !visible"/>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item" :popper="false">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="success" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue nav brand</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#brand">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Brand as link</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#brand">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#brand">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24"/>
|
||||
</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#brand">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="/images/brand/coreui-signet.svg" alt="" width="22" height="24" class="d-inline-block align-top"/> CoreUI
|
||||
</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with nav</h4>
|
||||
<Example href="components/navbar.html#nav">
|
||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Features</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Pricing</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item" :popper="false">
|
||||
<CDropdownToggle>Dropdown link</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with form</h4>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="success" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue navbar with form on right side</h4>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="success" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue navbar with input group</h4>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CForm class="container-fluid">
|
||||
<CInputGroup>
|
||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
||||
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
|
||||
</CInputGroup>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with buttons</h4>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CForm class="container-fluid justify-content-start">
|
||||
<CButton type="button" color="success" variant="outline" class="me-2">Main button</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline" size="sm">Smaller button</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar with text</h4>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarText>Navbar text with an inline element</CNavbarText>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar color schemes</h4>
|
||||
<Example href="components/navbar.html#color-schemes">
|
||||
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item" :popper="false">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="light" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
<br/>
|
||||
<CNavbar expand="lg" colorScheme="dark" class="bg-primary">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item" :popper="false">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="light" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
<br/>
|
||||
<CNavbar expand="lg" colorScheme="light" style="background-color:#e3f2fd;">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item" :popper="false">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="primary" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue navbar placement</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Default</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light" placement="fixed-top">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Fixed top</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light" placement="fixed-bottom">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/navbar.html#placement">
|
||||
<CNavbar colorScheme="light" class="bg-light" placement="sticky-top">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Sticky top</CNavbarBrand>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<h4 class="mt-4">Vue navbar responsive</h4>
|
||||
<p>With no CNavbarBrand shown at the smallest breakpoint:</p>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarBrand href="#">Hidden brand</CNavbarBrand>
|
||||
<CNavbarNav class="me-auto mb-2 mb-lg-0">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="success" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
<p>With a brand name shown on the left and toggler on the right:</p>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarNav class="me-auto mb-2 mb-lg-0">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="success" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<p>With a toggler on the left and brand name on the right:</p>
|
||||
<Example href="components/navbar.html#forms">
|
||||
<CNavbar expand="lg" colorScheme="light" class="bg-light">
|
||||
<CContainer fluid>
|
||||
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CCollapse class="navbar-collapse" :visible="visible">
|
||||
<CNavbarNav class="me-auto mb-2 mb-lg-0">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Home
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNavbarNav>
|
||||
<CForm class="d-flex">
|
||||
<CFormInput type="search" class="me-2" placeholder="Search"/>
|
||||
<CButton type="submit" color="success" variant="outline">Search</CButton>
|
||||
</CForm>
|
||||
</CCollapse>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Navbars",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Nav</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Base Nav</h4>
|
||||
<Example href="components/nav.html#base-nav">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Nav horizontal alignment</h4>
|
||||
<Example href="components/nav.html#horizontal-alignment">
|
||||
<CNav class="justify-content-center">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Nav right alignment</h4>
|
||||
<Example href="components/nav.html#horizontal-alignment">
|
||||
<CNav class="justify-content-end">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertical nav</h4>
|
||||
<Example href="components/nav.html#vertical">
|
||||
<CNav class="flex-column">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Tabs nav</h4>
|
||||
<Example href="components/nav.html#tabs">
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pills nav</h4>
|
||||
<Example href="components/nav.html#pills">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Fill nav</h4>
|
||||
<Example href="components/nav.html#fill-and-justify">
|
||||
<CNav variant="pills" layout="fill">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Justified nav</h4>
|
||||
<Example href="components/nav.html#fill-and-justify">
|
||||
<CNav variant="pills" layout="justified">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue nav with dropdown</h4>
|
||||
<Example href="components/nav.html#using-dropdowns">
|
||||
<CNav>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vue pills nav with dropdown</h4>
|
||||
<Example href="components/nav.html#pills-with-dropdowns">
|
||||
<CNav variant="pills">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" active>
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CDropdown variant="nav-item">
|
||||
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CNavItem>
|
||||
<CNavLink href="#">Link</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" disabled>
|
||||
Disabled
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Navs",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Pagination" href="components/pagination" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Pagination</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
We use a large block of connected links for our pagination, making
|
||||
links hard to miss and easily scalable—all while providing large hit
|
||||
areas. Pagination is built with list HTML elements so screen readers
|
||||
can announce the number of available links. Use a wrapping
|
||||
<code><nav></code> element to identify it as a navigation
|
||||
section to screen readers and other assistive technologies.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
In addition, as pages likely have more than one such navigation
|
||||
section, it's advisable to provide a descriptive
|
||||
<code>aria-label</code> for the <code><nav></code> to reflect
|
||||
its purpose. For example, if the pagination component is used to
|
||||
navigate between a set of search results, an appropriate label could
|
||||
be <code>aria-label="Search results pages"</code>.
|
||||
</p>
|
||||
<DocsExample href="components/pagination">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Pagination</strong> <small>Working with icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Looking to use an icon or symbol in place of text for some
|
||||
pagination links? Be sure to provide proper screen reader support
|
||||
with <code>aria</code> attributes.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#working-with-icons">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Pagination</strong> <small>Disabled and active states</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Pagination links are customizable for different circumstances. Use
|
||||
<code>disabled</code> for links that appear un-clickable and
|
||||
<code>.active</code> to indicate the current page.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
While the <code>disabled</code> prop uses
|
||||
<code>pointer-events: none</code> to <em>try</em> to disable the
|
||||
link functionality of <code><a></code>s, that CSS property is
|
||||
not yet standardized and doesn'taccount for keyboard navigation.
|
||||
As such, we always add <code>tabindex="-1"</code> on
|
||||
disabled links and use custom JavaScript to fully disable their
|
||||
functionality.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#disabled-and-active-states">
|
||||
<CPagination aria-label="Page navigation example">
|
||||
<CPaginationItem aria-label="Previous" disabled>
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem active>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Pagination</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Fancy larger or smaller pagination? Add
|
||||
<code>size="lg"</code> or <code>size="sm"</code> for
|
||||
additional sizes.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#sizing">
|
||||
<CPagination size="lg" aria-label="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/pagination#sizing">
|
||||
<CPagination size="sm" aria-label="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Pagination</strong> <small>Alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Change the alignment of pagination components with
|
||||
<a href="https://coreui.io/docs/utilities/flex/"
|
||||
>flexbox utilities</a
|
||||
>.
|
||||
</p>
|
||||
<DocsExample href="components/pagination#aligment">
|
||||
<CPagination
|
||||
class="justify-content-center"
|
||||
aria-label="Page navigation example"
|
||||
>
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/pagination#aligment">
|
||||
<CPagination
|
||||
class="justify-content-end"
|
||||
aria-label="Page navigation example"
|
||||
>
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</DocsExample>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Paginations",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Popovers</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Vue popover example</h4>
|
||||
<Example href="directives/popover.html#example">
|
||||
<CButton
|
||||
color="danger"
|
||||
size="lg"
|
||||
v-c-popover="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}"
|
||||
>
|
||||
Click to toggle popover
|
||||
</CButton>
|
||||
</Example>
|
||||
<h4 class="mt-4">Vue popovers four directions</h4>
|
||||
<Example href="directives/popover.html#four-directions">
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Popover on top</CButton>
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton>
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton>
|
||||
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Popovers",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Progress" href="components/progress" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Progress components are built with two HTML elements, some CSS to
|
||||
set the width, and a few attributes. We don'tuse
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"
|
||||
>
|
||||
the HTML5 <code><progress></code> element
|
||||
</a>
|
||||
, ensuring you can stack progress bars, animate them, and place text
|
||||
labels over them.
|
||||
</p>
|
||||
<Example href="components/progress">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="0" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="25" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="50" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="75" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="100" />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress</strong> <small>Labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add labels to your progress bars by placing text within the
|
||||
<code><CProgressBar></code>.
|
||||
</p>
|
||||
<Example href="components/progress#labels">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="25">25%</CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress</strong> <small>Height</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
We only set a <code>height</code> value on the
|
||||
<code><CProgress></code>, so if you change that value the
|
||||
inner <code><CProgressBar></code> will automatically resize
|
||||
accordingly.
|
||||
</p>
|
||||
<Example href="components/progress#height">
|
||||
<CProgress :height="1" class="mb-3">
|
||||
<CProgressBar :value="25"></CProgressBar>
|
||||
</CProgress>
|
||||
<CProgress :height="20" class="mb-3">
|
||||
<CProgressBar :value="25"></CProgressBar>
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress</strong> <small>Backgrounds</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use <code>color</code> prop to change the appearance of individual
|
||||
progress bars.
|
||||
</p>
|
||||
<Example href="components/progress#backgrounds">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="success" :value="25" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="info" :value="50" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="warning" :value="75" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="danger" :value="100" />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress</strong> <small>Multiple bars</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Include multiple progress bars in a progress component if you need.
|
||||
</p>
|
||||
<Example href="components/progress#multiple-bars">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar :value="15" />
|
||||
<CProgressBar color="success" :value="30" />
|
||||
<CProgressBar color="info" :value="20" />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress</strong> <small>Striped</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>variant="striped"</code> to any
|
||||
<code><CProgressBar></code> to apply a stripe via CSS gradient
|
||||
over the progress bar's background color.
|
||||
</p>
|
||||
<Example href="components/progress#striped">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="success" variant="striped" :value="25" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="info" variant="striped" :value="50" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="warning" variant="striped" :value="75" />
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar color="danger" variant="striped" :value="100" />
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Progress</strong> <small>Animated stripes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
The striped gradient can also be animated. Add
|
||||
<code>animated</code> property to
|
||||
<code><CProgressBar></code> to animate the stripes right to
|
||||
left via CSS3 animations.
|
||||
</p>
|
||||
<Example href="components/progress#animated-stripes">
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar
|
||||
color="success"
|
||||
variant="striped"
|
||||
animated
|
||||
:value="25"
|
||||
/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar
|
||||
color="info"
|
||||
variant="striped"
|
||||
animated
|
||||
:value="50"
|
||||
/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar
|
||||
color="warning"
|
||||
variant="striped"
|
||||
animated
|
||||
:value="75"
|
||||
/>
|
||||
</CProgress>
|
||||
<CProgress class="mb-3">
|
||||
<CProgressBar
|
||||
color="danger"
|
||||
variant="striped"
|
||||
animated
|
||||
:value="100"
|
||||
/>
|
||||
</CProgress>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Progress",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Switches</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios.html#switches">
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Default switch checkbox input" />
|
||||
<CFormSwitch label="Checked switch checkbox input" defaultChecked />
|
||||
<CFormSwitch label="Disabled switch checkbox input" disabled />
|
||||
<CFormSwitch label="Disabled checked switch checkbox input" defaultChecked disabled />
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Large switch" size="lg"/>
|
||||
<CFormSwitch label="Large switch" defaultChecked size="lg"/>
|
||||
<CFormSwitch label="Large switch" disabled size="lg"/>
|
||||
<CFormSwitch label="Large switch" defaultChecked disabled size="lg"/>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormSwitch label="Extra-large switch" size="xl"/>
|
||||
<CFormSwitch label="Extra-large switch" defaultChecked size="xl"/>
|
||||
<CFormSwitch label="Extra-large switch" disabled size="xl"/>
|
||||
<CFormSwitch label="Extra-large switch" defaultChecked disabled size="xl"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Switches",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,995 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Table" href="components/table" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Using the most basic table CoreUI, here's how
|
||||
<code><CTable></code>-based tables look in CoreUI.
|
||||
</p>
|
||||
<Example href="components/table">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Variants</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use contextual classes to color tables, table rows or individual
|
||||
cells.
|
||||
</p>
|
||||
<Example href="components/table#variants">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Default</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="primary">
|
||||
<CTableHeaderCell scope="row">Primary</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="secondary">
|
||||
<CTableHeaderCell scope="row">Secondary</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="success">
|
||||
<CTableHeaderCell scope="row">Success</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="danger">
|
||||
<CTableHeaderCell scope="row">Danger</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="warning">
|
||||
<CTableHeaderCell scope="row">Warning</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="info">
|
||||
<CTableHeaderCell scope="row">Info</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="light">
|
||||
<CTableHeaderCell scope="row">Light</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow color="dark">
|
||||
<CTableHeaderCell scope="row">Dark</CTableHeaderCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
<CTableDataCell>Cell</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Striped rows</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use <code>striped</code> property to add zebra-striping to any table
|
||||
row within the <code><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="components/table#striped-rows">
|
||||
<CTable striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
These classes can also be added to table variants:
|
||||
</p>
|
||||
<Example href="components/table#striped-rows">
|
||||
<CTable color="dark" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="components/table#striped-rows">
|
||||
<CTable color="success" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Hoverable rows</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use <code>hover</code> property to enable a hover state on table
|
||||
rows within a <code><CTableBody></code>.
|
||||
</p>
|
||||
<Example href="components/table#hoverable-rows">
|
||||
<CTable hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="components/table#hoverable-rows">
|
||||
<CTable color="dark" hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="components/table#hoverable-rows">
|
||||
<CTable striped hover>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Active tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/table#active-tables">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow active>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2" active>
|
||||
Larry the Bird
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="components/table#active-tables">
|
||||
<CTable color="dark">
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow active>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2" active>
|
||||
Larry the Bird
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Bordered tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>bordered</code> property for borders on all sides of the
|
||||
table and cells.
|
||||
</p>
|
||||
<Example href="components/table#bordered-tables">
|
||||
<CTable bordered>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<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:
|
||||
</p>
|
||||
<Example href="components/table#bordered-tables">
|
||||
<CTable bordered borderColor="primary">
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Tables without borders</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>borderless</code> property for a table without borders.
|
||||
</p>
|
||||
<Example href="components/table#tables-without-borders">
|
||||
<CTable borderless>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="components/table#tables-without-borders">
|
||||
<CTable color="dark" borderless>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Small tables</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add <code>small</code> property to make any
|
||||
<code><CTable></code> more compact by cutting all cell
|
||||
<code>padding</code> in half.
|
||||
</p>
|
||||
<Example href="components/table#small-tables">
|
||||
<CTable small>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Vertical alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Table cells of <code><CTableHead></code> are always vertical
|
||||
aligned to the bottom. Table cells in
|
||||
<code><CTableBody></code> inherit their alignment from
|
||||
<code><CTable></code> and are aligned to the the top by
|
||||
default. Use the align property to re-align where needed.
|
||||
</p>
|
||||
<Example href="components/table#vertical-alignment">
|
||||
<CTable align="middle" responsive>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col" class="w-25">
|
||||
Heading 1
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col" class="w-25">
|
||||
Heading 2
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col" class="w-25">
|
||||
Heading 3
|
||||
</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col" class="w-25">
|
||||
Heading 4
|
||||
</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from
|
||||
the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from
|
||||
the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from
|
||||
the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This here is some placeholder text, intended to take up
|
||||
quite a bit of vertical space, to demonsCTableRowate how the
|
||||
vertical alignment works in the preceding cells.
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow align="bottom">
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: bottom;</code> from
|
||||
the table row
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: bottom;</code> from
|
||||
the table row
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: bottom;</code> from
|
||||
the table row
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This here is some placeholder text, intended to take up
|
||||
quite a bit of vertical space, to demonsCTableRowate how the
|
||||
vertical alignment works in the preceding cells.
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from
|
||||
the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell>
|
||||
This cell inherits <code>vertical-align: middle;</code> from
|
||||
the table
|
||||
</CTableDataCell>
|
||||
<CTableDataCell align="top"
|
||||
>This cell is aligned to the top.</CTableDataCell
|
||||
>
|
||||
<CTableDataCell>
|
||||
This here is some placeholder text, intended to take up
|
||||
quite a bit of vertical space, to demonsCTableRowate how the
|
||||
vertical alignment works in the preceding cells.
|
||||
</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Nesting</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Border styles, active styles, and table variants are not inherited
|
||||
by nested tables.
|
||||
</p>
|
||||
<Example href="components/table#nesting">
|
||||
<CTable striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell colSpan="4">
|
||||
<CTable>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col"
|
||||
>Header</CTableHeaderCell
|
||||
>
|
||||
<CTableHeaderCell scope="col"
|
||||
>Header</CTableHeaderCell
|
||||
>
|
||||
<CTableHeaderCell scope="col"
|
||||
>Header</CTableHeaderCell
|
||||
>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">A</CTableHeaderCell>
|
||||
<CTableDataCell>First</CTableDataCell>
|
||||
<CTableDataCell>Last</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">B</CTableHeaderCell>
|
||||
<CTableDataCell>First</CTableDataCell>
|
||||
<CTableDataCell>Last</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">C</CTableHeaderCell>
|
||||
<CTableDataCell>First</CTableDataCell>
|
||||
<CTableDataCell>Last</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Table head</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Similar to tables and dark tables, use the modifier prop
|
||||
<code>color="light"</code> or
|
||||
<code>color="dark"</code> to make
|
||||
<code><CTableHead></code>s appear light or dark gray.
|
||||
</p>
|
||||
<Example href="components/table#table-head">
|
||||
<CTable>
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell>Larry</CTableDataCell>
|
||||
<CTableDataCell>the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<Example href="components/table#table-head">
|
||||
<CTable>
|
||||
<CTableHead color="dark">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Table foot</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/table#table-foot">
|
||||
<CTable>
|
||||
<CTableHead color="light">
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
<CTableDataCell>Footer</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Table</strong> <small>Captions</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
A <code><CTableCaption></code> functions like a heading for a
|
||||
table. It helps users with screen readers to find a table and
|
||||
understand what it's about and decide if they want to read it.
|
||||
</p>
|
||||
<Example href="components/table#captions">
|
||||
<CTable>
|
||||
<CTableCaption>List of users</CTableCaption>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell>Larry</CTableDataCell>
|
||||
<CTableDataCell>the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can also put the <code><CTableCaption></code> on the top
|
||||
of the table with <code>caption="top"</code>.
|
||||
</p>
|
||||
<Example href="components/table#captions">
|
||||
<CTable caption="top">
|
||||
<CTableCaption>List of users</CTableCaption>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">#</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Class</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
<CTableHeaderCell scope="col">Heading</CTableHeaderCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">1</CTableHeaderCell>
|
||||
<CTableDataCell>Mark</CTableDataCell>
|
||||
<CTableDataCell>Otto</CTableDataCell>
|
||||
<CTableDataCell>@mdo</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">2</CTableHeaderCell>
|
||||
<CTableDataCell>Jacob</CTableDataCell>
|
||||
<CTableDataCell>Thornton</CTableDataCell>
|
||||
<CTableDataCell>@fat</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">3</CTableHeaderCell>
|
||||
<CTableDataCell>Larry</CTableDataCell>
|
||||
<CTableDataCell>the Bird</CTableDataCell>
|
||||
<CTableDataCell>@twitter</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tables",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Tabs</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/tabs.html">
|
||||
<CNav variant="tabs">
|
||||
<CNavItem>
|
||||
<CNavLink href="#" @click="activeTabA=1">
|
||||
Active
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" @click="activeTabA=2">
|
||||
Link
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CNavLink href="#" @click="activeTabA=3">
|
||||
Link
|
||||
</CNavLink>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
<CTabContent>
|
||||
<CTabPane :visible="activeTabA == 1">
|
||||
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
|
||||
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
|
||||
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
|
||||
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
|
||||
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
|
||||
</CTabPane>
|
||||
<CTabPane :visible="activeTabA == 2">
|
||||
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
|
||||
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
|
||||
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
|
||||
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
|
||||
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
|
||||
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
|
||||
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
|
||||
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
|
||||
accusamus tattooed echo park.
|
||||
</CTabPane>
|
||||
<CTabPane :visible="activeTabA == 3">
|
||||
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
|
||||
organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
|
||||
pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
|
||||
hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
|
||||
pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
|
||||
etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
|
||||
craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
|
||||
</CTabPane>
|
||||
</CTabContent>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tabs",
|
||||
data: function(){
|
||||
return {
|
||||
activeTabA: 1,
|
||||
activeTabB: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Tooltips</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Tooltips example</h4>
|
||||
<Example href="directives/tooltip.html">
|
||||
<p class="text-medium-emphasis">
|
||||
Tight pants next level keffiyeh
|
||||
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
|
||||
haven't heard of them.
|
||||
Photo booth beard raw denim letterpress vegan messenger
|
||||
bag stumptown. Farm-to-table seitan, mcsweeney's fixie
|
||||
sustainable quinoa 8-bit american apparel
|
||||
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
|
||||
terry richardson vinyl chambray. Beard stumptown,
|
||||
cardigans banh mi lomo thundercats. Tofu biodiesel
|
||||
williamsburg marfa, four loko mcsweeney''s cleanse
|
||||
vegan chambray. A really ironic artisan
|
||||
<CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
|
||||
scenester farm-to-table banksy Austin
|
||||
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
|
||||
freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</Example>
|
||||
<h4 class="mt-4">Tooltips placements</h4>
|
||||
<Example href="directives/tooltip.html">
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Tooltip on top</CButton>
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Tooltip on right</CButton>
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Tooltip on bottom</CButton>
|
||||
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tooltips",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Brand Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
TODO: check did I should remove brand-buttons
|
||||
|
||||
<Example href="breadcrumbs">
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
|
||||
<template v-for="(brandName, key) in brands" :key="key">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:color="brandName"
|
||||
class="btn-brand"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BrandButtons",
|
||||
data: function(){
|
||||
return {
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
'linkedin',
|
||||
'flickr',
|
||||
'tumblr',
|
||||
'xing',
|
||||
'github',
|
||||
'stackoverflow',
|
||||
'youtube',
|
||||
'dribbble',
|
||||
'instagram',
|
||||
'pinterest',
|
||||
'vk',
|
||||
'yahoo',
|
||||
'behance',
|
||||
'reddit',
|
||||
'vimeo'
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Dropdowns</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
|
||||
<h4 class="mt-4">Single button</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<CDropdown color="secondary">
|
||||
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<CDropdown color="secondary" togglerText="Dropdown button">
|
||||
<CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<Example href="components/dropdown.html#single-button">
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
|
||||
<CDropdown :color="item" :togglerText="item" variant="btn-group">
|
||||
<CDropdownToggle :color="item">{{item}}</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Split button</h4>
|
||||
<Example href="components/dropdown.html#split-button">
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
|
||||
<CDropdown :color="item" :togglerText="item" variant="btn-group">
|
||||
<CButton :color="item">{{ item }}</CButton>
|
||||
<CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="components/dropdown.html#sizing">
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="secondary" size="lg">Large button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CButton color="secondary" size="lg">Large split button</CButton>
|
||||
<CDropdownToggle color="secondary" size="lg" split>Large button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="secondary" size="sm">Small button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CButton color="secondary" size="sm">Small split button</CButton>
|
||||
<CDropdownToggle color="secondary" size="sm" split>Small button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dark dropdowns</h4>
|
||||
<Example href="components/dropdown.html#dark-dropdowns">
|
||||
<CDropdown color="secondary" dark>
|
||||
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<p>In navbar:</p>
|
||||
<Example href="components/dropdown.html#dark-dropdowns">
|
||||
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
|
||||
<CContainer fluid>
|
||||
<CNavbarBrand href="#">Navbar</CNavbarBrand>
|
||||
<CNavbarNav>
|
||||
<CDropdown dark variant="nav-item">
|
||||
<CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CContainer>
|
||||
</CNavbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Directions</h4>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropup">
|
||||
<CDropdownToggle color="secondary">Dropup</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown color="secondary" direction="dropup">
|
||||
<CButton color="secondary">Split dropup</CButton>
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropend">
|
||||
<CDropdownToggle color="secondary">Dropend</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown color="secondary" direction="dropend">
|
||||
<CButton color="secondary">Split dropend</CButton>
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#directions">
|
||||
<CDropdown color="secondary" direction="dropstart">
|
||||
<CDropdownToggle color="secondary">Dropstart</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButtonGroup>
|
||||
<CDropdown color="secondary" direction="dropstart">
|
||||
<CDropdownToggle color="secondary" split/>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="secondary">Split dropstart</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Responsive alignment</h4>
|
||||
<Example href="components/dropdown.html#responsive-alignment">
|
||||
<CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
|
||||
<CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#responsive-alignment">
|
||||
<CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
|
||||
<CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dropdown menu content examples</h4>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded p-4 text-muted" style="max-width: 200px">
|
||||
<p>
|
||||
Some example text that's free-flowing within the dropdown menu.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
And this is more example text.
|
||||
</p>
|
||||
</div>
|
||||
</Example>
|
||||
<Example href="components/dropdown.html#menu-content">
|
||||
<div class="border rounded py-2">
|
||||
<CForm class="px-4 py-4">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
|
||||
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
|
||||
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormCheck id="dropdownCheck" label="Remember me"/>
|
||||
</div>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CForm>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
|
||||
<CDropdownItem href="#">Forgot password?</CDropdownItem>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonDropdowns",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Button Groups</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Basic example</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#basic-example">
|
||||
<CButtonGroup role="group" aria-label="Basic example">
|
||||
<CButton color="primary">Left</CButton>
|
||||
<CButton color="primary">Middle</CButton>
|
||||
<CButton color="primary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#basic-example">
|
||||
<CButtonGroup>
|
||||
<CButton href="#" color="primary" active>Active link</CButton>
|
||||
<CButton href="#" color="primary">Link</CButton>
|
||||
<CButton href="#" color="primary">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Mixed styles</h4>
|
||||
<Example href="components/button-group.html#mixed-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic mixed styles example">
|
||||
<CButton color="danger">Left</CButton>
|
||||
<CButton color="warning">Middle</CButton>
|
||||
<CButton color="success">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<h4 class="mt-4">Outlined styles</h4>
|
||||
<Example href="components/button-group.html#outlined-styles">
|
||||
<CButtonGroup role="group" aria-label="Basic outlined example">
|
||||
<CButton color="primary" variant="outline">Left</CButton>
|
||||
<CButton color="primary" variant="outline">Middle</CButton>
|
||||
<CButton color="primary" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<h4 class="mt-4">Checkbox and radio button groups</h4>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
|
||||
<CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<Example href="components/button-group.html#checkbox-and-radio-button-groups">
|
||||
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
|
||||
<CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<h4 class="mt-4">Button toolbar</h4>
|
||||
<Example href="components/button-group.html#button-toolbar">
|
||||
<CButtonToolbar role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="primary">1</CButton>
|
||||
<CButton color="primary">2</CButton>
|
||||
<CButton color="primary">3</CButton>
|
||||
<CButton color="primary">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="me-2" role="group" aria-label="Second group">
|
||||
<CButton color="secondary">5</CButton>
|
||||
<CButton color="secondary">6</CButton>
|
||||
<CButton color="secondary">7</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="me-2" role="group" aria-label="Third group">
|
||||
<CButton color="info">8</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
<Example href="components/button-group.html#button-toolbar">
|
||||
<CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">1</CButton>
|
||||
<CButton color="secondary" variant="outline">2</CButton>
|
||||
<CButton color="secondary" variant="outline">3</CButton>
|
||||
<CButton color="secondary" variant="outline">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
<CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups">
|
||||
<CButtonGroup class="me-2" role="group" aria-label="First group">
|
||||
<CButton color="secondary" variant="outline">1</CButton>
|
||||
<CButton color="secondary" variant="outline">2</CButton>
|
||||
<CButton color="secondary" variant="outline">3</CButton>
|
||||
<CButton color="secondary" variant="outline">4</CButton>
|
||||
</CButtonGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
|
||||
</CInputGroup>
|
||||
</CButtonToolbar>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Sizing</h4>
|
||||
<Example href="components/button-group.html#sizing">
|
||||
<CButtonGroup size="lg" role="group" aria-label="Large button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br/>
|
||||
<CButtonGroup role="group" aria-label="Default button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br/>
|
||||
<CButtonGroup size="sm" role="group" aria-label="Small button group">
|
||||
<CButton color="dark" variant="outline">Left</CButton>
|
||||
<CButton color="dark" variant="outline">Middle</CButton>
|
||||
<CButton color="dark" variant="outline">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertical variation</h4>
|
||||
<CRow>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
<CButton color="dark">Button</CButton>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CDropdown variant="btn-group">
|
||||
<CDropdownToggle color="primary">Dropdown</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<Example href="components/button-group.html#vertical-variation">
|
||||
<CButtonGroup vertical role="group" aria-label="Vertical button group">
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
|
||||
<CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
|
||||
</CButtonGroup>
|
||||
</Example>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ButtonGroups",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="components/button.html#examples">
|
||||
|
||||
<template v-for="(shape) in [null, 'rounded-pill', 'rounded-0', 'rounded-circle']">
|
||||
<h4 class="mt-4">Shape {{ shape === null ? 'standard' : shape === 'rounded-0' ? ' square' : shape }}:</h4>
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled size="sm"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
|
||||
<CRow>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Standard disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant outline disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
<CCol md="12" class="mt-4">
|
||||
<strong>Variant ghost disabled size="lg"</strong>
|
||||
<br>
|
||||
<template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
|
||||
<CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
|
||||
</template>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Block buttons</h4>
|
||||
|
||||
<Example href="components/button.html#block-buttons">
|
||||
<div class="d-grid gap-2">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 col-6 mx-auto">
|
||||
<CButton color="primary">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<CButton color="primary" class="me-md-2">Button</CButton>
|
||||
<CButton color="primary">Button</CButton>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Buttons",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
components: { CChartBar },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['months'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:data="computedData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
components: { CChartBar },
|
||||
props: {
|
||||
...CChartBar.props,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#f87979'
|
||||
},
|
||||
pointHoverBackgroundColor: String,
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean
|
||||
},
|
||||
computed: {
|
||||
defaultOptions () {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedData () {
|
||||
return {
|
||||
labels: ['4','5','6','7','8','9','10','11','12','13','14','15'],
|
||||
datasets: [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
],
|
||||
options: this.defaultOptions
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<CChartDoughnut
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartDoughnut } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
components: { CChartDoughnut },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CChartLine :data="defaultData"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
components: { CChartLine },
|
||||
computed: {
|
||||
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]
|
||||
},
|
||||
{
|
||||
label: 'Data Two',
|
||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
||||
data: [39, 80, 40, 35, 40, 20, 45]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:data="computedData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
components: { CChartLine },
|
||||
props: {
|
||||
...CChartLine.props,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor () {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
computedData () {
|
||||
return {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
|
||||
datasets: [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: getColor(this.borderColor),
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointBackgroundColor: getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
],
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:data="computedData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'CChartLineSimplePointed',
|
||||
components: { CChartLine },
|
||||
props: {
|
||||
...CChartLine.props,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor () {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
computedData () {
|
||||
return {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
|
||||
datasets: [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: getColor(this.borderColor),
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointBackgroundColor: getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
],
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
offset: true,
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, this.dataPoints) - 5,
|
||||
max: Math.max.apply(Math, this.dataPoints) + 5
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<CChartPie
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPie } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
components: { CChartPie },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPolarArea } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
components: { CChartPolarArea },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.5)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.5)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
],
|
||||
options: {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:data="defaultData"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartRadar } from '@coreui/vue-chartjs'
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
components: { CChartRadar },
|
||||
computed: {
|
||||
defaultData () {
|
||||
return {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: '2020',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '2021',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
],
|
||||
options: {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Line Chart
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineExample/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Bar Chart</CCardHeader>
|
||||
<CCardBody><CChartBarExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody><CChartDoughnutExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody><CChartRadarExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody><CChartPieExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody><CChartPolarAreaExample/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Simple line chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineSimple border-color="success" labels="months"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<!--
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Simple pointed chart</CCardHeader>
|
||||
<CCardBody><CChartLineSimplePointed :pointed="true" border-color="warning"/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
-->
|
||||
<CCol md="6" class="mt-4">
|
||||
<CCard>
|
||||
<CCardHeader>Simple bar chart</CCardHeader>
|
||||
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Charts from './index.js'
|
||||
export default {
|
||||
name: 'Charts',
|
||||
components: {
|
||||
...Charts
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
import CChartLineSimple from './CChartLineSimple'
|
||||
import CChartLineSimplePointed from './CChartLineSimplePointed'
|
||||
import CChartBarSimple from './CChartBarSimple'
|
||||
import CChartLineExample from './CChartLineExample'
|
||||
import CChartBarExample from './CChartBarExample'
|
||||
import CChartDoughnutExample from './CChartDoughnutExample'
|
||||
import CChartRadarExample from './CChartRadarExample'
|
||||
import CChartPieExample from './CChartPieExample'
|
||||
import CChartPolarAreaExample from './CChartPolarAreaExample'
|
||||
|
||||
export {
|
||||
CChartLineSimple,
|
||||
CChartLineSimplePointed,
|
||||
CChartBarSimple,
|
||||
CChartLineExample,
|
||||
CChartBarExample,
|
||||
CChartDoughnutExample,
|
||||
CChartRadarExample,
|
||||
CChartPieExample,
|
||||
CChartPolarAreaExample
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios">
|
||||
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
|
||||
<CFormCheck
|
||||
id="flexCheckChecked"
|
||||
label="Checked checkbox"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> attribute and the associated
|
||||
<code><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input's state.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#disabled">
|
||||
<CFormCheck label="Disabled checkbox" disabled />
|
||||
<CFormCheck
|
||||
label="Disabled checked checkbox"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> attribute and the associated
|
||||
<code><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input's state.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#radios">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault1"
|
||||
label="Default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault2"
|
||||
label="Checked radio"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios#disabled-1">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioDisabled"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioCheckedDisabled"
|
||||
label="Disabled checked radio"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
A switch has the markup of a custom checkbox but uses the
|
||||
<code>switch</code> boolean properly to render a toggle switch.
|
||||
Switches also support the <code>disabled</code> attribute.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#switches">
|
||||
<CFormSwitch
|
||||
label="Default switch checkbox input"
|
||||
id="formSwitchCheckDefault"
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Checked switch checkbox input"
|
||||
id="formSwitchCheckChecked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Disabled switch checkbox input"
|
||||
id="formSwitchCheckDisabled"
|
||||
disabled
|
||||
/>
|
||||
<CFormSwitch
|
||||
label="Disabled checked switch checkbox input"
|
||||
id="formSwitchCheckCheckedDisabled"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong> <small>Sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/checks-radios#sizes">
|
||||
<CFormSwitch
|
||||
label="Default switch checkbox input"
|
||||
id="formSwitchCheckDefault"
|
||||
/>
|
||||
<CFormSwitch
|
||||
size="lg"
|
||||
label="Large switch checkbox input"
|
||||
id="formSwitchCheckDefaultLg"
|
||||
/>
|
||||
<CFormSwitch
|
||||
size="xl"
|
||||
label="Extra large switch checkbox input"
|
||||
id="formSwitchCheckDefaultXL"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong>
|
||||
<small>Default layout (stacked)</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
By default, any number of checkboxes and radios that are immediate
|
||||
sibling will be vertically stacked and appropriately spaced.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#default-stacked">
|
||||
<CFormCheck id="defaultCheck1" label="Default checkbox" />
|
||||
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#default-stacked">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios1"
|
||||
value="option1"
|
||||
label="Default radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios2"
|
||||
value="option2"
|
||||
label="Second default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios3"
|
||||
value="option3"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Inline</small>
|
||||
</CCardHeader>
|
||||
<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><CFormCheck></code>.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#inline">
|
||||
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
|
||||
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
|
||||
<CFormCheck
|
||||
inline
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#inline">
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox1"
|
||||
value="option1"
|
||||
label="1"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox2"
|
||||
value="option2"
|
||||
label="2"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Without labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Remember to still provide some form of accessible name for assistive
|
||||
technologies (for instance, using <code>aria-label</code>).
|
||||
</p>
|
||||
<Example href="forms/checks-radios#without-labels">
|
||||
<div>
|
||||
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="radioNoLabel"
|
||||
id="radioNoLabel"
|
||||
value=""
|
||||
aria-label="..."
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Toggle buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create button-like checkboxes and radio buttons by using
|
||||
<code>button</code> boolean property on the
|
||||
<code><CFormCheck></code> component. These toggle buttons can
|
||||
further be grouped in a button group if needed.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary' }"
|
||||
id="btn-check"
|
||||
autoComplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary' }"
|
||||
id="btn-check-2"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary' }"
|
||||
id="btn-check-3"
|
||||
autoComplete="off"
|
||||
label="Disabled"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
<h3>Radio toggle buttons</h3>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option1"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option2"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option3"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary' }"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option4"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</Example>
|
||||
<h3>Outlined styles</h3>
|
||||
<p class="text-medium-emphasis small">
|
||||
Different variants of button, such at the various outlined styles,
|
||||
are supported.
|
||||
</p>
|
||||
<Example href="forms/checks-radios#toggle-buttons">
|
||||
<div>
|
||||
<CFormCheck
|
||||
:button="{ color: 'primary', variant: 'outline' }"
|
||||
id="btn-check-outlined"
|
||||
autoComplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
:button="{ color: 'secondary', variant: 'outline' }"
|
||||
id="btn-check-2-outlined"
|
||||
autoComplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
:button="{ color: 'success', variant: 'outline' }"
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="success-outlined"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
:button="{ color: 'danger', variant: 'outline' }"
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="danger-outlined"
|
||||
autoComplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChecksRadios",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Floating Label" href="forms/floating-label" />
|
||||
</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><CFormInput></code> and <code><CFormLabel></code>
|
||||
elements in <code>CFormFloating</code> to enable floating labels with textual form
|
||||
fields. A <code>placeholder</code> is required on each <code><CFormInput></code>
|
||||
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>
|
||||
pseudo-element. Also note that the <code><CFormInput></code> must come first so
|
||||
we can utilize a sibling selector (e.g., <code>~</code>).
|
||||
</p>
|
||||
<Example href="forms/floating-labels">
|
||||
<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>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
When there's a <code>value</code> already defined, <code><CFormLabel></code>
|
||||
s will automatically adjust to their floated position.
|
||||
</p>
|
||||
<Example href="forms/floating-labels">
|
||||
<CFormFloating>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="floatingInputValue"
|
||||
placeholder="name@example.com"
|
||||
defaultValue="test@example.com"
|
||||
/>
|
||||
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
|
||||
</CFormFloating>
|
||||
</Example>
|
||||
</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><CFormTextarea></code>s will be the same height as
|
||||
<code><CFormInput></code>s.
|
||||
</p>
|
||||
<Example href="forms/floating-labels#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
id="floatingTextarea"
|
||||
placeholder="Leave a comment here"
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
To set a custom height on your <code><CFormTextarea;></code>, do not use the
|
||||
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
|
||||
inline or via custom CSS).
|
||||
</p>
|
||||
<Example href="forms/floating-labels#textareas">
|
||||
<CFormFloating>
|
||||
<CFormTextarea
|
||||
placeholder="Leave a comment here"
|
||||
id="floatingTextarea2"
|
||||
style="height: 100px"
|
||||
></CFormTextarea>
|
||||
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
|
||||
</CFormFloating>
|
||||
</Example>
|
||||
</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><CFormInput></code>, floating labels are only available on
|
||||
<code><CFormSelect></code>s. They work in the same way, but unlike
|
||||
<code><CFormInput></code>s, they'll always show the
|
||||
<code><CFormLabel></code> in its floated state.
|
||||
<strong>
|
||||
Selects with <code>size</code> and <code>multiple</code> are not supported.
|
||||
</strong>
|
||||
</p>
|
||||
<Example href="forms/floating-labels#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>
|
||||
</Example>
|
||||
</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>
|
||||
<Example href="forms/floating-labels#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>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FloatingLabels",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Form Control" href="forms/form-control" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Form Control</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/form-control">
|
||||
<CForm>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleFormControlInput1"
|
||||
>Email address</CFormLabel
|
||||
>
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="exampleFormControlInput1"
|
||||
placeholder="name@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="exampleFormControlTextarea1"
|
||||
>Example textarea</CFormLabel
|
||||
>
|
||||
<CFormTextarea
|
||||
id="exampleFormControlTextarea1"
|
||||
rows="3"
|
||||
></CFormTextarea>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Form Control</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Set heights using <code>size</code> property like
|
||||
<code>size="lg"</code> and
|
||||
<code>size="sm"</code>.
|
||||
</p>
|
||||
<Example href="forms/form-control#sizing">
|
||||
<CFormInput
|
||||
type="text"
|
||||
size="lg"
|
||||
placeholder="Large input"
|
||||
aria-label="lg input example"
|
||||
/>
|
||||
<br />
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Default input"
|
||||
aria-label="default input example"
|
||||
/>
|
||||
<br />
|
||||
<CFormInput
|
||||
type="text"
|
||||
size="sm"
|
||||
placeholder="Small input"
|
||||
aria-label="sm input example"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Form Control</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean attribute on an input to give
|
||||
it a grayed out appearance and remove pointer events.
|
||||
</p>
|
||||
<Example href="forms/form-control#disabled">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Disabled input"
|
||||
aria-label="Disabled input example"
|
||||
disabled
|
||||
/>
|
||||
<br />
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Disabled readonly input"
|
||||
aria-label="Disabled input example"
|
||||
disabled
|
||||
readOnly
|
||||
/>
|
||||
<br />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Form Control</strong> <small>Readonly</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>readOnly</code> boolean attribute on an input to
|
||||
prevent modification of the input's value. Read-only inputs
|
||||
appear lighter (just like disabled inputs), but retain the standard
|
||||
cursor.
|
||||
</p>
|
||||
<Example href="forms/form-control#readonly">
|
||||
<CFormInput
|
||||
type="text"
|
||||
placeholder="Readonly input here..."
|
||||
aria-label="readonly input example"
|
||||
readOnly
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Form Control</strong> <small>Readonly plain text</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
If you want to have <code><input readonly></code> elements in
|
||||
your form styled as plain text, use the
|
||||
<code>plainText</code> boolean property to remove the default form
|
||||
field styling and preserve the correct margin and padding.
|
||||
</p>
|
||||
<Example href="components/accordion">
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel
|
||||
for="staticEmail"
|
||||
class="col-sm-2 col-form-label"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<div class="col-sm-10">
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="staticEmail"
|
||||
defaultValue="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
</div>
|
||||
</CRow>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel
|
||||
for="inputPassword"
|
||||
class="col-sm-2 col-form-label"
|
||||
>
|
||||
Password
|
||||
</CFormLabel>
|
||||
<div class="col-sm-10">
|
||||
<CFormInput type="password" id="inputPassword" />
|
||||
</div>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="components/accordion">
|
||||
<CForm class="row g-3">
|
||||
<div class="col-auto">
|
||||
<CFormLabel for="staticEmail2" class="visually-hidden">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="staticEmail2"
|
||||
defaultValue="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<CFormLabel
|
||||
for="inputPassword2"
|
||||
class="visually-hidden"
|
||||
>
|
||||
Password
|
||||
</CFormLabel>
|
||||
<CFormInput
|
||||
type="password"
|
||||
id="inputPassword2"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<CButton type="submit" class="mb-3">
|
||||
Confirm identity
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Form Control</strong> <small>File input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/form-control#file-input">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFile"
|
||||
>Default file input example</CFormLabel
|
||||
>
|
||||
<CFormInput type="file" id="formFile" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileMultiple"
|
||||
>Multiple files input example</CFormLabel
|
||||
>
|
||||
<CFormInput type="file" id="formFileMultiple" multiple />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileDisabled"
|
||||
>Disabled file input example</CFormLabel
|
||||
>
|
||||
<CFormInput type="file" id="formFileDisabled" disabled />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="formFileSm"
|
||||
>Small file input example</CFormLabel
|
||||
>
|
||||
<CFormInput type="file" size="sm" id="formFileSm" />
|
||||
</div>
|
||||
<div>
|
||||
<CFormLabel for="formFileLg"
|
||||
>Large file input example</CFormLabel
|
||||
>
|
||||
<CFormInput type="file" size="lg" id="formFileLg" />
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Form Control</strong> <small>Color</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/form-control#color">
|
||||
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
|
||||
<CFormInput
|
||||
type="color"
|
||||
id="exampleColorInput"
|
||||
defaultValue="#563d7c"
|
||||
title="Choose your color"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "FormControl",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs=12>
|
||||
<DocsCallout name="Input Group" href="forms/input-group" />
|
||||
</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><CFormLabel></code>s outside the
|
||||
input group.
|
||||
</p>
|
||||
<Example href="forms/input-group">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="basic-addon1"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="basic-addon2"
|
||||
/>
|
||||
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
|
||||
<CFormInput id="basic-url" aria-describedby="basic-addon3" />
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CFormInput aria-label="Amount (to the nearest dollar)" />
|
||||
<CInputGroupText>.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput placeholder="Username" aria-label="Username" />
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput placeholder="Server" aria-label="Server" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>With textarea</CInputGroupText>
|
||||
<CFormTextarea aria-label="With textarea"></CFormTextarea>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</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>
|
||||
<Example href="forms/input-group#wrapping">
|
||||
<CInputGroup class="flex-nowrap">
|
||||
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
|
||||
<CFormInput
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</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><CInputGroup></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'tsupported.</strong>
|
||||
</p>
|
||||
<Example href="forms/input-group#sizing">
|
||||
<CInputGroup size="sm" class="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
|
||||
<CFormInput
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-sm"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
|
||||
<CFormInput
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-default"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup size="lg">
|
||||
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
|
||||
<CFormInput
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-lg"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</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's addon instead of text.
|
||||
</p>
|
||||
<Example href="forms/input-group#checkboxes-and-radios">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
value=""
|
||||
aria-label="Checkbox for following text input"
|
||||
/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with checkbox" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
value=""
|
||||
aria-label="Radio button for following text input"
|
||||
/>
|
||||
</CInputGroupText>
|
||||
<CFormInput aria-label="Text input with radio button" />
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</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><CFormInput></code>s are supported visually, validation
|
||||
styles are only available for input groups with a single
|
||||
<code><CFormInput></code>.
|
||||
</p>
|
||||
<Example href="forms/input-group#multiple-inputs">
|
||||
<CInputGroup>
|
||||
<CInputGroupText>First and last name</CInputGroupText>
|
||||
<CFormInput aria-label="First name" />
|
||||
<CFormInput aria-label="Last name" />
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</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>
|
||||
<Example href="forms/input-group#multiple-addons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</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>
|
||||
<Example href="forms/input-group#button-addons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormInput
|
||||
placeholder=""
|
||||
aria-label="Example text with button addon"
|
||||
aria-describedby="button-addon1"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="button-addon2"
|
||||
/>
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon2">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormInput placeholder="" aria-label="Example text with two button addons" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username with two button addons"
|
||||
/>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/input-group#buttons-with-dropdowns">
|
||||
<CInputGroup class="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with dropdown button" />
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput aria-label="Text input with dropdown button" />
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CDropdown variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with 2 dropdown buttons" />
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Segmented buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/input-group#segmented-buttons">
|
||||
<CInputGroup class="mb-3">
|
||||
<CDropdown variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Action
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput aria-label="Text input with segmented dropdown button" />
|
||||
<CDropdown alignment="end" variant="input-group">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Action
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Custom select</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/input-group#custom-select">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText component="label" for="inputGroupSelect01">
|
||||
Options
|
||||
</CInputGroupText>
|
||||
<CFormSelect id="inputGroupSelect01">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormSelect id="inputGroupSelect02">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CInputGroupText component="label" for="inputGroupSelect02">
|
||||
Options
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs=12>
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Input group</strong> <small>Custom file input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/input-group#custom-file-input">
|
||||
<CInputGroup class="mb-3">
|
||||
<CInputGroupText component="label" for="inputGroupFile01">
|
||||
Upload
|
||||
</CInputGroupText>
|
||||
<CFormInput type="file" id="inputGroupFile01" />
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CFormInput type="file" id="inputGroupFile02" />
|
||||
<CInputGroupText component="label" for="inputGroupFile02">
|
||||
Upload
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup class="mb-3">
|
||||
<CButton
|
||||
type="button"
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
id="inputGroupFileAddon03"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
<CFormInput
|
||||
type="file"
|
||||
id="inputGroupFile03"
|
||||
aria-describedby="inputGroupFileAddon03"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormInput
|
||||
type="file"
|
||||
id="inputGroupFile04"
|
||||
aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
<CButton
|
||||
type="button"
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
id="inputGroupFileAddon04"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InputGroup",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Form grid</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
More complex forms can be built using our grid classes. Use these
|
||||
for form layouts that require multiple columns, varied widths, and
|
||||
additional alignment options.
|
||||
</p>
|
||||
<Example href="forms/layout#form-grid">
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="First name" aria-label="First name" />
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="Last name" aria-label="Last name" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Gutters</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
By adding
|
||||
<a href="https://coreui.io/docs/layout/gutters/"
|
||||
>gutter modifier classes</a
|
||||
>
|
||||
, you can have control over the gutter width in as well the inline
|
||||
as block direction.
|
||||
</p>
|
||||
<Example href="forms/layout#gutters">
|
||||
<CRow class="g-3">
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="First name" aria-label="First name" />
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CFormInput placeholder="Last name" aria-label="Last name" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
More complex layouts can also be created with the grid system.
|
||||
</p>
|
||||
<Example href="forms/layout#gutters">
|
||||
<CForm class="row g-3">
|
||||
<CCol :md="6">
|
||||
<CFormLabel for="inputEmail4">Email</CFormLabel>
|
||||
<CFormInput type="email" id="inputEmail4" />
|
||||
</CCol>
|
||||
<CCol :md="6">
|
||||
<CFormLabel for="inputPassword4">Password</CFormLabel>
|
||||
<CFormInput type="password" id="inputPassword4" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CFormLabel for="inputAddress">Address</CFormLabel>
|
||||
<CFormInput id="inputAddress" placeholder="1234 Main St" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CFormLabel for="inputAddress2">Address 2</CFormLabel>
|
||||
<CFormInput
|
||||
id="inputAddress2"
|
||||
placeholder="Apartment, studio, or floor"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :md="6">
|
||||
<CFormLabel for="inputCity">City</CFormLabel>
|
||||
<CFormInput id="inputCity" />
|
||||
</CCol>
|
||||
<CCol md="{4}">
|
||||
<CFormLabel for="inputState">State</CFormLabel>
|
||||
<CFormSelect id="inputState">
|
||||
<option>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="{2}">
|
||||
<CFormLabel for="inputZip">Zip</CFormLabel>
|
||||
<CFormInput id="inputZip" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="gridCheck"
|
||||
label="Check me out"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CButton type="submit" color="primary">Sign in</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Horizontal form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create horizontal forms with the grid by adding the
|
||||
<code>.row</code> class to form groups and using the
|
||||
<code>.col-*-*</code> classes to specify the width of your labels
|
||||
and controls. Be sure to add <code>.col-form-label</code> to your
|
||||
<code><CFormLabel></code>s as well so they're vertically
|
||||
centered with their associated form controls.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
At times, you maybe need to use margin or padding utilities to
|
||||
create that perfect alignment you need. For example, we've
|
||||
removed the <code>padding-top</code> on our stacked radio inputs
|
||||
label to better align the text baseline.
|
||||
</p>
|
||||
<Example href="forms/layout#horizontal-form">
|
||||
<CForm>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel
|
||||
for="inputEmail3"
|
||||
class="col-sm-2 col-form-label"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol :sm="10">
|
||||
<CFormInput type="email" id="inputEmail3" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel
|
||||
for="inputPassword3"
|
||||
class="col-sm-2 col-form-label"
|
||||
>
|
||||
Password
|
||||
</CFormLabel>
|
||||
<CCol :sm="10">
|
||||
<CFormInput type="password" id="inputPassword3" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<fieldset class="row mb-3">
|
||||
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
|
||||
<CCol :sm="10">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios1"
|
||||
value="option1"
|
||||
label="First radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios2"
|
||||
value="option2"
|
||||
label="Second radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios3"
|
||||
value="option3"
|
||||
label="Third disabled radio"
|
||||
disabled
|
||||
/>
|
||||
</CCol>
|
||||
</fieldset>
|
||||
<CRow class="mb-3">
|
||||
<div class="col-sm-10 offset-sm-2">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="gridCheck1"
|
||||
label="Example checkbox"
|
||||
/>
|
||||
</div>
|
||||
</CRow>
|
||||
<CButton type="submit" color="primary">Sign in</CButton>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Horizontal form label sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Be sure to use <code>.col-form-label-sm</code> or
|
||||
<code>.col-form-label-lg</code> to your
|
||||
<code><CFormLabel></code>s or <code><legend></code>s to
|
||||
correctly follow the size of <code>.form-control-lg</code> and
|
||||
<code>.form-control-sm</code>.
|
||||
</p>
|
||||
<Example href="forms/layout#horizontal-form-label-sizing">
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel
|
||||
for="colFormLabelSm"
|
||||
class="col-sm-2 col-form-label col-form-label-sm"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol :sm="10">
|
||||
<CFormInput
|
||||
type="email"
|
||||
class="form-control form-control-sm"
|
||||
id="colFormLabelSm"
|
||||
placeholder="col-form-label-sm"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="mb-3">
|
||||
<CFormLabel
|
||||
for="colFormLabel"
|
||||
class="col-sm-2 col-form-label"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol :sm="10">
|
||||
<CFormInput
|
||||
type="email"
|
||||
id="colFormLabel"
|
||||
placeholder="col-form-label"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CFormLabel
|
||||
for="colFormLabelLg"
|
||||
class="col-sm-2 col-form-label col-form-label-lg"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol :sm="10">
|
||||
<CFormInput
|
||||
type="email"
|
||||
class="form-control form-control-lg"
|
||||
id="colFormLabelLg"
|
||||
placeholder="col-form-label-lg"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Column sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
As shown in the previous examples, our grid system allows you to
|
||||
place any number of
|
||||
<code><CCol></code>s within a <code><CRow></code>.
|
||||
They'll split the available width equally between them. You may
|
||||
also pick a subset of your columns to take up more or less space,
|
||||
while the remaining <code><CCol></code>s equally split the
|
||||
rest, with specific column classes like
|
||||
<code><CCol sm="7"></code>.
|
||||
</p>
|
||||
<Example href="forms/layout#column-sizing">
|
||||
<CRow class="g-3">
|
||||
<CCol sm="{7}">
|
||||
<CFormInput placeholder="City" aria-label="City" />
|
||||
</CCol>
|
||||
<CCol sm>
|
||||
<CFormInput placeholder="State" aria-label="State" />
|
||||
</CCol>
|
||||
<CCol sm>
|
||||
<CFormInput placeholder="Zip" aria-label="Zip" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Auto-sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
The example below uses a flexbox utility to vertically center the
|
||||
contents and changes
|
||||
<code><CCol></code> to
|
||||
<code><CCol xs="auto"></code> so that your columns
|
||||
only take up as much space as needed. Put another way, the column
|
||||
sizes itself based on the contents.
|
||||
</p>
|
||||
<Example href="forms/layout#auto-sizing">
|
||||
<CForm class="row gy-2 gx-3 align-items-center">
|
||||
<CCol xs="auto">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="autoSizingInput"
|
||||
>
|
||||
Name
|
||||
</CFormLabel>
|
||||
<CFormInput id="autoSizingInput" placeholder="Jane Doe" />
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="autoSizingInputGroup"
|
||||
>
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput
|
||||
id="autoSizingInputGroup"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="autoSizingSelect"
|
||||
>
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="autoSizingSelect">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="autoSizingCheck"
|
||||
label="Remember me"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CButton type="submit" color="primary">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
You can then remix that once again with size-specific column
|
||||
classes.
|
||||
</p>
|
||||
<Example href="forms/layout#auto-sizing">
|
||||
<CForm class="row gx-3 gy-2 align-items-center">
|
||||
<CCol :sm="3">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="specificSizeInputName"
|
||||
>
|
||||
Name
|
||||
</CFormLabel>
|
||||
<CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
|
||||
</CCol>
|
||||
<CCol :sm="3">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="specificSizeInputGroupUsername"
|
||||
>
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput
|
||||
id="specificSizeInputGroupUsername"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol :sm="3">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="specificSizeSelect"
|
||||
>
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="specificSizeSelect">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="autoSizingCheck2"
|
||||
label="Remember me"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CButton type="submit" color="primary">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Inline forms</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Use the <code><CCol xs="auto"></code> class to create
|
||||
horizontal layouts. By adding
|
||||
<a href="https://coreui.io/docs/layout/gutters/"
|
||||
>gutter modifier classes</a
|
||||
>, we will have gutters in horizontal and vertical directions. The
|
||||
<code>.align-items-center</code> aligns the form elements to the
|
||||
middle, making the <code><CFormCheck></code> align properly.
|
||||
</p>
|
||||
<Example href="forms/layout#inline-forms">
|
||||
<CForm class="row row-cols-lg-auto g-3 align-items-center">
|
||||
<CCol :xs="12">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="inlineFormInputGroupUsername"
|
||||
>
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormInput
|
||||
id="inlineFormInputGroupUsername"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CFormLabel
|
||||
class="visually-hidden"
|
||||
for="inlineFormSelectPref"
|
||||
>
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="inlineFormSelectPref">
|
||||
<option>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="inlineFormCheck"
|
||||
label="Remember me"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CButton type="submit" color="primary">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Layout",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Range" href="forms/range" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Range</strong> <small></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create custom
|
||||
<code><input type="range"></code> controls with
|
||||
<code><CFormRange></code>.
|
||||
</p>
|
||||
<Example href="forms/range">
|
||||
<CFormLabel for="customRange1">Example range</CFormLabel>
|
||||
<CFormRange id="customRange1" />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Range</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean attribute on an input to give
|
||||
it a grayed out appearance and remove pointer events.
|
||||
</p>
|
||||
<Example href="forms/range#disabled">
|
||||
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
|
||||
<CFormRange id="disabledRange" disabled />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Range</strong> <small>Min and max</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Range inputs have implicit values for <code>min</code> and
|
||||
<code>max</code>— <code>0</code> and <code>100</code>, respectively.
|
||||
You may specify new values for those using the <code>min</code> and
|
||||
<code>max</code> attributes.
|
||||
</p>
|
||||
<Example href="forms/range#min-and-max">
|
||||
<CFormLabel for="customRange2">Example range</CFormLabel>
|
||||
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Range</strong> <small>Steps</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
By default, range inputs "snap" to integer values. To change
|
||||
this, you can specify a <code>step</code> value. In the example
|
||||
below, we double the number of steps by using
|
||||
<code>step="0.5"</code>.
|
||||
</p>
|
||||
<Example href="forms/range#steps">
|
||||
<CFormLabel for="customRange3">Example range</CFormLabel>
|
||||
<CFormRange
|
||||
:min="0"
|
||||
:max="5"
|
||||
:step="0.5"
|
||||
defaultValue="3"
|
||||
id="customRange3"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Range",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<DocsCallout name="Form Select" href="forms/select" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Select</strong> <small>Default</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="forms/select">
|
||||
<CFormSelect aria-label="Default select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Select</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
You may also choose from small and large custom selects to match our
|
||||
similarly sized text inputs.
|
||||
</p>
|
||||
<Example href="forms/select#sizing">
|
||||
<CFormSelect
|
||||
size="lg"
|
||||
class="mb-3"
|
||||
aria-label="Large select example"
|
||||
>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormSelect
|
||||
size="sm"
|
||||
class="mb-3"
|
||||
aria-label="Small select example"
|
||||
>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
The <code>multiple</code> attribute is also supported:
|
||||
</p>
|
||||
<Example href="forms/select#sizing">
|
||||
<CFormSelect
|
||||
size="lg"
|
||||
multiple
|
||||
aria-label="Multiple select example"
|
||||
>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
As is the <code>htmlSize</code> property:
|
||||
</p>
|
||||
<Example href="forms/select#sizing">
|
||||
<CFormSelect
|
||||
size="lg"
|
||||
multiple
|
||||
aria-label="Multiple select example"
|
||||
>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Vue Select</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code>disabled</code> boolean attribute on a select to give
|
||||
it a grayed out appearance and remove pointer events.
|
||||
</p>
|
||||
<Example href="forms/select#disabled">
|
||||
<CFormSelect aria-label="Disabled select example" disabled>
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Select",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,545 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="12">
|
||||
<DocsCallout name="Validation" href="forms/validation" />
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Custom styles</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
For custom CoreUI form validation messages, you'll need to add
|
||||
the
|
||||
<code>noValidate</code> boolean property to your
|
||||
<code><CForm></code>. This disables the browser default
|
||||
feedback tooltips, but still provides access to the form validation
|
||||
APIs in JavaScript. Try to submit the form below; our JavaScript
|
||||
will intercept the submit button and relay feedback to you. When
|
||||
attempting to submit, you'll see the <code>:invalid</code> and
|
||||
<code>:valid</code> styles applied to your form controls.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
Custom feedback styles apply custom colors, borders, focus styles,
|
||||
and background icons to better communicate feedback.
|
||||
</p>
|
||||
<Example href="forms/validation">
|
||||
<CForm
|
||||
class="row g-3 needs-validation"
|
||||
noValidate
|
||||
:validated="validatedCustom01"
|
||||
@submit="handleSubmitCustom01"
|
||||
>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustom01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationCustom01"
|
||||
defaultValue="Mark"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustom02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationCustom02"
|
||||
defaultValue="Otto"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationCustomUsername">Username</CFormLabel>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormInput
|
||||
id="validationCustomUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="validationCustom03">City</CFormLabel>
|
||||
<CFormInput id="validationCustom03" required />
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationCustom04">City</CFormLabel>
|
||||
<CFormSelect id="validationCustom04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationCustom05">City</CFormLabel>
|
||||
<CFormInput id="validationCustom05" required />
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>
|
||||
You must agree before submitting.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">Submit form</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Browser defaults</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Not interested in custom validation feedback messages or writing
|
||||
JavaScript to change form behaviors? All good, you can use the
|
||||
browser defaults. Try submitting the form below. Depending on your
|
||||
browser and OS, you'll see a slightly different style of
|
||||
feedback.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
While these feedback styles cannot be styled with CSS, you can still
|
||||
customize the feedback text through JavaScript.
|
||||
</p>
|
||||
<Example href="forms/validation#browser-defaults">
|
||||
<CForm
|
||||
class="row g-3 needs-validation"
|
||||
:validated="validatedDefault01"
|
||||
@submit="handleSubmitDefault01"
|
||||
>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefault01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationDefault01"
|
||||
defaultValue="Mark"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefault02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationDefault02"
|
||||
defaultValue="Otto"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel for="validationDefaultUsername"
|
||||
>Username</CFormLabel
|
||||
>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
|
||||
<CFormInput
|
||||
id="validationDefaultUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend02"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel for="validationDefault03">City</CFormLabel>
|
||||
<CFormInput id="validationDefault03" required />
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationDefault04">City</CFormLabel>
|
||||
<CFormSelect id="validationDefault04">
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel for="validationDefault05">City</CFormLabel>
|
||||
<CFormInput id="validationDefault05" required />
|
||||
<CFormFeedback invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>
|
||||
You must agree before submitting.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">Submit form</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Server side</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
We recommend using client-side validation, but in case you require
|
||||
server-side validation, you can indicate invalid and valid form
|
||||
fields with <code>invalid</code> and <code>valid</code> boolean
|
||||
properties.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
For invalid fields, ensure that the invalid feedback/error message
|
||||
is associated with the relevant form field using
|
||||
<code>aria-describedby</code> (noting that this attribute allows
|
||||
more than one <code>id</code> to be referenced, in case the field
|
||||
already points to additional form text).
|
||||
</p>
|
||||
<Example href="forms/validation#server-side">
|
||||
<CForm class="row g-3 needs-validation">
|
||||
<CCol :md="4">
|
||||
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServer01"
|
||||
defaultValue="Mark"
|
||||
valid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol :md="4">
|
||||
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServer02"
|
||||
defaultValue="Otto"
|
||||
valid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol :md="4">
|
||||
<CFormLabel htmlFor="validationServerUsername"
|
||||
>Username</CFormLabel
|
||||
>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServerUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend03"
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid
|
||||
>Please choose a username.</CFormFeedback
|
||||
>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol :md="6">
|
||||
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServer03"
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid
|
||||
>Please provide a valid city.</CFormFeedback
|
||||
>
|
||||
</CCol>
|
||||
<CCol :md="3">
|
||||
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
|
||||
<CFormSelect id="validationServer04" invalid>
|
||||
<option disabled>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid
|
||||
>Please provide a valid city.</CFormFeedback
|
||||
>
|
||||
</CCol>
|
||||
<CCol :md="3">
|
||||
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
|
||||
<CFormInput
|
||||
type="text"
|
||||
id="validationServer05"
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid
|
||||
>Please provide a valid zip.</CFormFeedback
|
||||
>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
invalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid
|
||||
>You must agree before submitting.</CFormFeedback
|
||||
>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CButton color="primary" type="submit"> Submit form </CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Supported elements</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Validation styles are available for the following form controls and
|
||||
components:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code><CFormInput></code>s</li>
|
||||
<li><code><CFormSelect></code>s</li>
|
||||
<li><code><CFormCheck></code>s</li>
|
||||
</ul>
|
||||
<Example href="forms/validation#supported-elements">
|
||||
<CForm :validated="true">
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="validationTextarea" class="form-label"
|
||||
>Textarea</CFormLabel
|
||||
>
|
||||
<CFormTextarea
|
||||
id="validationTextarea"
|
||||
placeholder="Required example textarea"
|
||||
invalid
|
||||
required
|
||||
></CFormTextarea>
|
||||
<CFormFeedback invalid>
|
||||
Please enter a message in the textarea.
|
||||
</CFormFeedback>
|
||||
</div>
|
||||
<CFormCheck
|
||||
class="mb-3"
|
||||
id="validationFormCheck1"
|
||||
label="Check this checkbox"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid
|
||||
>Example invalid feedback text</CFormFeedback
|
||||
>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="radio-stacked"
|
||||
id="validationFormCheck2"
|
||||
label="Check this checkbox"
|
||||
required
|
||||
/>
|
||||
<CFormCheck
|
||||
class="mb-3"
|
||||
type="radio"
|
||||
name="radio-stacked"
|
||||
id="validationFormCheck3"
|
||||
label="Or toggle this other radio"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid
|
||||
>More example invalid feedback text</CFormFeedback
|
||||
>
|
||||
<div class="mb-3">
|
||||
<CFormSelect required aria-label="select example">
|
||||
<option>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid
|
||||
>Example invalid select feedback</CFormFeedback
|
||||
>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormInput
|
||||
type="file"
|
||||
id="validationTextarea"
|
||||
aria-label="file example"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid
|
||||
>Example invalid form file feedback</CFormFeedback
|
||||
>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CButton type="submit" color="primary" disabled
|
||||
>Submit form</CButton
|
||||
>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol :xs="12">
|
||||
<CCard class="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Tooltips</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
If your form layout allows it, you can swap the text for the tooltip
|
||||
to display validation feedback in a styled tooltip. Be sure to have
|
||||
a parent with
|
||||
<code>position: relative</code> on it for tooltip positioning. In
|
||||
the example below, our column classes have this already, but your
|
||||
project may require an alternative setup.
|
||||
</p>
|
||||
<Example href="forms/validation#tooltips">
|
||||
<CForm
|
||||
class="row g-3 needs-validation"
|
||||
noValidate
|
||||
:validated="validatedTooltip01"
|
||||
@submit="handleSubmitTooltip01"
|
||||
>
|
||||
<CCol md="4" class="position-relative">
|
||||
<CFormLabel for="validationTooltip01">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationTooltip01"
|
||||
defaultValue="Mark"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4" class="position-relative">
|
||||
<CFormLabel for="validationTooltip02">Email</CFormLabel>
|
||||
<CFormInput
|
||||
id="validationTooltip02"
|
||||
defaultValue="Otto"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback tooltip valid> Looks good! </CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4" class="position-relative">
|
||||
<CFormLabel for="validationTooltipUsername"
|
||||
>Username</CFormLabel
|
||||
>
|
||||
<CInputGroup class="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormInput
|
||||
id="validationTooltipUsername"
|
||||
defaultValue=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<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">
|
||||
<CFormLabel for="validationTooltip04">City</CFormLabel>
|
||||
<CFormSelect id="validationTooltip04" required>
|
||||
<option disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3" class="position-relative">
|
||||
<CFormLabel for="validationTooltip05">City</CFormLabel>
|
||||
<CFormInput id="validationTooltip05" required />
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12" class="position-relative">
|
||||
<CButton color="primary" type="submit">Submit form</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Validation",
|
||||
data: () => {
|
||||
return {
|
||||
validatedCustom01: null,
|
||||
validatedDefault01: null,
|
||||
validatedTooltip01: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmitCustom01(event) {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
this.validatedCustom01 = true;
|
||||
},
|
||||
handleSubmitDefault01(event) {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
this.validatedDefault01 = true;
|
||||
},
|
||||
handleSubmitTooltip01(event) {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
this.validatedTooltip01 = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Brands</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<!-- TODO: icons, brands and flags href-s to documentation -->
|
||||
<Example href="">
|
||||
<CRow class="text-center">
|
||||
<template v-for="(brand, brandName) in brands" :key="brandName">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
>
|
||||
<CIcon size="lg" :content="brand"/>
|
||||
<div>{{toKebabCase(brandName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { brandSet as brands } from '@coreui/icons'
|
||||
export default {
|
||||
name: "Brands",
|
||||
data: function(){
|
||||
return {
|
||||
brands: brands
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue CoreUI Icons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="">
|
||||
<CRow class="text-center">
|
||||
<template v-for="(icon, iconName) in freeSet" :key="iconName">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
>
|
||||
<CIcon :content="icon" size="lg"/>
|
||||
<div>{{toKebabCase(iconName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { freeSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: "CoreUIIcons",
|
||||
data: function(){
|
||||
return {
|
||||
freeSet: freeSet
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Flags</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="">
|
||||
<CRow class="text-center">
|
||||
<!-- For using the flags inline with text add the classes
|
||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
||||
span. If you want to have a squared version flag then add the class
|
||||
flag-icon-squared as well. -->
|
||||
<template v-for="(flag, flagName) in flagSet" :key="flagName">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
>
|
||||
<CIcon size="lg" :content="flag"/>
|
||||
<div>{{toKebabCase(flagName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flagSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: "Flags",
|
||||
data: function(){
|
||||
return {
|
||||
flagSet: flagSet
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Alerts</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Alerts examples</h4>
|
||||
<Example href="components/alert.html#examples">
|
||||
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
|
||||
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
|
||||
<CAlert color="success">A simple success alert—check it out!</CAlert>
|
||||
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
|
||||
<CAlert color="warning">A simple warning alert—check it out!</CAlert>
|
||||
<CAlert color="info">A simple info alert—check it out!</CAlert>
|
||||
<CAlert color="light">A simple light alert—check it out!</CAlert>
|
||||
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Link color</h4>
|
||||
<Example href="components/alert.html#link-color">
|
||||
<CAlert color="primary">
|
||||
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="secondary">
|
||||
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="success">
|
||||
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="danger">
|
||||
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="warning">
|
||||
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="info">
|
||||
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="light">
|
||||
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
<CAlert color="dark">
|
||||
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
|
||||
</CAlert>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Additional content</h4>
|
||||
<Example href="components/alert.html#additional-content">
|
||||
<CAlert color="success" v-bind:visible="true">
|
||||
<CAlertHeading>Well done!</CAlertHeading>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr />
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</CAlert>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Dismissing</h4>
|
||||
<Example href="components/alert.html#dismissing">
|
||||
<CAlert color="warning" dismissible @dismiss="alert">
|
||||
<strong>Go right ahead</strong> and click that dimiss over there on the right.
|
||||
</CAlert>
|
||||
</Example>
|
||||
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Alerts",
|
||||
methods: {
|
||||
alert: function(){
|
||||
alert("👋 Well, hi there! Thanks for dismissing me.")
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Badges</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Basic usage</h4>
|
||||
<Example href="components/badge.html#basic-usage">
|
||||
<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
|
||||
<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
|
||||
<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
|
||||
<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
|
||||
<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
|
||||
<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
|
||||
</Example>
|
||||
<Example href="components/badge.html#basic-usage">
|
||||
<CButton color="primary">
|
||||
Notifications <CBadge color="secondary">4</CBadge>
|
||||
</CButton>
|
||||
<br>
|
||||
<CButton color="primary">
|
||||
Profile <CBadge color="secondary">9</CBadge>
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</CButton>
|
||||
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Contextual variations</h4>
|
||||
<Example href="components/badge.html#contextual-variations">
|
||||
<CBadge color="primary">primary</CBadge>
|
||||
<CBadge color="success">success</CBadge>
|
||||
<CBadge color="danger">danger</CBadge>
|
||||
<CBadge color="warning">warning</CBadge>
|
||||
<CBadge color="info">info</CBadge>
|
||||
<CBadge color="light">light</CBadge>
|
||||
<CBadge color="dark">dark</CBadge>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Pill badges</h4>
|
||||
<Example href="components/badge.html#pill-badges">
|
||||
<CBadge color="primary" shape="rounded-pill">primary</CBadge>
|
||||
<CBadge color="success" shape="rounded-pill">success</CBadge>
|
||||
<CBadge color="danger" shape="rounded-pill">danger</CBadge>
|
||||
<CBadge color="warning" shape="rounded-pill">warning</CBadge>
|
||||
<CBadge color="info" shape="rounded-pill">info</CBadge>
|
||||
<CBadge color="light" shape="rounded-pill">light</CBadge>
|
||||
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Badges",
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Modals</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h4 class="mt-4">Example</h4>
|
||||
<Example href="components/modal.html#modal-components">
|
||||
<CModal class="show d-block position-static" :backdrop="false" :keyboard="false" visible>
|
||||
<CModalHeader dismiss>
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Modal body text goes here.</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary">Close</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Live demo</h4>
|
||||
<Example href="components/modal.html#live-demo">
|
||||
<CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
|
||||
<CModal :visible="visibleLiveDemo" @dismiss="() => { visibleLiveDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleLiveDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleLiveDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Static backdrop</h4>
|
||||
<Example href="components/modal.html#static-backdrop">
|
||||
<CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
|
||||
<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @dismiss="() => { visibleStaticBackdropDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleStaticBackdropDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleStaticBackdropDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Scrolling long content</h4>
|
||||
<Example href="components/modal.html#scrolling-long-content">
|
||||
<CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
|
||||
<CModal :visible="visibleScrollingLongContentDemo" @dismiss="() => { visibleScrollingLongContentDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleScrollingLongContentDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Visible scrollable</h4>
|
||||
<Example href="components/modal.html#scrolling-long-content">
|
||||
<CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
|
||||
<CModal scrollable :visible="visibleScrollableDemo" @dismiss="() => { visibleScrollableDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleScrollableDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
<p>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||||
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
|
||||
at eros.
|
||||
</p>
|
||||
<p>
|
||||
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||||
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
</p>
|
||||
<p>
|
||||
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||||
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
|
||||
auctor fringilla.
|
||||
</p>
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertically centered</h4>
|
||||
<Example href="components/modal.html#vertically-centered">
|
||||
<CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
|
||||
<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @dismiss="() => { visibleVerticallyCenteredDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleVerticallyCenteredDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Vertically scrollable demo</h4>
|
||||
<Example href="components/modal.html#vertically-centered">
|
||||
<CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
|
||||
<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { visibleVerticallyCenteredScrollableDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Tooltips and popovers</h4>
|
||||
<Example href="components/modal.html#tooltips-and-popovers">
|
||||
<CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
|
||||
<CModal :visible="tooltipsAndPopoversDemo" @dismiss="() => { tooltipsAndPopoversDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { tooltipsAndPopoversDemo = false }">
|
||||
<CModalTitle>Modal title</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
<h5>Popover in a modal</h5>
|
||||
<p>This <CButton color="secondary" v-c-popover="{header: 'Popover title', content: 'Popover body content is set in this property.'}">button</CButton></p>
|
||||
<hr/>
|
||||
<h5>Tooltips in a modal</h5>
|
||||
<p>
|
||||
<CLink v-c-tooltip="'Tooltip'">This link</CLink> and <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
|
||||
</p>
|
||||
</CModalBody>
|
||||
<CModalFooter>
|
||||
<CButton color="secondary" @click="() => { tooltipsAndPopoversDemo = false }">
|
||||
Close
|
||||
</CButton>
|
||||
<CButton color="primary">Save changes</CButton>
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
|
||||
<h4 class="mt-4">Optional sizes</h4>
|
||||
<Example href="components/modal.html#optional-sizes">
|
||||
<CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
|
||||
<CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
|
||||
<CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
|
||||
<CModal size="xl" :visible="xlDemo" @dismiss="() => { xlDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { xlDemo = false }">
|
||||
<CModalTitle>Extra large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="lg" :visible="lgDemo" @dismiss="() => { lgDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { lgDemo = false }">
|
||||
<CModalTitle>Large modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal size="sm" :visible="smDemo" @dismiss="() => { smDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { smDemo = false }">
|
||||
<CModalTitle>Small modal</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
<h4 class="mt-4">Fullscreen Modal</h4>
|
||||
<Example href="components/modal.html#fullscreen-modal">
|
||||
<CButton color="primary" @click="() => { fullscreenDemo = true }">Full screen</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenSmDemo = true }">Full screen below sm</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenMdDemo = true }">Full screen below md</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
|
||||
<CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
|
||||
<CModal fullscreen :visible="fullscreenDemo" @dismiss="() => { fullscreenDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { xlDemo = false }">
|
||||
<CModalTitle>Full screen</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="sm" :visible="fullscreenSmDemo" @dismiss="() => { fullscreenSmDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenSmDemo = false }">
|
||||
<CModalTitle>Full screen below sm</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="md" :visible="fullscreenMdDemo" @dismiss="() => { fullscreenMdDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenMdDemo = false }">
|
||||
<CModalTitle>Full screen below md</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="lg" :visible="fullscreenLgDemo" @dismiss="() => { fullscreenLgDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenLgDemo = false }">
|
||||
<CModalTitle>Full screen below lg</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xl" :visible="fullscreenXlDemo" @dismiss="() => { fullscreenXlDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenXlDemo = false }">
|
||||
<CModalTitle>Full screen below xl</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @dismiss="() => { fullscreenXxlDemo = false }">
|
||||
<CModalHeader dismiss @dismiss="() => { fullscreenXxlDemo = false }">
|
||||
<CModalTitle>Full screen below xxl</CModalTitle>
|
||||
</CModalHeader>
|
||||
<CModalBody>
|
||||
...
|
||||
</CModalBody>
|
||||
</CModal>
|
||||
</Example>
|
||||
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Modals",
|
||||
data: function(){
|
||||
return {
|
||||
visibleLiveDemo: false,
|
||||
visibleStaticBackdropDemo: false,
|
||||
visibleScrollingLongContentDemo: false,
|
||||
visibleScrollableDemo: false,
|
||||
visibleVerticallyCenteredDemo: false,
|
||||
visibleVerticallyCenteredScrollableDemo: false,
|
||||
xlDemo: false,
|
||||
lgDemo: false,
|
||||
smDemo: false,
|
||||
fullscreenDemo: false,
|
||||
fullscreenSmDemo: false,
|
||||
fullscreenMdDemo: false,
|
||||
fullscreenLgDemo: false,
|
||||
fullscreenXlDemo: false,
|
||||
fullscreenXxlDemo: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<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%;"
|
||||
></div>
|
||||
<slot></slot>
|
||||
<ColorView/>
|
||||
</CCol>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//import ColorView from './ColorView'
|
||||
export default {
|
||||
name: 'ColorTheme',
|
||||
// components: { ColorView },
|
||||
props: {
|
||||
color: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<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>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorTheme from './ColorTheme'
|
||||
export default {
|
||||
name: "Colors",
|
||||
components: { ColorTheme }
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,222 @@
|
||||
<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">
|
||||
<h1></h1>
|
||||
</code>
|
||||
</p>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h2></h2>
|
||||
</code>
|
||||
</p>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h3></h3>
|
||||
</code>
|
||||
</p>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h4></h4>
|
||||
</code>
|
||||
</p>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h5></h5>
|
||||
</code>
|
||||
</p>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell>
|
||||
</CTableRow>
|
||||
<CTableRow>
|
||||
<CTableDataCell>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h6></h6>
|
||||
</code>
|
||||
</p>
|
||||
</CTableDataCell>
|
||||
<CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Headings
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
<code class="highlighter-rouge">.h1</code> through
|
||||
<code class="highlighter-rouge">.h6</code>
|
||||
classes are also available, for when you want to match the font
|
||||
styling of a heading but cannot use the associated HTML element.
|
||||
</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Display headings
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat
|
||||
of your page content. When you need a heading to stand out,
|
||||
consider using a <strong>display heading</strong>—a larger,
|
||||
slightly more opinionated heading style.
|
||||
</p>
|
||||
<div class="bd-example bd-example-type">
|
||||
<CTable>
|
||||
<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">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">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>
|
||||
@@ -0,0 +1,742 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Vue Widgets</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="">
|
||||
<WidgetsStatsA />
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
:progress="{ color: 'success', value: 75 }"
|
||||
>
|
||||
<template #text>Widget helper text</template>
|
||||
<template #title>Widget title</template>
|
||||
<template #value>89.9%</template>
|
||||
</CWidgetStatsB>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="12.124"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
:progress="{ color: 'warning', value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="$98.111,00"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
:progress="{ color: 'primary', value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="2TB"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="success"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
>
|
||||
<template #text>Widget helper text</template>
|
||||
<template #title>Widget title</template>
|
||||
<template #value>89.9%</template>
|
||||
</CWidgetStatsB>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="info"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="12.124"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="$98.111,00"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsB
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
text="Widget helper text"
|
||||
title="Widget title"
|
||||
value="2TB"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="bar"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-danger'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsBar"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="bar"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-primary'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsBar"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="bar"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: getStyle('--cui-warning'),
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsBar"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="line"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-success'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsLine"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="line"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-warning'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsLine"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsE title="title" value="1,123">
|
||||
<CChart
|
||||
class="mx-auto"
|
||||
type="line"
|
||||
style="height: 40px; width: 80px"
|
||||
:data="{
|
||||
labels: widgetStatsE.labels,
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: getStyle('--cui-info'),
|
||||
borderWidth: 2,
|
||||
data: [
|
||||
41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
|
||||
45, 47,
|
||||
],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="widgetStatsE.optionsLine"
|
||||
/>
|
||||
</CWidgetStatsE>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-settings" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-user" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-moon" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-bell" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-settings" size="xl" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon
|
||||
icon="cil-arrow-right"
|
||||
class="ms-auto"
|
||||
width="16"
|
||||
/>
|
||||
</CLink>
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="info" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-user" size="xl" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon
|
||||
icon="cil-arrow-right"
|
||||
class="ms-auto"
|
||||
width="16"
|
||||
/>
|
||||
</CLink>
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="warning" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-moon" size="xl" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon
|
||||
icon="cil-arrow-right"
|
||||
class="ms-auto"
|
||||
width="16"
|
||||
/>
|
||||
</CLink>
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF color="danger" title="Title" value="$1.999,50">
|
||||
<template #icon>
|
||||
<CIcon icon="cil-bell" size="xl" />
|
||||
</template>
|
||||
<template #footer>
|
||||
<CLink
|
||||
class="font-weight-bold font-xs text-medium-emphasis"
|
||||
href="https://coreui.io/"
|
||||
rel="noopener norefferer"
|
||||
target="_blank"
|
||||
>
|
||||
View more
|
||||
<CIcon
|
||||
icon="cil-arrow-right"
|
||||
class="ms-auto"
|
||||
width="16"
|
||||
/>
|
||||
</CLink>
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="primary"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-settings" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="info"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-user" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="warning"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-moon" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsF
|
||||
color="danger"
|
||||
:padding="false"
|
||||
title="Title"
|
||||
value="$1.999,50"
|
||||
>
|
||||
<template #icon>
|
||||
<CIcon icon="cil-bell" size="xl" />
|
||||
</template>
|
||||
</CWidgetStatsF>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<WidgetsStatsD />
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CCardGroup>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
title="Visitors"
|
||||
value="87.500"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-people" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'success', value: 75 }"
|
||||
title="New Clients"
|
||||
value="385"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-user-follow" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'warning', value: 75 }"
|
||||
title="Products sold"
|
||||
value="1238"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-basket" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'primary', value: 75 }"
|
||||
title="Returning Visitors"
|
||||
value="28%"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-chart-pie" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'danger', value: 75 }"
|
||||
title="Avg. Time"
|
||||
value="5:34:11"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speedometer" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCardGroup>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
title="Visitors"
|
||||
value="87.500"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-people" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'success', value: 75 }"
|
||||
title="New Clients"
|
||||
value="385"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-user-follow" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'warning', value: 75 }"
|
||||
title="Products sold"
|
||||
value="1238"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-basket" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'primary', value: 75 }"
|
||||
title="Returning Visitors"
|
||||
value="28%"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-chart-pie" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'danger', value: 75 }"
|
||||
title="Avg. Time"
|
||||
value="5:34:11"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speedometer" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
:progress="{ color: 'info', value: 75 }"
|
||||
title="Comments"
|
||||
value="972"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speech" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="">
|
||||
<CRow>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="info"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Visitors"
|
||||
value="87.500"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-people" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="success"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="New Clients"
|
||||
value="385"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-user-follow" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="warning"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Products sold"
|
||||
value="1238"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-basket" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="primary"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Returning Visitors"
|
||||
value="28%"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-chart-pie" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="danger"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Avg. Time"
|
||||
value="5:34:11"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speedometer" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
<CCol :xs="2">
|
||||
<CWidgetStatsC
|
||||
class="mb-3"
|
||||
color="info"
|
||||
inverse
|
||||
:progress="{ value: 75 }"
|
||||
title="Comments"
|
||||
value="972"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-speech" height="36"
|
||||
/></template>
|
||||
</CWidgetStatsC>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</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/Example.vue";
|
||||
export default {
|
||||
name: "Widgets",
|
||||
components: {
|
||||
CChart,
|
||||
WidgetsStatsA,
|
||||
WidgetsStatsD,
|
||||
Example,
|
||||
},
|
||||
data() {
|
||||
const widgetStatsE = {
|
||||
labels: [
|
||||
"M",
|
||||
"T",
|
||||
"W",
|
||||
"T",
|
||||
"F",
|
||||
"S",
|
||||
"S",
|
||||
"M",
|
||||
"T",
|
||||
"W",
|
||||
"T",
|
||||
"F",
|
||||
"S",
|
||||
"S",
|
||||
"M",
|
||||
],
|
||||
optionsBar: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
optionsLine: {
|
||||
maintainAspectRatio: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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" },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsA class="mb-3" color="primary">
|
||||
<template #value
|
||||
>26K
|
||||
<span class="fs-6 fw-normal">
|
||||
(-12.4% <CIcon icon="cil-arrow-bottom" />)
|
||||
</span>
|
||||
</template>
|
||||
<template #title>Users</template>
|
||||
<template #action>
|
||||
<CDropdown placement="bottom-end">
|
||||
<CDropdownToggle
|
||||
color="transparent"
|
||||
class="p-0 text-white"
|
||||
:caret="false"
|
||||
>
|
||||
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
type="line"
|
||||
class="mt-3 mx-3"
|
||||
style="height: 70px"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointBackgroundColor: '#321fdb',
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 30,
|
||||
max: 89,
|
||||
display: false,
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1,
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsA>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsA class="mb-3" color="info">
|
||||
<template #value
|
||||
>$6.200
|
||||
<span class="fs-6 fw-normal">
|
||||
(40.9% <CIcon icon="cil-arrow-top" />)
|
||||
</span>
|
||||
</template>
|
||||
<template #title>Income</template>
|
||||
<template #action>
|
||||
<CDropdown placement="bottom-end">
|
||||
<CDropdownToggle
|
||||
color="transparent"
|
||||
class="p-0 text-white"
|
||||
:caret="false"
|
||||
>
|
||||
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
type="line"
|
||||
class="mt-3 mx-3"
|
||||
style="height: 70px"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointBackgroundColor: '#39f',
|
||||
data: [1, 18, 9, 17, 34, 22, 11],
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: -9,
|
||||
max: 39,
|
||||
display: false,
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsA>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsA class="mb-3" color="warning">
|
||||
<template #value
|
||||
>2.49%
|
||||
<span class="fs-6 fw-normal">
|
||||
(84.7% <CIcon icon="cil-arrow-top" />)
|
||||
</span>
|
||||
</template>
|
||||
<template #title>Conversion Rate</template>
|
||||
<template #action>
|
||||
<CDropdown placement="bottom-end">
|
||||
<CDropdownToggle
|
||||
color="transparent"
|
||||
class="p-0 text-white"
|
||||
:caret="false"
|
||||
>
|
||||
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
type="line"
|
||||
class="mt-3"
|
||||
style="height: 70px"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="{
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
},
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsA>
|
||||
</CCol>
|
||||
<CCol :xs="3">
|
||||
<CWidgetStatsA class="mb-3" color="danger">
|
||||
<template #value
|
||||
>44K
|
||||
<span class="fs-6 fw-normal">
|
||||
(-23.6% <CIcon icon="cil-arrow-bottom" />)
|
||||
</span>
|
||||
</template>
|
||||
<template #title>Sessions</template>
|
||||
<template #action>
|
||||
<CDropdown placement="bottom-end">
|
||||
<CDropdownToggle
|
||||
color="transparent"
|
||||
class="p-0 text-white"
|
||||
:caret="false"
|
||||
>
|
||||
<CIcon icon="cil-options" class="text-high-emphasis-inverse" />
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
type="bar"
|
||||
class="mt-3 mx-3"
|
||||
style="height: 70px"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(255,255,255,.2)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
data: [
|
||||
78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67,
|
||||
82,
|
||||
],
|
||||
barPercentage: 0.6,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="{
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsA>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChart } from "@coreui/vue-chartjs";
|
||||
export default {
|
||||
name: "WidgetsStatsA",
|
||||
components: {
|
||||
CChart,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<CWidgetStatsD
|
||||
class="mb-4"
|
||||
style="--cui-card-cap-bg: #3b5998"
|
||||
:values="[
|
||||
{ title: 'friends', value: '89K' },
|
||||
{ title: 'feeds', value: '459' },
|
||||
]"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cib-facebook" height="52" class="my-4 text-white"
|
||||
/></template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
class="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [65, 59, 84, 84, 51, 55, 40],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<CWidgetStatsD
|
||||
class="mb-4"
|
||||
style="--cui-card-cap-bg: #00aced"
|
||||
:values="[
|
||||
{ title: 'followers', value: '973k' },
|
||||
{ title: 'tweets', value: '1.792' },
|
||||
]"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cib-twitter" height="52" class="my-4 text-white"
|
||||
/></template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
class="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [1, 13, 9, 17, 34, 41, 38],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<CWidgetStatsD
|
||||
class="mb-4"
|
||||
style="--cui-card-cap-bg: #4875b4"
|
||||
:values="[
|
||||
{ title: 'contacts', value: '500' },
|
||||
{ title: 'feeds', value: '1.292' },
|
||||
]"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cib-linkedin" height="52" class="my-4 text-white"
|
||||
/></template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
class="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [78, 81, 80, 45, 34, 12, 40],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
<CCol :sm="6" :lg="3">
|
||||
<CWidgetStatsD
|
||||
class="mb-4"
|
||||
color="warning"
|
||||
:values="[
|
||||
{ title: 'events', value: '12+' },
|
||||
{ title: 'meetings', value: '4' },
|
||||
]"
|
||||
>
|
||||
<template #icon
|
||||
><CIcon icon="cil-calendar" height="52" class="my-4 text-white"
|
||||
/></template>
|
||||
<template #chart>
|
||||
<CChart
|
||||
class="position-absolute w-100 h-100"
|
||||
type="line"
|
||||
:data="{
|
||||
labels: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.55)',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
borderWidth: 2,
|
||||
data: [35, 23, 56, 22, 97, 23, 64],
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
}"
|
||||
:options="options"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetStatsD>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChart } from "@coreui/vue-chartjs";
|
||||
export default {
|
||||
name: "WidgetsStatsD",
|
||||
components: {
|
||||
CChart,
|
||||
},
|
||||
setup() {
|
||||
const options = {
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.4,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3,
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
options,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user