+ Click the accordions below to expand/collapse the accordion content.
+
+
+
+
+
+
+ Accordion Item #1
+
+
+
+
+ This is the first item's accordion body. It
+ is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These
+ classes control the overall appearance, as well as the
+ showing and hiding via CSS transitions. You can modify any
+ of this with custom CSS or overriding our default variables.
+ It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the
+ transition does limit overflow.
+
+
+
+
+
+
+ Accordion Item #2
+
+
+
+
+ This is the second item's accordion body.
+ It is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These
+ classes control the overall appearance, as well as the
+ showing and hiding via CSS transitions. You can modify any
+ of this with custom CSS or overriding our default variables.
+ It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the
+ transition does limit overflow.
+
+
+
+
+
+
+ Accordion Item #3
+
+
+
+
+ This is the third item's accordion body. It
+ is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These
+ classes control the overall appearance, as well as the
+ showing and hiding via CSS transitions. You can modify any
+ of this with custom CSS or overriding our default variables.
+ It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the
+ transition does limit overflow.
+
+
+
+
+
+
+
+
+
+ Vue Accordion Flush
+
+
+
+ Add flush to remove the default
+ background-color, some borders, and some rounded
+ corners to render accordions edge-to-edge with their parent
+ container.
+
+
+
+
+
+
+ Accordion Item #1
+
+
+
+
+ This is the first item's accordion body. It
+ is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These
+ classes control the overall appearance, as well as the
+ showing and hiding via CSS transitions. You can modify any
+ of this with custom CSS or overriding our default variables.
+ It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the
+ transition does limit overflow.
+
+
+
+
+
+
+ Accordion Item #2
+
+
+
+
+ This is the second item's accordion body.
+ It is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These
+ classes control the overall appearance, as well as the
+ showing and hiding via CSS transitions. You can modify any
+ of this with custom CSS or overriding our default variables.
+ It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the
+ transition does limit overflow.
+
+
+
+
+
+
+ Accordion Item #3
+
+
+
+
+ This is the third item's accordion body. It
+ is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These
+ classes control the overall appearance, as well as the
+ showing and hiding via CSS transitions. You can modify any
+ of this with custom CSS or overriding our default variables.
+ It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the
+ transition does limit overflow.
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 5f94dec7..e1c289b2 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -1,24 +1,56 @@
-
-
+
+
+
+
+ Vue Breadcrumb
-
+
+ The breadcrumb navigation provides links back to each previous page
+ the user navigated through and shows the current location in a
+ website or an application. You don’t have to add separators, because
+ they automatically added in CSS through
+
+ ::before
+
+ and
+
+ content
+
+ .
+
+
- Home
-
-
- Home
+
+ Home
+ Library
- Home
- Library
+
+ Home
+
+
+ Library
+ Data
+
+
+ Home
+
+
+ Library
+
+
+ Data
+
+ Bootstrap
+
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
new file mode 100644
index 00000000..7ac093b5
--- /dev/null
+++ b/src/views/base/Cards.vue
@@ -0,0 +1,1279 @@
+
+
+
+
+
+
+
+
+ Card Example
+
+
+
+ Cards are built with as little markup and styles as possible but
+ still manage to deliver a bunch of control and customization. Built
+ with flexbox, they offer easy alignment and mix well with other
+ CoreUI components. Cards have no top, left, and right margins by
+ default, so use
+ spacing utilities
+ as needed. They have no fixed width to start, so they'll fill
+ the full width of its parent.
+
+
+ Below is an example of a basic card with mixed content and a fixed
+ width. Cards have no fixed width to start, so they'll naturally
+ fill the full width of its parent element.
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ Some quick example text to build on the card title and make up
+ the bulk of the card's content.
+
+ Go somewhere
+
+
+
+
+
+
+
+
+ Card Body
+
+
+ The main block of a card is the <CCardBody>. Use
+ it whenever you need a padded section within a card.
+
+
+
+ This is some text within a card body.
+
+
+
+
+
+
+
+
+ Card Titles, text, and links
+
+
+
+ Card titles are managed by
+ <CCardTitle> component. Identically, links are
+ attached and collected next to each other by
+ <CCardLink>
+ component.
+
+
+ Subtitles are managed by
+ <CCardSubtitle> component. If the
+ <CCardTitle> also, the
+ <CCardSubtitle> items are stored in a
+ <CCardBody> item, the card title, and subtitle
+ are arranged rightly.
+
+
+
+
+ Card title
+ Card subtitle
+
+ Some quick example text to build on the card title and make up
+ the bulk of the card's content.
+
+ Card link
+ Another link
+
+
+
+
+
+
+
+
+ Card Images
+
+
+ .card-img-top places a picture to the top of the card.
+ With .card-text, text can be added to the card. Text
+ within .card-text can additionally be styled with the
+ regular HTML tags.
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+
+ Some quick example text to build on the card title and make up
+ the bulk of the card's content.
+
+
+
+
+
+
+
+
+
+
+ Card List groups
+
+
+
+ Create lists of content in a card with a flush list group.
+
+
+
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Vestibulum at eros
+
+
+
+
+
+ Header
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Vestibulum at eros
+
+
+
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Vestibulum at eros
+
+ Footer
+
+
+
+
+
+
+
+
+
+
+ Card Kitchen sink
+
+
+
+ Combine and match many content types to build the card you need, or
+ throw everything in there. Shown below are image styles, blocks,
+ text styles, and a list group—all wrapped in a fixed-width card.
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ Some quick example text to build on the card title and make up
+ the bulk of the card's content.
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Vestibulum at eros
+
+
+ Card link
+ Another link
+
+
+
+
+
+
+
+
+
+ Card Header and footer
+
+
+
+ Add an optional header and/or footer within a card.
+
+
+
+ Header
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+ Card headers can be styled by adding ex.
+ component="h5".
+
+
+
+ Header
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+
+ Quote
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Integer posuere erat a ante.
+
+
+
+
+
+
+
+
+ Header
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+ 2 days ago
+
+
+
+
+
+
+
+ Card Body
+
+
+ Cards assume no specific width to start, so they'll
+ be 100% wide unless otherwise stated. You can adjust this as
+ required with custom CSS, grid classes, grid Sass mixins, or
+ services.
+
+
Using grid markup
+
+ Using the grid, wrap cards in columns and rows as needed.
+
+
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to
+ additional content.
+
+ Go somewhere
+
+
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to
+ additional content.
+
+ Go somewhere
+
+
+
+
+
+
+
+
+
+ Card title
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+ Card title
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+ Using custom CSS
+
+ Use custom CSS in your stylesheets or as inline styles to set a
+ width.
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+
+
+
+
+
+ Card Text alignment
+
+
+
+ You can instantly change the text arrangement of any card—in its
+ whole or specific parts—with
+ text align classes
+ .
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+
+
+
+
+
+ Card Navigation
+
+
+
+ Add some navigation to a <CCardHeader> with our
+ <CNav> component.
+
+
+
+
+
+
+ Active
+
+
+ Link
+
+
+ Disabled
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+
+
+
+
+ Active
+
+
+ Link
+
+
+ Disabled
+
+
+
+
+ Special title treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+
+
+
+
+
+ Card Image caps
+
+
+
+ Similar to headers and footers, cards can include top and bottom
+ "image caps"—images at the top or bottom of a card.
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+ Last updated 3 mins ago
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Card styles
+
+
+
+ Cards include various options for customizing their backgrounds,
+ borders, and color.
+
+
Background and color
+
+ Use color property to change the appearance of a card.
+
+
+
+ {[ { color: 'primary', textColor: 'white' }, { color: 'secondary',
+ textColor: 'white' }, { color: 'success', textColor: 'white' }, {
+ color: 'danger', textColor: 'white' }, { color: 'warning' }, {
+ color: 'info', textColor: 'white' }, { color: 'light' }, { color:
+ 'dark', textColor: 'white' }, ].map((item, index) => (
+
+
+ Header
+
+ {item.color} card title
+
+ Some quick example text to build on the card title and
+ make up the bulk of the card's content.
+
+
+
+
+ ))}
+
+
+
Border
+
+ Use
+ border utilities
+ to change just the border-color of a card. Note that
+ you can set textColor property on the
+ <CCard> or a subset of the card's contents as
+ shown below.
+
+
+
+
+ Header
+
+ {{ item.color }} card title
+ Some quick example text to build on the card title and make
+ up the bulk of the card's content.
+
+
+
+
+
Top border
+
+ Use
+ border utilities
+ to change just the border-color of a card. Note that
+ you can set textColor property on the
+ <CCard> or a subset of the card's contents as
+ shown below.
+
+
+
+
+ Header
+
+ {{item.color}} card title
+ Some quick example text to build on the card title and make up the bulk of the card's content.
+
+
+
+
+
+
+
+
+
+
+ Card Card groups
+
+
+
+ Use card groups to render cards as a single, attached element with
+ equal width and height columns. Card groups start off stacked and
+ use display: flex; to become attached with uniform
+ dimensions starting at the sm breakpoint.
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a natural
+ lead-in to additional content. This content is a little bit
+ longer.
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This card has supporting text below as a natural lead-in to
+ additional content.
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a natural
+ lead-in to additional content. This card has even longer
+ content than the first to show that equal height action.
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ When using card groups with footers, their content will
+ automatically line up.
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a natural
+ lead-in to additional content. This content is a little bit
+ longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This card has supporting text below as a natural lead-in to
+ additional content.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a natural
+ lead-in to additional content. This card has even longer
+ content than the first to show that equal height action.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+ Card Grid cards
+
+
+
+ Use the CRow component and set
+ {xs|sm|md|lg|xl|xxl}={{ cols: *
+ }}
+ property to control how many grid columns (wrapped around your
+ cards) you show per row. For example, here's
+ xs={{cols: 1}} laying out the cards
+ on one column, and
+ md={{cols: 1}} splitting four cards
+ to equal width across multiple rows, from the medium breakpoint up.
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ Change it to md={{ cols: 3}} and
+ you'll see the fourth card wrap.
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+ Placeholder
+
+
+ Image cap
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a
+ natural lead-in to additional content. This content is a
+ little bit longer.
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
new file mode 100644
index 00000000..86b2e541
--- /dev/null
+++ b/src/views/base/Carousels.vue
@@ -0,0 +1,255 @@
+
+
+
+
+
+ Vue Carousels Slide only
+
+
+
+ You can add captions to slides with the
+ <CCarouselCaption> element within any
+ <CCarouselItem>. They can be immediately hidden
+ on smaller viewports, as shown below, with optional
+ display utilities. We hide them with .d-none and draw them back on
+ medium-sized devices with .d-md-block.
+
+
+
+
+
+
+
First slide label
+
+ Some representative placeholder content for the first slide.
+
+
+
+
+
+
+
First slide label
+
+ Some representative placeholder content for the first slide.
+
+
+
+
+
+
+
First slide label
+
+ Some representative placeholder content for the first slide.
+
+
+
+
+
+
+
+
+
+ Vue Carousels Crossfade
+
+
+
+ Add transition="crossfade" to your carousel to
+ animate slides with a fade transition instead of a slide.
+
+ Add dark property to the CCarousel for
+ darker controls, indicators, and captions. Controls have been
+ inverted from their default white fill with the
+ filter CSS property. Captions and controls have
+ additional Sass variables that customize the color and
+ background-color.
+
With a toggler on the left and brand name on the right:
+
+
+
+
+ Navbar
+
+
+
+
+ Home
+
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+ Search
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
new file mode 100644
index 00000000..1abd31a5
--- /dev/null
+++ b/src/views/base/Navs.vue
@@ -0,0 +1,250 @@
+
+
+
+
+
+ Vue Nav
+
+
+
Base Nav
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Nav horizontal alignment
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Nav right alignment
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Vertical nav
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Tabs nav
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Pills nav
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Fill nav
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Justified nav
+
+
+
+
+ Active
+
+
+
+ Link
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Vue nav with dropdown
+
+
+
+
+ Active
+
+
+
+ Dropdown button
+
+ Action
+ Another action
+ Something else here
+
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
Vue pills nav with dropdown
+
+
+
+
+ Active
+
+
+
+ Dropdown button
+
+ Action
+ Another action
+ Something else here
+
+
+
+ Link
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
new file mode 100644
index 00000000..301c5b03
--- /dev/null
+++ b/src/views/base/Paginations.vue
@@ -0,0 +1,181 @@
+
+
+
+
+
+
+
+
+ Vue Pagination
+
+
+
+ We use a large block of connected links for our pagination, making
+ links hard to miss and easily scalable—all while providing large hit
+ areas. Pagination is built with list HTML elements so screen readers
+ can announce the number of available links. Use a wrapping
+ <nav> element to identify it as a navigation
+ section to screen readers and other assistive technologies.
+
+
+ In addition, as pages likely have more than one such navigation
+ section, it's advisable to provide a descriptive
+ aria-label for the <nav> to reflect
+ its purpose. For example, if the pagination component is used to
+ navigate between a set of search results, an appropriate label could
+ be aria-label="Search results pages".
+
+
+
+ Previous
+ 1
+ 2
+ 3
+ Next
+
+
+
+
+
+
+
+
+ Vue Pagination Working with icons
+
+
+
+ Looking to use an icon or symbol in place of text for some
+ pagination links? Be sure to provide proper screen reader support
+ with aria attributes.
+
+ Pagination links are customizable for different circumstances. Use
+ disabled for links that appear un-clickable and
+ .active to indicate the current page.
+
+
+ While the disabled prop uses
+ pointer-events: none to try to disable the
+ link functionality of <a>s, that CSS property is
+ not yet standardized and doesn'taccount for keyboard navigation.
+ As such, we always add tabindex="-1" on
+ disabled links and use custom JavaScript to fully disable their
+ functionality.
+
+
+ Popover on top
+ Popover on right
+ Popover on bottom
+ Popover on left
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue
new file mode 100644
index 00000000..ee620b4d
--- /dev/null
+++ b/src/views/base/Progress.vue
@@ -0,0 +1,214 @@
+
+
+
+
+
+
+
+
+ Vue Progress Basic example
+
+
+
+ Progress components are built with two HTML elements, some CSS to
+ set the width, and a few attributes. We don'tuse
+
+ the HTML5 <progress> element
+
+ , ensuring you can stack progress bars, animate them, and place text
+ labels over them.
+
+ Table cells of <CTableHead> are always vertical
+ aligned to the bottom. Table cells in
+ <CTableBody> inherit their alignment from
+ <CTable> and are aligned to the the top by
+ default. Use the align property to re-align where needed.
+
+
+
+
+
+
+ Heading 1
+
+
+ Heading 2
+
+
+ Heading 3
+
+
+ Heading 4
+
+
+
+
+
+
+ This cell inherits vertical-align: middle; from
+ the table
+
+
+ This cell inherits vertical-align: middle; from
+ the table
+
+
+ This cell inherits vertical-align: middle; from
+ the table
+
+
+ This here is some placeholder text, intended to take up
+ quite a bit of vertical space, to demonsCTableRowate how the
+ vertical alignment works in the preceding cells.
+
+
+
+
+ This cell inherits vertical-align: bottom; from
+ the table row
+
+
+ This cell inherits vertical-align: bottom; from
+ the table row
+
+
+ This cell inherits vertical-align: bottom; from
+ the table row
+
+
+ This here is some placeholder text, intended to take up
+ quite a bit of vertical space, to demonsCTableRowate how the
+ vertical alignment works in the preceding cells.
+
+
+
+
+ This cell inherits vertical-align: middle; from
+ the table
+
+
+ This cell inherits vertical-align: middle; from
+ the table
+
+ This cell is aligned to the top.
+
+ This here is some placeholder text, intended to take up
+ quite a bit of vertical space, to demonsCTableRowate how the
+ vertical alignment works in the preceding cells.
+
+
+
+
+
+
+
+
+
+
+
+ Vue Table Nesting
+
+
+
+ Border styles, active styles, and table variants are not inherited
+ by nested tables.
+
+
+
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+
+
+
+
+ Header
+ Header
+ Header
+
+
+
+
+ A
+ First
+ Last
+
+
+ B
+ First
+ Last
+
+
+ C
+ First
+ Last
+
+
+
+
+
+
+ 3
+ Larry the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+ Vue Table Table head
+
+
+
+ Similar to tables and dark tables, use the modifier prop
+ color="light" or
+ color="dark" to make
+ <CTableHead>s appear light or dark gray.
+
+ A <CTableCaption> functions like a heading for a
+ table. It helps users with screen readers to find a table and
+ understand what it's about and decide if they want to read it.
+
+
+
+ List of users
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+ You can also put the <CTableCaption> on the top
+ of the table with caption="top".
+
+
+
+ List of users
+
+
+ #
+ Class
+ Heading
+ Heading
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
new file mode 100644
index 00000000..16da3f09
--- /dev/null
+++ b/src/views/base/Tabs.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+ Vue Tabs
+
+
+
+
+
+
+ Active
+
+
+
+
+ Link
+
+
+
+
+ Link
+
+
+
+
+
+ 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.
+
+
+ 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.
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
new file mode 100644
index 00000000..eda7dce9
--- /dev/null
+++ b/src/views/base/Tooltips.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Vue Tooltips
+
+
+
Tooltips example
+
+
+ Tight pants next level keffiyeh
+ you probably
+ haven't heard of them.
+ Photo booth beard raw denim letterpress vegan messenger
+ bag stumptown. Farm-to-table seitan, mcsweeney's fixie
+ sustainable quinoa 8-bit american apparel
+ have a
+ terry richardson vinyl chambray. Beard stumptown,
+ cardigans banh mi lomo thundercats. Tofu biodiesel
+ williamsburg marfa, four loko mcsweeney''s cleanse
+ vegan chambray. A really ironic artisan
+ whatever keytar
+ scenester farm-to-table banksy Austin
+ twitter handle
+ freegan cred raw denim single-origin coffee viral.
+
+
+
Tooltips placements
+
+ Tooltip on top
+ Tooltip on right
+ Tooltip on bottom
+ Tooltip on left
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
new file mode 100644
index 00000000..b05b7f59
--- /dev/null
+++ b/src/views/buttons/BrandButtons.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+ Vue Brand Buttons
+
+
+
+ TODO: check did I should remove brand-buttons
+
+
+
+
+
+ {{brandName}}
+
+
+
+
+
+
+ {{brandName}}
+
+
+
+
+
+
+ {{brandName}}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/buttons/ButtonDropdowns.vue b/src/views/buttons/ButtonDropdowns.vue
new file mode 100644
index 00000000..f4867580
--- /dev/null
+++ b/src/views/buttons/ButtonDropdowns.vue
@@ -0,0 +1,305 @@
+
+
+
+
+
+ Vue Button Dropdowns
+
+
+
+
+
+
+
+ Dropup
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+ Split dropup
+
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+
+
+ Dropend
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+ Split dropend
+
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+
+
+ Dropstart
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+ Split dropstart
+
+
+
+
Responsive alignment
+
+
+ Left-aligned but right aligned when large screen
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+
+
+ Right-aligned but left aligned when large screen
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+
+
Dropdown menu content examples
+
+
+ Dropdown header
+ Action
+ Another action
+
+
+
+
+ Action
+ Another action
+ Something else here
+
+ Separated link
+
+
+
+
+
+ Some example text that's free-flowing within the dropdown menu.
+
+
+ And this is more example text.
+
+
+
+
+
+
+
+ Email address
+
+
+
+ Password
+
+
+
+
+
+ Sign in
+
+
+ New around here? Sign up
+ Forgot password?
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
new file mode 100644
index 00000000..5f5021b4
--- /dev/null
+++ b/src/views/buttons/ButtonGroups.vue
@@ -0,0 +1,232 @@
+
+
+
+
+
+ Vue Button Groups
+
+
+
Basic example
+
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+
+
+
+ Active link
+ Link
+ Link
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartBarExample.vue b/src/views/charts/CChartBarExample.vue
new file mode 100644
index 00000000..32da4e44
--- /dev/null
+++ b/src/views/charts/CChartBarExample.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartBarSimple.vue b/src/views/charts/CChartBarSimple.vue
new file mode 100644
index 00000000..53f8ec43
--- /dev/null
+++ b/src/views/charts/CChartBarSimple.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartDoughnutExample.vue b/src/views/charts/CChartDoughnutExample.vue
new file mode 100644
index 00000000..a79aceed
--- /dev/null
+++ b/src/views/charts/CChartDoughnutExample.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartLineExample.vue b/src/views/charts/CChartLineExample.vue
new file mode 100644
index 00000000..f8e030ea
--- /dev/null
+++ b/src/views/charts/CChartLineExample.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartLineSimple.vue b/src/views/charts/CChartLineSimple.vue
new file mode 100644
index 00000000..6d7954c0
--- /dev/null
+++ b/src/views/charts/CChartLineSimple.vue
@@ -0,0 +1,83 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartLineSimplePointed.vue b/src/views/charts/CChartLineSimplePointed.vue
new file mode 100644
index 00000000..0268a9ea
--- /dev/null
+++ b/src/views/charts/CChartLineSimplePointed.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartPieExample.vue b/src/views/charts/CChartPieExample.vue
new file mode 100644
index 00000000..a17f9fd3
--- /dev/null
+++ b/src/views/charts/CChartPieExample.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartPolarAreaExample.vue b/src/views/charts/CChartPolarAreaExample.vue
new file mode 100644
index 00000000..dbffa994
--- /dev/null
+++ b/src/views/charts/CChartPolarAreaExample.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/CChartRadarExample.vue b/src/views/charts/CChartRadarExample.vue
new file mode 100644
index 00000000..8413bd25
--- /dev/null
+++ b/src/views/charts/CChartRadarExample.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
new file mode 100644
index 00000000..90492dac
--- /dev/null
+++ b/src/views/charts/Charts.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+ Line Chart
+
+
+
+
+
+
+
+
+ Bar Chart
+
+
+
+
+
+ Doughnut Chart
+
+
+
+
+
+ Radar Chart
+
+
+
+
+
+ Pie Chart
+
+
+
+
+
+ Polar Area Chart
+
+
+
+
+
+ Simple line chart
+
+
+
+
+
+
+
+
+ Simple bar chart
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/charts/index.js b/src/views/charts/index.js
new file mode 100644
index 00000000..76497d5f
--- /dev/null
+++ b/src/views/charts/index.js
@@ -0,0 +1,21 @@
+import CChartLineSimple from './CChartLineSimple'
+import CChartLineSimplePointed from './CChartLineSimplePointed'
+import CChartBarSimple from './CChartBarSimple'
+import CChartLineExample from './CChartLineExample'
+import CChartBarExample from './CChartBarExample'
+import CChartDoughnutExample from './CChartDoughnutExample'
+import CChartRadarExample from './CChartRadarExample'
+import CChartPieExample from './CChartPieExample'
+import CChartPolarAreaExample from './CChartPolarAreaExample'
+
+export {
+ CChartLineSimple,
+ CChartLineSimplePointed,
+ CChartBarSimple,
+ CChartLineExample,
+ CChartBarExample,
+ CChartDoughnutExample,
+ CChartRadarExample,
+ CChartPieExample,
+ CChartPolarAreaExample
+}
\ No newline at end of file
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue
new file mode 100644
index 00000000..b06a1877
--- /dev/null
+++ b/src/views/forms/ChecksRadios.vue
@@ -0,0 +1,411 @@
+
+
+
+
+
+
+
+
+ React Checkbox
+
+
+
+
+
+
+
+
+
+
+
+
+ React Checkbox Disabled
+
+
+
+ Add the disabled attribute and the associated
+ <label>s are automatically styled to match with a
+ lighter color to help indicate the input's state.
+
+
+
+
+
+
+
+
+
+
+
+ React Radio
+
+
+
+ Add the disabled attribute and the associated
+ <label>s are automatically styled to match with a
+ lighter color to help indicate the input's state.
+
+ A switch has the markup of a custom checkbox but uses the
+ switch boolean properly to render a toggle switch.
+ Switches also support the disabled attribute.
+
+ Remember to still provide some form of accessible name for assistive
+ technologies (for instance, using aria-label).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle buttons
+
+
+
+ Create button-like checkboxes and radio buttons by using
+ button boolean property on the
+ <CFormCheck> component. These toggle buttons can
+ further be grouped in a button group if needed.
+
+
+
+
+
+
+
+
+
+
+
Radio toggle buttons
+
+
+
+
+
+
+
Outlined styles
+
+ Different variants of button, such at the various outlined styles,
+ are supported.
+
+ Wrap a pair of <CFormInput> and <CFormLabel>
+ elements in CFormFloating to enable floating labels with textual form
+ fields. A placeholder is required on each <CFormInput>
+ as our method of CSS-only floating labels uses the :placeholder-shown
+ pseudo-element. Also note that the <CFormInput> must come first so
+ we can utilize a sibling selector (e.g., ~).
+
+
+
+
+ Email address
+
+
+
+ Password
+
+
+
+ When there's a value already defined, <CFormLabel>
+ s will automatically adjust to their floated position.
+
+ By default, <CFormTextarea>s will be the same height as
+ <CFormInput>s.
+
+
+
+
+ Comments
+
+
+
+ To set a custom height on your <CFormTextarea;>, do not use the
+ rows attribute. Instead, set an explicit height (either
+ inline or via custom CSS).
+
+ Other than <CFormInput>, floating labels are only available on
+ <CFormSelect>s. They work in the same way, but unlike
+ <CFormInput>s, they'll always show the
+ <CFormLabel> in its floated state.
+
+ Selects with size and multiple are not supported.
+
+
+ Add the disabled boolean attribute on an input to give
+ it a grayed out appearance and remove pointer events.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Vue Form Control Readonly
+
+
+
+ Add the readOnly boolean attribute on an input to
+ prevent modification of the input's value. Read-only inputs
+ appear lighter (just like disabled inputs), but retain the standard
+ cursor.
+
+
+
+
+
+
+
+
+
+
+ Vue Form Control Readonly plain text
+
+
+
+ If you want to have <input readonly> elements in
+ your form styled as plain text, use the
+ plainText boolean property to remove the default form
+ field styling and preserve the correct margin and padding.
+
+
+
+
+ Email
+
+
+
+
+
+
+
+ Password
+
+
+
+
+
+
+
+
+
+
+ Email
+
+
+
+
+
+ Password
+
+
+
+
+
+ Confirm identity
+
+
+
+
+
+
+
+
+
+
+ Vue Form Control File input
+
+
+
+
+ Default file input example
+
+
+
+ Multiple files input example
+
+
+
+ Disabled file input example
+
+
+
+ Small file input example
+
+
+
+ Large file input example
+
+
+
+
+
+
+
+
+
+ Vue Form Control Color
+
+
+
+ Color picker
+
+
+
+
+
+
+
+
+
diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue
new file mode 100644
index 00000000..6bef631a
--- /dev/null
+++ b/src/views/forms/InputGroup.vue
@@ -0,0 +1,485 @@
+
+
+
+
+
+
+
+
+ Vue Input group Basic example
+
+
+
+ Place one add-on or button on either side of an input. You may also place one on both
+ sides of an input. Remember to place <CFormLabel>s outside the
+ input group.
+
+ Input groups wrap by default via flex-wrap: wrap in order to accommodate
+ custom form field validation within an input group. You may disable this with
+ .flex-nowrap.
+
+ Add the relative form sizing classes to the <CInputGroup> itself
+ and contents within will automatically resize—no need for repeating the form control
+ size classes on each element.
+
+
+ Sizing on the individual input group elements isn'tsupported.
+
+
+
+ Small
+
+
+
+ Default
+
+
+
+ Large
+
+
+
+
+
+
+
+
+
+ Vue Input group Checkboxes and radios
+
+
+
+ Place any checkbox or radio option within an input group's addon instead of text.
+
+ More complex forms can be built using our grid classes. Use these
+ for form layouts that require multiple columns, varied widths, and
+ additional alignment options.
+
+ Create horizontal forms with the grid by adding the
+ .row class to form groups and using the
+ .col-*-* classes to specify the width of your labels
+ and controls. Be sure to add .col-form-label to your
+ <CFormLabel>s as well so they're vertically
+ centered with their associated form controls.
+
+
+ At times, you maybe need to use margin or padding utilities to
+ create that perfect alignment you need. For example, we've
+ removed the padding-top on our stacked radio inputs
+ label to better align the text baseline.
+
+ Be sure to use .col-form-label-sm or
+ .col-form-label-lg to your
+ <CFormLabel>s or <legend>s to
+ correctly follow the size of .form-control-lg and
+ .form-control-sm.
+
+ As shown in the previous examples, our grid system allows you to
+ place any number of
+ <CCol>s within a <CRow>.
+ They'll split the available width equally between them. You may
+ also pick a subset of your columns to take up more or less space,
+ while the remaining <CCol>s equally split the
+ rest, with specific column classes like
+ <CCol sm="7">.
+
+ The example below uses a flexbox utility to vertically center the
+ contents and changes
+ <CCol> to
+ <CCol xs="auto"> so that your columns
+ only take up as much space as needed. Put another way, the column
+ sizes itself based on the contents.
+
+ Use the <CCol xs="auto"> class to create
+ horizontal layouts. By adding
+ gutter modifier classes, we will have gutters in horizontal and vertical directions. The
+ .align-items-center aligns the form elements to the
+ middle, making the <CFormCheck> align properly.
+
+
+ Example range
+
+
+
+
+
+
+
+
+ Vue Range Disabled
+
+
+
+ Add the disabled boolean attribute on an input to give
+ it a grayed out appearance and remove pointer events.
+
+
+ Disabled range
+
+
+
+
+
+
+
+
+ Vue Range Min and max
+
+
+
+ Range inputs have implicit values for min and
+ max— 0 and 100, respectively.
+ You may specify new values for those using the min and
+ max attributes.
+
+
+ Example range
+
+
+
+
+
+
+
+
+ Vue Range Steps
+
+
+
+ By default, range inputs "snap" to integer values. To change
+ this, you can specify a step value. In the example
+ below, we double the number of steps by using
+ step="0.5".
+
+ For custom CoreUI form validation messages, you'll need to add
+ the
+ noValidate boolean property to your
+ <CForm>. This disables the browser default
+ feedback tooltips, but still provides access to the form validation
+ APIs in JavaScript. Try to submit the form below; our JavaScript
+ will intercept the submit button and relay feedback to you. When
+ attempting to submit, you'll see the :invalid and
+ :valid styles applied to your form controls.
+
+
+ Custom feedback styles apply custom colors, borders, focus styles,
+ and background icons to better communicate feedback.
+
+
+
+
+ Email
+
+ Looks good!
+
+
+ Email
+
+ Looks good!
+
+
+ Username
+
+ @
+
+
+ Please choose a username.
+
+
+
+
+ City
+
+
+ Please provide a valid city.
+
+
+
+ City
+
+
+
+
+
+ Please provide a valid city.
+
+
+
+ City
+
+
+ Please provide a valid zip.
+
+
+
+
+
+ You must agree before submitting.
+
+
+
+ Submit form
+
+
+
+
+
+
+
+
+
+ Validation Browser defaults
+
+
+
+ Not interested in custom validation feedback messages or writing
+ JavaScript to change form behaviors? All good, you can use the
+ browser defaults. Try submitting the form below. Depending on your
+ browser and OS, you'll see a slightly different style of
+ feedback.
+
+
+ While these feedback styles cannot be styled with CSS, you can still
+ customize the feedback text through JavaScript.
+
+
+
+
+ Email
+
+ Looks good!
+
+
+ Email
+
+ Looks good!
+
+
+ Username
+
+ @
+
+
+ Please choose a username.
+
+
+
+
+ City
+
+
+ Please provide a valid city.
+
+
+
+ City
+
+
+
+
+
+ Please provide a valid city.
+
+
+
+ City
+
+
+ Please provide a valid zip.
+
+
+
+
+
+ You must agree before submitting.
+
+
+
+ Submit form
+
+
+
+
+
+
+
+
+
+ Validation Server side
+
+
+
+ We recommend using client-side validation, but in case you require
+ server-side validation, you can indicate invalid and valid form
+ fields with invalid and valid boolean
+ properties.
+
+
+ For invalid fields, ensure that the invalid feedback/error message
+ is associated with the relevant form field using
+ aria-describedby (noting that this attribute allows
+ more than one id to be referenced, in case the field
+ already points to additional form text).
+
+
+
+
+ Email
+
+ Looks good!
+
+
+ Email
+
+ Looks good!
+
+
+ Username
+
+ @
+
+ Please choose a username.
+
+
+
+ City
+
+ Please provide a valid city.
+
+
+ City
+
+
+
+
+ Please provide a valid city.
+
+
+ City
+
+ Please provide a valid zip.
+
+
+
+ You must agree before submitting.
+
+
+ Submit form
+
+
+
+
+
+
+
+
+
+ Validation Supported elements
+
+
+
+ Validation styles are available for the following form controls and
+ components:
+
+
+
<CFormInput>s
+
<CFormSelect>s
+
<CFormCheck>s
+
+
+
+
+ Textarea
+
+
+ Please enter a message in the textarea.
+
+
+
+ Example invalid feedback text
+
+
+ More example invalid feedback text
+
+
+
+
+
+
+
+ Example invalid select feedback
+
+
+
+ Example invalid form file feedback
+
+
+ Submit form
+
+
+
+
+
+
+
+
+
+ Validation Tooltips
+
+
+
+ If your form layout allows it, you can swap the text for the tooltip
+ to display validation feedback in a styled tooltip. Be sure to have
+ a parent with
+ position: relative on it for tooltip positioning. In
+ the example below, our column classes have this already, but your
+ project may require an alternative setup.
+
+
+
+
+ Email
+
+ Looks good!
+
+
+ Email
+
+ Looks good!
+
+
+ Username
+
+ @
+
+
+ Please choose a username.
+
+
+
+
+ City
+
+
+ Please provide a valid city.
+
+
+
+ City
+
+
+
+
+
+ Please provide a valid city.
+
+
+
+ City
+
+
+ Please provide a valid zip.
+
+
+
+ Submit form
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
new file mode 100644
index 00000000..03f277a2
--- /dev/null
+++ b/src/views/icons/Brands.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+ Vue Brands
+
+
+
+
+
+
+
+
+
{{toKebabCase(brandName)}}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
new file mode 100644
index 00000000..906f3fa9
--- /dev/null
+++ b/src/views/icons/CoreUIIcons.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Vue CoreUI Icons
+
+
+
+
+
+
+
+
{{toKebabCase(iconName)}}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
new file mode 100644
index 00000000..5e0e35d2
--- /dev/null
+++ b/src/views/icons/Flags.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+ Vue Flags
+
+
+
+
+
+
+
+
+
{{toKebabCase(flagName)}}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
new file mode 100644
index 00000000..abe76de7
--- /dev/null
+++ b/src/views/notifications/Alerts.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+ Vue Alerts
+
+
+
Alerts examples
+
+ A simple primary alert—check it out!
+ A simple secondary alert—check it out!
+ A simple success alert—check it out!
+ A simple danger alert—check it out!
+ A simple warning alert—check it out!
+ A simple info alert—check it out!
+ A simple light alert—check it out!
+ A simple dark alert—check it out!
+
+
+
Link color
+
+
+ A simple primary alert with an example link. Give it a click if you like.
+
+
+ A simple secondary alert with an example link. Give it a click if you like.
+
+
+ A simple success alert with an example link. Give it a click if you like.
+
+
+ A simple danger alert with an example link. Give it a click if you like.
+
+
+ A simple warning alert with an example link. Give it a click if you like.
+
+
+ A simple info alert with an example link. Give it a click if you like.
+
+
+ A simple light alert with an example link. Give it a click if you like.
+
+
+ A simple dark alert with an example link. Give it a click if you like.
+
+
+
+
Additional content
+
+
+ Well done!
+
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+
+
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+
+
+
+
Dismissing
+
+
+ Go right ahead and click that dimiss over there on the right.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
new file mode 100644
index 00000000..ee46e077
--- /dev/null
+++ b/src/views/notifications/Badges.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Vue Badges
+
+
+
+
+ primary
+ success
+ danger
+ warning
+ info
+ light
+ dark
+
+
+
Pill badges
+
+ primary
+ success
+ danger
+ warning
+ info
+ light
+ dark
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
new file mode 100644
index 00000000..240a6fdf
--- /dev/null
+++ b/src/views/notifications/Modals.vue
@@ -0,0 +1,433 @@
+
+
+
+
+
+ Vue Modals
+
+
+
Example
+
+
+
+ Modal title
+
+ Modal body text goes here.
+
+ Close
+ Save changes
+
+
+
+
+
Live demo
+
+ Launch demo modal
+
+
+ Modal title
+
+ Woohoo, you're reading this text in a modal!
+
+
+ Close
+
+ Save changes
+
+
+
+
+
Static backdrop
+
+ Launch demo modal
+
+
+ Modal title
+
+ Woohoo, you're reading this text in a modal!
+
+
+ Close
+
+ Save changes
+
+
+
+
+
+
Scrolling long content
+
+ Launch demo modal
+
+
+ Modal title
+
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+
+
+
+
+
Visible scrollable
+
+ Launch demo modal
+
+
+ Modal title
+
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+ facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+ at eros.
+
+
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+ lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+
+ Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+ scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+ auctor fringilla.
+
+
+
+
+
+
Vertically centered
+
+ Launch demo modal
+
+
+ Modal title
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+
+
+ Close
+
+ Save changes
+
+
+
+
+
Vertically scrollable demo
+
+ Vertically centered scrollable modal
+
+
+ Modal title
+
+
+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+
+
+ Close
+
+ Save changes
+
+
+
+
+
Tooltips and popovers
+
+ Launch demo modal
+
+
+ Modal title
+
+
+
Popover in a modal
+
This button
+
+
Tooltips in a modal
+
+ This link and that link have tooltips on hover.
+
+
+
+
+ Close
+
+ Save changes
+
+
+
+
+
+
Optional sizes
+
+ Extra large modal
+ Large modal
+ Small modal
+
+
+ Extra large modal
+
+
+ ...
+
+
+
+
+ Large modal
+
+
+ ...
+
+
+
+
+ Small modal
+
+
+ ...
+
+
+
+
+
Fullscreen Modal
+
+ Full screen
+ Full screen below sm
+ Full screen below md
+ Full screen below lg
+ Full screen below xl
+ Full screen below xxl
+
+
+ Full screen
+
+
+ ...
+
+
+
+
+ Full screen below sm
+
+
+ ...
+
+
+
+
+ Full screen below md
+
+
+ ...
+
+
+
+
+ Full screen below lg
+
+
+ ...
+
+
+
+
+ Full screen below xl
+
+
+ ...
+
+
+
+
+ Full screen below xxl
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/theme/ColorTheme.vue b/src/views/theme/ColorTheme.vue
new file mode 100644
index 00000000..bcedac36
--- /dev/null
+++ b/src/views/theme/ColorTheme.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
new file mode 100644
index 00000000..a9e11968
--- /dev/null
+++ b/src/views/theme/Colors.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Theme colors
+
+
+
+
+
+ .h1 through
+ .h6
+ classes are also available, for when you want to match the font
+ styling of a heading but cannot use the associated HTML element.
+
+
+
h1. Bootstrap heading
+
h2. Bootstrap heading
+
h3. Bootstrap heading
+
h4. Bootstrap heading
+
h5. Bootstrap heading
+
h6. Bootstrap heading
+
+
+
+
+
+ Display headings
+
+
+
+ Traditional heading elements are designed to work best in the meat
+ of your page content. When you need a heading to stand out,
+ consider using a display heading—a larger,
+ slightly more opinionated heading style.
+
+ Traditional heading elements are designed to work best in the meat
+ of your page content. When you need a heading to stand out,
+ consider using a display heading—a larger,
+ slightly more opinionated heading style.
+
+
+
You can use the mark tag to highlight text.
+
+ This line of text is meant to be treated as deleted text.
+
+
+ This line of text is meant to be treated as no longer accurate.
+
+
+ This line of text is meant to be treated as an addition to the document.
+
+
This line of text will render as underlined
+
+ This line of text is meant to be treated as fine print.
+
+
This line rendered as bold text.
+
This line rendered as italicized text.
+
+
+
+
+
+ Description list alignment
+
+
+
+ Align terms and descriptions horizontally by using our grid system’s
+ predefined classes (or semantic mixins). For longer terms, you can
+ optionally add a .text-truncate
+ class to truncate the text with an ellipsis.
+
+
+
+
Description lists
+
+ A description list is perfect for defining terms.
+
+
+
Euismod
+
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+
Donec id elit non mi porta gravida at eget metus.
+
+
+
Malesuada porta
+
+ Etiam porta sem malesuada magna mollis euismod.
+
+
+
Truncated term is truncated
+
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris
+ condimentum nibh, ut fermentum massa justo sit amet risus.
+
+
+
Nesting
+
+
+
Nested definition list
+
+ Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
+
+ 
+ 
+ 
+