mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Added React-MD example (#940)
This commit is contained in:
Vlad Frolov
Tim Neutkens
parent
59281adef3
commit
0a2466a36e
30
examples/with-react-md/README.md
Normal file
30
examples/with-react-md/README.md
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
|
||||||
|
# Example app with react-md
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-md
|
||||||
|
cd with-react-md
|
||||||
|
```
|
||||||
|
|
||||||
|
Install it and run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
||||||
|
|
||||||
|
```bash
|
||||||
|
now
|
||||||
|
```
|
||||||
|
|
||||||
|
## The idea behind the example
|
||||||
|
|
||||||
|
This example features how yo use [react-md](https://react-md.mlaursen.com/) (React Material Design) with Next.js.
|
||||||
|
|
||||||
|
I recommend reading [layout-component](../layout-component) example next to learn how to reuse the layout across the pages.
|
||||||
19
examples/with-react-md/package.json
Normal file
19
examples/with-react-md/package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "with-react-md",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "^2.0.0-beta",
|
||||||
|
"react": "^15.4.2",
|
||||||
|
"react-addons-css-transition-group": "^15.4.2",
|
||||||
|
"react-addons-transition-group": "^15.4.2",
|
||||||
|
"react-dom": "^15.4.2",
|
||||||
|
"react-md": "^1.0.1"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC"
|
||||||
|
}
|
||||||
94
examples/with-react-md/pages/index.js
Normal file
94
examples/with-react-md/pages/index.js
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
import Head from 'next/head'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
import Avatar from 'react-md/lib/Avatars'
|
||||||
|
import Button from 'react-md/lib/Buttons/Button'
|
||||||
|
import FontIcon from 'react-md/lib/FontIcons'
|
||||||
|
import ListItem from 'react-md/lib/Lists/ListItem'
|
||||||
|
import NavigationDrawer from 'react-md/lib/NavigationDrawers'
|
||||||
|
import SelectField from 'react-md/lib/SelectFields'
|
||||||
|
|
||||||
|
const avatarSrc = 'https://cloud.githubusercontent.com/assets/13041/19686250/971bf7f8-9ac0-11e6-975c-188defd82df1.png'
|
||||||
|
|
||||||
|
const drawerHeaderChildren = [
|
||||||
|
<Avatar
|
||||||
|
key={avatarSrc}
|
||||||
|
src={avatarSrc}
|
||||||
|
role='presentation'
|
||||||
|
iconSized
|
||||||
|
style={{ alignSelf: 'center', marginLeft: 16, marginRight: 16, flexShrink: 0 }}
|
||||||
|
/>,
|
||||||
|
<SelectField
|
||||||
|
id='account-switcher'
|
||||||
|
defaultValue='Jonathan'
|
||||||
|
menuItems={['Jonathan', 'Fred']}
|
||||||
|
key='account-switcher'
|
||||||
|
position={SelectField.Positions.BELOW}
|
||||||
|
className='md-select-field--toolbar'
|
||||||
|
/>
|
||||||
|
]
|
||||||
|
|
||||||
|
const NavigationLink = (props) => {
|
||||||
|
const { href, as, children, ..._props } = props
|
||||||
|
return (
|
||||||
|
<div {..._props}>
|
||||||
|
<Link href={href} as={as}>
|
||||||
|
<a className='md-list-tile' style={{padding: 0, overflow: 'hidden'}}>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const closeButton = (
|
||||||
|
<Button
|
||||||
|
icon
|
||||||
|
tooltipLabel='Close the interactive demo'
|
||||||
|
tooltipDelay={150}
|
||||||
|
tooltipPosition='left'
|
||||||
|
>
|
||||||
|
close
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<link rel='stylesheet' href='/static/react-md.light_blue-yellow.min.css' />
|
||||||
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
|
||||||
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons' />
|
||||||
|
</Head>
|
||||||
|
<NavigationDrawer
|
||||||
|
navItems={[
|
||||||
|
<ListItem
|
||||||
|
key='0'
|
||||||
|
component={NavigationLink}
|
||||||
|
href='/'
|
||||||
|
leftIcon={<FontIcon>inbox</FontIcon>}
|
||||||
|
tileClassName='md-list-tile--mini'
|
||||||
|
primaryText={'Root'}
|
||||||
|
/>,
|
||||||
|
<ListItem
|
||||||
|
key='1'
|
||||||
|
component={NavigationLink}
|
||||||
|
href='/non-existing-page'
|
||||||
|
leftIcon={<FontIcon>star</FontIcon>}
|
||||||
|
tileClassName='md-list-tile--mini'
|
||||||
|
primaryText={'404 page'}
|
||||||
|
/>
|
||||||
|
]}
|
||||||
|
contentClassName='md-grid'
|
||||||
|
drawerHeaderChildren={drawerHeaderChildren}
|
||||||
|
mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY_MINI}
|
||||||
|
tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
|
||||||
|
desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
|
||||||
|
toolbarTitle='Hello, World!'
|
||||||
|
toolbarActions={closeButton}
|
||||||
|
>
|
||||||
|
<h1>Hello Next.js!</h1>
|
||||||
|
</NavigationDrawer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
1
examples/with-react-md/static/react-md.light_blue-yellow.min.css
vendored
Symbolic link
1
examples/with-react-md/static/react-md.light_blue-yellow.min.css
vendored
Symbolic link
|
|
@ -0,0 +1 @@
|
||||||
|
../node_modules/react-md/dist/react-md.light_blue-yellow.min.css
|
||||||
Loading…
Reference in a new issue