+
Click the accordions below to expand/collapse the accordion content.
- Add flush to remove the default{' '}
- background-color, some borders, and some rounded corners to
- render accordions edge-to-edge with their parent container.
+
+ Add flush to remove the default background-color, some
+ borders, and some rounded corners to render accordions edge-to-edge with their parent
+ container.
+ 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
+
+ .
+
+
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. + 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.
@@ -89,9 +82,9 @@ const Cards = () => {
Card Body
- The main block of a card is the
+ The main block of a card is the
- Card titles are managed by
+ Card titles are managed by
- Subtitles are managed by
+ Subtitles are managed by
-
+
+
Create lists of content in a card with a flush list group.
+
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.
@@ -282,7 +273,7 @@ const Cards = () => {
Card Header and footer
+
Add an optional header and/or footer within a card.
- Card headers can be styled by adding ex.
+ Card headers can be styled by adding ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
a ante.
- Cards assume no specific
+ Cards assume no specific
+
Using the grid, wrap cards in columns and rows as needed.
<CCardBody>. Use it
- whenever you need a padded section within a card.
+ <CCardBody>. Use it whenever you
+ need a padded section within a card.
<CCardTitle> component.
- Identically, links are attached and collected next to each other by{' '}
- <CCardLink> component.
+ <CCardTitle> component. Identically,
+ links are attached and collected next to each other by <CCardLink>{' '}
+ component.
<CCardSubtitle> component.
- If the <CCardTitle> also, the{' '}
- <CCardSubtitle> items are stored in a{' '}
- <CCardBody> item, the card title, and subtitle are
+ <CCardSubtitle> component. If the{' '}
+ <CCardTitle> also, the <CCardSubtitle> items are
+ stored in a <CCardBody> item, the card title, and subtitle are
arranged rightly.
.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.
+ .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.
component="h5".
+ component="h5".
+
@@ -350,13 +341,13 @@ const Cards = () => {
Card Body
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.
+ 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
-
+
Use some of{' '} - - available sizing utilities - {' '} - to rapidly set a card's width. + available sizing utilities to + rapidly set a card's width.
+
Use custom CSS in your stylesheets or as inline styles to set a width.
+
You can instantly change the text arrangement of any card—in its whole or specific parts—with{' '} - - text align classes - + text align classes .
- Add some navigation to a <CCardHeader> with our{' '}
- <CNav> component.
+
+ Add some navigation to a <CCardHeader> with our{' '}
+ <CNav> component.
+
Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
@@ -585,7 +572,7 @@ const Cards = () => { additional content. This content is a little bit longer.+
Cards include various options for customizing their backgrounds, borders, and color.
- Use color property to change the appearance of a card.
+
+ Use color property to change the appearance of a card.
- 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.
+
+ 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.
- 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.
+
+ 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.
+
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.
+ height columns. Card groups start off stacked and use display: flex; to
+ become attached with uniform dimensions starting at the sm breakpoint.
+
When using card groups with footers, their content will automatically line up.
- 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.
+
+ 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.
- Change it to md={{ cols: 3}} and you'll
- see the fourth card wrap.
+
+ Change it to md={{ cols: 3}} and you'll see the
+ fourth card wrap.
- The main block of a card is the <CCardBody>. Use it
- whenever you need a padded section within a card.
-
Here’s a carousel with slides
+Here’s a carousel with slides
- Adding in the previous and next controls by controls{' '}
- property.
+
+ Adding in the previous and next controls by controls property.
+
You can attach the indicators to the carousel, lengthwise the controls, too.
- You can add captions to slides with the{' '}
- <CCarouselCaption> element within any{' '}
- <CCarouselItem>. They can be immediately hidden on
+
+ 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.
+ display utilities. We hide them
+ with .d-none and draw them back on medium-sized devices with{' '}
+ .d-md-block.
- Add transition="crossfade" to your carousel to animate
- slides with a fade transition instead of a slide.
+
+ 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.
+
+ 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.
You can use a link or a button component.
+You can use a link or a button component.
- A <CButton> can show and hide multiple elements.
+
+ A <CButton> can show and hide multiple elements.
Username
-.col-lg-* .col-md-* .col-sm-*
-
- .col-*
-
- Here's some help text
-+ The default list group is an unordered list with items and the proper CSS classes. + Build upon it with the options that follow, or with your CSS as required. +
+
+ Add active boolean property to a <CListGroupItem> to
+ show the current active selection.
+
+ Add disabled boolean property to a <CListGroupItem> to
+ make it appear disabled.
+
+ Use <a>s or <button>s to create{' '}
+ actionable list group items with hover, disabled, and active states by adding{' '}
+ component="a|button". We separate these pseudo-classes to ensure list
+ groups made of non-interactive elements (like <li>s or{' '}
+ <div>
+ s) don't provide a click or tap affordance.
+
+ Add flush boolean property to remove some borders and rounded corners to
+ render list group items edge-to-edge in a parent container (e.g., cards).
+
+ Add layout="horizontal" to change the layout of list group items from
+ vertical to horizontal across all breakpoints. Alternatively, choose a responsive
+ variant .layout="horizontal-{sm | md | lg | xl | xxl}" to make
+ a list group horizontal starting at that breakpoint's min-width.
+ Currently{' '}
+ horizontal list groups cannot be combined with flush list groups.
+
+ Use contextual classes to style list items with a stateful background and color. +
+
+ Contextual classes also work with <a>s or{' '}
+ <button>s. Note the addition of the hover styles here not present
+ in the previous example. Also supported is the active state; apply it to
+ indicate an active selection on a contextual list group item.
+
+ Add badges to any list group item to show unread counts, activity, and more. +
++ Add nearly any HTML within, even for linked list groups like the one below, with the + help of flexbox utilities. +
+Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. - Donec id elit non mi porta. -
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. -
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. -
- Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing - exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat - proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim - tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat - aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. - Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam - minim. -
-- Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur - consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore - sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt - laboris deserunt anim aute dolor incididunt veniam aute dolore do - exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris - ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt - veniam ad. -
-- Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo - reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet - cupidatat cupidatat anim do ut velit mollit consequat enim tempor. - Consectetur est minim nostrud nostrud consectetur irure labore voluptate - irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et - deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod - aliquip nulla laborum elit adipisicing pariatur cillum. -
-- Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. - Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat - laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua - labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation - irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet - qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt - dolor eiusmod eu pariatur culpa mollit in irure. -
-+ Place CoreUI's checkboxes and radios within list group items and customize as needed. +
+
+ The base .nav component is built with flexbox and provide a strong
+ foundation for building all types of navigation components. It includes some style
+ overrides (for working with lists), some link padding for larger hit areas, and basic
+ disabled styling.
+
+ Classes are used throughout, so your markup can be super flexible. Use{' '}
+ <ul>s like above, <ol> if the order of your
+ items is important, or roll your own with a <nav> element. Because
+ the .nav uses display: flex, the nav links behave the same as nav items would, but
+ without the extra markup.
+
+ Change the horizontal alignment of your nav with{' '} + + flexbox utilities + + . By default, navs are left-aligned, but you can easily change them to center or right + aligned. +
+
+ Centered with .justify-content-center:
+
+ Right-aligned with .justify-content-end:
+
+ Stack your navigation by changing the flex item direction with the{' '}
+ .flex-column utility. Need to stack them on some viewports but not
+ others? Use the responsive versions (e.g., .flex-sm-column).
+
+ Takes the basic nav from above and adds the variant="tabs" class to
+ generate a tabbed interface
+
+ Take that same HTML, but use variant="pills" instead:
+
+ Force your .nav's contents to extend the full available width one of two
+ modifier classes. To proportionately fill all available space with your{' '}
+ .nav-items, use layout="fill". Notice that all horizontal
+ space is occupied, but not every nav item has the same width.
+
+ For equal-width elements, use layout="justified". All horizontal space
+ will be occupied by nav links, but unlike the .nav-fill above, every nav item will be
+ the same width.
+
+ If you need responsive nav variations, consider using a series of{' '} + flexbox utilities. While more + verbose, these utilities offer greater customization across responsive breakpoints. In + 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. +
+
+ 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".
+
+ 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't account for keyboard navigation. As such,
+ we always add tabindex="-1" on disabled links and use custom JavaScript
+ to fully disable their functionality.
+
+ Fancy larger or smaller pagination? Add size="lg" or{' '}
+ size="sm" for additional sizes.
+
+ Change the alignment of pagination components with{' '} + flexbox utilities. +
+Hover over the links below to see popover:
- -
- Tight pants next level keffiyeh
-
+ Four options are available: top, right, bottom, and left aligned. Directions are + mirrored when using CoreUI for React in RTL. +
+
+ Progress components are built with two HTML elements, some CSS to set the width, and a
+ few attributes. We don't use{' '}
+
+ the HTML5 <progress> element
+
+ , ensuring you can stack progress bars, animate them, and place text labels over them.
+
+ Add labels to your progress bars by placing text within the{' '}
+ <CProgressBar>.
+
+ We only set a height value on the <CProgress>, so if
+ you change that value the inner <CProgressBar> will automatically
+ resize accordingly.
+
+ Use color prop to change the appearance of individual progress bars.
+
+ Include multiple progress bars in a progress component if you need. +
+
+ Add variant="striped" to any <CProgressBar> to apply a
+ stripe via CSS gradient over the progress bar's background color.
+
+ The striped gradient can also be animated. Add animated property to{' '}
+ <CProgressBar> to animate the stripes right to left via CSS3
+ animations.
+
- 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.
+
+ 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.
- 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.
+
+ 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.
+
+ 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.
+
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.
@@ -207,10 +207,9 @@ const ChecksRadios = () => { React Checks and Radios Inline
- Group checkboxes or radios on the same horizontal row by adding{' '}
- inline boolean property to any{' '}
- <CFormCheck>.
+
+ Group checkboxes or radios on the same horizontal row by adding inline{' '}
+ boolean property to any <CFormCheck>.
+
Remember to still provide some form of accessible name for assistive technologies (for
- instance, using aria-label).
+ instance, using aria-label).
- Create button-like checkboxes and radio buttons by using{' '}
- button boolean property on the{' '}
- <CFormCheck> component. These toggle buttons can
+
+ 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.
+
Different variants of button, such at the various outlined styles, are supported.
- Set heights using size property like{' '}
- size="lg" and size="sm".
+
+ Set heights using size property like size="lg" and{' '}
+ size="sm".
- Add the disabled boolean attribute on an input to give it a
- grayed out appearance and remove pointer events.
+
+ Add the disabled boolean attribute on an input to give it a grayed out
+ appearance and remove pointer events.
- 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.
+
+ 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.
- 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.
+
+ 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.
+
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.
+ 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.
+
+ 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.
+
+ 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't supported. - +
+ Sizing on the individual input group elements isn't supported.
+
Place any checkbox or radio option within an input group's addon instead of text.
- While multiple <CFormControl>s are supported
- visually, validation styles are only available for input groups with a single{' '}
- <CFormControl>.
+
+ While multiple <CFormControl>s are supported visually, validation
+ styles are only available for input groups with a single{' '}
+ <CFormControl>.
+
Multiple add-ons are supported and can be mixed with checkbox and radio input versions..
@@ -227,7 +224,7 @@ const Select = () => { React Input group Button addons+
Multiple add-ons are supported and can be mixed with checkbox and radio input versions..
diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js index 28bb763..e30104a 100644 --- a/src/views/forms/layout/Layout.js +++ b/src/views/forms/layout/Layout.js @@ -14,7 +14,7 @@ import { CInputGroupText, CRow, } from '@coreui/react' -import { DocsLink, Example } from 'src/reusable' +import { Example } from 'src/reusable' const Layout = () => { return ( @@ -25,7 +25,7 @@ const Layout = () => { Layout Form grid+
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.
@@ -48,11 +48,8 @@ const Layout = () => { Layout Gutters- By adding{' '} - - gutter modifier classes - +
+ By adding gutter modifier classes , you can have control over the gutter width in as well the inline as block direction.
+
More complex layouts can also be created with the grid system.
- 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.
+
+ 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.
+ 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.
+
+ 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">
- .
+ <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.
+ <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.
+
You can then remix that once again with size-specific column classes.
- 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.
+
+ 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.
- Create custom <input type="range"> controls with{' '}
- <CFormControl>.
+
+ Create custom <input type="range"> controls with{' '}
+ <CFormControl>.
- Add the disabled boolean attribute on an input to give it a
- grayed out appearance and remove pointer events.
+
+ Add the disabled boolean attribute on an input to give it a grayed out
+ appearance and remove pointer events.
- 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.
+
+ 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.
+
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".
+ step value. In the example below, we double the number of steps by using{' '}
+ step="0.5".
+
You may also choose from small and large custom selects to match our similarly sized text inputs.
@@ -46,8 +46,8 @@ const Select = () => {
- The multiple attribute is also supported:
+
+ The multiple attribute is also supported:
- As is the htmlSize property:
+
+ As is the htmlSize property:
- Add the disabled boolean attribute on a select to give it a
- grayed out appearance and remove pointer events.
+
+ Add the disabled boolean attribute on a select to give it a grayed out
+ appearance and remove pointer events.
+
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.
+ 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.{' '}
@@ -287,13 +286,13 @@ const Validation = () => { 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.
@@ -309,17 +308,16 @@ const Validation = () => { 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{' '}
- isInvalid and isValid boolean
- properties.
+ validation, you can indicate invalid and valid form fields with isInvalid{' '}
+ and isValid 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).
+ 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).
+
Validation styles are available for the following form controls and components:
-<CFormControl>s
+ <CFormControl>s
<CFormSelect>s
+ <CFormSelect>s
<CFormCheck>s
+ <CFormCheck>s
+
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.
+ 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.
.alert-link to provide links
-
-
+ React Alert is prepared for any length of text, as well as an optional close button.
+ For a styling, use one of the required contextual color{' '}
+ props (e.g., primary). For inline dismissal, use the{' '}
+
+ dismissing prop
+
+ .
+
+ Use the <CAlertLink> component to immediately give matching colored
+ links inside any alert.
+
+ Alert can also incorporate supplementary components & elements like heading, + paragraph, and divider. +
+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 @@ -112,38 +115,34 @@ const Alerts = () => { tidy.
+ Alerts can also be easily dismissed. Just add the dismissible prop.
+
+ Bootstrap badge scale to suit the size of the parent element by using relative font
+ sizing and em units.
+
+ Badges can be used as part of links or buttons to provide a counter. +
++ Remark that depending on how you use them, badges may be complicated for users of + screen readers and related assistive technologies. +
++ Unless the context is clear, consider including additional context with a visually + hidden piece of additional text. +
+
+ Add any of the below-mentioned color props to modify the presentation of
+ a badge.
+
+ Apply the shape="rounded-pill" prop to make badges rounded.
+
+ 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. +
++ 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. +
++ 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. +
+
+ This
+
+
+ Below is a static modal example (meaning its position and{' '}
+ display have been overridden). Included are the modal header, modal body
+ (required for padding), and modal footer (optional). We ask that you
+ include modal headers with dismiss actions whenever possible, or provide another
+ explicit dismiss action.
+
+ Toggle a working modal demo by clicking the button below. It will slide down and fade + in from the top of the page. +
+
+ If you don’t provide an onDimsiss handler to the Modal component, your
+ modal will behave as though the backdrop is static, meaning it will not close when
+ clicking outside it. Click the button below to try it.
+
+ If you don’t provide an onDimsiss handler to the Modal component, your
+ modal will behave as though the backdrop is static, meaning it will not close when
+ clicking outside it. Click the button below to try it.
+
+ You can also create a scrollable modal that allows scroll the modal body by adding{' '}
+ scrollable prop.
+
+ Add alignment="center to <CModal> to vertically center
+ the modal.
+
+ <CTooltips> and <CPopovers> can be placed within
+ modals as needed. When modals are closed, any tooltips and popovers within are also
+ automatically dismissed.
+
+ Modals have three optional sizes, available via modifier classes to be placed on a{' '}
+ <CModal>. These sizes kick in at certain breakpoints to avoid
+ horizontal scrollbars on narrower viewports.
+
| Size | +Property size | +Modal max-width | +
|---|---|---|
| Small | +
+ 'sm'
+ |
+
+ 300px
+ |
+
| Default | +None | +
+ 500px
+ |
+
| Large | +
+ 'lg'
+ |
+
+ 800px
+ |
+
| Extra large | +
+ 'xl'
+ |
+
+ 1140px
+ |
+
+ Another override is the option to pop up a modal that covers the user viewport,
+ available via property fullscrean.
+
| Property fullscrean | +Availability | +
|---|---|
+ true
+ |
+ Always | +
+ 'sm'
+ |
+
+ Below 576px
+ |
+
+ 'md'
+ |
+
+ Below 768px
+ |
+
+ 'lg'
+ |
+
+ Below 992px
+ |
+
+ 'xl'
+ |
+
+ Below 1200px
+ |
+
+ 'xxl'
+ |
+
+ Below 1400px
+ |
+
+ Toasts are as flexible as you need and have very little required markup. At a minimum, + we require a single element to contain your “toasted” content and strongly encourage a + dismiss button. +
++ Toasts are slightly translucent to blend in with what's below them. +
++ You can stack toasts by wrapping them in a toast container, which will vertically add + some spacing. +
+
+ Customize your toasts by removing sub-components, tweaking them with{' '}
+ utilities, or by adding your
+ own markup. Here we've created a simpler toast by removing the default{' '}
+ <CToastHeader>, adding a custom hide icon from{' '}
+ CoreUI Icons, and using some{' '}
+ flexbox utilities to adjust
+ the layout.
+
+ Alternatively, you can also add additional controls and components to toasts. +
+
+ Building on the above example, you can create different toast color schemes with our{' '}
+ color and{' '}
+ background utilities.
+ Here we've set color="primary" and added .text-white class
+ to the <Ctoast>, and then set white property to our
+ close button. For a crisp edge, we remove the default border with{' '}
+ .border-0.
+