aria-label="Search results pages".
aria attributes.
size="sm" for additional sizes.
+ Use the border spinners for a lightweight loading indicator. +
+
+ The border spinner uses currentColor for its border-color.
+ You can use any of our text color utilities on the standard spinner.
+
+ If you don't fancy a border spinner, switch to the grow spinner. While it doesn't + technically spin, it does repeatedly grow! +
+
+ Once again, this spinner is built with currentColor, so you can easily
+ change its appearance. Here it is in blue, along with the supported variants.
+
+ Add size="sm" property to make a smaller spinner that can quickly be used
+ within other components.
+
+ Use spinners within buttons to indicate an action is currently processing or taking + place. You may also swap the text out of the spinner element and utilize button text + as needed. +
+
- Using the most basic table CoreUI, here's how{' '}
- <CTable>-based tables look in CoreUI.
+ Using the most basic table CoreUI, here's how <CTable>-based tables
+ look in CoreUI.
- Use striped property to add zebra-striping to any table row
- within the <CTableBody>.
+ Use striped property to add zebra-striping to any table row within the{' '}
+ <CTableBody>.
- Use hover property to enable a hover state on table rows
- within a <CTableBody>.
+ Use hover property to enable a hover state on table rows within a{' '}
+ <CTableBody>.
- Add bordered property for borders on all sides of the table
- and cells.
+ Add bordered property for borders on all sides of the table and cells.
-
+
Border color utilities
{' '}
can be added to change colors:
@@ -494,7 +493,7 @@ const Tables = () => {
- Add
- Add
- Table cells of
- Similar to tables and dark tables, use the modifier prop{' '}
-
- A
- You can also put the borderless property for a table without borders.
+ Add borderless property for a table without borders.
small property to make any{' '}
- <CTable> more compact by cutting all cell{' '}
- padding in half.
+ Add small property to make any <CTable> more compact
+ by cutting all cell padding in half.
<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.
+ 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.
color="light" or color="dark" to
- make <CTableHead>s appear light or dark gray.
+ Similar to tables and dark tables, use the modifier prop color="light" or{' '}
+ color="dark" to make <CTableHead>s appear light or
+ dark gray.
<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.
+ 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.
<CTableCaption> on the top of
- the table with caption="top".
+ You can also put the <CTableCaption> on the top of the table with{' '}
+ caption="top".
+
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.
diff --git a/src/views/examples/buttons/button-groups/ButtonGroups.js b/src/views/examples/buttons/button-groups/ButtonGroups.js index 5d22284..731dfc8 100644 --- a/src/views/examples/buttons/button-groups/ButtonGroups.js +++ b/src/views/examples/buttons/button-groups/ButtonGroups.js @@ -114,21 +114,21 @@ const ButtonGroups = () => { button buttonVariant="outline" id="btncheck1" - autocomplete="off" + autoComplete="off" label="Checkbox 1" />+
You can combine button with our CoreUI Icons.
.mx-auto, too.
- Here's how you can put them to work with either{' '}
- <button> elements:
+
+ Here's how you can put them to work with either <button> elements:
The best part is you can do this with any button variant, too:
++ The best part is you can do this with any button variant, too: +
+
Similarly, create split button dropdowns with virtually the same markup as single
- button dropdowns, but with the addition of boolean prop{' '}
- split for proper spacing around the dropdown caret.
+ button dropdowns, but with the addition of boolean prop split for proper
+ spacing around the dropdown caret.
- We use this extra class to reduce the horizontal padding on
- either side of the caret by 25% and remove the margin-left{' '}
- that's attached for normal button dropdowns. Those additional changes hold the caret
- centered in the split button and implement a more properly sized hit area next to the
- main button.
+
+ We use this extra class to reduce the horizontal padding on either side
+ of the caret by 25% and remove the margin-left that's attached for normal
+ button dropdowns. Those additional changes hold the caret centered in the split button
+ and implement a more properly sized hit area next to the main button.
+
Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
- dark property. No changes are required to the dropdown
- items.
+ dark property. No changes are required to the dropdown items.
And putting it to use in a navbar:
+And putting it to use in a navbar:
+ Wrap a pair of <CFormControl> and <CFormLabel>{' '}
+ elements in CFormFloating to enable floating labels with textual form
+ fields. A placeholder is required on each{' '}
+ <CFormControl> as our method of CSS-only floating labels uses the{' '}
+ :placeholder-shown pseudo-element. Also note that the{' '}
+ <CFormControl> must come first so we can utilize a sibling selector
+ (e.g., ~).
+
+ When there's a value already defined, <CFormLabel>s
+ will automatically adjust to their floated position.
+
+ By default, <CFormControl component="textarea">s will be the same
+ height as <CFormControl>s.
+
+ To set a custom height on your <CFormControl component="textarea">,
+ do not use the rows attribute. Instead, set an explicit{' '}
+ height (either inline or via custom CSS).
+
+ Other than <CFormControl>, floating labels are only available on{' '}
+ <CFormSelect>s. They work in the same way, but unlike{' '}
+ <CFormControl>s, they'll always show the{' '}
+ <CFormLabel> in its floated state.{' '}
+
+ Selects with size and multiple are not supported.
+
+
+ When working with the CoreUI for Bootstrap grid system, be sure to place form elements + within column classes. +
+
We recommend using client-side validation, but in case you require server-side
- validation, you can indicate invalid and valid form fields with isInvalid{' '}
- and isValid boolean properties.
+ 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
@@ -323,12 +319,24 @@ const Validation = () => {