Use any of the available button style types to quickly create a styled button. Just modify the bsStyle prop.
{'.
Fancy larger or smaller buttons? Add bsSize="large", bsSize="small", or bsSize="xsmall" for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding the block prop.
To set a buttons active state simply set the components active prop.
Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.
onClick handlers.
The DOM element tag is choosen automatically for you based on the props you supply. Passing
a href will result in the button using a {''} element otherwise
a {''} element will be used.
When activating an asynchronous action from a button it is a good UX pattern to give the user
feedback as to the loading state, this can easily be done by updating
your {''}’s props from a state change like below.
Group a series of buttons together on a single line with the button group.
-Wrap a series of {''}s in a {'.
Combine sets of {'s into a {' for more complex components.
Instead of applying button sizing props to every button in a group, just add bsSize prop to the {'.
You can place other button types within the {' like {'s.
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
Just add vertical to the {'.
Moreover, you can have buttons be block level elements so they take the full width of their container, just add block to the {', in addition to the vertical you just added.
Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
Just add justified to the {'.
Use {' or {' components to display a button with a dropdown menu.
Create a dropdown button with the {' component.
Similarly, create split button dropdowns with the {' component.
Button dropdowns work with buttons of all sizes.
Remove the caret using the noCaret prop.
Trigger dropdown menus that site above the button by adding the dropup prop.
Trigger dropdown menus that align to the right of the button using the pullRight prop.
This is a component used in other components (see Buttons, Navbars).
It supports the basic anchor properties href, target, title.
It also supports different properties of the normal Bootstrap MenuItem. @@ -204,65 +205,65 @@ const ComponentsPage = React.createClass({
By default, all the <Panel /> does is apply some basic border and padding to contain some content.
You can pass on any additional properties you need, e.g. a custom onClick handler, as it is shown in the example code. They all will apply to the wrapper div element.
Easily add a heading container to your panel with the header prop.
Pass buttons or secondary text in the footer prop. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Like other components, easily make a panel more meaningful to a particular context by adding a bsStyle prop.
Add the fill prop to <Table /> or <ListGroup /> elements to make them fill the panel.
PanelGroups can be controlled by a parent component. The activeKey prop dictates which panel is open.
PanelGroups can also be uncontrolled where they manage their own state. The defaultActiveKey prop dictates which panel is open when initially.
<Accordion /> aliases <PanelGroup accordion />.
CollapsibleMixin can be used to create your own components with collapse functionality.
A rendered modal with header, body, and set of actions in the footer. The {' Component comes with
a few convenient "sub components": {', {', {',
@@ -277,11 +278,11 @@ const ComponentsPage = React.createClass({
Use {' in combination with other components to show or hide your Modal.
You will need to add the following css to your project and ensure that your container has the modal-container class.
{React.DOM.code(null,
@@ -295,29 +296,29 @@ const ComponentsPage = React.createClass({
You can specify a bootstrap large or small modal by using the "bsSize" prop.
You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.
Tooltip component for a more stylish alternative to that anchor tag title attribute.
Attach and position tooltips with OverlayTrigger.
Positioned tooltip in text copy.
The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content.
The Popover component, like the Tooltip can be used with an OverlayTrigger Component, and positioned around it.
Trigger behaviors. It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.
It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.
Popover component in container.
+Positioned popover components in scrolling container.
+
The OverlayTrigger component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed
@@ -386,103 +390,101 @@ const ComponentsPage = React.createClass({
You don't need to use the provided Tooltip or Popover components. Creating custom overlays
is as easy as wrapping some markup in an Overlay component
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
-Default progress bar.
Add a label prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.
The following keys are interpolated with the current values: %(min)s, %(max)s, %(now)s, %(percent)s, %(bsStyle)s
Add a srOnly prop to hide the label visually.
Progress bars use some of the same button and alert classes for consistent styles.
Uses a gradient to create a striped effect. Not available in IE8.
Add active prop to animate the stripes right to left. Not available in IE9 and below.
Nest <ProgressBar />s to stack them.
Navs come in two styles, pills and tabs. Disable a tab by adding disabled.
Add dropdowns using the DropdownButton component. Just make sure to set navItem property to true.
They can also be stacked vertically.
They can be justified to take the full width of their parent.
Navbars are by default accessible and will provide role="navigation".
They also supports all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it. For example navbar-fixed-top becomes the property fixedTop. The different properties are fixedTop, fixedBottom, staticTop, inverse, fluid.
You can drag elements to the right by specifying the right property on a nav group.
You can specify a brand by passing in a string to brand, or you can pass in a renderable component.
To have a mobile friendly Navbar, specify the property toggleNavKey on the Navbar with a value corresponding to an eventKey of one of his Nav children. This child will be the one collapsed.
By setting the property {React.DOM.code(null, 'defaultNavExpanded={true}')} the Navbar will start expanded by default.
To have a mobile friendly Navbar that handles multiple Nav components use CollapsibleNav. The toggleNavKey must still be set, however, the corresponding eventKey must now be on the CollapsibleNav component.
The navbar-collapse div gets created as the collapsible element which follows the bootstrap collapsible navbar documentation.
<div class="collapse navbar-collapse"></div>
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
-Allow the component to control its own state.
Pass down the active state on render via props.
Set the animation prop to false
This plugin extends the tabbed navigation component to add tabbable areas.
Quick previous and next links.
-Centers by default.
+Set the previous or next prop to true, to align left or right.
Set the disabled prop to true to disable the link.
Provide pagination links for your site or app with the multi-page pagination component. Set items to the number of pages. activePage prop dictates which page is active
More options such as first, last, previous, next and ellipsis.
such as first, last, previous, next and ellipsis.
Basic alert styles.
Closeable alerts, just pass in a onDismiss function.
just pass in a onDismiss function.
Auto close after a set time with dismissAfter prop.
Allow the component to control its own state.
Pass down the active state on render via props.
Thumbnails are designed to showcase linked images with minimal required markup. You can extend the grid component with thumbnails.
+Thumbnails are designed to showcase linked images with minimal required markup. You can extend the grid component with thumbnails.
-Creates an anchor wrapping an image.
Creates a divider wrapping an image and other children elements.
Quick previous and next links.
-Centers by default.
+Set the href or onClick prop on ListGroupItem, to create a linked or clickable element.
Set the active or disabled prop to true to mark or disable the item.
Set the bsStyle prop to style the item
Set the header prop to create a structured item, with a heading and a body area.
Create a {''} show highlight information
Create a {''} to highlight information
Add any of the below mentioned modifier classes to change the appearance of a label.
Easily highlight new or unread items by adding a {' to links, Bootstrap navs, and more.
Unlike regular Bootstrap badges self collapse even in Internet Explorer 8.
A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
-A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1’s default small element, as well as most other components (with additional styles).
Use the well as a simple effect on an element to give it an inset effect.
-Control padding and rounded corners with two optional modifier classes.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
-Use the striped, bordered, condensed and hover props to customise the table.
Add responsive prop to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Renders an input in bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
Use getValue() or getChecked() to get the current state.
The helper method getInputDOMNode() returns the internal input element. If you don't want the form-group class applied apply the prop named standalone.
Supports select, textarea, as well as standard HTML input types. getValue() returns an array for multiple select.
Static text can be added to your form controls through the use of the FormControls.Static component.
Form buttons are encapsulated by ButtonInput. Pass in type="reset" or type="submit" to suit your needs. Styling is the same as Button.
Use addonBefore and addonAfter for normal addons, buttonBefore and buttonAfter for button addons.
Exotic configurations may require some css on your side.
Use bsSize to change the size of inputs. It also works with addons and most other options.
Set bsStyle to one of success, warning or error.
Add hasFeedback to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.
Use labelClassName and wrapperClassName properties to add col classes manually.
checkbox and radio types need special treatment because label wraps input.
If type is not set, child element(s) will be rendered instead of an input element.
getValue() will not work when used this way.
A Component that renders its children into a new React "subtree" or container. The Portal component kind of like the React
equivalent to jQuery's .appendTo(), which is helpful for components that need to be appended to a DOM node other than
the component's direct parent. The Modal, and Overlay components use the Portal component internally.
A Component that absolutely positions its child to a target component or DOM node. Useful for creating custom
popups or tooltips. Used by the Overlay Components.