-
+ Cras justo odioDapibus ac facilisis in
@@ -37,7 +37,7 @@
<CListGroupItem> to show the current active
selection.
-
+ Cras justo odioDapibus ac facilisis in
@@ -59,7 +59,7 @@
Add disabled boolean property to a
<CListGroupItem> to make it appear disabled.
-
+ Cras justo odioDapibus ac facilisis in
@@ -87,7 +87,7 @@
<div>
s) don'tprovide a click or tap affordance.
-
+
Cras justo odio
@@ -120,7 +120,7 @@
rounded corners to render list group items edge-to-edge in a parent
container (e.g., cards).
-
+ Cras justo odioDapibus ac facilisis in
@@ -153,7 +153,7 @@
groups.
-
+
-
+ Dapibus ac facilisis inactive state; apply it to indicate an active selection
on a contextual list group item.
-
+ Dapibus ac facilisis in
-
+ flexbox utilities.
-
+
@@ -334,7 +334,7 @@
Place CoreUI's checkboxes and radios within list group items and
customize as needed.
-
+
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 7d067484..7b584b1c 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -1,7 +1,7 @@
-
+
@@ -15,7 +15,7 @@
overrides (for working with lists), some link padding for larger hit areas, and basic
disabled styling.
-
+
@@ -42,7 +42,7 @@
the .nav uses display: flex, the nav links behave the same as nav items would, but
without the extra markup.
-
+
Active
@@ -74,7 +74,7 @@
Centered with .justify-content-center:
-
+
@@ -97,7 +97,7 @@
Right-aligned with .justify-content-end:
-
+
@@ -131,7 +131,7 @@
.flex-column utility. Need to stack them on some viewports but not
others? Use the responsive versions (e.g., .flex-sm-column).
-
+
@@ -164,7 +164,7 @@
Takes the basic nav from above and adds the variant="tabs" class
to generate a tabbed interface
-
+
@@ -196,7 +196,7 @@
Take that same HTML, but use variant="pills" instead:
-
+
@@ -231,7 +231,7 @@
.nav-items, use layout="fill". Notice that all
horizontal space is occupied, but not every nav item has the same width.
-
+
@@ -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.
-
+
@@ -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.
-
+
Active
@@ -313,7 +313,7 @@
Vue Navs Tabs with dropdowns
-
+
@@ -347,7 +347,7 @@
Vue Navs Pills with dropdowns
-
+
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index 301c5b03..baf27a18 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -1,7 +1,7 @@
-
+
@@ -25,7 +25,7 @@
navigate between a set of search results, an appropriate label could
be aria-label="Search results pages".
-
+ Previous1
@@ -48,7 +48,7 @@
pagination links? Be sure to provide proper screen reader support
with aria attributes.
-
+ «
@@ -84,7 +84,7 @@
disabled links and use custom JavaScript to fully disable their
functionality.
-
+ «
@@ -111,7 +111,7 @@
size="lg" or size="sm" for
additional sizes.
-
+ Previous1
@@ -120,7 +120,7 @@
Next
-
+ Previous1
@@ -144,7 +144,7 @@
>flexbox utilities.
-
+ Next
-
+
-
+
@@ -9,7 +9,7 @@
Vue Popovers Basic example
-
+
-
+
-
+
+
-
+ Vue Progress Basic example
@@ -20,7 +20,7 @@
, ensuring you can stack progress bars, animate them, and place text
labels over them.
-
+
@@ -40,7 +40,7 @@
-
+ Vue Progress Labels
@@ -50,7 +50,7 @@
Add labels to your progress bars by placing text within the
<CProgressBar>.
-
+ 25%
@@ -58,7 +58,7 @@
-
+ Vue Progress Height
@@ -70,7 +70,7 @@
inner <CProgressBar> will automatically resize
accordingly.
-
+
@@ -81,7 +81,7 @@
-
+ Vue Progress Backgrounds
@@ -91,7 +91,7 @@
Use color prop to change the appearance of individual
progress bars.
-
+
@@ -108,7 +108,7 @@
-
+ Vue Progress Multiple bars
@@ -117,7 +117,7 @@
Include multiple progress bars in a progress component if you need.
-
+
@@ -127,7 +127,7 @@
-
+ Vue Progress Striped
@@ -138,7 +138,7 @@
<CProgressBar> to apply a stripe via CSS gradient
over the progress bar's background color.
-
+
@@ -155,7 +155,7 @@
-
+ Vue Progress Animated stripes
@@ -167,7 +167,7 @@
<CProgressBar> to animate the stripes right to
left via CSS3 animations.
-
+
-
+
@@ -12,7 +12,7 @@
Use the border spinners for a lightweight loading indicator.
-
+
@@ -20,7 +20,7 @@
border-color. You can use any of our text color
utilities on the standard spinner.
-
+
@@ -43,7 +43,7 @@
If you don'tfancy a border spinner, switch to the grow spinner.
While it doesn't technically spin, it does repeatedly grow!
-
+
@@ -51,7 +51,7 @@
you can easily change its appearance. Here it is in blue, along with
the supported variants.
-
+
@@ -74,7 +74,7 @@
Add size="sm" property to make a smaller
spinner that can quickly be used within other components.
-
+
@@ -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.
-
+
@@ -101,7 +101,7 @@
Loading...
-
+
-
-
-
-
- Vue Switches
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 643d176b..de852afe 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -1,9 +1,9 @@
-
-
+
+
-
+ Vue Table Basic example
@@ -13,7 +13,7 @@
Using the most basic table CoreUI, here's how
<CTable>-based tables look in CoreUI.
-
+
@@ -47,7 +47,7 @@
-
+ Vue Table Variants
@@ -57,7 +57,7 @@
Use contextual classes to color tables, table rows or individual
cells.
-
+
@@ -118,7 +118,7 @@
-
+ Vue Table Striped rows
@@ -128,7 +128,7 @@
Use striped property to add zebra-striping to any table
row within the <CTableBody>.
-
+
@@ -162,7 +162,7 @@
These classes can also be added to table variants:
-
+
@@ -193,7 +193,7 @@
-
+
@@ -227,7 +227,7 @@
-
+ Vue Table Hoverable rows
@@ -237,7 +237,7 @@
Use hover property to enable a hover state on table
rows within a <CTableBody>.
-
+
@@ -268,7 +268,7 @@
-
+
@@ -299,7 +299,7 @@
-
+
@@ -333,13 +333,13 @@
-
+ Vue Table Active tables
-
+
@@ -372,7 +372,7 @@
-
+
@@ -408,7 +408,7 @@
-
+ Vue Table Bordered tables
@@ -418,7 +418,7 @@
Add bordered property for borders on all sides of the
table and cells.
-
+
@@ -454,7 +454,7 @@
Border color utilities can be added to change colors:
-
+
@@ -488,7 +488,7 @@
-
+ Vue Table Tables without borders
@@ -497,7 +497,7 @@
Add borderless property for a table without borders.
-
+
@@ -528,7 +528,7 @@
-
+
@@ -562,7 +562,7 @@
-
+ Vue Table Small tables
@@ -573,7 +573,7 @@
<CTable> more compact by cutting all cell
padding in half.
-
+
@@ -607,7 +607,7 @@
-
+ Vue Table Vertical alignment
@@ -620,7 +620,7 @@
<CTable> and are aligned to the the top by
default. Use the align property to re-align where needed.
-
+
@@ -701,7 +701,7 @@
-
+ Vue Table Nesting
@@ -711,7 +711,7 @@
Border styles, active styles, and table variants are not inherited
by nested tables.
-
+
@@ -775,7 +775,7 @@
-
+ Vue Table Table head
@@ -787,7 +787,7 @@
color="dark" to make
<CTableHead>s appear light or dark gray.
-
+
@@ -819,7 +819,7 @@
-
+
@@ -853,13 +853,13 @@
-
+ Vue Table Table foot
-
+
@@ -901,7 +901,7 @@
-
+ Vue Table Captions
@@ -912,7 +912,7 @@
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
@@ -949,7 +949,7 @@
You can also put the <CTableCaption> on the top
of the table with caption="top".
-
+ List of users
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
deleted file mode 100644
index dc0bc48f..00000000
--- a/src/views/base/Tabs.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
-
-
-
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index 2c62ed87..40181ea9 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -1,7 +1,7 @@
-
+
@@ -12,7 +12,7 @@
Hover over the links below to see tooltips:
-
+
Tight pants next level keffiyeh
you probably
@@ -32,7 +32,7 @@
Hover over the links below to see tooltips:
-
+
-
+
@@ -13,7 +13,7 @@
Wrap a series of <CButton> components in
<CButtonGroup>.
-
+ LeftMiddle
@@ -25,7 +25,7 @@
alternative to the
<CNav> components.
-
+ Active link Link
@@ -41,7 +41,7 @@
Vue Button GroupMixed styles
-
+ LeftMiddle
@@ -57,7 +57,7 @@
Vue Button GroupOutlined styles
-
+ Left Middle
@@ -78,7 +78,7 @@
seamless looking button group.
-
+
-
+ <CButtonGroup>'s, including each one when
nesting multiple groups.
-
+ <CButtonGroup> when you need dropdown menus
combined with a series of buttons.
-
+ Split button dropdowns are not supported here.
-
+ Button
-
+
-
+
-
+
@@ -16,7 +16,7 @@
to initialize operations, both in the background or foreground of an
experience.
-
+
CoreUI Icons.
-
+
role="button" to adequately communicate their
meaning to assistive technologies such as screen readers.
-
+
Link
@@ -162,7 +162,7 @@
variant="outline" prop to remove all background
colors.
-
+
variant="ghost" prop to remove all background
colors.
-
+
size="lg" or
size="sm" for additional sizes.
-
+ Large button Large button
-
+ Small button Small button
@@ -280,7 +280,7 @@
Vue Button Pill
-
+
+
+
Primary button
@@ -371,7 +371,7 @@
aria-disabled="true" attribute to show the
state of the component to assistive technologies.
-
+
Primary link
@@ -398,7 +398,7 @@
Create buttons that span the full width of a parent—by using
utilities.
-
+
ButtonButton
@@ -411,7 +411,7 @@
thus nullifying the gap-2 utility. Resize your browser
to see them change.
-
+
ButtonButton
@@ -423,7 +423,7 @@
use .col-6. Center it horizontally with
.mx-auto, too.
-
+
ButtonButton
@@ -436,7 +436,7 @@
button to right align the buttons when they're no longer
stacked.
-
+