add app_bar to spec
parent
2433d71ca0
commit
18ed189236
|
@ -8,7 +8,7 @@ const App = (props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className} data-react-toolbox='app'>
|
||||||
{props.children}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -8,7 +8,7 @@ const AppBar = (props) => {
|
||||||
if (props.flat) className += ` ${style.flat}`;
|
if (props.flat) className += ` ${style.flat}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className={className}>
|
<header className={className} data-react-toolbox='app-bar'>
|
||||||
{props.children}
|
{props.children}
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import App from '../components/app';
|
import App from '../components/app';
|
||||||
|
import AppBar from '../components/app_bar';
|
||||||
import Autocomplete from './components/autocomplete';
|
import Autocomplete from './components/autocomplete';
|
||||||
import Button from './components/button';
|
import Button from './components/button';
|
||||||
import Card from './components/card';
|
import Card from './components/card';
|
||||||
|
@ -22,8 +23,10 @@ import style from './style';
|
||||||
|
|
||||||
const Root = () => (
|
const Root = () => (
|
||||||
<App className={style.app}>
|
<App className={style.app}>
|
||||||
|
<AppBar fixed flat className={style['app-bar']}>
|
||||||
<h1>React Toolbox</h1>
|
<h1>React Toolbox</h1>
|
||||||
<h3>Component Spec v0.10.20</h3>
|
<span>Component Spec v0.10.20</span>
|
||||||
|
</AppBar>
|
||||||
|
|
||||||
<Autocomplete />
|
<Autocomplete />
|
||||||
<Button />
|
<Button />
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.app {
|
.app {
|
||||||
padding: 1.6rem;
|
padding: 5.5rem 1.6rem;
|
||||||
> h1, > h3 {
|
> h1, > h3 {
|
||||||
line-height: 100%;
|
line-height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -14,3 +14,11 @@
|
||||||
margin: 1.6rem 1.6rem 0 0;
|
margin: 1.6rem 1.6rem 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-bar {
|
||||||
|
padding: 1.6rem;
|
||||||
|
justify-content: center;
|
||||||
|
> span {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue