Skip to content

Commit 5dbafd3

Browse files
jquensejquense
committed
[changed] Split the Navbar component into sub-components
1 parent 60a7b07 commit 5dbafd3

22 files changed

+487
-442
lines changed

‎docs/examples/.eslintrc

+4-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@
3434
"ListGroup",
3535
"ListGroupItem",
3636
"Nav",
37-
"NavBrand",
37+
"NavbarBrand",
38+
"NavbarHeader",
39+
"NavbarToggle",
40+
"NavbarCollapse",
3841
"Navbar",
3942
"NavDropdown",
4043
"NavItem",

‎docs/examples/CollapsibleNav.js

-24
This file was deleted.

‎docs/examples/NavbarBasic.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
const navbarInstance = (
22
<Navbar>
3-
<NavBrand><a href="#">React-Bootstrap</a></NavBrand>
3+
<Navbar.Header>
4+
<Navbar.Brand>
5+
<a href="#">React-Bootstrap</a>
6+
</Navbar.Brand>
7+
</Navbar.Header>
48
<Nav>
59
<NavItem eventKey={1} href="#">Link</NavItem>
610
<NavItem eventKey={2} href="#">Link</NavItem>

‎docs/examples/NavbarCollapsible.js

+24-13
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
11
const navbarInstance = (
2-
<Navbar inverse toggleNavKey={0}>
3-
<NavBrand><a href="#">React-Bootstrap</a></NavBrand>
4-
<Nav right eventKey={0}> {/* This is the eventKey referenced */}
5-
<NavItem eventKey={1} href="#">Link</NavItem>
6-
<NavItem eventKey={2} href="#">Link</NavItem>
7-
<NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
8-
<MenuItem eventKey="1">Action</MenuItem>
9-
<MenuItem eventKey="2">Another action</MenuItem>
10-
<MenuItem eventKey="3">Something else here</MenuItem>
11-
<MenuItem divider />
12-
<MenuItem eventKey="4">Separated link</MenuItem>
13-
</NavDropdown>
14-
</Nav>
2+
<Navbar inverse>
3+
<Navbar.Header>
4+
<Navbar.Brand>
5+
<a href="#">React-Bootstrap</a>
6+
</Navbar.Brand>
7+
<Navbar.Toggle />
8+
</Navbar.Header>
9+
<Navbar.Collapse>
10+
<Nav>
11+
<NavItem eventKey={1} href="#">Link</NavItem>
12+
<NavItem eventKey={2} href="#">Link</NavItem>
13+
<NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
14+
<MenuItem eventKey="1">Action</MenuItem>
15+
<MenuItem eventKey="2">Another action</MenuItem>
16+
<MenuItem eventKey="3">Something else here</MenuItem>
17+
<MenuItem divider />
18+
<MenuItem eventKey="4">Separated link</MenuItem>
19+
</NavDropdown>
20+
</Nav>
21+
<Nav right>
22+
<NavItem eventKey={1} href="#">Link Right</NavItem>
23+
<NavItem eventKey={2} href="#">Link Right</NavItem>
24+
</Nav>
25+
</Navbar.Collapse>
1526
</Navbar>
1627
);
1728

‎docs/examples/NavbarForm.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const navbarInstance = (
2+
<Navbar>
3+
<Navbar.Header>
4+
<Navbar.Brand>
5+
<a href="#">Brand</a>
6+
</Navbar.Brand>
7+
<Navbar.Toggle />
8+
</Navbar.Header>
9+
<Navbar.Collapse>
10+
<Navbar.Form pullLeft>
11+
<div className="form-group">
12+
<Input type="text" placeholder="Search"/>
13+
</div>
14+
{' '}
15+
<Button type="submit">Submit</Button>
16+
</Navbar.Form>
17+
</Navbar.Collapse>
18+
</Navbar>
19+
);
20+
21+
ReactDOM.render(navbarInstance, mountNode);

‎docs/examples/NavbarTextLink.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const navbarInstance = (
2+
<Navbar>
3+
<Navbar.Header>
4+
<Navbar.Brand>
5+
<a href="#">Brand</a>
6+
</Navbar.Brand>
7+
<Navbar.Toggle />
8+
</Navbar.Header>
9+
<Navbar.Collapse>
10+
<Navbar.Text>
11+
Signed in as: <Navbar.Link href="#">Mark Otto</Navbar.Link>
12+
</Navbar.Text>
13+
<Navbar.Text pullRight>
14+
Have a great day!
15+
</Navbar.Text>
16+
</Navbar.Collapse>
17+
</Navbar>
18+
);
19+
20+
ReactDOM.render(navbarInstance, mountNode);

‎docs/src/ComponentsPage.js

+52-31
Original file line numberDiff line numberDiff line change
@@ -501,51 +501,72 @@ const ComponentsPage = React.createClass({
501501

502502
{/* Navbar */}
503503
<div className="bs-docs-section">
504-
<h1 className="page-header"><Anchor id="navbars">Navbars</Anchor> <small>Navbar, NavBrand, Nav, NavItem</small></h1>
504+
<h1 className="page-header">
505+
<Anchor id="navbars">Navbars</Anchor>{' '}
506+
<small>Navbar, NavbarBrand, NavbarHeader, NavbarToggle, NavbarCollapse</small>
507+
</h1>
505508

506-
<p>Navbars are by default accessible and will provide <code>role="navigation"</code>.</p>
507-
<p>They also supports all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it. For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>. The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>, <code>inverse</code>, <code>fluid</code>.</p>
508-
<p>You can specify a brand node by wrapping it in a <code>NavBrand</code> element and passing it as a child to the <code>Navbar</code>.</p>
509-
<p>You can drag elements to the right by specifying the <code>right</code> property on the <code>Nav</code> component.</p>
509+
<p>
510+
They also supports all the different Bootstrap classes as properties. Just camelCase
511+
the css class and remove navbar from it.
512+
513+
For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>.
514+
The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>
515+
, <code>inverse</code>, <code>fluid</code>.
516+
</p>
517+
<p>
518+
You can also align elements to the right by specifying the <code>right</code> prop on
519+
the <code>Nav</code> component.
520+
</p>
510521

511522
<h3><Anchor id="navbars-basic">Navbar Basic Example</Anchor></h3>
512523
<ReactPlayground codeText={Samples.NavbarBasic} />
513-
514-
<h3><Anchor id="navbars-mobile-friendly">Mobile Friendly</Anchor></h3>
515-
<p>To have a mobile friendly Navbar, specify the property <code>toggleNavKey</code> on the Navbar with a value corresponding to an <code>eventKey</code> of one of his <code>Nav</code> children. This child will be the one collapsed.</p>
516-
<p>By setting the property {React.DOM.code(null, 'defaultNavExpanded')} the Navbar will start expanded by default.</p>
517524
<div className="bs-callout bs-callout-info">
518-
<h4>Scrollbar overflow</h4>
519-
<p>The height of the collapsible is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
520-
<pre>
521-
{React.DOM.code(null,
522-
'.navbar-collapse {\n' +
523-
' overflow: hidden;\n' +
524-
'}\n'
525-
)}
526-
</pre>
525+
<h4>Additional Import Options</h4>
526+
<p>
527+
The Navbar Header, Toggle, Brand, and Collapse components are available as static properties
528+
the <code>{"<Navbar/>"}</code> component, but you can also,
529+
import them directly from the <code>/lib</code> directory
530+
like: <code>{'require("react-bootstrap/lib/NavbarHeader")'}</code>.
531+
</p>
527532
</div>
533+
534+
<h3><Anchor id="navbars-mobile-friendly">Responsive Navbars</Anchor></h3>
535+
<p>
536+
To have a mobile friendly Navbar, Add a <code>Navbar.Toggle</code> to your Header and wrap your
537+
Navs in a <code>Navbar.Collapse</code> component. The <code>Navbar</code> will automatically wire
538+
the toggle and collapse together!
539+
</p>
540+
<p>
541+
By setting the prop <code>defaultNavExpanded</code> the Navbar will start
542+
expanded by default. You can also finely control the collapsing behavior by using
543+
the <code>navExpanded</code> and <code>onToggle</code> props.
544+
</p>
545+
528546
<ReactPlayground codeText={Samples.NavbarCollapsible} />
529547

530-
<h3><Anchor id="navbars-mobile-friendly-multiple">Mobile Friendly (Multiple Nav Components)</Anchor></h3>
531-
<p>To have a mobile friendly Navbar that handles multiple <code>Nav</code> components use <code>CollapsibleNav</code>. The <code>toggleNavKey</code> must still be set, however, the corresponding <code>eventKey</code> must now be on the <code>CollapsibleNav</code> component.</p>
532-
<div className="bs-callout bs-callout-info">
533-
<h4>Div collapse</h4>
534-
<p>The <code>navbar-collapse</code> div gets created as the collapsible element which follows the <a href="http://getbootstrap.com/components/#navbar-default">bootstrap</a> collapsible navbar documentation.</p>
535-
<pre>&lt;div class="collapse navbar-collapse"&gt;&lt;/div&gt;</pre>
536-
</div>
537-
<ReactPlayground codeText={Samples.CollapsibleNav} />
548+
<h3><Anchor id="navbars-form">Forms</Anchor></h3>
549+
<p>
550+
Use the <code>Navbar.Form</code> convenience component to apply proper margins and alignment to
551+
form components.
552+
</p>
553+
<ReactPlayground codeText={Samples.NavbarForm} />
554+
555+
<h3><Anchor id="navbars-text-link">Text and Non-nav links</Anchor></h3>
556+
<p>
557+
Loose text and links can be wraped in the convenience
558+
components: <code>Navbar.Link</code> and <code>Navbar.Text</code>
559+
</p>
560+
561+
<ReactPlayground codeText={Samples.NavbarTextLink} />
538562

539563
<h3><Anchor id="navbar-props">Props</Anchor></h3>
540564

541565
<h4><Anchor id="navs-props-navbar">Navbar</Anchor></h4>
542566
<PropTable component="Navbar"/>
543567

544-
<h4><Anchor id="navs-props-navbrand">NavBrand</Anchor></h4>
545-
<PropTable component="NavBrand"/>
546-
547-
<h4><Anchor id="navs-props-collapsiblenav">CollapsibleNav</Anchor></h4>
548-
<PropTable component="CollapsibleNav"/>
568+
<h4><Anchor id="navs-props-navbrand">NavbarToggle, Navbar.Toggle</Anchor></h4>
569+
<PropTable component="NavbarToggle"/>
549570
</div>
550571

551572
{/* Breadcrumb */}

‎docs/src/NavMain.js

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { Link } from 'react-router';
33
import Navbar from '../../src/Navbar';
4-
import NavBrand from '../../src/NavBrand';
54
import Nav from '../../src/Nav';
65

76
const NAV_LINKS = {
@@ -37,11 +36,19 @@ const NavMain = React.createClass({
3736
]);
3837

3938
return (
40-
<Navbar componentClass="header" staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
41-
<NavBrand>{brand}</NavBrand>
42-
<Nav className="bs-navbar-collapse" role="navigation" eventKey={0} id="top">
43-
{links}
44-
</Nav>
39+
<Navbar staticTop
40+
componentClass="header"
41+
className="bs-docs-nav"
42+
role="banner"
43+
>
44+
<Navbar.Header>
45+
{brand}
46+
</Navbar.Header>
47+
<Navbar.Collapse className="bs-navbar-collapse" >
48+
<Nav role="navigation" id="top">
49+
{links}
50+
</Nav>
51+
</Navbar.Collapse>
4552
</Navbar>
4653
);
4754
},

‎docs/src/PropTable.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const PropTable = React.createClass({
4646
let propsData = this.propsData;
4747

4848
if (!Object.keys(propsData).length) {
49-
return <span/>;
49+
return <div className="text-muted"><em>There are no public props for this component.</em></div>;
5050
}
5151

5252
return (

‎docs/src/ReactPlayground.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const ListGroupItem = require('../../src/ListGroupItem');
3636
const MenuItem = require('../../src/MenuItem');
3737
const Modal = require('../../src/Modal');
3838
const Nav = require('../../src/Nav');
39-
const NavBrand = require('../../src/NavBrand');
39+
const NavbarBrand = require('../../src/NavbarBrand');
4040
const Navbar = require('../../src/Navbar');
4141
const NavItem = require('../../src/NavItem');
4242
const NavDropdown = require('../../src/NavDropdown');

‎docs/src/Samples.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ export default {
6262
NavJustified: require('fs').readFileSync(__dirname + '/../examples/NavJustified.js', 'utf8'),
6363
NavbarBasic: require('fs').readFileSync(__dirname + '/../examples/NavbarBasic.js', 'utf8'),
6464
NavbarCollapsible: require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsible.js', 'utf8'),
65-
CollapsibleNav: require('fs').readFileSync(__dirname + '/../examples/CollapsibleNav.js', 'utf8'),
65+
NavbarForm: require('fs').readFileSync(__dirname + '/../examples/NavbarForm.js', 'utf8'),
66+
NavbarTextLink: require('fs').readFileSync(__dirname + '/../examples/NavbarTextLink.js', 'utf8'),
6667
TabsUncontrolled: require('fs').readFileSync(__dirname + '/../examples/TabsUncontrolled.js', 'utf8'),
6768
TabsControlled: require('fs').readFileSync(__dirname + '/../examples/TabsControlled.js', 'utf8'),
6869
TabsNoAnimation: require('fs').readFileSync(__dirname + '/../examples/TabsNoAnimation.js', 'utf8'),

0 commit comments

Comments
 (0)