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

2
spec/index.js
View File

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

5
spec/style.css
View File

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