Skip to content

Commit f97afcc

Browse files
taiontaion
committed
Merge pull request react-bootstrap#1505 from taion/docs-tweak
Improve organization of components page
2 parents 5bf27fa + 0aeaf27 commit f97afcc

34 files changed

+1440
-955
lines changed

‎docs/examples/PagerDefault.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const pagerInstance = (
22
<Pager>
33
<PageItem href="#">Previous</PageItem>
4+
{' '}
45
<PageItem href="#">Next</PageItem>
56
</Pager>
67
);

‎docs/src/ComponentsPage.js

+153-955
Large diffs are not rendered by default.

‎docs/src/sections/AlertsSection.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function AlertsSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h2 className="page-header">
12+
<Anchor id="alerts">Alert messages</Anchor> <small>Alert</small>
13+
</h2>
14+
15+
<p>Basic alert styles.</p>
16+
<ReactPlayground codeText={Samples.AlertBasic} />
17+
18+
<h3><Anchor id="alerts-closeable">Closeable alerts</Anchor></h3>
19+
<p>just pass in a <code>onDismiss</code> function.</p>
20+
<ReactPlayground codeText={Samples.AlertDismissable} />
21+
22+
<div className="bs-callout bs-callout-info">
23+
<h4>Screen Reader Accessibility</h4>
24+
<p>Unlike regular Bootstrap, alerts have an sr-only dismiss button after the content.</p>
25+
</div>
26+
27+
<h3><Anchor id="alerts-auto-closeable">Auto closeable</Anchor></h3>
28+
<p>Auto close after a set time with <code>dismissAfter</code> prop.</p>
29+
<ReactPlayground codeText={Samples.AlertAutoDismissable} />
30+
31+
<h3><Anchor id="alert-props">Props</Anchor></h3>
32+
<PropTable component="Alert"/>
33+
</div>
34+
);
35+
}

‎docs/src/sections/BadgeSection.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function BadgeSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h2 className="page-header">
12+
<Anchor id="badges">Badges</Anchor> <small>Badge</small>
13+
</h2>
14+
15+
<p>Easily highlight new or unread items by adding a <code>{"<Badge>"}</code> to links, Bootstrap navs, and more.</p>
16+
<ReactPlayground codeText={Samples.Badge} />
17+
<div className="bs-callout bs-callout-info">
18+
<h4>Cross-browser compatibility</h4>
19+
<p>Unlike regular Bootstrap badges self collapse even in Internet Explorer 8.</p>
20+
</div>
21+
22+
<h3><Anchor id="badges-props">Props</Anchor></h3>
23+
<PropTable component="Badge"/>
24+
</div>
25+
);
26+
}

‎docs/src/sections/BreadcrumbSection.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function BreadcrumbSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h2 className="page-header">
12+
<Anchor id="breadcrumbs">Breadcrumbs</Anchor> <small>Breadcrumb, BreadcrumbItem</small>
13+
</h2>
14+
15+
<p>Breadcrumbs are used to indicate the current page's location. Add <code>active</code> attribute to active <code>BreadcrumbItem</code>.</p>
16+
<p>Do not set both <code>active</code> and <code>href</code> attributes. <code>active</code> overrides <code>href</code> and <code>span</code> element is rendered instead of <code>a</code>.</p>
17+
18+
<h3><Anchor id="breadcrumbs-example">Breadcrumbs Example</Anchor></h3>
19+
<ReactPlayground codeText={Samples.Breadcrumb} />
20+
21+
<h3><Anchor id="breadcrumbs-props">Props</Anchor></h3>
22+
<p><code>Breadcrumb</code> component itself doesn't have any specific public properties</p>
23+
24+
<h4><Anchor id="breadcrumbs-props-breadcrumbItem">BreadcrumbItem</Anchor></h4>
25+
<PropTable component="BreadcrumbItem"/>
26+
</div>
27+
);
28+
}

‎docs/src/sections/ButtonGroupSection.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function ButtonGroupSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h2 className="page-header">
12+
<Anchor id="btn-groups">Button groups</Anchor> <small>ButtonGroup, ButtonToolbar</small>
13+
</h2>
14+
15+
<p className="lead">Group a series of buttons together on a single line with the button group.</p>
16+
17+
<h3><Anchor id="btn-groups-single">Basic example</Anchor></h3>
18+
<p>Wrap a series of <code>{"<Button />"}</code>s in a <code>{"<ButtonGroup />"}</code>.</p>
19+
<ReactPlayground codeText={Samples.ButtonGroupBasic} />
20+
21+
<h3><Anchor id="btn-groups-toolbar">Button toolbar</Anchor></h3>
22+
<p>Combine sets of <code>{"<ButtonGroup />"}</code>s into a <code>{"<ButtonToolbar />"}</code> for more complex components.</p>
23+
<ReactPlayground codeText={Samples.ButtonToolbarBasic} />
24+
25+
<h3><Anchor id="btn-groups-sizing">Sizing</Anchor></h3>
26+
<p>Instead of applying button sizing props to every button in a group, just add <code>bsSize</code> prop to the <code>{"<ButtonGroup />"}</code>.</p>
27+
<ReactPlayground codeText={Samples.ButtonGroupSizes} />
28+
29+
<h3><Anchor id="btn-groups-nested">Nesting</Anchor></h3>
30+
<p>You can place other button types within the <code>{"<ButtonGroup />"}</code> like <code>{"<DropdownButton />"}</code>s.</p>
31+
<ReactPlayground codeText={Samples.ButtonGroupNested} />
32+
33+
<h3><Anchor id="btn-groups-vertical">Vertical variation</Anchor></h3>
34+
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strong
35+
className="text-danger">Split button dropdowns are not supported here.</strong></p>
36+
<p>Just add <code>vertical</code> to the <code>{"<ButtonGroup />"}</code>.</p>
37+
<ReactPlayground codeText={Samples.ButtonGroupVertical} />
38+
<br />
39+
<p>Moreover, you can have buttons be block level elements so they take the full width of their container, just add <code>block</code> to the <code>{"<ButtonGroup />"}</code>, in addition to the <code>vertical</code> you just added.</p>
40+
<ReactPlayground codeText={Samples.ButtonGroupBlock} />
41+
42+
<h3><Anchor id="btn-groups-justified">Justified button groups</Anchor></h3>
43+
<p>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.</p>
44+
<div className="bs-callout bs-callout-warning">
45+
<h4>Style issues</h4>
46+
<p>There are some issues and workarounds required when using this property, please see <a href="http://getbootstrap.com/components/#btn-groups-justified">bootstrap&#8217;s button group docs</a> for more specifics.</p>
47+
</div>
48+
<p>Just add <code>justified</code> to the <code>{"<ButtonGroup />"}</code>.</p>
49+
<ReactPlayground codeText={Samples.ButtonGroupJustified} />
50+
51+
<h3><Anchor id="btn-groups-props">Props</Anchor></h3>
52+
<PropTable component="ButtonGroup"/>
53+
</div>
54+
);
55+
}

‎docs/src/sections/ButtonSection.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function ButtonSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h1 className="page-header">
12+
<Anchor id="buttons">Buttons</Anchor> <small>Button</small>
13+
</h1>
14+
15+
<h3><Anchor id="buttons-options">Options</Anchor></h3>
16+
<p>Use any of the available button style types to quickly create a styled button. Just modify the <code>bsStyle</code> prop.</p>
17+
<ReactPlayground codeText={Samples.ButtonTypes} />
18+
<div className="bs-callout bs-callout-warning">
19+
<h4>Button spacing</h4>
20+
<p>Because React doesn't output newlines between elements, buttons on the same line are displayed
21+
flush against each other. To preserve the spacing between multiple inline buttons, wrap your
22+
button group in <code>{"<ButtonToolbar />"}</code>.</p>
23+
</div>
24+
25+
<h3><Anchor id="buttons-sizes">Sizes</Anchor></h3>
26+
<p>Fancy larger or smaller buttons? Add <code>bsSize="large"</code>, <code>bsSize="small"</code>, or <code>bsSize="xsmall"</code> for additional sizes.</p>
27+
<ReactPlayground codeText={Samples.ButtonSizes} />
28+
29+
<p>Create block level buttons—those that span the full width of a parent— by adding the <code>block</code> prop.</p>
30+
<ReactPlayground codeText={Samples.ButtonBlock} />
31+
32+
<h3><Anchor id="buttons-active">Active state</Anchor></h3>
33+
<p>To set a buttons active state simply set the components <code>active</code> prop.</p>
34+
<ReactPlayground codeText={Samples.ButtonActive} />
35+
36+
<h3><Anchor id="buttons-disabled">Disabled state</Anchor></h3>
37+
<p>Make buttons look unclickable by fading them back 50%. To do this add the <code>disabled</code> attribute to buttons.</p>
38+
<ReactPlayground codeText={Samples.ButtonDisabled} />
39+
40+
<div className="bs-callout bs-callout-warning">
41+
<h4>Event handler functionality not impacted</h4>
42+
<p>This prop will only change the <code>{"<Button />"}</code>&#8217;s appearance, not its
43+
functionality. Use custom logic to disable the effect of the <code>onClick</code> handlers.</p>
44+
</div>
45+
46+
<h3><Anchor id="buttons-tags">Button tags</Anchor></h3>
47+
<p>The DOM element tag is choosen automatically for you based on the props you supply. Passing
48+
a <code>href</code> will result in the button using a <code>{"<a />"}</code> element otherwise
49+
a <code>{"<button />"}</code> element will be used.</p>
50+
<ReactPlayground codeText={Samples.ButtonTagTypes} />
51+
52+
<h3><Anchor id="buttons-loading">Button loading state</Anchor></h3>
53+
<p>When activating an asynchronous action from a button it is a good UX pattern to give the user
54+
feedback as to the loading state, this can easily be done by updating
55+
your <code>{"<Button />"}</code>&#8217;s props from a state change like below.</p>
56+
<ReactPlayground codeText={Samples.ButtonLoading} />
57+
58+
<h3><Anchor id="buttons-props">Props</Anchor></h3>
59+
<PropTable component="Button"/>
60+
</div>
61+
);
62+
}

‎docs/src/sections/CarouselSection.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function CarouselSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h2 className="page-header">
12+
<Anchor id="carousels">Carousels</Anchor> <small>Carousel, CarouselItem</small>
13+
</h2>
14+
15+
<h3><Anchor id="carousels-uncontrolled">Uncontrolled</Anchor></h3>
16+
<p>Allow the component to control its own state.</p>
17+
<ReactPlayground codeText={Samples.CarouselUncontrolled} exampleClassName="bs-example-tabs" />
18+
19+
<h3><Anchor id="carousels-controlled">Controlled</Anchor></h3>
20+
<p>Pass down the active state on render via props.</p>
21+
<ReactPlayground codeText={Samples.CarouselControlled} exampleClassName="bs-example-tabs" />
22+
23+
<h3><Anchor id="carousels-props">Props</Anchor></h3>
24+
25+
<h4><Anchor id="carousels-props-carousel">Carousel</Anchor></h4>
26+
<PropTable component="Carousel"/>
27+
28+
<h4><Anchor id="carousels-props-item">CarouselItem</Anchor></h4>
29+
<PropTable component="CarouselItem"/>
30+
</div>
31+
);
32+
}

‎docs/src/sections/DropdownSection.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function DropdownSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h2 className="page-header">
12+
<Anchor id="btn-dropdowns">Dropdowns</Anchor> <small>DropdownButton, SplitButton, Dropdown</small>
13+
</h2>
14+
15+
<h3><Anchor id="btn-dropdowns-single">Single button dropdowns</Anchor></h3>
16+
<p>Create a dropdown button with the <code>{"<DropdownButton />"}</code> component.</p>
17+
<ReactPlayground codeText={Samples.DropdownButtonBasic} />
18+
19+
<h3><Anchor id="btn-dropdowns-split">Split button dropdowns</Anchor></h3>
20+
<p>Similarly, create split button dropdowns with the <code>{"<SplitButton />"}</code> component.</p>
21+
<ReactPlayground codeText={Samples.SplitButtonBasic} />
22+
23+
<h3><Anchor id="btn-dropdowns-sizing">Sizing</Anchor></h3>
24+
<p>Dropdowns work with buttons of all sizes.</p>
25+
<ReactPlayground codeText={Samples.DropdownButtonSizes} />
26+
27+
<h3><Anchor id="btn-dropdowns-nocaret">No caret variation</Anchor></h3>
28+
<p>Remove the caret using the <code>noCaret</code> prop.</p>
29+
<ReactPlayground codeText={Samples.DropdownButtonNoCaret} />
30+
31+
<h3><Anchor id="btn-dropdowns-dropup">Dropup variation</Anchor></h3>
32+
<p>Trigger dropdown menus that site above the button by adding the <code>dropup</code> prop.</p>
33+
<ReactPlayground codeText={Samples.SplitButtonDropup} />
34+
35+
<h3><Anchor id="btn-dropdowns-right">Dropdown right variation</Anchor></h3>
36+
<p>Trigger dropdown menus that align to the right of the button using the <code>pullRight</code> prop.</p>
37+
<ReactPlayground codeText={Samples.SplitButtonRight} />
38+
39+
<h3><Anchor id="btn-dropdowns-custom">Dropdown Customization</Anchor></h3>
40+
<p>
41+
If the default handling of the dropdown menu and toggle components aren't to your liking, you can
42+
customize them, by using the more basic <code>Dropdown</code> Component to explicitly specify
43+
the Toggle and Menu components
44+
</p>
45+
<div className="bs-callout bs-callout-info">
46+
<h4>Additional Import Options</h4>
47+
<p>
48+
As a convenience Toggle and Menu components available as static properties
49+
on the Dropdown component. However, you can also import them directly, from
50+
the <code>/lib</code> directory like: <code>{'require("react-bootstrap/lib/DropdownToggle")'}</code>.
51+
</p>
52+
</div>
53+
<ReactPlayground codeText={Samples.DropdownButtonCustom} />
54+
55+
<h4>Custom Dropdown Components</h4>
56+
57+
<p>
58+
For those that want to customize everything, you can forgo the included Toggle and Menu components,
59+
and create your own. In order to tell the Dropdown component what role your custom components play
60+
add a special prop <code>bsRole</code> to your menu or toggle components. The Dropdown expects
61+
at least one component with <code>bsRole="toggle"</code> and exactly one with <code>bsRole="menu"</code>.
62+
</p>
63+
<ReactPlayground codeText={Samples.DropdownButtonCustomMenu} />
64+
65+
<h3><Anchor id="btn-dropdowns-props">Props</Anchor></h3>
66+
67+
<h4><Anchor id="btn-dropdowns-props-dropdown-button">DropdownButton</Anchor></h4>
68+
<PropTable component="DropdownButton"/>
69+
70+
<h4><Anchor id="btn-dropdowns-props-split">SplitButton</Anchor></h4>
71+
<PropTable component="SplitButton"/>
72+
73+
<h4><Anchor id="btn-dropdowns-props-dropdown">Dropdown</Anchor></h4>
74+
<PropTable component="Dropdown"/>
75+
</div>
76+
);
77+
}

‎docs/src/sections/FormSection.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
3+
import Anchor from '../Anchor';
4+
import PropTable from '../PropTable';
5+
import ReactPlayground from '../ReactPlayground';
6+
import Samples from '../Samples';
7+
8+
export default function FormSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h1 className="page-header">
12+
<Anchor id="forms">Forms</Anchor> <small>Input, ButtonInput, FormControls</small>
13+
</h1>
14+
15+
<p>The <code>{'<Input>'}</code> component renders an input in Bootstrap wrappers. Supports label, help, text input add-ons, validation and use as wrapper.
16+
Use <code>getValue()</code> or <code>getChecked()</code> to get the current state.
17+
The helper method <code>getInputDOMNode()</code> returns the internal input element. If you don't want the <code>form-group</code> class applied apply the prop named <code>standalone</code>.</p>
18+
<ReactPlayground codeText={Samples.Input} />
19+
20+
<h3><Anchor id="input-types">Types</Anchor></h3>
21+
<p>Supports <code>select</code>, <code>textarea</code>, as well as standard HTML input types. <code>getValue()</code> returns an array for multiple select.</p>
22+
<ReactPlayground codeText={Samples.InputTypes} />
23+
24+
<h3><Anchor id="forms-controls-static">FormControls.Static</Anchor></h3>
25+
<p>Static text can be added to your form controls through the use of the <code>FormControls.Static</code> component.</p>
26+
<ReactPlayground codeText={Samples.StaticText} />
27+
28+
<h3><Anchor id="button-input-types">Button Input Types</Anchor></h3>
29+
<p>Form buttons are encapsulated by <code>ButtonInput</code>. Pass in <code>type="reset"</code> or <code>type="submit"</code> to suit your needs. Styling is the same as <code>Button</code>.</p>
30+
<ReactPlayground codeText={Samples.ButtonInput} />
31+
32+
<h3><Anchor id="input-addons">Add-ons</Anchor></h3>
33+
<p>Use <code>addonBefore</code> and <code>addonAfter</code> for normal addons, <code>buttonBefore</code> and <code>buttonAfter</code> for button addons.
34+
Exotic configurations may require some css on your side.</p>
35+
<ReactPlayground codeText={Samples.InputAddons} />
36+
37+
<h3><Anchor id="input-sizes">Sizes</Anchor></h3>
38+
<p>Use <code>bsSize</code> to change the size of inputs. It also works with addons and most other options.</p>
39+
<ReactPlayground codeText={Samples.InputSizes} />
40+
41+
<h3><Anchor id="input-validation">Validation</Anchor></h3>
42+
<p>Set <code>bsStyle</code> to one of <code>success</code>, <code>warning</code> or <code>error</code>.
43+
Add <code>hasFeedback</code> to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.</p>
44+
<ReactPlayground codeText={Samples.InputValidation} />
45+
46+
<h3><Anchor id="input-horizontal">Horizontal forms</Anchor></h3>
47+
<p>Use <code>labelClassName</code> and <code>wrapperClassName</code> properties to add col classes manually.
48+
<code>checkbox</code> and <code>radio</code> types need special treatment because label wraps input.</p>
49+
<ReactPlayground codeText={Samples.InputHorizontal} />
50+
51+
<h3><Anchor id="input-wrapper">Use as a wrapper</Anchor></h3>
52+
<p>If <code>type</code> is not set, child element(s) will be rendered instead of an input element.
53+
<code>getValue()</code> will not work when used this way.</p>
54+
<ReactPlayground codeText={Samples.InputWrapper} />
55+
56+
<h3><Anchor id="input-props">Props</Anchor></h3>
57+
<PropTable component="InputBase"/>
58+
</div>
59+
);
60+
}

0 commit comments

Comments
 (0)