Skip to content

Commit 234db05

Browse files
taiontaion
committed
Break up components page
1 parent 83d5be9 commit 234db05

33 files changed

+1368
-931
lines changed

‎docs/src/ComponentsPage.js

Lines changed: 80 additions & 931 deletions
Large diffs are not rendered by default.

‎docs/src/sections/AlertsSection.js

Lines changed: 35 additions & 0 deletions
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+
<h1 className="page-header">
12+
<Anchor id="alerts">Alert messages</Anchor> <small>Alert</small>
13+
</h1>
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

Lines changed: 26 additions & 0 deletions
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+
<h1 className="page-header">
12+
<Anchor id="badges">Badges</Anchor> <small>Badge</small>
13+
</h1>
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

Lines changed: 28 additions & 0 deletions
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+
<h1 className="page-header">
12+
<Anchor id="breadcrumbs">Breadcrumbs</Anchor> <small>Breadcrumb, BreadcrumbItem</small>
13+
</h1>
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

Lines changed: 55 additions & 0 deletions
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

Lines changed: 62 additions & 0 deletions
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

Lines changed: 32 additions & 0 deletions
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+
<h1 className="page-header">
12+
<Anchor id="carousels">Carousels</Anchor> <small>Carousel, CarouselItem</small>
13+
</h1>
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

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

‎docs/src/sections/GlyphiconSection.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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 GlyphiconSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h1 className="page-header">
12+
<Anchor id="glyphicons">Glyphicons</Anchor> <small>Glyphicon</small>
13+
</h1>
14+
15+
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
16+
<ReactPlayground codeText={Samples.Glyphicon} />
17+
18+
<h3><Anchor id="glyphicons-props">Props</Anchor></h3>
19+
<PropTable component="Glyphicon"/>
20+
</div>
21+
);
22+
}

‎docs/src/sections/GridSection.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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 GridSection() {
9+
return (
10+
<div className="bs-docs-section">
11+
<h1 className="page-header">
12+
<Anchor id="grids">Grids</Anchor> <small>Grid, Row, Col</small>
13+
</h1>
14+
15+
<ReactPlayground codeText={Samples.GridBasic} exampleClassName="bs-example-tabs" />
16+
17+
<h3><Anchor id="grids-props">Props</Anchor></h3>
18+
19+
<h4><Anchor id="grids-props-grid">Grid</Anchor></h4>
20+
<PropTable component="Grid"/>
21+
22+
<h4><Anchor id="grids-props-row">Row</Anchor></h4>
23+
<PropTable component="Row"/>
24+
25+
<h4><Anchor id="grids-props-col">Col</Anchor></h4>
26+
<PropTable component="Col"/>
27+
</div>
28+
);
29+
}

0 commit comments

Comments
 (0)