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

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-29 16:10:33 +02:00
parent 1b7a092079
commit cac84bdcdd
38 changed files with 601 additions and 1422 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+5 -5
View File
@@ -8,7 +8,7 @@
<CRow>
<CCol sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-medium-emphasis">November 2017</div>
<div class="small text-medium-emphasis">January 2021</div>
</CCol>
<CCol sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-end">
@@ -316,7 +316,7 @@
<CTableHead color="light">
<CTableRow>
<CTableHeaderCell class="text-center">
<CIcon name="{cilPeople}" />
<CIcon name="cil-people" />
</CTableHeaderCell>
<CTableHeaderCell>User</CTableHeaderCell>
<CTableHeaderCell class="text-center"
@@ -449,7 +449,7 @@ export default {
period: "Jun 11, 2021 - Jul 10, 2021",
color: "warning",
},
payment: { name: "Stripe", icon: "cib-stripe" },
payment: { name: "Stripe", icon: "cib-cc-stripe" },
activity: "1 hour ago",
},
{
@@ -461,7 +461,7 @@ export default {
period: "Jun 11, 2021 - Jul 10, 2021",
color: "danger",
},
payment: { name: "PayPal", icon: "cib-paypal" },
payment: { name: "PayPal", icon: "cib-cc-paypal" },
activity: "Last month",
},
{
@@ -477,7 +477,7 @@ export default {
period: "Jun 11, 2021 - Jul 10, 2021",
color: "primary",
},
payment: { name: "Google Wallet", icon: "cib-google-pay" },
payment: { name: "Google Wallet", icon: "cib-cc-apple-pay" },
activity: "Last week",
},
{
src/views/base/Accordion.vue
+4 -4
View File
@@ -12,7 +12,7 @@
<p class="text-medium-emphasis small">
Click the accordions below to expand/collapse the accordion content.
</p>
<Example href="components/accordion">
<DocsExample href="components/accordion">
<CAccordion>
<CAccordionItem>
<CAccordionHeader>
@@ -96,7 +96,7 @@
</CAccordionCollapse>
</CAccordionItem>
</CAccordion>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -110,7 +110,7 @@
corners to render accordions edge-to-edge with their parent
container.
</p>
<Example href="components/accordion#flush">
<DocsExample href="components/accordion#flush">
<CAccordion flush>
<CAccordionItem>
<CAccordionHeader>
@@ -200,7 +200,7 @@
</CAccordionCollapse>
</CAccordionItem>
</CAccordion>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Breadcrumbs.vue
+2 -2
View File
@@ -23,7 +23,7 @@
</a>
.
</p>
<Example href="components/breadcrumb">
<DocsExample href="components/breadcrumb">
<CBreadcrumb>
<CBreadcrumbItem>
<CLink href="#">Home</CLink>
@@ -51,7 +51,7 @@
</CBreadcrumbItem>
<CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
</CBreadcrumb>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Cards.vue
+48 -48
View File
@@ -26,7 +26,7 @@
width. Cards have no fixed width to start, so they&#39;ll naturally
fill the full width of its parent element.
</p>
<Example href="components/card">
<DocsExample href="components/card">
<CCard style="width: 18rem">
<CCardImage
component="svg"
@@ -55,7 +55,7 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -67,11 +67,11 @@
The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use
it whenever you need a padded section within a card.
</p>
<Example href="components/card/#body">
<DocsExample href="components/card/#body">
<CCard>
<CCardBody>This is some text within a card body.</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -96,7 +96,7 @@
<code>&lt;CCardBody&gt;</code> item, the card title, and subtitle
are arranged rightly.
</p>
<Example href="components/card/#titles-text-and-links">
<DocsExample href="components/card/#titles-text-and-links">
<CCard style="width: 18rem">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
@@ -111,7 +111,7 @@
<CCardLink href="#">Another link</CCardLink>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -125,7 +125,7 @@
within <code>.card-text</code> can additionally be styled with the
regular HTML tags.
</p>
<Example href="components/card/#images">
<DocsExample href="components/card/#images">
<CCard style="width: 18rem">
<CCardImage
component="svg"
@@ -152,7 +152,7 @@
</CCardText>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -165,7 +165,7 @@
<p class="text-medium-emphasis small">
Create lists of content in a card with a flush list group.
</p>
<Example href="components/card/#list-groups">
<DocsExample href="components/card/#list-groups">
<CRow>
<CCol lg="{4}">
<CCard>
@@ -197,7 +197,7 @@
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -212,7 +212,7 @@
throw everything in there. Shown below are image styles, blocks,
text styles, and a list group—all wrapped in a fixed-width card.
</p>
<Example href="components/card/#kitchen-sink">
<DocsExample href="components/card/#kitchen-sink">
<CCard style="width: 18rem">
<CCardImage
component="svg"
@@ -249,7 +249,7 @@
<CCardLink href="#">Another link</CCardLink>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -262,7 +262,7 @@
<p class="text-medium-emphasis small">
Add an optional header and/or footer within a card.
</p>
<Example href="components/card/#header-and-footer">
<DocsExample href="components/card/#header-and-footer">
<CCard>
<CCardHeader>Header</CCardHeader>
<CCardBody>
@@ -274,12 +274,12 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Card headers can be styled by adding ex.
<code>component=&#34;h5&#34;</code>.
</p>
<Example href="components/card/#header-and-footer">
<DocsExample href="components/card/#header-and-footer">
<CCard>
<CCardHeader component="h5">Header</CCardHeader>
<CCardBody>
@@ -291,8 +291,8 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
<Example href="components/card/#header-and-footer">
</DocsExample>
<DocsExample href="components/card/#header-and-footer">
<CCard>
<CCardHeader>Quote</CCardHeader>
<CCardBody>
@@ -308,8 +308,8 @@
</blockquote>
</CCardBody>
</CCard>
</Example>
<Example href="components/card/#header-and-footer">
</DocsExample>
<DocsExample href="components/card/#header-and-footer">
<CCard class="text-center">
<CCardHeader>Header</CCardHeader>
<CCardBody>
@@ -322,7 +322,7 @@
</CCardBody>
<CCardFooter class="text-medium-emphasis">2 days ago</CCardFooter>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -340,7 +340,7 @@
<p class="text-medium-emphasis small">
Using the grid, wrap cards in columns and rows as needed.
</p>
<Example href="components/card/#sizing">
<DocsExample href="components/card/#sizing">
<CRow>
<CCol sm="{6}">
<CCard>
@@ -367,7 +367,7 @@
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
<h3>Using utilities</h3>
<p class="text-medium-emphasis small">
Use some of
@@ -376,7 +376,7 @@
>
to rapidly set a card&#39;s width.
</p>
<Example href="components/card/#sizing">
<DocsExample href="components/card/#sizing">
<CCard class="w-75">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
@@ -397,13 +397,13 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
<strong>Using custom CSS</strong>
<p class="text-medium-emphasis small">
Use custom CSS in your stylesheets or as inline styles to set a
width.
</p>
<Example href="components/card/#sizing">
<DocsExample href="components/card/#sizing">
<CCard style="width: 18rem">
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@@ -414,7 +414,7 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -432,7 +432,7 @@
>
.
</p>
<Example href="components/card/#text-alignment">
<DocsExample href="components/card/#text-alignment">
<CCard style="width: 18rem">
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
@@ -463,7 +463,7 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -477,7 +477,7 @@
Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our
<code>&lt;CNav&gt;</code> component.
</p>
<Example href="components/card/##navigation">
<DocsExample href="components/card/##navigation">
<CCard class="text-center">
<CCardHeader>
<CNav variant="tabs" class="card-header-tabs">
@@ -501,8 +501,8 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
<Example href="components/card/##navigation">
</DocsExample>
<DocsExample href="components/card/##navigation">
<CCard class="text-center">
<CCardHeader>
<CNav variant="pills" class="card-header-pills">
@@ -526,7 +526,7 @@
<CButton href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -540,7 +540,7 @@
Similar to headers and footers, cards can include top and bottom
&#34;image caps&#34;—images at the top or bottom of a card.
</p>
<Example href="components/card/#image-caps">
<DocsExample href="components/card/#image-caps">
<CRow>
<CCol lg="{6}">
<CCard class="mb-3">
@@ -613,7 +613,7 @@
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -631,7 +631,7 @@
<p class="text-medium-emphasis small">
Use <code>color</code> property to change the appearance of a card.
</p>
<Example href="components/card/#background-and-color">
<DocsExample href="components/card/#background-and-color">
<CRow>
{[ { color: 'primary', textColor: 'white' }, { color: 'secondary',
textColor: 'white' }, { color: 'success', textColor: 'white' }, {
@@ -656,7 +656,7 @@
</CCol>
))}
</CRow>
</Example>
</DocsExample>
<h3>Border</h3>
<p class="text-medium-emphasis small">
Use
@@ -668,7 +668,7 @@
<code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
shown below.
</p>
<Example href="components/card/#border">
<DocsExample href="components/card/#border">
<template
v-for="item in [
{ color: 'primary', textColor: 'primary' },
@@ -697,7 +697,7 @@
</CCardBody>
</CCard>
</template>
</Example>
</DocsExample>
<h3>Top border</h3>
<p class="text-medium-emphasis small">
Use
@@ -709,7 +709,7 @@
<code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
shown below.
</p>
<Example href="components/card/#top-border">
<DocsExample href="components/card/#top-border">
<template v-for="(item) in [
{ color: 'primary', textColor: 'primary' },
{ color: 'secondary', textColor: 'secondary' },
@@ -728,7 +728,7 @@
</CCardBody>
</CCard>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -744,7 +744,7 @@
use <code>display: flex;</code> to become attached with uniform
dimensions starting at the <code>sm</code> breakpoint.
</p>
<Example href="components/card/#card-groups">
<DocsExample href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
@@ -845,12 +845,12 @@
</CCardBody>
</CCard>
</CCardGroup>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
When using card groups with footers, their content will
automatically line up.
</p>
<Example href="components/card/#card-groups">
<DocsExample href="components/card/#card-groups">
<CCardGroup>
<CCard>
<CCardImage
@@ -951,7 +951,7 @@
</CCardFooter>
</CCard>
</CCardGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -974,7 +974,7 @@
<code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting four cards
to equal width across multiple rows, from the medium breakpoint up.
</p>
<Example href="components/card/#grid-cards">
<DocsExample href="components/card/#grid-cards">
<CRow xs="{ cols: 1, gutter: 4 }" md="{ cols: 2 }">
<CCol xs>
<CCard>
@@ -1117,12 +1117,12 @@
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and
you&#39;ll see the fourth card wrap.
</p>
<Example href="components/card/#grid-cards">
<DocsExample href="components/card/#grid-cards">
<CRow xs="{ cols: 1, gutter: 4 }" md="{ cols: 3 }">
<CCol xs>
<CCard>
@@ -1265,7 +1265,7 @@
</CCard>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Carousels.vue
+18 -15
View File
@@ -1,6 +1,9 @@
<template>
<CRow>
<CCol>
<CCol :xs="12">
<DocsCallout name="Carousel" href="components/breadcrumb" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Carousels</strong> <small>Slide only</small>
@@ -9,7 +12,7 @@
<p class="text-medium-emphasis small">
Here’s a carousel with slides
</p>
<Example href="components/carousel.html#slides-only">
<DocsExample href="components/carousel.html#slides-only">
<CCarousel>
<CCarouselItem>
<img
@@ -33,7 +36,7 @@
/>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -45,7 +48,7 @@
Adding in the previous and next controls by
<code>controls</code> property.
</p>
<Example href="components/carousel.html#with-controls">
<DocsExample href="components/carousel.html#with-controls">
<CCarousel controls>
<CCarouselItem>
<img
@@ -69,7 +72,7 @@
/>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -81,7 +84,7 @@
You can attach the indicators to the carousel, lengthwise the
controls, too.
</p>
<Example href="components/carousel.html#with-indicators">
<DocsExample href="components/carousel.html#with-indicators">
<CCarousel controls indicators>
<CCarouselItem>
<img
@@ -105,7 +108,7 @@
/>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -123,7 +126,7 @@
>. 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">
<DocsExample href="components/carousel.html#with-captions">
<CCarousel controls indicators>
<CCarouselItem>
<img
@@ -165,7 +168,7 @@
</CCarouselCaption>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -177,7 +180,7 @@
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
animate slides with a fade transition instead of a slide.
</p>
<Example href="components/carousel.html#crossfade">
<DocsExample href="components/carousel.html#crossfade">
<CCarousel controls indicators transition="crossfade">
<CCarouselItem>
<img
@@ -201,7 +204,7 @@
/>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -217,7 +220,7 @@
additional Sass variables that customize the <code>color</code> and
<code>background-color</code>.
</p>
<Example href="components/carousel.html#dark-variant">
<DocsExample href="components/carousel.html#dark-variant">
<CCarousel controls indicators dark>
<CCarouselItem>
<img
@@ -241,7 +244,7 @@
/>
</CCarouselItem>
</CCarousel>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -250,6 +253,6 @@
<script>
export default {
name: "Carousels",
};
name: 'Carousels',
}
</script>
src/views/base/Collapses.vue
+13 -10
View File
@@ -1,6 +1,9 @@
<template>
<CRow>
<CCol>
<CCol :xs="12">
<DocsCallout name="Collapse" href="components/breadcrumb" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong>
@@ -9,7 +12,7 @@
<p class="text-medium-emphasis small">
You can use a link or a button component.
</p>
<Example href="components/collapse.html#example">
<DocsExample href="components/collapse.html#example">
<CButton color="primary" href="#" @click="visible = !visible"
>Link</CButton
>
@@ -26,7 +29,7 @@
</CCardBody>
</CCard>
</CCollapse>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -38,7 +41,7 @@
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<h4 class="mt-4">Toggle multiple targets</h4>
<Example href="components/collapse.html#multiple-targets">
<DocsExample href="components/collapse.html#multiple-targets">
<CButton color="primary" @click="visibleA = !visibleA"
>Toggle first element</CButton
>
@@ -49,8 +52,8 @@
color="primary"
@click="
() => {
visibleA = !visibleA;
visibleB = !visibleB;
visibleA = !visibleA
visibleB = !visibleB
}
"
>
@@ -82,7 +85,7 @@
</CCollapse>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -91,13 +94,13 @@
<script>
export default {
name: "Breadcrumbs",
name: 'Breadcrumbs',
data() {
return {
visible: false,
visibleA: false,
visibleB: false,
};
}
},
};
}
</script>
src/views/base/Forms.vue
-817
View File
@@ -1,817 +0,0 @@
<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>
src/views/base/ListGroups.vue
+22 -22
View File
@@ -14,7 +14,7 @@
proper CSS classes. Build upon it with the options that follow, or
with your CSS as required.
</p>
<Example href="components/list-group">
<DocsExample href="components/list-group">
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -22,7 +22,7 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -37,7 +37,7 @@
<code>&lt;CListGroupItem&gt;</code> to show the current active
selection.
</p>
<Example href="components/list-group/#active-items">
<DocsExample href="components/list-group/#active-items">
<CListGroup>
<CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -45,7 +45,7 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -59,7 +59,7 @@
Add <code>disabled</code> boolean property to a
<code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
</p>
<Example href="components/list-group/#disabled-items">
<DocsExample href="components/list-group/#disabled-items">
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -67,7 +67,7 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -87,7 +87,7 @@
<code>&lt;div&gt;</code>
s) don&#39;tprovide a click or tap affordance.
</p>
<Example href="components/list-group/#links-and-buttons">
<DocsExample href="components/list-group/#links-and-buttons">
<CListGroup>
<CListGroupItem component="a" href="#" active>
Cras justo odio
@@ -105,7 +105,7 @@
Vestibulum at eros
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -120,7 +120,7 @@
rounded corners to render list group items edge-to-edge in a parent
container (e.g., cards).
</p>
<Example href="components/list-group/#flush">
<DocsExample href="components/list-group/#flush">
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -128,7 +128,7 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -153,7 +153,7 @@
groups.</strong
>
</p>
<Example href="components/list-group/#flush">
<DocsExample href="components/list-group/#flush">
<template
v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
:key="item"
@@ -164,7 +164,7 @@
<CListGroupItem>Morbi leo risus</CListGroupItem>
</CListGroup>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -178,7 +178,7 @@
Use contextual classes to style list items with a stateful
background and color.
</p>
<Example href="components/list-group/#contextual-classes">
<DocsExample href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem
@@ -197,7 +197,7 @@
>A simple {{ item }} list group item</CListGroupItem
>
</CListGroup>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Contextual classes also work with <code>&lt;a&gt;</code>s or
<code>&lt;button&gt;</code>s. Note the addition of the hover styles
@@ -205,7 +205,7 @@
<code>active</code> state; apply it to indicate an active selection
on a contextual list group item.
</p>
<Example href="components/list-group/#contextual-classes">
<DocsExample href="components/list-group/#contextual-classes">
<CListGroup>
<CListGroupItem component="a" href="#"
>Dapibus ac facilisis in</CListGroupItem
@@ -228,7 +228,7 @@
>A simple {{ item }} list group item</CListGroupItem
>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -242,7 +242,7 @@
Add badges to any list group item to show unread counts, activity,
and more.
</p>
<Example href="components/list-group/#with-badges">
<DocsExample href="components/list-group/#with-badges">
<CListGroup>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
@@ -263,7 +263,7 @@
<CBadge color="primary" shape="rounded-pill"> 1 </CBadge>
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -280,7 +280,7 @@
>flexbox utilities</a
>.
</p>
<Example href="components/list-group/#custom-content">
<DocsExample href="components/list-group/#custom-content">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<div class="d-flex w-100 justify-content-between">
@@ -320,7 +320,7 @@
>
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -334,7 +334,7 @@
Place CoreUI&#39;s checkboxes and radios within list group items and
customize as needed.
</p>
<Example href="components/list-group/#checkboxes-and-radios">
<DocsExample href="components/list-group/#checkboxes-and-radios">
<CListGroup>
<CListGroupItem>
<CFormCheck label="Cras justo odio" />
@@ -352,7 +352,7 @@
<CFormCheck label="Vestibulum at eros" />
</CListGroupItem>
</CListGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Navbars.vue
+38 -38
View File
@@ -8,7 +8,7 @@
<CCardBody>
<h4 class="mt-4">Basic usage of navbar</h4>
<Example href="components/navbar.html#basic-usage">
<DocsExample href="components/navbar.html#basic-usage">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -45,30 +45,30 @@
</CCollapse>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue nav brand</h4>
<CRow>
<CCol md="6">
<Example href="components/navbar.html#brand">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Brand as link</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#brand">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#brand">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">
@@ -76,10 +76,10 @@
</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#brand">
<DocsExample href="components/navbar.html#brand">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">
@@ -87,12 +87,12 @@
</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCol>
</CRow>
<h4 class="mt-4">Vue navbar with nav</h4>
<Example href="components/navbar.html#nav">
<DocsExample href="components/navbar.html#nav">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -123,10 +123,10 @@
</CCollapse>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue navbar with form</h4>
<Example href="components/navbar.html#forms">
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CForm class="d-flex">
@@ -135,9 +135,9 @@
</CForm>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue navbar with form on right side</h4>
<Example href="components/navbar.html#forms">
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -148,9 +148,9 @@
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue navbar with input group</h4>
<Example href="components/navbar.html#forms">
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CForm class="container-fluid">
<CInputGroup>
@@ -159,29 +159,29 @@
</CInputGroup>
</CForm>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue navbar with buttons</h4>
<Example href="components/navbar.html#forms">
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CForm class="container-fluid justify-content-start">
<CButton type="button" color="success" variant="outline" class="me-2">Main button</CButton>
<CButton type="button" color="secondary" variant="outline" size="sm">Smaller button</CButton>
</CForm>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue navbar with text</h4>
<Example href="components/navbar.html#forms">
<DocsExample href="components/navbar.html#forms">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarText>Navbar text with an inline element</CNavbarText>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue navbar color schemes</h4>
<Example href="components/navbar.html#color-schemes">
<DocsExample href="components/navbar.html#color-schemes">
<CNavbar expand="lg" colorScheme="dark" class="bg-dark">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -292,51 +292,51 @@
</CCollapse>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<h4 class="mt-4">Vue navbar placement</h4>
<CRow>
<CCol md="6">
<Example href="components/navbar.html#placement">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Default</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#placement">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-top">
<CContainer fluid>
<CNavbarBrand href="#">Fixed top</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#placement">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="fixed-bottom">
<CContainer fluid>
<CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCol>
<CCol md="6">
<Example href="components/navbar.html#placement">
<DocsExample href="components/navbar.html#placement">
<CNavbar colorScheme="light" class="bg-light" placement="sticky-top">
<CContainer fluid>
<CNavbarBrand href="#">Sticky top</CNavbarBrand>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</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">
<DocsExample href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
@@ -364,9 +364,9 @@
</CCollapse>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<p>With a brand name shown on the left and toggler on the right:</p>
<Example href="components/navbar.html#forms">
<DocsExample href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -394,10 +394,10 @@
</CCollapse>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
<p>With a toggler on the left and brand name on the right:</p>
<Example href="components/navbar.html#forms">
<DocsExample href="components/navbar.html#forms">
<CNavbar expand="lg" colorScheme="light" class="bg-light">
<CContainer fluid>
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
@@ -425,7 +425,7 @@
</CCollapse>
</CContainer>
</CNavbar>
</Example>
</DocsExample>
</CCardBody>
</CCard>
src/views/base/Navs.vue
+24 -24
View File
@@ -15,7 +15,7 @@
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
</p>
<Example href="components/nav#base-nav">
<DocsExample href="components/nav#base-nav">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@@ -34,7 +34,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Classes are used throughout, so your markup can be super flexible. Use{' '}
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
@@ -42,7 +42,7 @@
the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup.
</p>
<Example href="components/nav#base-nav">
<DocsExample href="components/nav#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
@@ -53,7 +53,7 @@
Disabled
</CNavLink>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -74,7 +74,7 @@
<p class="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
</p>
<Example href="components/nav#horizontal-alignment">
<DocsExample href="components/nav#horizontal-alignment">
<CNav class="justify-content-center">
<CNavItem>
<CNavLink href="#" active>
@@ -93,11 +93,11 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Right-aligned with <code>.justify-content-end</code>:
</p>
<Example href="components/nav#base-nav">
<DocsExample href="components/nav#base-nav">
<CNav class="justify-content-end">
<CNavItem>
<CNavLink href="#" active>
@@ -116,7 +116,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -131,7 +131,7 @@
<code>.flex-column</code> utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
</p>
<Example href="components/nav#vertical">
<DocsExample href="components/nav#vertical">
<CNav class="flex-column">
<CNavItem>
<CNavLink href="#" active>
@@ -150,7 +150,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -164,7 +164,7 @@
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
to generate a tabbed interface
</p>
<Example href="components/nav#tabs">
<DocsExample href="components/nav#tabs">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
@@ -183,7 +183,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -196,7 +196,7 @@
<p class="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p>
<Example href="components/nav#pills">
<DocsExample href="components/nav#pills">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
@@ -215,7 +215,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -231,7 +231,7 @@
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
horizontal space is occupied, but not every nav item has the same width.
</p>
<Example href="components/nav#fill-and-justify">
<DocsExample href="components/nav#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem>
<CNavLink href="#" active>
@@ -250,13 +250,13 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width.
</p>
<Example href="components/nav#fill-and-justify">
<DocsExample href="components/nav#fill-and-justify">
<CNav variant="pills" layout="justified">
<CNavItem>
<CNavLink href="#" active>
@@ -275,7 +275,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -292,7 +292,7 @@
the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
horizontal layout that fills the available width starting from the small breakpoint.
</p>
<Example href="components/nav#working-with-flex-utilities">
<DocsExample href="components/nav#working-with-flex-utilities">
<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
<CNavLink href="#" active>
Active
@@ -303,7 +303,7 @@
Disabled
</CNavLink>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -313,7 +313,7 @@
<strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="components/nav#tabs-with-dropdowns">
<DocsExample href="components/nav#tabs-with-dropdowns">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@@ -337,7 +337,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -347,7 +347,7 @@
<strong>Vue Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="components/nav#pills-with-dropdowns">
<DocsExample href="components/nav#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
@@ -371,7 +371,7 @@
</CNavLink>
</CNavItem>
</CNav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Popovers.vue
+7 -4
View File
@@ -1,12 +1,15 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Popover" href="components/breadcrumb" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Popovers</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<Example href="directives/popover.html#example">
<DocsExample href="directives/popover.html#example">
<CButton
color="danger"
size="lg"
@@ -19,7 +22,7 @@
>
Click to toggle popover
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -33,7 +36,7 @@
Four options are available: top, right, bottom, and left aligned.
Directions are mirrored when using CoreUI for Vue in RTL.
</p>
<Example href="directives/popover.html#four-directions">
<DocsExample href="directives/popover.html#four-directions">
<CButton
color="secondary"
v-c-popover="{
@@ -70,7 +73,7 @@
}"
>Popover on left</CButton
>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Progress.vue
+14 -14
View File
@@ -20,7 +20,7 @@
, ensuring you can stack progress bars, animate them, and place text
labels over them.
</p>
<Example href="components/progress">
<DocsExample href="components/progress">
<CProgress class="mb-3">
<CProgressBar :value="0" />
</CProgress>
@@ -36,7 +36,7 @@
<CProgress class="mb-3">
<CProgressBar :value="100" />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -50,11 +50,11 @@
Add labels to your progress bars by placing text within the
<code>&lt;CProgressBar&gt;</code>.
</p>
<Example href="components/progress#labels">
<DocsExample href="components/progress#labels">
<CProgress class="mb-3">
<CProgressBar :value="25">25%</CProgressBar>
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -70,14 +70,14 @@
inner <code>&lt;CProgressBar&gt;</code> will automatically resize
accordingly.
</p>
<Example href="components/progress#height">
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -91,7 +91,7 @@
Use <code>color</code> prop to change the appearance of individual
progress bars.
</p>
<Example href="components/progress#backgrounds">
<DocsExample href="components/progress#backgrounds">
<CProgress class="mb-3">
<CProgressBar color="success" :value="25" />
</CProgress>
@@ -104,7 +104,7 @@
<CProgress class="mb-3">
<CProgressBar color="danger" :value="100" />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -117,13 +117,13 @@
<p class="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need.
</p>
<Example href="components/progress#multiple-bars">
<DocsExample href="components/progress#multiple-bars">
<CProgress class="mb-3">
<CProgressBar :value="15" />
<CProgressBar color="success" :value="30" />
<CProgressBar color="info" :value="20" />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -138,7 +138,7 @@
<code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
over the progress bar&#39;s background color.
</p>
<Example href="components/progress#striped">
<DocsExample href="components/progress#striped">
<CProgress class="mb-3">
<CProgressBar color="success" variant="striped" :value="25" />
</CProgress>
@@ -151,7 +151,7 @@
<CProgress class="mb-3">
<CProgressBar color="danger" variant="striped" :value="100" />
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -167,7 +167,7 @@
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to
left via CSS3 animations.
</p>
<Example href="components/progress#animated-stripes">
<DocsExample href="components/progress#animated-stripes">
<CProgress class="mb-3">
<CProgressBar
color="success"
@@ -200,7 +200,7 @@
:value="100"
/>
</CProgress>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Spinners.vue
+14 -14
View File
@@ -12,15 +12,15 @@
<p class="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator.
</p>
<Example href="components/spinner">
<DocsExample href="components/spinner">
<CSpinner />
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
The border spinner uses <code>currentColor</code> for its
<code>border-color</code>. You can use any of our text color
utilities on the standard spinner.
</p>
<Example href="components/spinner#colors">
<DocsExample href="components/spinner#colors">
<CSpinner color="primary" />
<CSpinner color="secondary" />
<CSpinner color="success" />
@@ -29,7 +29,7 @@
<CSpinner color="info" />
<CSpinner color="light" />
<CSpinner color="dark" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -43,15 +43,15 @@
If you don&#39;tfancy a border spinner, switch to the grow spinner.
While it doesn&#39;t technically spin, it does repeatedly grow!
</p>
<Example href="components/spinner#growing-spinner">
<DocsExample href="components/spinner#growing-spinner">
<CSpinner variant="grow" />
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Once again, this spinner is built with <code>currentColor</code>, so
you can easily change its appearance. Here it is in blue, along with
the supported variants.
</p>
<Example href="components/spinner#growing-spinner">
<DocsExample href="components/spinner#growing-spinner">
<CSpinner color="primary" variant="grow" />
<CSpinner color="secondary" variant="grow" />
<CSpinner color="success" variant="grow" />
@@ -60,7 +60,7 @@
<CSpinner color="info" variant="grow" />
<CSpinner color="light" variant="grow" />
<CSpinner color="dark" variant="grow" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -74,10 +74,10 @@
Add <code>size=&#34;sm&#34;</code> property to make a smaller
spinner that can quickly be used within other components.
</p>
<Example href="components/spinner#size">
<DocsExample href="components/spinner#size">
<CSpinner size="sm" />
<CSpinner size="sm" variant="grow" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -92,7 +92,7 @@
processing or taking place. You may also swap the text out of the
spinner element and utilize button text as needed.
</p>
<Example href="components/spinner#buttons">
<DocsExample href="components/spinner#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
</CButton>
@@ -100,8 +100,8 @@
<CSpinner component="span" size="sm" aria-hidden="true" />
Loading...
</CButton>
</Example>
<Example href="components/spinner#buttons">
</DocsExample>
<DocsExample href="components/spinner#buttons">
<CButton disabled>
<CSpinner
component="span"
@@ -119,7 +119,7 @@
/>
Loading...
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Switches.vue
+2 -2
View File
@@ -6,7 +6,7 @@
<strong>Vue Switches</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios.html#switches">
<DocsExample href="forms/checks-radios.html#switches">
<CRow>
<CCol md="4">
<CFormSwitch label="Default switch checkbox input" />
@@ -27,7 +27,7 @@
<CFormSwitch label="Extra-large switch" defaultChecked disabled size="xl"/>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Tables.vue
+44 -44
View File
@@ -13,7 +13,7 @@
Using the most basic table CoreUI, here&#39;s how
<code>&lt;CTable&gt;</code>-based tables look in CoreUI.
</p>
<Example href="components/table">
<DocsExample href="components/table">
<CTable>
<CTableHead>
<CTableRow>
@@ -43,7 +43,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -57,7 +57,7 @@
Use contextual classes to color tables, table rows or individual
cells.
</p>
<Example href="components/table#variants">
<DocsExample href="components/table#variants">
<CTable>
<CTableHead>
<CTableRow>
@@ -114,7 +114,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -128,7 +128,7 @@
Use <code>striped</code> property to add zebra-striping to any table
row within the <code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#striped-rows">
<DocsExample href="components/table#striped-rows">
<CTable striped>
<CTableHead>
<CTableRow>
@@ -158,11 +158,11 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
These classes can also be added to table variants:
</p>
<Example href="components/table#striped-rows">
<DocsExample href="components/table#striped-rows">
<CTable color="dark" striped>
<CTableHead>
<CTableRow>
@@ -192,8 +192,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#striped-rows">
</DocsExample>
<DocsExample href="components/table#striped-rows">
<CTable color="success" striped>
<CTableHead>
<CTableRow>
@@ -223,7 +223,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -237,7 +237,7 @@
Use <code>hover</code> property to enable a hover state on table
rows within a <code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#hoverable-rows">
<DocsExample href="components/table#hoverable-rows">
<CTable hover>
<CTableHead>
<CTableRow>
@@ -267,8 +267,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
@@ -298,8 +298,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<CTable striped hover>
<CTableHead>
<CTableRow>
@@ -329,7 +329,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -339,7 +339,7 @@
<strong>Vue Table</strong> <small>Active tables</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#active-tables">
<DocsExample href="components/table#active-tables">
<CTable>
<CTableHead>
<CTableRow>
@@ -371,8 +371,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#active-tables">
</DocsExample>
<DocsExample href="components/table#active-tables">
<CTable color="dark">
<CTableHead>
<CTableRow>
@@ -404,7 +404,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -418,7 +418,7 @@
Add <code>bordered</code> property for borders on all sides of the
table and cells.
</p>
<Example href="components/table#bordered-tables">
<DocsExample href="components/table#bordered-tables">
<CTable bordered>
<CTableHead>
<CTableRow>
@@ -448,13 +448,13 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities </a
> can be added to change colors:
</p>
<Example href="components/table#bordered-tables">
<DocsExample href="components/table#bordered-tables">
<CTable bordered borderColor="primary">
<CTableHead>
<CTableRow>
@@ -484,7 +484,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -497,7 +497,7 @@
<p class="text-medium-emphasis small">
Add <code>borderless</code> property for a table without borders.
</p>
<Example href="components/table#tables-without-borders">
<DocsExample href="components/table#tables-without-borders">
<CTable borderless>
<CTableHead>
<CTableRow>
@@ -527,8 +527,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#tables-without-borders">
</DocsExample>
<DocsExample href="components/table#tables-without-borders">
<CTable color="dark" borderless>
<CTableHead>
<CTableRow>
@@ -558,7 +558,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -573,7 +573,7 @@
<code>&lt;CTable&gt;</code> more compact by cutting all cell
<code>padding</code> in half.
</p>
<Example href="components/table#small-tables">
<DocsExample href="components/table#small-tables">
<CTable small>
<CTableHead>
<CTableRow>
@@ -603,7 +603,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -620,7 +620,7 @@
<code>&lt;CTable&gt;</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">
<DocsExample href="components/table#vertical-alignment">
<CTable align="middle" responsive>
<CTableHead>
<CTableRow>
@@ -697,7 +697,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -711,7 +711,7 @@
Border styles, active styles, and table variants are not inherited
by nested tables.
</p>
<Example href="components/table#nesting">
<DocsExample href="components/table#nesting">
<CTable striped>
<CTableHead>
<CTableRow>
@@ -771,7 +771,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -787,7 +787,7 @@
<code>color=&#34;dark&#34;</code> to make
<code>&lt;CTableHead&gt;</code>s appear light or dark gray.
</p>
<Example href="components/table#table-head">
<DocsExample href="components/table#table-head">
<CTable>
<CTableHead color="light">
<CTableRow>
@@ -818,8 +818,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#table-head">
</DocsExample>
<DocsExample href="components/table#table-head">
<CTable>
<CTableHead color="dark">
<CTableRow>
@@ -849,7 +849,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -859,7 +859,7 @@
<strong>Vue Table</strong> <small>Table foot</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#table-foot">
<DocsExample href="components/table#table-foot">
<CTable>
<CTableHead color="light">
<CTableRow>
@@ -897,7 +897,7 @@
</CTableRow>
</CTableHead>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -912,7 +912,7 @@
table. It helps users with screen readers to find a table and
understand what it&#39;s about and decide if they want to read it.
</p>
<Example href="components/table#captions">
<DocsExample href="components/table#captions">
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@@ -944,12 +944,12 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
You can also put the <code>&lt;CTableCaption&gt;</code> on the top
of the table with <code>caption=&#34;top&#34;</code>.
</p>
<Example href="components/table#captions">
<DocsExample href="components/table#captions">
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@@ -981,7 +981,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Tabs.vue
+2 -2
View File
@@ -6,7 +6,7 @@
<strong>Vue Tabs</strong>
</CCardHeader>
<CCardBody>
<Example href="components/tabs.html">
<DocsExample href="components/tabs.html">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" @click="activeTabA=1">
@@ -53,7 +53,7 @@
craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
</CTabPane>
</CTabContent>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/base/Tooltips.vue
+7 -4
View File
@@ -1,5 +1,8 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Tooltip" href="components/breadcrumb" />
</CCol>
<CCol :xs="12">
<CCard>
<CCardHeader>
@@ -9,7 +12,7 @@
<p class="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<Example href="directives/tooltip.html">
<DocsExample href="directives/tooltip.html">
<p class="text-medium-emphasis">
Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
@@ -25,11 +28,11 @@
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
freegan cred raw denim single-origin coffee viral.
</p>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<Example href="directives/tooltip.html">
<DocsExample href="directives/tooltip.html">
<CButton
color="secondary"
v-c-tooltip="{
@@ -66,7 +69,7 @@
}"
>Tooltip on left</CButton
>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/buttons/ButtonGroups.vue
+26 -26
View File
@@ -13,25 +13,25 @@
Wrap a series of <code>&lt;CButton&gt;</code> components in
<code>&lt;CButtonGroup&gt;</code>.
</p>
<Example href="components/button-group">
<DocsExample href="components/button-group">
<CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton>
<CButton color="primary">Middle</CButton>
<CButton color="primary">Right</CButton>
</CButtonGroup>
</Example>
</DocsExample>
<p>
These classes can also be added to groups of links, as an
alternative to the
<code>&lt;CNav&gt;</code> components.
</p>
<Example href="components/button-group">
<DocsExample href="components/button-group">
<CButtonGroup>
<CButton href="#" color="primary" active> Active link </CButton>
<CButton href="#" color="primary"> Link </CButton>
<CButton href="#" color="primary"> Link </CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -41,13 +41,13 @@
<strong>Vue Button Group</strong> <span>Mixed styles</span>
</CCardHeader>
<CCardBody>
<Example href="components/button-group#mixed-styles">
<DocsExample href="components/button-group#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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -57,13 +57,13 @@
<strong>Vue Button Group</strong> <span>Outlined styles</span>
</CCardHeader>
<CCardBody>
<Example href="components/button-group#outlined-styles">
<DocsExample href="components/button-group#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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -77,7 +77,7 @@
Combine button-like checkbox and radio toggle buttons into a
seamless looking button group.
</p>
<Example
<DocsExample
href="components/button-group#checkbox-and-radio-button-groups"
>
<CButtonGroup
@@ -91,8 +91,8 @@
<CFormCheck :button="{ color: 'primary', variant: 'outline' }"
id="btncheck3" autoComplete="off" label="Checkbox 3" />
</CButtonGroup>
</Example>
<Example
</DocsExample>
<DocsExample
href="components/button-group#checkbox-and-radio-button-groups"
>
<CButtonGroup
@@ -107,7 +107,7 @@
name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"
/>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -122,7 +122,7 @@
components. Use utility classes as needed to space out groups,
buttons, and more.
</p>
<Example href="components/button-group#button-toolbar">
<DocsExample href="components/button-group#button-toolbar">
<CButtonToolbar
role="group"
aria-label="Toolbar with button groups"
@@ -154,13 +154,13 @@
<CButton color="info">8</CButton>
</CButtonGroup>
</CButtonToolbar>
</Example>
</DocsExample>
<p>
Feel free to combine input groups with button groups in your
toolbars. Similar to the example above, you’ll likely need some
utilities through to space items correctly.
</p>
<Example href="components/button-group#button-toolbar">
<DocsExample href="components/button-group#button-toolbar">
<CButtonToolbar
class="mb-3"
role="group"
@@ -209,7 +209,7 @@
/>
</CInputGroup>
</CButtonToolbar>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -226,7 +226,7 @@
<code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when
nesting multiple groups.
</p>
<Example href="components/button-group#sizing">
<DocsExample href="components/button-group#sizing">
<CButtonGroup
size="lg"
role="group"
@@ -252,7 +252,7 @@
<CButton color="dark" variant="outline"> Middle </CButton>
<CButton color="dark" variant="outline"> Right </CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -267,7 +267,7 @@
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
combined with a series of buttons.
</p>
<Example href="components/button-group#nesting">
<DocsExample href="components/button-group#nesting">
<CButtonGroup
role="group"
aria-label="Button group with nested dropdown"
@@ -285,7 +285,7 @@
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -300,7 +300,7 @@
horizontally.
<strong>Split button dropdowns are not supported here.</strong>
</p>
<Example href="components/button-group/#vertical-variation">
<DocsExample href="components/button-group/#vertical-variation">
<CButtonGroup
vertical
role="group"
@@ -314,8 +314,8 @@
<CButton color="dark">Button</CButton>
<CButton color="dark">Button</CButton>
</CButtonGroup>
</Example>
<Example href="components/button-group/#vertical-variation">
</DocsExample>
<DocsExample href="components/button-group/#vertical-variation">
<CButtonGroup
vertical
role="group"
@@ -366,8 +366,8 @@
</CDropdownMenu>
</CDropdown>
</CButtonGroup>
</Example>
<Example href="components/button-group/#vertical-variation">
</DocsExample>
<DocsExample href="components/button-group/#vertical-variation">
<CButtonGroup
vertical
role="group"
@@ -381,7 +381,7 @@
name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio
3" />
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/buttons/Buttons.vue
+30 -30
View File
@@ -16,7 +16,7 @@
to initialize operations, both in the background or foreground of an
experience.
</p>
<Example href="components/buttons">
<DocsExample href="components/buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -50,7 +50,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -64,7 +64,7 @@
You can combine button with our
<a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
<Example href="components/buttons">
<DocsExample href="components/buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -100,7 +100,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -124,7 +124,7 @@
<code>role=&#34;button&#34;</code> to adequately communicate their
meaning to assistive technologies such as screen readers.
</p>
<Example href="components/buttons#button-components">
<DocsExample href="components/buttons#button-components">
<CButton component="a" color="primary" href="#" role="button">
Link
</CButton>
@@ -147,7 +147,7 @@
color="primary"
value="Reset"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -162,7 +162,7 @@
<code>variant=&#34;outline&#34;</code> prop to remove all background
colors.
</p>
<Example href="components/buttons#outline-buttons">
<DocsExample href="components/buttons#outline-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -198,7 +198,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -213,7 +213,7 @@
<code>variant=&#34;ghost&#34;</code> prop to remove all background
colors.
</p>
<Example href="components/buttons#ghost-buttons">
<DocsExample href="components/buttons#ghost-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -249,7 +249,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -263,14 +263,14 @@
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<Example href="components/buttons#sizes">
<DocsExample href="components/buttons#sizes">
<CButton color="primary" size="lg"> Large button </CButton>
<CButton color="secondary" size="lg"> Large button </CButton>
</Example>
<Example href="components/buttons#sizes">
</DocsExample>
<DocsExample href="components/buttons#sizes">
<CButton color="primary" size="sm"> Small button </CButton>
<CButton color="secondary" size="sm"> Small button </CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -280,7 +280,7 @@
<strong>Vue Button</strong> <small>Pill</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#pill-buttons">
<DocsExample href="components/buttons#pill-buttons">
<template
v-for="color in [
'primary',
@@ -303,7 +303,7 @@
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -313,7 +313,7 @@
<strong>Vue Button</strong> <small>Square</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#square">
<DocsExample href="components/buttons#square">
<template
v-for="color in [
'primary',
@@ -336,7 +336,7 @@
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -353,12 +353,12 @@
<code>pointer-events: none</code> applied to, disabling hover and
active states from triggering.
</p>
<Example href="components/buttons#disabled-state">
<DocsExample href="components/buttons#disabled-state">
<CButton color="primary" size="lg" disabled>
Primary button
</CButton>
<CButton color="secondary" size="lg" disabled> Button </CButton>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Disabled buttons using the <code>&lt;a&gt;</code> component act a
little different:
@@ -371,7 +371,7 @@
<code>aria-disabled=&#34;true&#34;</code> attribute to show the
state of the component to assistive technologies.
</p>
<Example href="components/buttons#disabled-state">
<DocsExample href="components/buttons#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
@@ -384,7 +384,7 @@
>
Link
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -398,12 +398,12 @@
Create buttons that span the full width of a parent—by using
utilities.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div class="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Here we create a responsive variation, starting with vertically
stacked buttons until the <code>md</code> breakpoint, where
@@ -411,24 +411,24 @@
thus nullifying the <code>gap-2</code> utility. Resize your browser
to see them change.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
You can adjust the width of your block buttons with grid column
width classes. For example, for a half-width &#34;block button&#34;,
use <code>.col-6</code>. Center it horizontally with
<code>.mx-auto</code>, too.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div class="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons
when horizontal. Here we&#39;ve taken our previous responsive
@@ -436,12 +436,12 @@
button to right align the buttons when they&#39;re no longer
stacked.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/buttons/Dropdowns.vue
+20 -20
View File
@@ -14,7 +14,7 @@
<code>&lt;button&gt;</code>
elements:
</p>
<Example href="components/dropdown#single-button">
<DocsExample href="components/dropdown#single-button">
<CDropdown>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
@@ -25,11 +25,11 @@
<CDropdownItem href="#">Something else here</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
The best part is you can do this with any button variant, too:
</p>
<Example href="components/dropdown#single-button">
<DocsExample href="components/dropdown#single-button">
<template
v-for="color in [
'primary',
@@ -54,7 +54,7 @@
</CDropdownMenu>
</CDropdown>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -78,7 +78,7 @@
split button and implement a more properly sized hit area next to
the main button.
</p>
<Example href="components/dropdown#split-button">
<DocsExample href="components/dropdown#split-button">
<template
v-for="color in [
'primary',
@@ -106,7 +106,7 @@
</CDropdownMenu>
</CDropdown>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -120,7 +120,7 @@
Button dropdowns work with buttons of all sizes, including default
and split dropdown buttons.
</p>
<Example href="components/dropdown#sizing">
<DocsExample href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">
Large button
@@ -146,8 +146,8 @@
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
<Example href="components/dropdown#sizing">
</DocsExample>
<DocsExample href="components/dropdown#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">
Small button
@@ -173,7 +173,7 @@
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -189,7 +189,7 @@
<code>dark</code> property. No changes are required to the dropdown
items.
</p>
<Example href="components/dropdown#dark-dropdowns">
<DocsExample href="components/dropdown#dark-dropdowns">
<CDropdown dark>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
@@ -202,11 +202,11 @@
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
And putting it to use in a navbar:
</p>
<Example href="components/dropdown#dark-dropdowns">
<DocsExample href="components/dropdown#dark-dropdowns">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://coreui.io/react/">
@@ -244,7 +244,7 @@
</div>
</div>
</nav>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -260,7 +260,7 @@
<code>&lt;CDropdown&gt;</code>
component.
</p>
<Example href="components/dropdown#dropup">
<DocsExample href="components/dropdown#dropup">
<CDropdown variant="btn-group" direction="dropup">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@@ -282,7 +282,7 @@
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -298,7 +298,7 @@
<code>&lt;CDropdown&gt;</code>
component.
</p>
<Example href="components/dropdown#dropright">
<DocsExample href="components/dropdown#dropright">
<CDropdown variant="btn-group" direction="dropend">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@@ -320,7 +320,7 @@
<CDropdownItem href="#">Separated link</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -336,7 +336,7 @@
<code>&lt;CDropdown&gt;</code>
component.
</p>
<Example href="components/dropdown#dropleft">
<DocsExample href="components/dropdown#dropleft">
<CButtonGroup>
<CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary" split />
@@ -350,7 +350,7 @@
</CDropdown>
<CButton color="secondary">Small split button</CButton>
</CButtonGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/charts/CChartBarExample.vue
+1 -1
View File
@@ -17,7 +17,7 @@ export default {
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12]
}
]
}
src/views/forms/ChecksRadios.vue
+32 -32
View File
@@ -9,14 +9,14 @@
<strong>Vue Checkbox</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios">
<DocsExample href="forms/checks-radios">
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck
id="flexCheckChecked"
label="Checked checkbox"
defaultChecked
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -31,14 +31,14 @@
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
</p>
<Example href="forms/checks-radios#disabled">
<DocsExample href="forms/checks-radios#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck
label="Disabled checked checkbox"
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -53,7 +53,7 @@
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
</p>
<Example href="forms/checks-radios#radios">
<DocsExample href="forms/checks-radios#radios">
<CFormCheck
type="radio"
name="flexRadioDefault"
@@ -67,7 +67,7 @@
label="Checked radio"
defaultChecked
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -77,7 +77,7 @@
<strong>Vue Radio</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#disabled-1">
<DocsExample href="forms/checks-radios#disabled-1">
<CFormCheck
type="radio"
name="flexRadioDisabled"
@@ -93,7 +93,7 @@
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -108,7 +108,7 @@
<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">
<DocsExample href="forms/checks-radios#switches">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -129,7 +129,7 @@
defaultChecked
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -139,7 +139,7 @@
<strong>Vue Switches</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<Example href="forms/checks-radios#sizes">
<DocsExample href="forms/checks-radios#sizes">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -154,7 +154,7 @@
label="Extra large switch checkbox input"
id="formSwitchCheckDefaultXL"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -169,11 +169,11 @@
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">
<DocsExample 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">
</DocsExample>
<DocsExample href="forms/checks-radios#default-stacked">
<CFormCheck
type="radio"
name="exampleRadios"
@@ -197,7 +197,7 @@
label="Disabled radio"
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -212,7 +212,7 @@
<code>inline</code> boolean property to any
<code>&lt;CFormCheck&gt;</code>.
</p>
<Example href="forms/checks-radios#inline">
<DocsExample href="forms/checks-radios#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck
@@ -222,8 +222,8 @@
label="3 (disabled)"
disabled
/>
</Example>
<Example href="forms/checks-radios#inline">
</DocsExample>
<DocsExample href="forms/checks-radios#inline">
<CFormCheck
inline
type="radio"
@@ -249,7 +249,7 @@
label="3 (disabled)"
disabled
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -263,7 +263,7 @@
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">
<DocsExample href="forms/checks-radios#without-labels">
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div>
@@ -276,7 +276,7 @@
aria-label="..."
/>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -292,15 +292,15 @@
<code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed.
</p>
<Example href="forms/checks-radios#toggle-buttons">
<DocsExample 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">
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
@@ -308,8 +308,8 @@
label="Checked"
defaultChecked
/>
</Example>
<Example href="forms/checks-radios#toggle-buttons">
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
@@ -317,9 +317,9 @@
label="Disabled"
disabled
/>
</Example>
</DocsExample>
<h3>Radio toggle buttons</h3>
<Example href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios#toggle-buttons">
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
@@ -354,13 +354,13 @@
autoComplete="off"
label="Radio"
/>
</Example>
</DocsExample>
<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">
<DocsExample href="forms/checks-radios#toggle-buttons">
<div>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
@@ -397,7 +397,7 @@
label="Radio"
/>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/FloatingLabels.vue
+12 -12
View File
@@ -17,7 +17,7 @@
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
we can utilize a sibling selector (e.g., <code>~</code>).
</p>
<Example href="forms/floating-labels">
<DocsExample href="forms/floating-labels">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -26,12 +26,12 @@
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<Example href="forms/floating-labels">
<DocsExample href="forms/floating-labels">
<CFormFloating>
<CFormInput
type="email"
@@ -41,7 +41,7 @@
/>
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -55,7 +55,7 @@
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
<code>&lt;CFormInput&gt;</code>s.
</p>
<Example href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
@@ -63,13 +63,13 @@
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<Example href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
@@ -78,7 +78,7 @@
></CFormTextarea>
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -97,7 +97,7 @@
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<Example href="forms/floating-labels#selects">
<DocsExample href="forms/floating-labels#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
@@ -107,7 +107,7 @@
</CFormSelect>
<CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
</CFormFloating>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -121,7 +121,7 @@
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">
<DocsExample href="forms/floating-labels#layout">
<CRow :xs="{ gutter: 2 }">
<CCol md>
<CFormFloating>
@@ -146,7 +146,7 @@
</CFormFloating>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/FormControl.vue
+16 -16
View File
@@ -9,7 +9,7 @@
<strong>Vue Form Control</strong>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control">
<DocsExample href="forms/form-control">
<CForm>
<div class="mb-3">
<CFormLabel for="exampleFormControlInput1"
@@ -31,7 +31,7 @@
></CFormTextarea>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -45,7 +45,7 @@
Set heights using <code>size</code> property like
<code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
</p>
<Example href="forms/form-control#sizing">
<DocsExample href="forms/form-control#sizing">
<CFormInput
type="text"
size="lg"
@@ -65,7 +65,7 @@
placeholder="Small input"
aria-label="sm input example"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -79,7 +79,7 @@
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">
<DocsExample href="forms/form-control#disabled">
<CFormInput
type="text"
placeholder="Disabled input"
@@ -95,7 +95,7 @@
readOnly
/>
<br />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -111,14 +111,14 @@
appear lighter (just like disabled inputs), but retain the standard
cursor.
</p>
<Example href="forms/form-control#readonly">
<DocsExample href="forms/form-control#readonly">
<CFormInput
type="text"
placeholder="Readonly input here..."
aria-label="readonly input example"
readOnly
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -134,7 +134,7 @@
<code>plainText</code> boolean property to remove the default form
field styling and preserve the correct margin and padding.
</p>
<Example href="components/accordion">
<DocsExample href="components/accordion">
<CRow class="mb-3">
<CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
Email
@@ -157,8 +157,8 @@
<CFormInput type="password" id="inputPassword" />
</div>
</CRow>
</Example>
<Example href="components/accordion">
</DocsExample>
<DocsExample href="components/accordion">
<CForm class="row g-3">
<div class="col-auto">
<CFormLabel for="staticEmail2" class="visually-hidden">
@@ -186,7 +186,7 @@
<CButton type="submit" class="mb-3"> Confirm identity </CButton>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -196,7 +196,7 @@
<strong>Vue Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#file-input">
<DocsExample href="forms/form-control#file-input">
<div class="mb-3">
<CFormLabel for="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile" />
@@ -221,7 +221,7 @@
<CFormLabel for="formFileLg">Large file input example</CFormLabel>
<CFormInput type="file" size="lg" id="formFileLg" />
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -231,7 +231,7 @@
<strong>Vue Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<Example href="forms/form-control#color">
<DocsExample href="forms/form-control#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
@@ -239,7 +239,7 @@
defaultValue="#563d7c"
title="Choose your color"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/InputGroup.vue
+22 -22
View File
@@ -14,7 +14,7 @@
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<Example href="forms/input-group">
<DocsExample href="forms/input-group">
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput
@@ -50,7 +50,7 @@
<CInputGroupText>With textarea</CInputGroupText>
<CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -65,7 +65,7 @@
custom form field validation within an input group. You may disable this with
<code>.flex-nowrap</code>.
</p>
<Example href="forms/input-group#wrapping">
<DocsExample href="forms/input-group#wrapping">
<CInputGroup class="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
@@ -74,7 +74,7 @@
aria-describedby="addon-wrapping"
/>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -92,7 +92,7 @@
<p class="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p>
<Example href="forms/input-group#sizing">
<DocsExample href="forms/input-group#sizing">
<CInputGroup size="sm" class="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput
@@ -114,7 +114,7 @@
aria-describedby="inputGroup-sizing-lg"
/>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -127,7 +127,7 @@
<p class="text-medium-emphasis small">
Place any checkbox or radio option within an input group&#39;s addon instead of text.
</p>
<Example href="forms/input-group#checkboxes-and-radios">
<DocsExample href="forms/input-group#checkboxes-and-radios">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck
@@ -148,7 +148,7 @@
</CInputGroupText>
<CFormInput aria-label="Text input with radio button" />
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -163,13 +163,13 @@
styles are only available for input groups with a single
<code>&lt;CFormInput&gt;</code>.
</p>
<Example href="forms/input-group#multiple-inputs">
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -183,7 +183,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#multiple-addons">
<DocsExample href="forms/input-group#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
@@ -194,7 +194,7 @@
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -208,7 +208,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<Example href="forms/input-group#button-addons">
<DocsExample href="forms/input-group#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
@@ -250,7 +250,7 @@
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -260,7 +260,7 @@
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#buttons-with-dropdowns">
<DocsExample href="forms/input-group#buttons-with-dropdowns">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
@@ -318,7 +318,7 @@
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -328,7 +328,7 @@
<strong>Vue Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#segmented-buttons">
<DocsExample href="forms/input-group#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
@@ -361,7 +361,7 @@
</CDropdownMenu>
</CDropdown>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -371,7 +371,7 @@
<strong>Vue Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-select">
<DocsExample href="forms/input-group#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">
Options
@@ -416,7 +416,7 @@
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -426,7 +426,7 @@
<strong>Vue Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<Example href="forms/input-group#custom-file-input">
<DocsExample href="forms/input-group#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">
Upload
@@ -471,7 +471,7 @@
Button
</CButton>
</CInputGroup>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Layout.vue
+18 -18
View File
@@ -11,7 +11,7 @@
for form layouts that require multiple columns, varied widths, and
additional alignment options.
</p>
<Example href="forms/layout#form-grid">
<DocsExample href="forms/layout#form-grid">
<CRow>
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -20,7 +20,7 @@
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -38,7 +38,7 @@
, you can have control over the gutter width in as well the inline
as block direction.
</p>
<Example href="forms/layout#gutters">
<DocsExample href="forms/layout#gutters">
<CRow class="g-3">
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -47,11 +47,11 @@
<CFormInput placeholder="Last name" aria-label="Last name" />
</CCol>
</CRow>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<Example href="forms/layout#gutters">
<DocsExample href="forms/layout#gutters">
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
@@ -98,7 +98,7 @@
<CButton type="submit" color="primary">Sign in</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -122,7 +122,7 @@
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">
<DocsExample href="forms/layout#horizontal-form">
<CForm>
<CRow class="mb-3">
<CFormLabel
@@ -185,7 +185,7 @@
</CRow>
<CButton type="submit" color="primary">Sign in</CButton>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -202,7 +202,7 @@
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">
<DocsExample href="forms/layout#horizontal-form-label-sizing">
<CRow class="mb-3">
<CFormLabel
for="colFormLabelSm"
@@ -250,7 +250,7 @@
/>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -270,7 +270,7 @@
rest, with specific column classes like
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<Example href="forms/layout#column-sizing">
<DocsExample href="forms/layout#column-sizing">
<CRow class="g-3">
<CCol sm="{7}">
<CFormInput placeholder="City" aria-label="City" />
@@ -282,7 +282,7 @@
<CFormInput placeholder="Zip" aria-label="Zip" />
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -300,7 +300,7 @@
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">
<DocsExample href="forms/layout#auto-sizing">
<CForm class="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel
@@ -351,12 +351,12 @@
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
<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">
<DocsExample href="forms/layout#auto-sizing">
<CForm class="row gx-3 gy-2 align-items-center">
<CCol :sm="3">
<CFormLabel
@@ -407,7 +407,7 @@
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -426,7 +426,7 @@
<code>.align-items-center</code> aligns the form elements to the
middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
</p>
<Example href="forms/layout#inline-forms">
<DocsExample href="forms/layout#inline-forms">
<CForm class="row row-cols-lg-auto g-3 align-items-center">
<CCol :xs="12">
<CFormLabel
@@ -468,7 +468,7 @@
<CButton type="submit" color="primary">Submit</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Range.vue
+8 -8
View File
@@ -14,10 +14,10 @@
<code>&lt;input type=&#34;range&#34;&gt;</code> controls with
<code>&lt;CFormRange&gt;</code>.
</p>
<Example href="forms/range">
<DocsExample href="forms/range">
<CFormLabel for="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -31,10 +31,10 @@
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">
<DocsExample href="forms/range#disabled">
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -50,10 +50,10 @@
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">
<DocsExample href="forms/range#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -69,7 +69,7 @@
below, we double the number of steps by using
<code>step=&#34;0.5&#34;</code>.
</p>
<Example href="forms/range#steps">
<DocsExample href="forms/range#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
:min="0"
@@ -78,7 +78,7 @@
defaultValue="3"
id="customRange3"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Select.vue
+10 -10
View File
@@ -9,14 +9,14 @@
<strong>Vue Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<Example href="forms/select">
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -30,7 +30,7 @@
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect
size="lg"
class="mb-3"
@@ -51,11 +51,11 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
@@ -66,11 +66,11 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<Example href="forms/select#sizing">
<DocsExample href="forms/select#sizing">
<CFormSelect
size="lg"
multiple
@@ -81,7 +81,7 @@
<option value="2">Two</option>
<option value="3">Three</option>
</CFormSelect>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -95,14 +95,14 @@
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">
<DocsExample 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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/forms/Validation.vue
+10 -10
View File
@@ -24,7 +24,7 @@
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
</p>
<Example href="forms/validation">
<DocsExample href="forms/validation">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -103,7 +103,7 @@
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -124,7 +124,7 @@
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">
<DocsExample href="forms/validation#browser-defaults">
<CForm
class="row g-3 needs-validation"
:validated="validatedDefault01"
@@ -204,7 +204,7 @@
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -227,7 +227,7 @@
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">
<DocsExample href="forms/validation#server-side">
<CForm class="row g-3 needs-validation">
<CCol :md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@@ -320,7 +320,7 @@
<CButton color="primary" type="submit"> Submit form </CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -339,7 +339,7 @@
<li><code>&lt;CFormSelect&gt;</code>s</li>
<li><code>&lt;CFormCheck&gt;</code>s</li>
</ul>
<Example href="forms/validation#supported-elements">
<DocsExample href="forms/validation#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label"
@@ -410,7 +410,7 @@
>
</div>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -428,7 +428,7 @@
the example below, our column classes have this already, but your
project may require an alternative setup.
</p>
<Example href="forms/validation#tooltips">
<DocsExample href="forms/validation#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -498,7 +498,7 @@
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/icons/Brands.vue
+5 -12
View File
@@ -6,21 +6,14 @@
<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"
>
<CCol class="mb-5" col="3" sm="2">
<CIcon size="lg" :content="brand" />
<div>{{ toKebabCase(brandName) }}</div>
</CCol>
</template>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
@@ -30,16 +23,16 @@
<script>
import { brandSet as brands } from '@coreui/icons'
export default {
name: "Brands",
name: 'Brands',
data: function () {
return {
brands: brands
brands: brands,
}
},
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
}
},
};
},
}
</script>
src/views/icons/CoreUIIcons.vue
+5 -11
View File
@@ -6,20 +6,14 @@
<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"
>
<CCol class="mb-5" col="3" sm="2">
<CIcon :content="icon" size="lg" />
<div>{{ toKebabCase(iconName) }}</div>
</CCol>
</template>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
@@ -29,16 +23,16 @@
<script>
import { freeSet } from '@coreui/icons'
export default {
name: "CoreUIIcons",
name: 'CoreUIIcons',
data: function () {
return {
freeSet: freeSet
freeSet: freeSet,
}
},
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
}
},
};
},
}
</script>
src/views/icons/Flags.vue
+5 -11
View File
@@ -6,7 +6,6 @@
<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>
@@ -14,17 +13,12 @@
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"
>
<CCol class="mb-5" col="3" sm="2">
<CIcon size="lg" :content="flag" />
<div>{{ toKebabCase(flagName) }}</div>
</CCol>
</template>
</CRow>
</Example>
</CCardBody>
</CCard>
</CCol>
@@ -34,16 +28,16 @@
<script>
import { flagSet } from '@coreui/icons'
export default {
name: "Flags",
name: 'Flags',
data: function () {
return {
flagSet: flagSet
flagSet: flagSet,
}
},
methods: {
toKebabCase(str) {
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
}
},
};
},
}
</script>
src/views/notifications/Alerts.vue
+8 -8
View File
@@ -21,7 +21,7 @@
</a>
.
</p>
<Example href="components/alert">
<DocsExample href="components/alert">
<CAlert color="primary"
>A simple primary alert—check it out!</CAlert
>
@@ -38,7 +38,7 @@
<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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -52,7 +52,7 @@
Use the <code>&lt;CAlertLink&gt;</code> component to immediately
give matching colored links inside any alert.
</p>
<Example href="components/alert#link-color">
<DocsExample href="components/alert#link-color">
<CAlert color="primary">
A simple primary alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
@@ -93,7 +93,7 @@
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -107,7 +107,7 @@
Alert can also incorporate supplementary components &amp; elements
like heading, paragraph, and divider.
</p>
<Example href="components/alert#additional-content">
<DocsExample href="components/alert#additional-content">
<CAlert color="success">
<CAlertHeading tag="h4">Well done!</CAlertHeading>
<p>
@@ -121,7 +121,7 @@
things nice and tidy.
</p>
</CAlert>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -135,12 +135,12 @@
Alerts can also be easily dismissed. Just add the
<code>dismissible</code> prop.
</p>
<Example href="components/alert#dismissing">
<DocsExample href="components/alert#dismissing">
<CAlert color="warning" dismissible @dismiss="alert">
<strong>Go right ahead</strong> and click that dimiss over there
on the right.
</CAlert>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/notifications/Badges.vue
+10 -10
View File
@@ -13,22 +13,22 @@
Bootstrap badge scale to suit the size of the parent element by
using relative font sizing and <code>em</code> units.
</p>
<Example href="components/badge">
<DocsExample href="components/badge">
<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>
</DocsExample>
<p class="text-medium-emphasis small">
Badges can be used as part of links or buttons to provide a counter.
</p>
<Example href="components/badge">
<DocsExample href="components/badge">
<CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Remark that depending on how you use them, badges may be complicated
for users of screen readers and related assistive technologies.
@@ -37,12 +37,12 @@
Unless the context is clear, consider including additional context
with a visually hidden piece of additional text.
</p>
<Example href="components/badge">
<DocsExample href="components/badge">
<CButton color="primary">
Profile <CBadge color="secondary">9</CBadge>
<span class="visually-hidden">unread messages</span>
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -56,7 +56,7 @@
Add any of the below-mentioned <code>color</code> props to modify
the presentation of a badge.
</p>
<Example href="components/badge#contextual-variations">
<DocsExample href="components/badge#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
@@ -64,7 +64,7 @@
<CBadge color="info">info</CBadge>
<CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge>
</Example>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
@@ -76,7 +76,7 @@
Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
badges rounded.
</p>
<Example href="components/badge#pill-badges">
<DocsExample href="components/badge#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>
@@ -84,7 +84,7 @@
<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>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/notifications/Modals.vue
+23 -20
View File
@@ -1,5 +1,8 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Modal" href="components/spinner" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
@@ -14,7 +17,7 @@
include modal headers with dismiss actions whenever possible, or
provide another explicit dismiss action.
</p>
<Example href="components/modal.html#modal-components">
<DocsExample href="components/modal.html#modal-components">
<CModal
class="show d-block position-static"
:backdrop="false"
@@ -30,7 +33,7 @@
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -44,7 +47,7 @@
Toggle a working modal demo by clicking the button below. It will
slide down and fade in from the top of the page.
</p>
<Example href="components/modal.html#live-demo">
<DocsExample href="components/modal.html#live-demo">
<CButton
color="primary"
@click="
@@ -89,7 +92,7 @@
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -105,7 +108,7 @@
meaning it will not close when clicking outside it. Click the button
below to try it.
</p>
<Example href="components/modal.html#static-backdrop">
<DocsExample href="components/modal.html#static-backdrop">
<CButton
color="primary"
@click="
@@ -151,7 +154,7 @@
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -167,7 +170,7 @@
meaning it will not close when clicking outside it. Click the button
below to try it.
</p>
<Example href="components/modal.html#scrolling-long-content">
<DocsExample href="components/modal.html#scrolling-long-content">
<CButton
color="primary"
@click="
@@ -294,13 +297,13 @@
</p>
</CModalBody>
</CModal>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
You can also create a scrollable modal that allows scroll the modal
body by adding
<code>scrollable</code> prop.
</p>
<Example href="components/modal.html#scrolling-long-content">
<DocsExample href="components/modal.html#scrolling-long-content">
<CButton
color="primary"
@click="
@@ -428,7 +431,7 @@
</p>
</CModalBody>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -442,7 +445,7 @@
Add <code>alignment=&#34;center&#34;</code> to
<code>&lt;CModal&gt;</code> to vertically center the modal.
</p>
<Example href="components/modal.html#vertically-centered">
<DocsExample href="components/modal.html#vertically-centered">
<CButton
color="primary"
@click="
@@ -490,9 +493,9 @@
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</DocsExample>
<Example href="components/modal.html#vertically-centered">
<DocsExample href="components/modal.html#vertically-centered">
<CButton
color="primary"
@click="
@@ -541,7 +544,7 @@
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -557,7 +560,7 @@
needed. When modals are closed, any tooltips and popovers within are
also automatically dismissed.
</p>
<Example href="components/modal.html#tooltips-and-popovers">
<DocsExample href="components/modal.html#tooltips-and-popovers">
<CButton
color="primary"
@click="
@@ -620,7 +623,7 @@
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -681,7 +684,7 @@
</tr>
</tbody>
</table>
<Example href="components/modal.html#optional-sizes">
<DocsExample href="components/modal.html#optional-sizes">
<CButton
color="primary"
@click="
@@ -772,7 +775,7 @@
</CModalHeader>
<CModalBody> ... </CModalBody>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -832,7 +835,7 @@
</tr>
</tbody>
</table>
<Example href="components/modal.html#fullscreen-modal">
<DocsExample href="components/modal.html#fullscreen-modal">
<CButton
color="primary"
@click="
@@ -1013,7 +1016,7 @@
</CModalHeader>
<CModalBody> ... </CModalBody>
</CModal>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
src/views/widgets/Widgets.vue
+23 -23
View File
@@ -6,10 +6,10 @@
<strong>Vue Widgets</strong>
</CCardHeader>
<CCardBody>
<Example href="">
<DocsExample href="">
<WidgetsStatsA />
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsB
@@ -49,8 +49,8 @@
/>
</CCol>
</CRow>
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsB
@@ -98,9 +98,9 @@
/>
</CCol>
</CRow>
</Example>
</DocsExample>
<Example href="">
<DocsExample href="">
<CRow>
<CCol :xs="2">
<CWidgetStatsE title="title" value="1,123">
@@ -247,8 +247,8 @@
</CWidgetStatsE>
</CCol>
</CRow>
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
@@ -279,8 +279,8 @@
</CWidgetStatsF>
</CCol>
</CRow>
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsF color="primary" title="Title" value="$1.999,50">
@@ -371,8 +371,8 @@
</CWidgetStatsF>
</CCol>
</CRow>
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="3">
<CWidgetStatsF
@@ -423,11 +423,11 @@
</CWidgetStatsF>
</CCol>
</CRow>
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<WidgetsStatsD />
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CCardGroup>
<CWidgetStatsC
class="mb-3"
@@ -480,8 +480,8 @@
/></template>
</CWidgetStatsC>
</CCardGroup>
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="2">
<CWidgetStatsC
@@ -556,8 +556,8 @@
</CWidgetStatsC>
</CCol>
</CRow>
</Example>
<Example href="">
</DocsExample>
<DocsExample href="">
<CRow>
<CCol :xs="2">
<CWidgetStatsC
@@ -644,7 +644,7 @@
</CWidgetStatsC>
</CCol>
</CRow>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -656,7 +656,7 @@ 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";
import Example from "../../components/DocsExample.vue";
export default {
name: "Widgets",
components: {
src/views/widgets/WidgetsStatsTypeA.vue
+1 -1
View File
@@ -46,7 +46,7 @@
backgroundColor: 'transparent',
borderColor: 'rgba(255,255,255,.55)',
pointBackgroundColor: '#321fdb',
data: [65, 59, 84, 84, 51, 55, 40],
data: [68, 59, 84, 84, 51, 55, 40],
},
],
}"