From a4c065ef780a4a27c53d9220de63ef349044a585 Mon Sep 17 00:00:00 2001 From: AlexKVal Date: Mon, 6 Jul 2015 21:14:59 +0300 Subject: [PATCH] [added] links to every component / example on Components page --- docs/assets/style.css | 22 +++ docs/src/Anchor.js | 17 ++ docs/src/ComponentsPage.js | 387 ++++++++++++++++++------------------- 3 files changed, 232 insertions(+), 194 deletions(-) create mode 100644 docs/src/Anchor.js diff --git a/docs/assets/style.css b/docs/assets/style.css index d03afccb44..5e2de2b742 100644 --- a/docs/assets/style.css +++ b/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; +} diff --git a/docs/src/Anchor.js b/docs/src/Anchor.js new file mode 100644 index 0000000000..144bdb66b0 --- /dev/null +++ b/docs/src/Anchor.js @@ -0,0 +1,17 @@ +import React from 'react'; + +const Anchor = React.createClass({ + propTypes: { + id: React.PropTypes.string + }, + render() { + return ( + + # + {this.props.children} + + ); + } +}); + +export default Anchor; diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index 8820c68016..72196adf90 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -13,6 +13,7 @@ import PropTable from './PropTable'; import PageFooter from './PageFooter'; import ReactPlayground from './ReactPlayground'; import Samples from './Samples'; +import Anchor from './Anchor'; const ComponentsPage = React.createClass({ getInitialState() { @@ -58,8 +59,8 @@ const ComponentsPage = React.createClass({ {/* Buttons */}
-

Buttons Button

-

Options

+

Buttons Button

+

Options

Use any of the available button style types to quickly create a styled button. Just modify the bsStyle prop.

@@ -69,18 +70,18 @@ const ComponentsPage = React.createClass({ button group in {''}.

-

Sizes

+

Sizes

Fancy larger or smaller buttons? Add bsSize="large", bsSize="small", or bsSize="xsmall" for additional sizes.

Create block level buttons—those that span the full width of a parent— by adding the block prop.

-

Active state

+

Active state

To set a buttons active state simply set the components active prop.

-

Disabled state

+

Disabled state

Make buttons look unclickable by fading them back 50%. To do this add the disabled attribute to buttons.

@@ -90,45 +91,45 @@ const ComponentsPage = React.createClass({ functionality. Use custom logic to disable the effect of the onClick handlers.

-

Button tags

+

Button tags

The DOM element tag is choosen automatically for you based on the props you supply. Passing a href will result in the button using a {''} element otherwise a {'