Add NavDrawer to spec
parent
0c2a2964cb
commit
b7c50ea748
|
@ -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,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
115
spec/root.js
|
@ -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;
|
||||
|
|
|
@ -8,8 +8,11 @@
|
|||
--appbar-height: calc(6.4 * var(--unit));
|
||||
}
|
||||
|
||||
.app {
|
||||
body {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: var(--offset);
|
||||
|
||||
& > section,
|
||||
|
|
Loading…
Reference in New Issue