Merge pull request react-bootstrap#949 from AlexKVal/anchors

Add anchors to every component / example on Components page

Author: AlexKVal

docs/assets/style.css

@@ -172,3 +172,25 @@ body {
   margin: 5px 10px;
 
 }
+
+.anchor,
+.anchor:hover,
+.anchor:active,
+.anchor:focus {
+  color: black;
+  text-decoration: none;
+  position: relative;
+}
+.anchor-icon {
+  font-size: 90%;
+  padding-top: 0.1em;
+  position: absolute;
+  left: -0.8em;
+  opacity: 0;
+}
+h1:hover .anchor-icon,
+h2:hover .anchor-icon,
+h3:hover .anchor-icon,
+h4:hover .anchor-icon {
+  opacity: 0.5;
+}

docs/src/Anchor.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Anchor = React.createClass({
+  propTypes: {
+    id: React.PropTypes.string
+  },
+  render() {
+    return (
+      <a id={this.props.id} href={'#' + this.props.id} className='anchor'>
+        <span className='anchor-icon'>#</span>
+        {this.props.children}
+      </a>
+    );
+  }
+});
+
+export default Anchor;