[added] Example for collapsable Navbar in docs.

kyletsang · Feb 17, 2015 · 1556e63 · 1556e63
1 parent f26e39f
commit 1556e63
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js
@@ -1,5 +1,5 @@
 var navbarInstance = (
-    <Navbar>
+    <Navbar brand="React-Bootstrap">
       <Nav>
         <NavItem eventKey={1} href="#">Link</NavItem>
         <NavItem eventKey={2} href="#">Link</NavItem>
@@ -14,4 +14,4 @@ var navbarInstance = (
     </Navbar>
   );
 
-React.render(navbarInstance, mountNode);
+React.render(navbarInstance, mountNode);
diff --git a/docs/examples/NavbarCollapsable.js b/docs/examples/NavbarCollapsable.js
@@ -0,0 +1,17 @@
+var navbarInstance = (
+    <Navbar brand="React-Bootstrap" inverse toggleNavKey={0}>
+      <Nav right eventKey={0}> {/* This is the eventKey referenced */}
+        <NavItem eventKey={1} href="#">Link</NavItem>
+        <NavItem eventKey={2} href="#">Link</NavItem>
+        <DropdownButton eventKey={3} title="Dropdown">
+          <MenuItem eventKey="1">Action</MenuItem>
+          <MenuItem eventKey="2">Another action</MenuItem>
+          <MenuItem eventKey="3">Something else here</MenuItem>
+          <MenuItem divider />
+          <MenuItem eventKey="4">Separated link</MenuItem>
+        </DropdownButton>
+      </Nav>
+    </Navbar>
+  );
+
+React.render(navbarInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -331,8 +331,28 @@ var ComponentsPage = React.createClass({
                 <div className="bs-docs-section">
                   <h1 id="navbars" className="page-header">Navbars <small>Navbar, Nav, NavItem</small></h1>
                   <h2 id="navbars-examples">Example navbars</h2>
+                  <p>You can specify a brand by passing a renderable component or string in <code>brand</code></p>
+                  <p>Navbars are by default accessible and will provide <code>role="navigation"</code>.</p>
+                  <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>
+                  <p>You can drag elements to the right by specifying the <code>right</code> property on a nav group.</p>
 
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/NavbarBasic.js', 'utf8')} />
+
+                  <h3>Mobile Friendly</h3>
+                  <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>
+                  <p>By setting the property {React.DOM.code(null, "defaultNavExpanded={true}")} the Navbar will start expanded by default.</p>
+                  <div className="bs-callout bs-callout-info">
+                    <h4>Scrollbar overflow</h4>
+                    <p>The height of the collapsable is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
+                    <pre>
+                      {React.DOM.code(null,
+                        ".navbar-collapse {\n" +
+                        "  overflow: hidden;\n" +
+                        "}\n"
+                      )}
+                    </pre>
+                  </div>
+                  <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/NavbarCollapsable.js', 'utf8')} />
                 </div>
 
                 {/* Tabbed Areas */}