Skip to content

Commit

Permalink
Improve dropdown docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
@srph
srph committed Nov 12, 2015
1 parent c578d43 commit c2bd4e5
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 110 deletions.
180 changes: 103 additions & 77 deletions docs/dist/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30730,14 +30730,14 @@
{ className: 'doc-heading' },
'Dropdown'
),
_react2['default'].createElement(
'p',
{ className: 'lead' },
'Dropdowns are effective for "show-more" actions kind of thing.'
),
_react2['default'].createElement(
'section',
{ className: 'doc-bottom-space-large' },
_react2['default'].createElement(
'p',
{ className: 'lead' },
'Dropdown'
),
{ className: 'doc-bottom-space' },
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
{ trigger: _react2['default'].createElement(
Expand Down Expand Up @@ -30774,77 +30774,103 @@
'section',
{ className: 'doc-bottom-space-large' },
_react2['default'].createElement(
'p',
{ className: 'lead' },
'Dropdown right'
'h3',
{ className: 'doc-heading' },
'Example: Positions'
),
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
{ trigger: _react2['default'].createElement(
'button',
{ className: 'btn -default' },
'Open me!'
), position: { x: 'right' } },
'div',
{ className: 'doc-btn-group' },
_react2['default'].createElement(
'div',
{ className: 'dropdown -right' },
_scriptsComponentsDropdown2['default'],
{ trigger: _react2['default'].createElement(
'button',
{ className: 'btn -default' },
'Dropdown Right'
), position: { x: 'right' } },
_react2['default'].createElement(
'div',
{ className: 'menu' },
_react2['default'].createElement(
'a',
{ href: '#' },
'My Profile'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Settings'
),
{ className: 'dropdown -right' },
_react2['default'].createElement(
'a',
{ href: '#' },
'Logout'
'div',
{ className: 'menu' },
_react2['default'].createElement(
'a',
{ href: '#' },
'My Profile'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Settings'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Logout'
)
)
)
)
)
),
_react2['default'].createElement(
'section',
{ className: 'doc-bottom-space-large' },
_react2['default'].createElement(
'p',
{ className: 'lead' },
'Dropup'
),
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
{ trigger: _react2['default'].createElement(
'button',
{ className: 'btn -default' },
'Open me!'
), position: { y: 'top' } },
),
_react2['default'].createElement(
'div',
{ className: 'dropdown -up' },
_scriptsComponentsDropdown2['default'],
{ trigger: _react2['default'].createElement(
'button',
{ className: 'btn -default' },
'Dropup'
), position: { y: 'top' } },
_react2['default'].createElement(
'div',
{ className: 'menu' },
{ className: 'dropdown -up' },
_react2['default'].createElement(
'a',
{ href: '#' },
'My Profile'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Settings'
),
'div',
{ className: 'menu' },
_react2['default'].createElement(
'a',
{ href: '#' },
'My Profile'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Settings'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Logout'
)
)
)
),
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
{ trigger: _react2['default'].createElement(
'button',
{ className: 'btn -default' },
'Dropup Right'
), position: { x: 'right', y: 'top' } },
_react2['default'].createElement(
'div',
{ className: 'dropdown -up -right' },
_react2['default'].createElement(
'a',
{ href: '#' },
'Logout'
'div',
{ className: 'menu' },
_react2['default'].createElement(
'a',
{ href: '#' },
'My Profile'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Settings'
),
_react2['default'].createElement(
'a',
{ href: '#' },
'Logout'
)
)
)
)
Expand All @@ -30854,9 +30880,9 @@
'section',
{ className: 'doc-bottom-space-large' },
_react2['default'].createElement(
'p',
{ className: 'lead' },
'With Divider'
'h3',
{ className: 'doc-heading' },
'Example: With Dividers'
),
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
Expand Down Expand Up @@ -30900,9 +30926,9 @@
'section',
{ className: 'doc-bottom-space-large' },
_react2['default'].createElement(
'p',
{ className: 'lead' },
'With Icons'
'h3',
{ className: 'doc-heading' },
'Example: With Icons'
),
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
Expand Down Expand Up @@ -30943,9 +30969,9 @@
'section',
{ className: 'doc-bottom-space-large' },
_react2['default'].createElement(
'p',
{ className: 'lead' },
'With Badge'
'h3',
{ className: 'doc-heading' },
'Example: With Badges'
),
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
Expand Down Expand Up @@ -30996,11 +31022,11 @@
),
_react2['default'].createElement(
'section',
{ className: 'doc-bottom-space-large' },
null,
_react2['default'].createElement(
'p',
{ className: 'lead' },
'With Both Icon and Badge'
'h3',
{ className: 'doc-heading' },
'Example: With both icons and badges'
),
_react2['default'].createElement(
_scriptsComponentsDropdown2['default'],
Expand Down
71 changes: 38 additions & 33 deletions docs/sections/Docs-Dropdown/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ export default class DropdownView extends React.Component {
return (
<div>
<h1 className="doc-heading">Dropdown</h1>

<section className="doc-bottom-space-large">
<p className="lead">Dropdown</p>

<p className="lead">Dropdowns are effective for "show-more" actions kind of thing.</p>
<section className="doc-bottom-space">
<Dropdown trigger={<button className="btn -default">Open me!</button>}>
<div className="dropdown">
<div className="menu">
Expand All @@ -22,35 +20,43 @@ export default class DropdownView extends React.Component {
</section>

<section className="doc-bottom-space-large">
<p className="lead">Dropdown right</p>

<Dropdown trigger={<button className="btn -default">Open me!</button>} position={{ x: 'right' }}>
<div className="dropdown -right">
<div className="menu">
<a href="#">My Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
<h3 className="doc-heading">Example: Positions</h3>

<div className="doc-btn-group">
<Dropdown trigger={<button className="btn -default">Dropdown Right</button>} position={{ x: 'right' }}>
<div className="dropdown -right">
<div className="menu">
<a href="#">My Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</div>
</Dropdown>
</section>

<section className="doc-bottom-space-large">
<p className="lead">Dropup</p>

<Dropdown trigger={<button className="btn -default">Open me!</button>} position={{ y: 'top' }}>
<div className="dropdown -up">
<div className="menu">
<a href="#">My Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</Dropdown>

<Dropdown trigger={<button className="btn -default">Dropup</button>} position={{ y: 'top' }}>
<div className="dropdown -up">
<div className="menu">
<a href="#">My Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</div>
</Dropdown>
</Dropdown>

<Dropdown trigger={<button className="btn -default">Dropup Right</button>} position={{ x: 'right', y: 'top' }}>
<div className="dropdown -up -right">
<div className="menu">
<a href="#">My Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</Dropdown>
</div>
</section>

<section className="doc-bottom-space-large">
<p className="lead">With Divider</p>
<h3 className="doc-heading">Example: With Dividers</h3>

<Dropdown trigger={<button className="btn -default">Open me!</button>}>
<div className="dropdown">
Expand All @@ -66,7 +72,7 @@ export default class DropdownView extends React.Component {
</section>

<section className="doc-bottom-space-large">
<p className="lead">With Icons</p>
<h3 className="doc-heading">Example: With Icons</h3>

<Dropdown trigger={<button className="btn -default">Open me!</button>}>
<div className="dropdown">
Expand All @@ -80,7 +86,7 @@ export default class DropdownView extends React.Component {
</section>

<section className="doc-bottom-space-large">
<p className="lead">With Badge</p>
<h3 className="doc-heading">Example: With Badges</h3>

<Dropdown trigger={<button className="btn -default">Open me!</button>}>
<div className="dropdown">
Expand All @@ -93,8 +99,8 @@ export default class DropdownView extends React.Component {
</Dropdown>
</section>

<section className="doc-bottom-space-large">
<p className="lead">With Both Icon and Badge</p>
<section>
<h3 className="doc-heading">Example: With both icons and badges</h3>

<Dropdown trigger={<button className="btn -default">Open me!</button>}>
<div className="dropdown">
Expand All @@ -106,7 +112,6 @@ export default class DropdownView extends React.Component {
</div>
</Dropdown>
</section>

</div>
);
}
Expand Down

0 comments on commit c2bd4e5

Please sign in to comment.