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-30 00:44:20 +02:00
parent e3dd33a2f8
commit 0f2cb6c1db
40 changed files with 334 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Accordion.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Breadcrumb" href="components/breadcrumb" />
<DocsCallout name="Accordion" href="components/accordion" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
src/views/base/Carousels.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Carousel" href="components/breadcrumb" />
<DocsCallout name="Carousel" href="components/carousel.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
src/views/base/Collapses.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Collapse" href="components/breadcrumb" />
<DocsCallout name="Collapse" href="components/collapse.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
src/views/base/ListGroups.vue
+12 -12
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="List Group" href="components/list-group" />
<DocsCallout name="List Group" href="components/list-group.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -14,7 +14,7 @@
proper CSS classes. Build upon it with the options that follow, or
with your CSS as required.
</p>
<DocsExample href="components/list-group">
<DocsExample href="components/list-group.html">
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -37,7 +37,7 @@
<code>&lt;CListGroupItem&gt;</code> to show the current active
selection.
</p>
<DocsExample href="components/list-group/#active-items">
<DocsExample href="components/list-group.html#active-items">
<CListGroup>
<CListGroupItem active>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -59,7 +59,7 @@
Add <code>disabled</code> boolean property to a
<code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
</p>
<DocsExample href="components/list-group/#disabled-items">
<DocsExample href="components/list-group.html#disabled-items">
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -87,7 +87,7 @@
<code>&lt;div&gt;</code>
s) don&#39;tprovide a click or tap affordance.
</p>
<DocsExample href="components/list-group/#links-and-buttons">
<DocsExample href="components/list-group.html#links-and-buttons">
<CListGroup>
<CListGroupItem component="a" href="#" active>
Cras justo odio
@@ -120,7 +120,7 @@
rounded corners to render list group items edge-to-edge in a parent
container (e.g., cards).
</p>
<DocsExample href="components/list-group/#flush">
<DocsExample href="components/list-group.html#flush">
<CListGroup flush>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -153,7 +153,7 @@
groups.</strong
>
</p>
<DocsExample href="components/list-group/#flush">
<DocsExample href="components/list-group.html#flush">
<template
v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
:key="item"
@@ -178,7 +178,7 @@
Use contextual classes to style list items with a stateful
background and color.
</p>
<DocsExample href="components/list-group/#contextual-classes">
<DocsExample href="components/list-group.html#contextual-classes">
<CListGroup>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem
@@ -205,7 +205,7 @@
<code>active</code> state; apply it to indicate an active selection
on a contextual list group item.
</p>
<DocsExample href="components/list-group/#contextual-classes">
<DocsExample href="components/list-group.html#contextual-classes">
<CListGroup>
<CListGroupItem component="a" href="#"
>Dapibus ac facilisis in</CListGroupItem
@@ -242,7 +242,7 @@
Add badges to any list group item to show unread counts, activity,
and more.
</p>
<DocsExample href="components/list-group/#with-badges">
<DocsExample href="components/list-group.html#with-badges">
<CListGroup>
<CListGroupItem
class="d-flex justify-content-between align-items-center"
@@ -280,7 +280,7 @@
>flexbox utilities</a
>.
</p>
<DocsExample href="components/list-group/#custom-content">
<DocsExample href="components/list-group.html#custom-content">
<CListGroup>
<CListGroupItem component="a" href="#" active>
<div class="d-flex w-100 justify-content-between">
@@ -334,7 +334,7 @@
Place CoreUI&#39;s checkboxes and radios within list group items and
customize as needed.
</p>
<DocsExample href="components/list-group/#checkboxes-and-radios">
<DocsExample href="components/list-group.html#checkboxes-and-radios">
<CListGroup>
<CListGroupItem>
<CFormCheck label="Cras justo odio" />
src/views/base/Navs.vue
+13 -13
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Nav" href="components/nav" />
<DocsCallout name="Nav" href="components/nav.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -15,7 +15,7 @@
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
</p>
<DocsExample href="components/nav#base-nav">
<DocsExample href="components/nav.html#base-nav">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@@ -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>
<DocsExample href="components/nav#base-nav">
<DocsExample href="components/nav.html#base-nav">
<CNav component="nav">
<CNavLink href="#" active>
Active
@@ -74,7 +74,7 @@
<p class="text-medium-emphasis small">
Centered with <code>.justify-content-center</code>:
</p>
<DocsExample href="components/nav#horizontal-alignment">
<DocsExample href="components/nav.html#horizontal-alignment">
<CNav class="justify-content-center">
<CNavItem>
<CNavLink href="#" active>
@@ -97,7 +97,7 @@
<p class="text-medium-emphasis small">
Right-aligned with <code>.justify-content-end</code>:
</p>
<DocsExample href="components/nav#base-nav">
<DocsExample href="components/nav.html#base-nav">
<CNav class="justify-content-end">
<CNavItem>
<CNavLink href="#" active>
@@ -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>
<DocsExample href="components/nav#vertical">
<DocsExample href="components/nav.html#vertical">
<CNav class="flex-column">
<CNavItem>
<CNavLink href="#" active>
@@ -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>
<DocsExample href="components/nav#tabs">
<DocsExample href="components/nav.html#tabs">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" active>
@@ -196,7 +196,7 @@
<p class="text-medium-emphasis small">
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
</p>
<DocsExample href="components/nav#pills">
<DocsExample href="components/nav.html#pills">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
@@ -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>
<DocsExample href="components/nav#fill-and-justify">
<DocsExample href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="fill">
<CNavItem>
<CNavLink href="#" active>
@@ -256,7 +256,7 @@
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
will be the same width.
</p>
<DocsExample href="components/nav#fill-and-justify">
<DocsExample href="components/nav.html#fill-and-justify">
<CNav variant="pills" layout="justified">
<CNavItem>
<CNavLink href="#" active>
@@ -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>
<DocsExample href="components/nav#working-with-flex-utilities">
<DocsExample href="components/nav.html#working-with-flex-utilities">
<CNav component="nav" variant="pills" class="flex-column flex-sm-row">
<CNavLink href="#" active>
Active
@@ -313,7 +313,7 @@
<strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
</CCardHeader>
<CCardBody>
<DocsExample href="components/nav#tabs-with-dropdowns">
<DocsExample href="components/nav.html#tabs-with-dropdowns">
<CNav>
<CNavItem>
<CNavLink href="#" active>
@@ -347,7 +347,7 @@
<strong>Vue Navs</strong> <small>Pills with dropdowns</small>
</CCardHeader>
<CCardBody>
<DocsExample href="components/nav#pills-with-dropdowns">
<DocsExample href="components/nav.html#pills-with-dropdowns">
<CNav variant="pills">
<CNavItem>
<CNavLink href="#" active>
src/views/base/Paginations.vue
+8 -8
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Pagination" href="components/pagination" />
<DocsCallout name="Pagination" href="components/pagination.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -25,7 +25,7 @@
navigate between a set of search results, an appropriate label could
be <code>aria-label=&#34;Search results pages&#34;</code>.
</p>
<DocsExample href="components/pagination">
<DocsExample href="components/pagination.html">
<CPagination aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@@ -48,7 +48,7 @@
pagination links? Be sure to provide proper screen reader support
with <code>aria</code> attributes.
</p>
<DocsExample href="components/pagination#working-with-icons">
<DocsExample href="components/pagination.html#working-with-icons">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
@@ -84,7 +84,7 @@
disabled links and use custom JavaScript to fully disable their
functionality.
</p>
<DocsExample href="components/pagination#disabled-and-active-states">
<DocsExample href="components/pagination.html#disabled-and-active-states">
<CPagination aria-label="Page navigation example">
<CPaginationItem aria-label="Previous" disabled>
<span aria-hidden="true">&laquo;</span>
@@ -111,7 +111,7 @@
<code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for
additional sizes.
</p>
<DocsExample href="components/pagination#sizing">
<DocsExample href="components/pagination.html#sizing">
<CPagination size="lg" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@@ -120,7 +120,7 @@
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</DocsExample>
<DocsExample href="components/pagination#sizing">
<DocsExample href="components/pagination.html#sizing">
<CPagination size="sm" aria-label="Page navigation example">
<CPaginationItem>Previous</CPaginationItem>
<CPaginationItem>1</CPaginationItem>
@@ -144,7 +144,7 @@
>flexbox utilities</a
>.
</p>
<DocsExample href="components/pagination#aligment">
<DocsExample href="components/pagination.html#aligment">
<CPagination
class="justify-content-center"
aria-label="Page navigation example"
@@ -156,7 +156,7 @@
<CPaginationItem>Next</CPaginationItem>
</CPagination>
</DocsExample>
<DocsExample href="components/pagination#aligment">
<DocsExample href="components/pagination.html#aligment">
<CPagination
class="justify-content-end"
aria-label="Page navigation example"
src/views/base/Popovers.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Popover" href="components/breadcrumb" />
<DocsCallout name="Popover" href="components/popover.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -9,7 +9,7 @@
<strong>Vue Popovers</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<DocsExample href="directives/popover.html#example">
<DocsExample href="components/popover.html#example">
<CButton
color="danger"
size="lg"
@@ -36,7 +36,7 @@
Four options are available: top, right, bottom, and left aligned.
Directions are mirrored when using CoreUI for Vue in RTL.
</p>
<DocsExample href="directives/popover.html#four-directions">
<DocsExample href="components/popover.html#four-directions">
<CButton
color="secondary"
v-c-popover="{
src/views/base/Progress.vue
+16 -16
View File
@@ -1,9 +1,9 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Progress" href="components/progress" />
<CCol :xs="12">
<DocsCallout name="Progress" href="components/progress.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Basic example</small>
@@ -20,7 +20,7 @@
, ensuring you can stack progress bars, animate them, and place text
labels over them.
</p>
<DocsExample href="components/progress">
<DocsExample href="components/progress.html">
<CProgress class="mb-3">
<CProgressBar :value="0" />
</CProgress>
@@ -40,7 +40,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Labels</small>
@@ -50,7 +50,7 @@
Add labels to your progress bars by placing text within the
<code>&lt;CProgressBar&gt;</code>.
</p>
<DocsExample href="components/progress#labels">
<DocsExample href="components/progress.html#labels">
<CProgress class="mb-3">
<CProgressBar :value="25">25%</CProgressBar>
</CProgress>
@@ -58,7 +58,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Height</small>
@@ -70,7 +70,7 @@
inner <code>&lt;CProgressBar&gt;</code> will automatically resize
accordingly.
</p>
<DocsExample href="components/progress#height">
<DocsExample href="components/progress.html#height">
<CProgress :height="1" class="mb-3">
<CProgressBar :value="25"></CProgressBar>
</CProgress>
@@ -81,7 +81,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Backgrounds</small>
@@ -91,7 +91,7 @@
Use <code>color</code> prop to change the appearance of individual
progress bars.
</p>
<DocsExample href="components/progress#backgrounds">
<DocsExample href="components/progress.html#backgrounds">
<CProgress class="mb-3">
<CProgressBar color="success" :value="25" />
</CProgress>
@@ -108,7 +108,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Multiple bars</small>
@@ -117,7 +117,7 @@
<p class="text-medium-emphasis small">
Include multiple progress bars in a progress component if you need.
</p>
<DocsExample href="components/progress#multiple-bars">
<DocsExample href="components/progress.html#multiple-bars">
<CProgress class="mb-3">
<CProgressBar :value="15" />
<CProgressBar color="success" :value="30" />
@@ -127,7 +127,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Striped</small>
@@ -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>
<DocsExample href="components/progress#striped">
<DocsExample href="components/progress.html#striped">
<CProgress class="mb-3">
<CProgressBar color="success" variant="striped" :value="25" />
</CProgress>
@@ -155,7 +155,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Progress</strong> <small>Animated stripes</small>
@@ -167,7 +167,7 @@
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to
left via CSS3 animations.
</p>
<DocsExample href="components/progress#animated-stripes">
<DocsExample href="components/progress.html#animated-stripes">
<CProgress class="mb-3">
<CProgressBar
color="success"
src/views/base/Spinners.vue
+8 -8
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Spinner" href="components/spinner" />
<DocsCallout name="Spinner" href="components/spinner.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -12,7 +12,7 @@
<p class="text-medium-emphasis small">
Use the border spinners for a lightweight loading indicator.
</p>
<DocsExample href="components/spinner">
<DocsExample href="components/spinner.html">
<CSpinner />
</DocsExample>
<p class="text-medium-emphasis small">
@@ -20,7 +20,7 @@
<code>border-color</code>. You can use any of our text color
utilities on the standard spinner.
</p>
<DocsExample href="components/spinner#colors">
<DocsExample href="components/spinner.html#colors">
<CSpinner color="primary" />
<CSpinner color="secondary" />
<CSpinner color="success" />
@@ -43,7 +43,7 @@
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>
<DocsExample href="components/spinner#growing-spinner">
<DocsExample href="components/spinner.html#growing-spinner">
<CSpinner variant="grow" />
</DocsExample>
<p class="text-medium-emphasis small">
@@ -51,7 +51,7 @@
you can easily change its appearance. Here it is in blue, along with
the supported variants.
</p>
<DocsExample href="components/spinner#growing-spinner">
<DocsExample href="components/spinner.html#growing-spinner">
<CSpinner color="primary" variant="grow" />
<CSpinner color="secondary" variant="grow" />
<CSpinner color="success" variant="grow" />
@@ -74,7 +74,7 @@
Add <code>size=&#34;sm&#34;</code> property to make a smaller
spinner that can quickly be used within other components.
</p>
<DocsExample href="components/spinner#size">
<DocsExample href="components/spinner.html#size">
<CSpinner size="sm" />
<CSpinner size="sm" variant="grow" />
</DocsExample>
@@ -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>
<DocsExample href="components/spinner#buttons">
<DocsExample href="components/spinner.html#buttons">
<CButton disabled>
<CSpinner component="span" size="sm" aria-hidden="true" />
</CButton>
@@ -101,7 +101,7 @@
Loading...
</CButton>
</DocsExample>
<DocsExample href="components/spinner#buttons">
<DocsExample href="components/spinner.html#buttons">
<CButton disabled>
<CSpinner
component="span"
src/views/base/Switches.vue
-41
View File
@@ -1,41 +0,0 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Switches</strong>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/checks-radios.html#switches">
<CRow>
<CCol md="4">
<CFormSwitch label="Default switch checkbox input" />
<CFormSwitch label="Checked switch checkbox input" defaultChecked />
<CFormSwitch label="Disabled switch checkbox input" disabled />
<CFormSwitch label="Disabled checked switch checkbox input" defaultChecked disabled />
</CCol>
<CCol md="4">
<CFormSwitch label="Large switch" size="lg"/>
<CFormSwitch label="Large switch" defaultChecked size="lg"/>
<CFormSwitch label="Large switch" disabled size="lg"/>
<CFormSwitch label="Large switch" defaultChecked disabled size="lg"/>
</CCol>
<CCol md="4">
<CFormSwitch label="Extra-large switch" size="xl"/>
<CFormSwitch label="Extra-large switch" defaultChecked size="xl"/>
<CFormSwitch label="Extra-large switch" disabled size="xl"/>
<CFormSwitch label="Extra-large switch" defaultChecked disabled size="xl"/>
</CCol>
</CRow>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Switches",
};
</script>
src/views/base/Tables.vue
+37 -37
View File
@@ -1,9 +1,9 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Table" href="components/table" />
<CCol :xs="12">
<DocsCallout name="Table" href="components/table.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Basic example</small>
@@ -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>
<DocsExample href="components/table">
<DocsExample href="components/table.html">
<CTable>
<CTableHead>
<CTableRow>
@@ -47,7 +47,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Variants</small>
@@ -57,7 +57,7 @@
Use contextual classes to color tables, table rows or individual
cells.
</p>
<DocsExample href="components/table#variants">
<DocsExample href="components/table.html#variants">
<CTable>
<CTableHead>
<CTableRow>
@@ -118,7 +118,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Striped rows</small>
@@ -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>
<DocsExample href="components/table#striped-rows">
<DocsExample href="components/table.html#striped-rows">
<CTable striped>
<CTableHead>
<CTableRow>
@@ -162,7 +162,7 @@
<p class="text-medium-emphasis small">
These classes can also be added to table variants:
</p>
<DocsExample href="components/table#striped-rows">
<DocsExample href="components/table.html#striped-rows">
<CTable color="dark" striped>
<CTableHead>
<CTableRow>
@@ -193,7 +193,7 @@
</CTableBody>
</CTable>
</DocsExample>
<DocsExample href="components/table#striped-rows">
<DocsExample href="components/table.html#striped-rows">
<CTable color="success" striped>
<CTableHead>
<CTableRow>
@@ -227,7 +227,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Hoverable rows</small>
@@ -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>
<DocsExample href="components/table#hoverable-rows">
<DocsExample href="components/table.html#hoverable-rows">
<CTable hover>
<CTableHead>
<CTableRow>
@@ -268,7 +268,7 @@
</CTableBody>
</CTable>
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<DocsExample href="components/table.html#hoverable-rows">
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
@@ -299,7 +299,7 @@
</CTableBody>
</CTable>
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<DocsExample href="components/table.html#hoverable-rows">
<CTable striped hover>
<CTableHead>
<CTableRow>
@@ -333,13 +333,13 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Active tables</small>
</CCardHeader>
<CCardBody>
<DocsExample href="components/table#active-tables">
<DocsExample href="components/table.html#active-tables">
<CTable>
<CTableHead>
<CTableRow>
@@ -372,7 +372,7 @@
</CTableBody>
</CTable>
</DocsExample>
<DocsExample href="components/table#active-tables">
<DocsExample href="components/table.html#active-tables">
<CTable color="dark">
<CTableHead>
<CTableRow>
@@ -408,7 +408,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Bordered tables</small>
@@ -418,7 +418,7 @@
Add <code>bordered</code> property for borders on all sides of the
table and cells.
</p>
<DocsExample href="components/table#bordered-tables">
<DocsExample href="components/table.html#bordered-tables">
<CTable bordered>
<CTableHead>
<CTableRow>
@@ -454,7 +454,7 @@
Border color utilities </a
> can be added to change colors:
</p>
<DocsExample href="components/table#bordered-tables">
<DocsExample href="components/table.html#bordered-tables">
<CTable bordered borderColor="primary">
<CTableHead>
<CTableRow>
@@ -488,7 +488,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Tables without borders</small>
@@ -497,7 +497,7 @@
<p class="text-medium-emphasis small">
Add <code>borderless</code> property for a table without borders.
</p>
<DocsExample href="components/table#tables-without-borders">
<DocsExample href="components/table.html#tables-without-borders">
<CTable borderless>
<CTableHead>
<CTableRow>
@@ -528,7 +528,7 @@
</CTableBody>
</CTable>
</DocsExample>
<DocsExample href="components/table#tables-without-borders">
<DocsExample href="components/table.html#tables-without-borders">
<CTable color="dark" borderless>
<CTableHead>
<CTableRow>
@@ -562,7 +562,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Small tables</small>
@@ -573,7 +573,7 @@
<code>&lt;CTable&gt;</code> more compact by cutting all cell
<code>padding</code> in half.
</p>
<DocsExample href="components/table#small-tables">
<DocsExample href="components/table.html#small-tables">
<CTable small>
<CTableHead>
<CTableRow>
@@ -607,7 +607,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Vertical alignment</small>
@@ -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>
<DocsExample href="components/table#vertical-alignment">
<DocsExample href="components/table.html#vertical-alignment">
<CTable align="middle" responsive>
<CTableHead>
<CTableRow>
@@ -701,7 +701,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Nesting</small>
@@ -711,7 +711,7 @@
Border styles, active styles, and table variants are not inherited
by nested tables.
</p>
<DocsExample href="components/table#nesting">
<DocsExample href="components/table.html#nesting">
<CTable striped>
<CTableHead>
<CTableRow>
@@ -775,7 +775,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Table head</small>
@@ -787,7 +787,7 @@
<code>color=&#34;dark&#34;</code> to make
<code>&lt;CTableHead&gt;</code>s appear light or dark gray.
</p>
<DocsExample href="components/table#table-head">
<DocsExample href="components/table.html#table-head">
<CTable>
<CTableHead color="light">
<CTableRow>
@@ -819,7 +819,7 @@
</CTableBody>
</CTable>
</DocsExample>
<DocsExample href="components/table#table-head">
<DocsExample href="components/table.html#table-head">
<CTable>
<CTableHead color="dark">
<CTableRow>
@@ -853,13 +853,13 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Table foot</small>
</CCardHeader>
<CCardBody>
<DocsExample href="components/table#table-foot">
<DocsExample href="components/table.html#table-foot">
<CTable>
<CTableHead color="light">
<CTableRow>
@@ -901,7 +901,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Table</strong> <small>Captions</small>
@@ -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>
<DocsExample href="components/table#captions">
<DocsExample href="components/table.html#captions">
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@@ -949,7 +949,7 @@
You can also put the <code>&lt;CTableCaption&gt;</code> on the top
of the table with <code>caption=&#34;top&#34;</code>.
</p>
<DocsExample href="components/table#captions">
<DocsExample href="components/table.html#captions">
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
src/views/base/Tabs.vue
-73
View File
@@ -1,73 +0,0 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<strong>Vue Tabs</strong>
</CCardHeader>
<CCardBody>
<DocsExample href="components/tabs.html">
<CNav variant="tabs">
<CNavItem>
<CNavLink href="#" @click="activeTabA=1">
Active
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" @click="activeTabA=2">
Link
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#" @click="activeTabA=3">
Link
</CNavLink>
</CNavItem>
</CNav>
<CTabContent>
<CTabPane :visible="activeTabA == 1">
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</CTabPane>
<CTabPane :visible="activeTabA == 2">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
accusamus tattooed echo park.
</CTabPane>
<CTabPane :visible="activeTabA == 3">
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
</CTabPane>
</CTabContent>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Tabs",
data: function(){
return {
activeTabA: 1,
activeTabB: 1
}
}
};
</script>
src/views/base/Tooltips.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Tooltip" href="components/breadcrumb" />
<DocsCallout name="Tooltip" href="components/tooltip.html" />
</CCol>
<CCol :xs="12">
<CCard>
@@ -12,7 +12,7 @@
<p class="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<DocsExample href="directives/tooltip.html">
<DocsExample href="components/tooltip.html">
<p class="text-medium-emphasis">
Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
@@ -32,7 +32,7 @@
<p class="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<DocsExample href="directives/tooltip.html">
<DocsExample href="components/tooltip.html">
<CButton
color="secondary"
v-c-tooltip="{
src/views/buttons/ButtonGroups.vue
+14 -14
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Button Group" href="components/button-group" />
<DocsCallout name="Button Group" href="components/button-group.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -13,7 +13,7 @@
Wrap a series of <code>&lt;CButton&gt;</code> components in
<code>&lt;CButtonGroup&gt;</code>.
</p>
<DocsExample href="components/button-group">
<DocsExample href="components/button-group.html">
<CButtonGroup role="group" aria-label="Basic example">
<CButton color="primary">Left</CButton>
<CButton color="primary">Middle</CButton>
@@ -25,7 +25,7 @@
alternative to the
<code>&lt;CNav&gt;</code> components.
</p>
<DocsExample href="components/button-group">
<DocsExample href="components/button-group.html">
<CButtonGroup>
<CButton href="#" color="primary" active> Active link </CButton>
<CButton href="#" color="primary"> Link </CButton>
@@ -41,7 +41,7 @@
<strong>Vue Button Group</strong> <span>Mixed styles</span>
</CCardHeader>
<CCardBody>
<DocsExample href="components/button-group#mixed-styles">
<DocsExample href="components/button-group.html#mixed-styles">
<CButtonGroup role="group" aria-label="Basic mixed styles example">
<CButton color="danger">Left</CButton>
<CButton color="warning">Middle</CButton>
@@ -57,7 +57,7 @@
<strong>Vue Button Group</strong> <span>Outlined styles</span>
</CCardHeader>
<CCardBody>
<DocsExample href="components/button-group#outlined-styles">
<DocsExample href="components/button-group.html#outlined-styles">
<CButtonGroup role="group" aria-label="Basic outlined example">
<CButton color="primary" variant="outline"> Left </CButton>
<CButton color="primary" variant="outline"> Middle </CButton>
@@ -78,7 +78,7 @@
seamless looking button group.
</p>
<DocsExample
href="components/button-group#checkbox-and-radio-button-groups"
href="components/button-group.html#checkbox-and-radio-button-groups"
>
<CButtonGroup
role="group"
@@ -93,7 +93,7 @@
</CButtonGroup>
</DocsExample>
<DocsExample
href="components/button-group#checkbox-and-radio-button-groups"
href="components/button-group.html#checkbox-and-radio-button-groups"
>
<CButtonGroup
role="group"
@@ -122,7 +122,7 @@
components. Use utility classes as needed to space out groups,
buttons, and more.
</p>
<DocsExample href="components/button-group#button-toolbar">
<DocsExample href="components/button-group.html#button-toolbar">
<CButtonToolbar
role="group"
aria-label="Toolbar with button groups"
@@ -160,7 +160,7 @@
toolbars. Similar to the example above, you’ll likely need some
utilities through to space items correctly.
</p>
<DocsExample href="components/button-group#button-toolbar">
<DocsExample href="components/button-group.html#button-toolbar">
<CButtonToolbar
class="mb-3"
role="group"
@@ -226,7 +226,7 @@
<code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when
nesting multiple groups.
</p>
<DocsExample href="components/button-group#sizing">
<DocsExample href="components/button-group.html#sizing">
<CButtonGroup
size="lg"
role="group"
@@ -267,7 +267,7 @@
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
combined with a series of buttons.
</p>
<DocsExample href="components/button-group#nesting">
<DocsExample href="components/button-group.html#nesting">
<CButtonGroup
role="group"
aria-label="Button group with nested dropdown"
@@ -300,7 +300,7 @@
horizontally.
<strong>Split button dropdowns are not supported here.</strong>
</p>
<DocsExample href="components/button-group/#vertical-variation">
<DocsExample href="components/button-group.html/#vertical-variation">
<CButtonGroup
vertical
role="group"
@@ -315,7 +315,7 @@
<CButton color="dark">Button</CButton>
</CButtonGroup>
</DocsExample>
<DocsExample href="components/button-group/#vertical-variation">
<DocsExample href="components/button-group.html/#vertical-variation">
<CButtonGroup
vertical
role="group"
@@ -367,7 +367,7 @@
</CDropdown>
</CButtonGroup>
</DocsExample>
<DocsExample href="components/button-group/#vertical-variation">
<DocsExample href="components/button-group.html/#vertical-variation">
<CButtonGroup
vertical
role="group"
src/views/buttons/Buttons.vue
+16 -16
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Button" href="components/buttons" />
<DocsCallout name="Button" href="components/button.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -16,7 +16,7 @@
to initialize operations, both in the background or foreground of an
experience.
</p>
<DocsExample href="components/buttons">
<DocsExample href="components/button.html">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -64,7 +64,7 @@
You can combine button with our
<a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
<DocsExample href="components/buttons">
<DocsExample href="components/button.html">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -124,7 +124,7 @@
<code>role=&#34;button&#34;</code> to adequately communicate their
meaning to assistive technologies such as screen readers.
</p>
<DocsExample href="components/buttons#button-components">
<DocsExample href="components/button.html#button-components">
<CButton component="a" color="primary" href="#" role="button">
Link
</CButton>
@@ -162,7 +162,7 @@
<code>variant=&#34;outline&#34;</code> prop to remove all background
colors.
</p>
<DocsExample href="components/buttons#outline-buttons">
<DocsExample href="components/button.html#outline-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -213,7 +213,7 @@
<code>variant=&#34;ghost&#34;</code> prop to remove all background
colors.
</p>
<DocsExample href="components/buttons#ghost-buttons">
<DocsExample href="components/button.html#ghost-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -263,11 +263,11 @@
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<DocsExample href="components/buttons#sizes">
<DocsExample href="components/button.html#sizes">
<CButton color="primary" size="lg"> Large button </CButton>
<CButton color="secondary" size="lg"> Large button </CButton>
</DocsExample>
<DocsExample href="components/buttons#sizes">
<DocsExample href="components/button.html#sizes">
<CButton color="primary" size="sm"> Small button </CButton>
<CButton color="secondary" size="sm"> Small button </CButton>
</DocsExample>
@@ -280,7 +280,7 @@
<strong>Vue Button</strong> <small>Pill</small>
</CCardHeader>
<CCardBody>
<DocsExample href="components/buttons#pill-buttons">
<DocsExample href="components/button.html#pill-buttons">
<template
v-for="color in [
'primary',
@@ -313,7 +313,7 @@
<strong>Vue Button</strong> <small>Square</small>
</CCardHeader>
<CCardBody>
<DocsExample href="components/buttons#square">
<DocsExample href="components/button.html#square">
<template
v-for="color in [
'primary',
@@ -353,7 +353,7 @@
<code>pointer-events: none</code> applied to, disabling hover and
active states from triggering.
</p>
<DocsExample href="components/buttons#disabled-state">
<DocsExample href="components/button.html#disabled-state">
<CButton color="primary" size="lg" disabled>
Primary button
</CButton>
@@ -371,7 +371,7 @@
<code>aria-disabled=&#34;true&#34;</code> attribute to show the
state of the component to assistive technologies.
</p>
<DocsExample href="components/buttons#disabled-state">
<DocsExample href="components/button.html#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
@@ -398,7 +398,7 @@
Create buttons that span the full width of a parent—by using
utilities.
</p>
<DocsExample href="components/buttons#block-buttons">
<DocsExample href="components/button.html#block-buttons">
<div class="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
@@ -411,7 +411,7 @@
thus nullifying the <code>gap-2</code> utility. Resize your browser
to see them change.
</p>
<DocsExample href="components/buttons#block-buttons">
<DocsExample href="components/button.html#block-buttons">
<div class="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
@@ -423,7 +423,7 @@
use <code>.col-6</code>. Center it horizontally with
<code>.mx-auto</code>, too.
</p>
<DocsExample href="components/buttons#block-buttons">
<DocsExample href="components/button.html#block-buttons">
<div class="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
@@ -436,7 +436,7 @@
button to right align the buttons when they&#39;re no longer
stacked.
</p>
<DocsExample href="components/buttons#block-buttons">
<DocsExample href="components/button.html#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>
src/views/buttons/Dropdowns.vue
+27 -27
View File
@@ -1,12 +1,12 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Dropdown" href="components/dropdown" />
<CCol :xs="12">
<DocsCallout name="Dropdown" href="components/dropdown.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Single button</small>
<strong>Vue Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
@@ -14,7 +14,7 @@
<code>&lt;button&gt;</code>
elements:
</p>
<DocsExample href="components/dropdown#single-button">
<DocsExample href="components/dropdown.html#single-button">
<CDropdown>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
@@ -29,7 +29,7 @@
<p class="text-medium-emphasis small">
The best part is you can do this with any button variant, too:
</p>
<DocsExample href="components/dropdown#single-button">
<DocsExample href="components/dropdown.html#single-button">
<template
v-for="color in [
'primary',
@@ -58,10 +58,10 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Split button</small>
<strong>Vue Dropdown</strong> <small>Split button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
@@ -78,7 +78,7 @@
split button and implement a more properly sized hit area next to
the main button.
</p>
<DocsExample href="components/dropdown#split-button">
<DocsExample href="components/dropdown.html#split-button">
<template
v-for="color in [
'primary',
@@ -110,17 +110,17 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Sizing</small>
<strong>Vue Dropdown</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Button dropdowns work with buttons of all sizes, including default
and split dropdown buttons.
</p>
<DocsExample href="components/dropdown#sizing">
<DocsExample href="components/dropdown.html#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="lg">
Large button
@@ -147,7 +147,7 @@
</CDropdownMenu>
</CDropdown>
</DocsExample>
<DocsExample href="components/dropdown#sizing">
<DocsExample href="components/dropdown.html#sizing">
<CDropdown variant="btn-group">
<CDropdownToggle color="secondary" size="sm">
Small button
@@ -177,10 +177,10 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Single button</small>
<strong>Vue Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
@@ -189,7 +189,7 @@
<code>dark</code> property. No changes are required to the dropdown
items.
</p>
<DocsExample href="components/dropdown#dark-dropdowns">
<DocsExample href="components/dropdown.html#dark-dropdowns">
<CDropdown dark>
<CDropdownToggle color="secondary"
>Dropdown button</CDropdownToggle
@@ -206,10 +206,10 @@
<p class="text-medium-emphasis small">
And putting it to use in a navbar:
</p>
<DocsExample href="components/dropdown#dark-dropdowns">
<DocsExample href="components/dropdown.html#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/">
<a class="navbar-brand" href="https://coreui.io/vue/">
Navbar
</a>
<button
@@ -248,10 +248,10 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropup</small>
<strong>Vue Dropdown</strong> <small>Dropup</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
@@ -260,7 +260,7 @@
<code>&lt;CDropdown&gt;</code>
component.
</p>
<DocsExample href="components/dropdown#dropup">
<DocsExample href="components/dropdown.html#dropup">
<CDropdown variant="btn-group" direction="dropup">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@@ -286,10 +286,10 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropright</small>
<strong>Vue Dropdown</strong> <small>Dropright</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
@@ -298,7 +298,7 @@
<code>&lt;CDropdown&gt;</code>
component.
</p>
<DocsExample href="components/dropdown#dropright">
<DocsExample href="components/dropdown.html#dropright">
<CDropdown variant="btn-group" direction="dropend">
<CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
<CDropdownMenu>
@@ -324,10 +324,10 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>React Dropdown</strong> <small>Dropleft</small>
<strong>Vue Dropdown</strong> <small>Dropleft</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
@@ -336,7 +336,7 @@
<code>&lt;CDropdown&gt;</code>
component.
</p>
<DocsExample href="components/dropdown#dropleft">
<DocsExample href="components/dropdown.html#dropleft">
<CButtonGroup>
<CDropdown variant="btn-group" direction="dropstart">
<CDropdownToggle color="secondary" split />
src/views/charts/CChartBarExample.vue
+21 -10
View File
@@ -1,7 +1,5 @@
<template>
<CChartBar
:data="defaultData"
/>
<CChartBar :data="defaultData" />
</template>
<script>
@@ -10,18 +8,31 @@ export default {
name: 'CChartBarExample',
components: { CChartBar },
computed: {
defaultData () {
defaultData() {
return {
labels: ['months'],
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12]
}
]
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12],
},
],
}
}
}
},
},
}
</script>
src/views/charts/CChartBarSimple.vue
-65
View File
@@ -1,65 +0,0 @@
<template>
<CChartBar
:data="computedData"
/>
</template>
<script>
import { CChartBar } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartBarSimple',
components: { CChartBar },
props: {
...CChartBar.props,
backgroundColor: {
type: String,
default: '#f87979'
},
pointHoverBackgroundColor: String,
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: Boolean
},
computed: {
defaultOptions () {
return {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
}
}
},
computedData () {
return {
labels: ['4','5','6','7','8','9','10','11','12','13','14','15'],
datasets: [
{
data: this.dataPoints,
backgroundColor: getColor(this.backgroundColor),
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
label: this.label,
barPercentage: 0.5,
categoryPercentage: 1
}
],
options: this.defaultOptions
}
},
}
}
</script>
src/views/charts/CChartLineSimple.vue
-83
View File
@@ -1,83 +0,0 @@
<template>
<CChartLine
:data="computedData"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartLineSimple',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: {
type: Boolean,
default: true
},
pointHoverBackgroundColor: String
},
computed: {
pointHoverColor () {
if (this.pointHoverBackgroundColor) {
return this.pointHoverBackgroundColor
} else if (this.backgroundColor !== 'transparent') {
return this.backgroundColor
}
return this.borderColor
},
computedData () {
return {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
datasets: [
{
data: this.dataPoints,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: getColor(this.pointHoverColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
],
options: {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
elements: {
line: {
borderWidth: 2
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4
}
}
}
}
},
}
}
</script>
src/views/charts/CChartLineSimplePointed.vue
-100
View File
@@ -1,100 +0,0 @@
<template>
<CChartLine
:data="computedData"
/>
</template>
<script>
import { CChartLine } from '@coreui/vue-chartjs'
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
export default {
name: 'CChartLineSimplePointed',
components: { CChartLine },
props: {
...CChartLine.props,
borderColor: {
type: String,
default: 'rgba(255,255,255,.55)'
},
backgroundColor: {
type: String,
default: 'transparent'
},
dataPoints: {
type: Array,
default: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
},
label: {
type: String,
default: 'Sales'
},
pointed: {
type: Boolean,
default: true
},
pointHoverBackgroundColor: String
},
computed: {
pointHoverColor () {
if (this.pointHoverBackgroundColor) {
return this.pointHoverBackgroundColor
} else if (this.backgroundColor !== 'transparent') {
return this.backgroundColor
}
return this.borderColor
},
computedData () {
return {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
datasets: [
{
data: this.dataPoints,
borderColor: getColor(this.borderColor),
backgroundColor: getColor(this.backgroundColor),
pointBackgroundColor: getColor(this.pointHoverColor),
pointHoverBackgroundColor: getColor(this.pointHoverColor),
label: this.label
}
],
options: {
scales: {
xAxes: [
{
offset: true,
gridLines: {
color: 'transparent',
zeroLineColor: 'transparent'
},
ticks: {
fontSize: 2,
fontColor: 'transparent'
}
}
],
yAxes: [
{
display: false,
ticks: {
display: false,
min: Math.min.apply(Math, this.dataPoints) - 5,
max: Math.max.apply(Math, this.dataPoints) + 5
}
}
]
},
elements: {
line: {
borderWidth: 1
},
point: {
radius: 4,
hitRadius: 10,
hoverRadius: 4
}
}
}
}
},
}
}
</script>
src/views/charts/Charts.vue
+7 -29
View File
@@ -1,6 +1,6 @@
<template>
<CRow>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>
Line Chart
@@ -10,58 +10,36 @@
</CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCol :md="6" class="mb-4">
<CCard>
<CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
</CCard>
</CCol>
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple line chart</CCardHeader>
<CCardBody>
<CChartLineSimple border-color="success" labels="months"/>
</CCardBody>
</CCard>
</CCol>
<!--
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple pointed chart</CCardHeader>
<CCardBody><CChartLineSimplePointed :pointed="true" border-color="warning"/></CCardBody>
</CCard>
</CCol>
-->
<CCol md="6" class="mt-4">
<CCard>
<CCardHeader>Simple bar chart</CCardHeader>
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
</CCard>
</CCol>
</CRow>
</template>
@@ -73,4 +51,4 @@ export default {
...Charts
}
}
</script>
</script>
src/views/charts/index.js
+1 -7
View File
@@ -1,6 +1,3 @@
import CChartLineSimple from './CChartLineSimple'
import CChartLineSimplePointed from './CChartLineSimplePointed'
import CChartBarSimple from './CChartBarSimple'
import CChartLineExample from './CChartLineExample'
import CChartBarExample from './CChartBarExample'
import CChartDoughnutExample from './CChartDoughnutExample'
@@ -9,13 +6,10 @@ import CChartPieExample from './CChartPieExample'
import CChartPolarAreaExample from './CChartPolarAreaExample'
export {
CChartLineSimple,
CChartLineSimplePointed,
CChartBarSimple,
CChartLineExample,
CChartBarExample,
CChartDoughnutExample,
CChartRadarExample,
CChartPieExample,
CChartPolarAreaExample
}
}
src/views/forms/ChecksRadios.vue
+17 -17
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Check and Radios" href="forms/checks-radios" />
<DocsCallout name="Check and Radios" href="forms/checks-radios.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -9,7 +9,7 @@
<strong>Vue Checkbox</strong>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/checks-radios">
<DocsExample href="forms/checks-radios.html">
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
<CFormCheck
id="flexCheckChecked"
@@ -31,7 +31,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>
<DocsExample href="forms/checks-radios#disabled">
<DocsExample href="forms/checks-radios.html#disabled">
<CFormCheck label="Disabled checkbox" disabled />
<CFormCheck
label="Disabled checked checkbox"
@@ -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>
<DocsExample href="forms/checks-radios#radios">
<DocsExample href="forms/checks-radios.html#radios">
<CFormCheck
type="radio"
name="flexRadioDefault"
@@ -77,7 +77,7 @@
<strong>Vue Radio</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/checks-radios#disabled-1">
<DocsExample href="forms/checks-radios.html#disabled-1">
<CFormCheck
type="radio"
name="flexRadioDisabled"
@@ -108,7 +108,7 @@
<code>switch</code> boolean properly to render a toggle switch.
Switches also support the <code>disabled</code> attribute.
</p>
<DocsExample href="forms/checks-radios#switches">
<DocsExample href="forms/checks-radios.html#switches">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -139,7 +139,7 @@
<strong>Vue Switches</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/checks-radios#sizes">
<DocsExample href="forms/checks-radios.html#sizes">
<CFormSwitch
label="Default switch checkbox input"
id="formSwitchCheckDefault"
@@ -169,11 +169,11 @@
By default, any number of checkboxes and radios that are immediate
sibling will be vertically stacked and appropriately spaced.
</p>
<DocsExample href="forms/checks-radios#default-stacked">
<DocsExample href="forms/checks-radios.html#default-stacked">
<CFormCheck id="defaultCheck1" label="Default checkbox" />
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</DocsExample>
<DocsExample href="forms/checks-radios#default-stacked">
<DocsExample href="forms/checks-radios.html#default-stacked">
<CFormCheck
type="radio"
name="exampleRadios"
@@ -212,7 +212,7 @@
<code>inline</code> boolean property to any
<code>&lt;CFormCheck&gt;</code>.
</p>
<DocsExample href="forms/checks-radios#inline">
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
<CFormCheck
@@ -223,7 +223,7 @@
disabled
/>
</DocsExample>
<DocsExample href="forms/checks-radios#inline">
<DocsExample href="forms/checks-radios.html#inline">
<CFormCheck
inline
type="radio"
@@ -263,7 +263,7 @@
Remember to still provide some form of accessible name for assistive
technologies (for instance, using <code>aria-label</code>).
</p>
<DocsExample href="forms/checks-radios#without-labels">
<DocsExample href="forms/checks-radios.html#without-labels">
<div>
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</div>
@@ -292,7 +292,7 @@
<code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
further be grouped in a button group if needed.
</p>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check"
@@ -300,7 +300,7 @@
label="Single toggle"
/>
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-2"
@@ -309,7 +309,7 @@
defaultChecked
/>
</DocsExample>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'primary' }"
id="btn-check-3"
@@ -319,7 +319,7 @@
/>
</DocsExample>
<h3>Radio toggle buttons</h3>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<CFormCheck
:button="{ color: 'secondary' }"
type="radio"
@@ -360,7 +360,7 @@
Different variants of button, such at the various outlined styles,
are supported.
</p>
<DocsExample href="forms/checks-radios#toggle-buttons">
<DocsExample href="forms/checks-radios.html#toggle-buttons">
<div>
<CFormCheck
:button="{ color: 'primary', variant: 'outline' }"
src/views/forms/FloatingLabels.vue
+12 -12
View File
@@ -1,9 +1,9 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Floating Label" href="forms/floating-label" />
<CCol :xs="12">
<DocsCallout name="Floating Label" href="forms/floating-labels.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong>
@@ -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>
<DocsExample href="forms/floating-labels">
<DocsExample href="forms/floating-labels.html">
<CFormFloating class="mb-3">
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -31,7 +31,7 @@
When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
</p>
<DocsExample href="forms/floating-labels">
<DocsExample href="forms/floating-labels.html">
<CFormFloating>
<CFormInput
type="email"
@@ -45,7 +45,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Textareas</small>
@@ -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>
<DocsExample href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
id="floatingTextarea"
@@ -69,7 +69,7 @@
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
inline or via custom CSS).
</p>
<DocsExample href="forms/floating-labels#textareas">
<DocsExample href="forms/floating-labels.html#textareas">
<CFormFloating>
<CFormTextarea
placeholder="Leave a comment here"
@@ -82,7 +82,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Selects</small>
@@ -97,7 +97,7 @@
Selects with <code>size</code> and <code>multiple</code> are not supported.
</strong>
</p>
<DocsExample href="forms/floating-labels#selects">
<DocsExample href="forms/floating-labels.html#selects">
<CFormFloating>
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
<option>Open this select menu</option>
@@ -111,7 +111,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Floating labels</strong> <small>Layout</small>
@@ -121,7 +121,7 @@
When working with the CoreUI for Bootstrap grid system, be sure to place form elements
within column classes.
</p>
<DocsExample href="forms/floating-labels#layout">
<DocsExample href="forms/floating-labels.html#layout">
<CRow :xs="{ gutter: 2 }">
<CCol md>
<CFormFloating>
src/views/forms/FormControl.vue
+15 -15
View File
@@ -1,15 +1,15 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Control" href="forms/form-control" />
<CCol :xs="12">
<DocsCallout name="Form Control" href="forms/form-control.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/form-control">
<DocsExample href="forms/form-control.html">
<CForm>
<div class="mb-3">
<CFormLabel for="exampleFormControlInput1"
@@ -35,7 +35,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Sizing</small>
@@ -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>
<DocsExample href="forms/form-control#sizing">
<DocsExample href="forms/form-control.html#sizing">
<CFormInput
type="text"
size="lg"
@@ -69,7 +69,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Disabled</small>
@@ -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>
<DocsExample href="forms/form-control#disabled">
<DocsExample href="forms/form-control.html#disabled">
<CFormInput
type="text"
placeholder="Disabled input"
@@ -99,7 +99,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly</small>
@@ -111,7 +111,7 @@
appear lighter (just like disabled inputs), but retain the standard
cursor.
</p>
<DocsExample href="forms/form-control#readonly">
<DocsExample href="forms/form-control.html#readonly">
<CFormInput
type="text"
placeholder="Readonly input here..."
@@ -122,7 +122,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Readonly plain text</small>
@@ -190,13 +190,13 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>File input</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/form-control#file-input">
<DocsExample href="forms/form-control.html#file-input">
<div class="mb-3">
<CFormLabel for="formFile">Default file input example</CFormLabel>
<CFormInput type="file" id="formFile" />
@@ -225,13 +225,13 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Form Control</strong> <small>Color</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/form-control#color">
<DocsExample href="forms/form-control.html#color">
<CFormLabel for="exampleColorInput">Color picker</CFormLabel>
<CFormInput
type="color"
src/views/forms/InputGroup.vue
+12 -12
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol xs=12>
<DocsCallout name="Input Group" href="forms/input-group" />
<DocsCallout name="Input Group" href="forms/input-group.html" />
</CCol>
<CCol xs=12>
<CCard class="mb-4">
@@ -14,7 +14,7 @@
sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
input group.
</p>
<DocsExample href="forms/input-group">
<DocsExample href="forms/input-group.html">
<CInputGroup class="mb-3">
<CInputGroupText id="basic-addon1">@</CInputGroupText>
<CFormInput
@@ -65,7 +65,7 @@
custom form field validation within an input group. You may disable this with
<code>.flex-nowrap</code>.
</p>
<DocsExample href="forms/input-group#wrapping">
<DocsExample href="forms/input-group.html#wrapping">
<CInputGroup class="flex-nowrap">
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
<CFormInput
@@ -92,7 +92,7 @@
<p class="text-medium-emphasis small">
<strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
</p>
<DocsExample href="forms/input-group#sizing">
<DocsExample href="forms/input-group.html#sizing">
<CInputGroup size="sm" class="mb-3">
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
<CFormInput
@@ -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>
<DocsExample href="forms/input-group#checkboxes-and-radios">
<DocsExample href="forms/input-group.html#checkboxes-and-radios">
<CInputGroup class="mb-3">
<CInputGroupText>
<CFormCheck
@@ -163,7 +163,7 @@
styles are only available for input groups with a single
<code>&lt;CFormInput&gt;</code>.
</p>
<DocsExample href="forms/input-group#multiple-inputs">
<DocsExample href="forms/input-group.html#multiple-inputs">
<CInputGroup>
<CInputGroupText>First and last name</CInputGroupText>
<CFormInput aria-label="First name" />
@@ -183,7 +183,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<DocsExample href="forms/input-group#multiple-addons">
<DocsExample href="forms/input-group.html#multiple-addons">
<CInputGroup class="mb-3">
<CInputGroupText>$</CInputGroupText>
<CInputGroupText>0.00</CInputGroupText>
@@ -208,7 +208,7 @@
Multiple add-ons are supported and can be mixed with checkbox and radio input
versions..
</p>
<DocsExample href="forms/input-group#button-addons">
<DocsExample href="forms/input-group.html#button-addons">
<CInputGroup class="mb-3">
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
Button
@@ -260,7 +260,7 @@
<strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#buttons-with-dropdowns">
<DocsExample href="forms/input-group.html#buttons-with-dropdowns">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CDropdownToggle color="secondary" variant="outline">
@@ -328,7 +328,7 @@
<strong>Vue Input group</strong> <small>Segmented buttons</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#segmented-buttons">
<DocsExample href="forms/input-group.html#segmented-buttons">
<CInputGroup class="mb-3">
<CDropdown variant="input-group">
<CButton type="button" color="secondary" variant="outline">
@@ -371,7 +371,7 @@
<strong>Vue Input group</strong> <small>Custom select</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#custom-select">
<DocsExample href="forms/input-group.html#custom-select">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupSelect01">
Options
@@ -426,7 +426,7 @@
<strong>Vue Input group</strong> <small>Custom file input</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/input-group#custom-file-input">
<DocsExample href="forms/input-group.html#custom-file-input">
<CInputGroup class="mb-3">
<CInputGroupText component="label" for="inputGroupFile01">
Upload
src/views/forms/Layout.vue
+19 -43
View File
@@ -11,7 +11,7 @@
for form layouts that require multiple columns, varied widths, and
additional alignment options.
</p>
<DocsExample href="forms/layout#form-grid">
<DocsExample href="forms/layout.html#form-grid">
<CRow>
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -38,7 +38,7 @@
, you can have control over the gutter width in as well the inline
as block direction.
</p>
<DocsExample href="forms/layout#gutters">
<DocsExample href="forms/layout.html#gutters">
<CRow class="g-3">
<CCol xs>
<CFormInput placeholder="First name" aria-label="First name" />
@@ -51,7 +51,7 @@
<p class="text-medium-emphasis small">
More complex layouts can also be created with the grid system.
</p>
<DocsExample href="forms/layout#gutters">
<DocsExample href="forms/layout.html#gutters">
<CForm class="row g-3">
<CCol :md="6">
<CFormLabel for="inputEmail4">Email</CFormLabel>
@@ -122,13 +122,10 @@
removed the <code>padding-top</code> on our stacked radio inputs
label to better align the text baseline.
</p>
<DocsExample href="forms/layout#horizontal-form">
<DocsExample href="forms/layout.html#horizontal-form">
<CForm>
<CRow class="mb-3">
<CFormLabel
for="inputEmail3"
class="col-sm-2 col-form-label"
>
<CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">
Email
</CFormLabel>
<CCol :sm="10">
@@ -202,7 +199,7 @@
correctly follow the size of <code>.form-control-lg</code> and
<code>.form-control-sm</code>.
</p>
<DocsExample href="forms/layout#horizontal-form-label-sizing">
<DocsExample href="forms/layout.html#horizontal-form-label-sizing">
<CRow class="mb-3">
<CFormLabel
for="colFormLabelSm"
@@ -220,10 +217,7 @@
</CCol>
</CRow>
<CRow class="mb-3">
<CFormLabel
for="colFormLabel"
class="col-sm-2 col-form-label"
>
<CFormLabel for="colFormLabel" class="col-sm-2 col-form-label">
Email
</CFormLabel>
<CCol :sm="10">
@@ -270,7 +264,7 @@
rest, with specific column classes like
<code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
</p>
<DocsExample href="forms/layout#column-sizing">
<DocsExample href="forms/layout.html#column-sizing">
<CRow class="g-3">
<CCol sm="{7}">
<CFormInput placeholder="City" aria-label="City" />
@@ -300,22 +294,16 @@
only take up as much space as needed. Put another way, the column
sizes itself based on the contents.
</p>
<DocsExample href="forms/layout#auto-sizing">
<DocsExample href="forms/layout.html#auto-sizing">
<CForm class="row gy-2 gx-3 align-items-center">
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInput"
>
<CFormLabel class="visually-hidden" for="autoSizingInput">
Name
</CFormLabel>
<CFormInput id="autoSizingInput" placeholder="Jane Doe" />
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingInputGroup"
>
<CFormLabel class="visually-hidden" for="autoSizingInputGroup">
Username
</CFormLabel>
<CInputGroup>
@@ -327,10 +315,7 @@
</CInputGroup>
</CCol>
<CCol xs="auto">
<CFormLabel
class="visually-hidden"
for="autoSizingSelect"
>
<CFormLabel class="visually-hidden" for="autoSizingSelect">
Preference
</CFormLabel>
<CFormSelect id="autoSizingSelect">
@@ -356,13 +341,10 @@
You can then remix that once again with size-specific column
classes.
</p>
<DocsExample href="forms/layout#auto-sizing">
<DocsExample href="forms/layout.html#auto-sizing">
<CForm class="row gx-3 gy-2 align-items-center">
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeInputName"
>
<CFormLabel class="visually-hidden" for="specificSizeInputName">
Name
</CFormLabel>
<CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
@@ -383,10 +365,7 @@
</CInputGroup>
</CCol>
<CCol :sm="3">
<CFormLabel
class="visually-hidden"
for="specificSizeSelect"
>
<CFormLabel class="visually-hidden" for="specificSizeSelect">
Preference
</CFormLabel>
<CFormSelect id="specificSizeSelect">
@@ -426,7 +405,7 @@
<code>.align-items-center</code> aligns the form elements to the
middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
</p>
<DocsExample href="forms/layout#inline-forms">
<DocsExample href="forms/layout.html#inline-forms">
<CForm class="row row-cols-lg-auto g-3 align-items-center">
<CCol :xs="12">
<CFormLabel
@@ -444,10 +423,7 @@
</CInputGroup>
</CCol>
<CCol :xs="12">
<CFormLabel
class="visually-hidden"
for="inlineFormSelectPref"
>
<CFormLabel class="visually-hidden" for="inlineFormSelectPref">
Preference
</CFormLabel>
<CFormSelect id="inlineFormSelectPref">
@@ -477,6 +453,6 @@
<script>
export default {
name: "Layout",
};
name: 'Layout',
}
</script>
src/views/forms/Range.vue
+10 -10
View File
@@ -1,9 +1,9 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Range" href="forms/range" />
<CCol :xs="12">
<DocsCallout name="Range" href="forms/range.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small></small>
@@ -14,14 +14,14 @@
<code>&lt;input type=&#34;range&#34;&gt;</code> controls with
<code>&lt;CFormRange&gt;</code>.
</p>
<DocsExample href="forms/range">
<DocsExample href="forms/range.html">
<CFormLabel for="customRange1">Example range</CFormLabel>
<CFormRange id="customRange1" />
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Disabled</small>
@@ -31,14 +31,14 @@
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
<DocsExample href="forms/range#disabled">
<DocsExample href="forms/range.html#disabled">
<CFormLabel for="disabledRange">Disabled range</CFormLabel>
<CFormRange id="disabledRange" disabled />
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Min and max</small>
@@ -50,14 +50,14 @@
You may specify new values for those using the <code>min</code> and
<code>max</code> attributes.
</p>
<DocsExample href="forms/range#min-and-max">
<DocsExample href="forms/range.html#min-and-max">
<CFormLabel for="customRange2">Example range</CFormLabel>
<CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
</DocsExample>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Range</strong> <small>Steps</small>
@@ -69,7 +69,7 @@
below, we double the number of steps by using
<code>step=&#34;0.5&#34;</code>.
</p>
<DocsExample href="forms/range#steps">
<DocsExample href="forms/range.html#steps">
<CFormLabel for="customRange3">Example range</CFormLabel>
<CFormRange
:min="0"
src/views/forms/Select.vue
+10 -10
View File
@@ -1,15 +1,15 @@
<template>
<CRow>
<CCol xs="12">
<DocsCallout name="Form Select" href="forms/select" />
<CCol :xs="12">
<DocsCallout name="Form Select" href="forms/select.html" />
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Default</small>
</CCardHeader>
<CCardBody>
<DocsExample href="forms/select">
<DocsExample href="forms/select.html">
<CFormSelect aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
@@ -20,7 +20,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Sizing</small>
@@ -30,7 +30,7 @@
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
<DocsExample href="forms/select#sizing">
<DocsExample href="forms/select.html#sizing">
<CFormSelect
size="lg"
class="mb-3"
@@ -55,7 +55,7 @@
<p class="text-medium-emphasis small">
The <code>multiple</code> attribute is also supported:
</p>
<DocsExample href="forms/select#sizing">
<DocsExample href="forms/select.html#sizing">
<CFormSelect
size="lg"
multiple
@@ -70,7 +70,7 @@
<p class="text-medium-emphasis small">
As is the <code>htmlSize</code> property:
</p>
<DocsExample href="forms/select#sizing">
<DocsExample href="forms/select.html#sizing">
<CFormSelect
size="lg"
multiple
@@ -85,7 +85,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Select</strong> <small>Disabled</small>
@@ -95,7 +95,7 @@
Add the <code>disabled</code> boolean attribute on a select to give
it a grayed out appearance and remove pointer events.
</p>
<DocsExample href="forms/select#disabled">
<DocsExample href="forms/select.html#disabled">
<CFormSelect aria-label="Disabled select example" disabled>
<option>Open this select menu</option>
<option value="1">One</option>
src/views/forms/Validation.vue
+10 -13
View File
@@ -1,8 +1,5 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Validation" href="forms/validation" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
@@ -24,7 +21,7 @@
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
</p>
<DocsExample href="forms/validation">
<DocsExample href="forms/validation.html">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -88,7 +85,7 @@
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
@@ -99,7 +96,7 @@
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
@@ -124,7 +121,7 @@
While these feedback styles cannot be styled with CSS, you can still
customize the feedback text through JavaScript.
</p>
<DocsExample href="forms/validation#browser-defaults">
<DocsExample href="forms/validation.html#browser-defaults">
<CForm
class="row g-3 needs-validation"
:validated="validatedDefault01"
@@ -189,7 +186,7 @@
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CFormCheck
type="checkbox"
id="invalidCheck"
@@ -200,7 +197,7 @@
You must agree before submitting.
</CFormFeedback>
</CCol>
<CCol xs="12">
<CCol :xs="12">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
@@ -227,7 +224,7 @@
more than one <code>id</code> to be referenced, in case the field
already points to additional form text).
</p>
<DocsExample href="forms/validation#server-side">
<DocsExample href="forms/validation.html#server-side">
<CForm class="row g-3 needs-validation">
<CCol :md="4">
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@@ -339,7 +336,7 @@
<li><code>&lt;CFormSelect&gt;</code>s</li>
<li><code>&lt;CFormCheck&gt;</code>s</li>
</ul>
<DocsExample href="forms/validation#supported-elements">
<DocsExample href="forms/validation.html#supported-elements">
<CForm :validated="true">
<div class="mb-3">
<CFormLabel for="validationTextarea" class="form-label"
@@ -428,7 +425,7 @@
the example below, our column classes have this already, but your
project may require an alternative setup.
</p>
<DocsExample href="forms/validation#tooltips">
<DocsExample href="forms/validation.html#tooltips">
<CForm
class="row g-3 needs-validation"
noValidate
@@ -494,7 +491,7 @@
Please provide a valid zip.
</CFormFeedback>
</CCol>
<CCol xs="12" class="position-relative">
<CCol :xs="12" class="position-relative">
<CButton color="primary" type="submit">Submit form</CButton>
</CCol>
</CForm>
src/views/notifications/Alerts.vue
+6 -6
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Alert" href="components/alert" />
<DocsCallout name="Alert" href="components/alert.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
@@ -15,13 +15,13 @@
<strong>required</strong> contextual <code>color</code> props
(e.g., <code>primary</code>). For inline dismissal, use the
<a
href="https://coreui.io/react/docs/4.0/components/alert#dismissing"
href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
>
dismissing prop
</a>
.
</p>
<DocsExample href="components/alert">
<DocsExample href="components/alert.html">
<CAlert color="primary"
>A simple primary alert—check it out!</CAlert
>
@@ -52,7 +52,7 @@
Use the <code>&lt;CAlertLink&gt;</code> component to immediately
give matching colored links inside any alert.
</p>
<DocsExample href="components/alert#link-color">
<DocsExample href="components/alert.html#link-color">
<CAlert color="primary">
A simple primary alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
@@ -107,7 +107,7 @@
Alert can also incorporate supplementary components &amp; elements
like heading, paragraph, and divider.
</p>
<DocsExample href="components/alert#additional-content">
<DocsExample href="components/alert.html#additional-content">
<CAlert color="success">
<CAlertHeading tag="h4">Well done!</CAlertHeading>
<p>
@@ -135,7 +135,7 @@
Alerts can also be easily dismissed. Just add the
<code>dismissible</code> prop.
</p>
<DocsExample href="components/alert#dismissing">
<DocsExample href="components/alert.html#dismissing">
<CAlert color="warning" dismissible @dismiss="alert">
<strong>Go right ahead</strong> and click that dimiss over there
on the right.
src/views/notifications/Badges.vue
+6 -6
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Badges" href="components/badge" />
<DocsCallout name="Badges" href="components/badge.html" />
</CCol>
<CCol :lg="6">
<CCard class="mb-4">
@@ -13,7 +13,7 @@
Bootstrap badge scale to suit the size of the parent element by
using relative font sizing and <code>em</code> units.
</p>
<DocsExample href="components/badge">
<DocsExample href="components/badge.html">
<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>
@@ -24,7 +24,7 @@
<p class="text-medium-emphasis small">
Badges can be used as part of links or buttons to provide a counter.
</p>
<DocsExample href="components/badge">
<DocsExample href="components/badge.html">
<CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
@@ -37,7 +37,7 @@
Unless the context is clear, consider including additional context
with a visually hidden piece of additional text.
</p>
<DocsExample href="components/badge">
<DocsExample href="components/badge.html">
<CButton color="primary">
Profile <CBadge color="secondary">9</CBadge>
<span class="visually-hidden">unread messages</span>
@@ -56,7 +56,7 @@
Add any of the below-mentioned <code>color</code> props to modify
the presentation of a badge.
</p>
<DocsExample href="components/badge#contextual-variations">
<DocsExample href="components/badge.html#contextual-variations">
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
@@ -76,7 +76,7 @@
Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
badges rounded.
</p>
<DocsExample href="components/badge#pill-badges">
<DocsExample href="components/badge.html#pill-badges">
<CBadge color="primary" shape="rounded-pill"> primary </CBadge>
<CBadge color="success" shape="rounded-pill"> success </CBadge>
<CBadge color="danger" shape="rounded-pill"> danger </CBadge>
src/views/notifications/Modals.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Modal" href="components/spinner" />
<DocsCallout name="Modal" href="components/modal.html" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
src/views/theme/ColorTheme.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
<CCol xl="2" md="4" sm="6" :xs="12" class="mb-4">
<div
:class="['theme-color w-75 rounded mb-3', color]"
style="padding-top:75%;"
@@ -18,4 +18,4 @@ export default {
color: String,
}
}
</script>
</script>