Better styles for navigation. Fixes #205
parent
b5b3fe2488
commit
b963be79ea
|
@ -4,7 +4,10 @@ import style from './style';
|
|||
import FontIcon from '../font_icon';
|
||||
|
||||
const Link = (props) => {
|
||||
const className = ClassNames(style.root, props.className);
|
||||
const className = ClassNames(style.root, {
|
||||
[style.active]: props.active
|
||||
}, props.className);
|
||||
|
||||
return (
|
||||
<a {...props} data-react-toolbox='link'className={className}>
|
||||
{props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
|
||||
|
@ -15,6 +18,7 @@ const Link = (props) => {
|
|||
};
|
||||
|
||||
Link.propTypes = {
|
||||
active: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
count: React.PropTypes.number,
|
||||
icon: React.PropTypes.string,
|
||||
|
@ -22,6 +26,7 @@ Link.propTypes = {
|
|||
};
|
||||
|
||||
Link.defaultProps = {
|
||||
active: false,
|
||||
className: ''
|
||||
};
|
||||
|
||||
|
|
|
@ -1,3 +1,2 @@
|
|||
$navigation-space: $unit;
|
||||
$navigation-space: $unit !default;
|
||||
$navigation-color: $color-black !default;
|
||||
$navigation-background: $color-white !default;
|
||||
|
|
|
@ -5,21 +5,20 @@ This component is intended to be a common wrapper for a group of links or button
|
|||
<!-- example -->
|
||||
```jsx
|
||||
import Navigation from 'react-toolbox/lib/navigation';
|
||||
|
||||
const links = [
|
||||
{ href: 'http://', icon: 'person', label: 'Profile' },
|
||||
{ href: 'http://', icon: 'inbox', label: 'Inbox'}
|
||||
];
|
||||
import Link from 'react-toolbox/lib/link';
|
||||
|
||||
const actions = [
|
||||
{ label: 'Alarm', raised: true, icon: 'access-alarm'},
|
||||
{ label: 'Alarm', raised: true, icon: 'access_alarm'},
|
||||
{ label: 'Location', raised: true, accent: true, icon: 'room'}
|
||||
];
|
||||
|
||||
const NavigationTest = () => (
|
||||
<div>
|
||||
<Navigation type='horizontal' actions={actions} />
|
||||
<Navigation type='horizontal' routes={links} />
|
||||
<Navigation type='vertical'>
|
||||
<Link href='http://' label='Inbox' icon='inbox' />
|
||||
<Link href='http://' active label='Profile' icon='person' />
|
||||
</Navigation>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
|
|
@ -2,41 +2,23 @@
|
|||
@import "./config";
|
||||
|
||||
.horizontal {
|
||||
padding-top: $navigation-space;
|
||||
padding-bottom: $navigation-space;
|
||||
|
||||
> .link, > .button {
|
||||
> [data-react-toolbox='button'], > [data-react-toolbox='link'] {
|
||||
display: inline-block;
|
||||
margin-right: $navigation-space;
|
||||
font-size: $font-size-normal;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $navigation-color;
|
||||
> small {
|
||||
padding: 0 $navigation-space;
|
||||
margin-left: $navigation-space;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $navigation-color;
|
||||
background-color: $navigation-background;
|
||||
border-radius: $navigation-space;
|
||||
}
|
||||
margin: 0 $navigation-space / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical {
|
||||
padding-top: $navigation-space;
|
||||
padding-bottom: $navigation-space;
|
||||
|
||||
> .link, > .button {
|
||||
> [data-react-toolbox='button'], > [data-react-toolbox='link'] {
|
||||
display: block;
|
||||
padding: 0 $navigation-space;
|
||||
line-height: $unit;
|
||||
transition-property: box-shadow, opacity;
|
||||
&.active {
|
||||
box-shadow: inset 10 * $unit 0 $navigation-background;
|
||||
}
|
||||
> small {
|
||||
float: right;
|
||||
opacity: .5;
|
||||
}
|
||||
margin: $navigation-space / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical, .horizontal {
|
||||
padding: $navigation-space / 2;
|
||||
|
||||
> [data-react-toolbox='link'] {
|
||||
color: $navigation-color;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,3 @@
|
|||
const links = [
|
||||
{ href: '#/components/navigation', icon: 'person', label: 'Profile' },
|
||||
{ href: '#/components/navigation', icon: 'inbox', label: 'Inbox'}
|
||||
];
|
||||
|
||||
const actions = [
|
||||
{ label: 'Alarm', raised: true, icon: 'access_alarm'},
|
||||
{ label: 'Location', raised: true, accent: true, icon: 'room'}
|
||||
|
@ -11,7 +6,10 @@ const actions = [
|
|||
const NavigationTest = () => (
|
||||
<div>
|
||||
<Navigation type='horizontal' actions={actions} />
|
||||
<Navigation type='horizontal' routes={links} />
|
||||
<Navigation type='vertical'>
|
||||
<Link href='http://' label='Inbox' icon='inbox' />
|
||||
<Link href='http://' active label='Profile' icon='person' />
|
||||
</Navigation>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
@ -1,24 +1,22 @@
|
|||
import React from 'react';
|
||||
import Navigation from '../../components/navigation';
|
||||
import Link from '../../components/link';
|
||||
|
||||
class NavigationTest extends React.Component {
|
||||
state = {
|
||||
routes: [
|
||||
{ label: 'Github', route: 'http://www.github.com', icon: 'bookmark' },
|
||||
{ label: 'Mail', route: 'http://mail.google.com', icon: 'inbox' }
|
||||
]
|
||||
};
|
||||
const actions = [
|
||||
{ label: 'Alarm', raised: true, icon: 'access_alarm'},
|
||||
{ label: 'Location', raised: true, accent: true, icon: 'room'}
|
||||
];
|
||||
|
||||
render () {
|
||||
return (
|
||||
<section>
|
||||
<h5>Navigation</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
|
||||
<Navigation type='vertical' routes={this.state.routes} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
const NavigationTest = () => (
|
||||
<section>
|
||||
<h5>Navigation</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Navigation type='horizontal' actions={actions} />
|
||||
<Navigation type='vertical'>
|
||||
<Link href='http://' label='Inbox' icon='inbox' />
|
||||
<Link href='http://' active label='Profile' icon='person' />
|
||||
</Navigation>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default NavigationTest;
|
||||
|
|
Loading…
Reference in New Issue