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