vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add NavDrawer to spec

old
Javi Velasco 2017-01-20 19:27:50 +01:00
parent 0c2a2964cb
commit b7c50ea748
4 changed files with 78 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spec/index.html
View File

@ -17,6 +17,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head>
<body>
<div id="spec"></div>
<script src="/build/spec.js"></script>
</body>
</html>

2
spec/index.js
View File

@ -2,4 +2,4 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Root from './root';
ReactDOM.render(<Root />, document.body);
ReactDOM.render(<Root />, document.getElementById('spec'));

115
spec/root.js
View File

@ -1,13 +1,16 @@
/* global VERSION */
import 'normalize.css';
import React from 'react';
import React, { Component } from 'react';
import { Layout, Panel, NavDrawer } from '../components/layout';
import AppBar from '../components/app_bar';
import ButtonToolbox from '../components/button';
import Autocomplete from './components/autocomplete';
import AppBarTest from './components/app_bar';
import Avatar from './components/avatar';
import FontIcon from './components/font_icon';
import Button from './components/button';
import ButtonToolbox from '../components/button';
import Card from './components/card';
import Checkbox from './components/checkbox';
import Chip from './components/chip';
@ -15,8 +18,7 @@ import Dialog from './components/dialog';
import Drawer from './components/drawer';
import Dropdown from './components/dropdown';
import IconMenu from './components/icon_menu';
import Input from './components/input';
import { Layout, Panel } from '../components/layout';
import InputTest from './components/input';
import List from './components/list';
import Menu from './components/menu';
import Pickers from './components/pickers';
@ -30,45 +32,72 @@ import Tabs from './components/tabs';
import Tooltip from './components/tooltip';
import style from './style.css';
const Root = () => (
<Layout>
<AppBar className={style.appbar} title={`React Toolbox Spec ${VERSION}`} fixed flat>
<ButtonToolbox
accent
className={style.github}
icon='web'
floating
onClick={() => {window.href = 'http://react-toolbox';}}
/>
</AppBar>
class Root extends Component {
state = { pinned: false };
<Panel className={style.app}>
<Autocomplete />
<AppBarTest />
<Avatar />
<FontIcon />
<Button />
<Card />
<Checkbox />
<Chip />
<Dialog />
<Drawer />
<Dropdown />
<IconMenu />
<Input />
<List />
<Menu />
<Pickers />
<Progress />
<Radio />
<Slider />
<Snackbar />
<Switch />
<Table />
<Tabs />
<Tooltip />
</Panel>
</Layout>
);
handleSideBarToggle = () => {
this.setState({ pinned: !this.state.pinned });
};
render () {
return (
<Layout>
<AppBar
title={`React Toolbox Spec ${VERSION}`}
onLeftIconClick={this.handleSideBarToggle}
className={style.appbar}
leftIcon="menu"
fixed
flat
>
<ButtonToolbox
className={style.github}
href="http://react-toolbox"
target="_blank"
icon='web'
floating
accent
/>
</AppBar>
<NavDrawer
active={this.state.pinned}
onEscKeyDown={this.handleSideBarToggle}
onOverlayClick={this.handleSideBarToggle}
permanentAt="lg"
>
This will content filter and indexes for examples
</NavDrawer>
<Panel className={style.app}>
<Autocomplete />
<AppBarTest />
<Avatar />
<FontIcon />
<Button />
<Card />
<Checkbox />
<Chip />
<Dialog />
<Drawer />
<Dropdown />
<IconMenu />
<InputTest />
<List />
<Menu />
<Pickers />
<Progress />
<Radio />
<Slider />
<Snackbar />
<Switch />
<Table />
<Tabs />
<Tooltip />
</Panel>
</Layout>
);
}
}
export default Root;

5
spec/style.css
View File

@ -8,8 +8,11 @@
--appbar-height: calc(6.4 * var(--unit));
}
.app {
body {
background-color: #f5f5f5;
}
.app {
padding: var(--offset);
& > section,