Skip to content

Commit 0a2466a

Browse files
froltimneutkens
frol
authored and
timneutkens
committed
Added React-MD example (vercel#940)
1 parent 59281ad commit 0a2466a

File tree

4 files changed

+144
-0
lines changed

4 files changed

+144
-0
lines changed

‎examples/with-react-md/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
# Example app with react-md
3+
4+
## How to use
5+
6+
Download the example [or clone the repo](https://github.com/zeit/next.js):
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-md
10+
cd with-react-md
11+
```
12+
13+
Install it and run:
14+
15+
```bash
16+
npm install
17+
npm run dev
18+
```
19+
20+
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
21+
22+
```bash
23+
now
24+
```
25+
26+
## The idea behind the example
27+
28+
This example features how yo use [react-md](https://react-md.mlaursen.com/) (React Material Design) with Next.js.
29+
30+
I recommend reading [layout-component](../layout-component) example next to learn how to reuse the layout across the pages.

‎examples/with-react-md/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "with-react-md",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "^2.0.0-beta",
11+
"react": "^15.4.2",
12+
"react-addons-css-transition-group": "^15.4.2",
13+
"react-addons-transition-group": "^15.4.2",
14+
"react-dom": "^15.4.2",
15+
"react-md": "^1.0.1"
16+
},
17+
"author": "",
18+
"license": "ISC"
19+
}

‎examples/with-react-md/pages/index.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import Head from 'next/head'
2+
import Link from 'next/link'
3+
4+
import Avatar from 'react-md/lib/Avatars'
5+
import Button from 'react-md/lib/Buttons/Button'
6+
import FontIcon from 'react-md/lib/FontIcons'
7+
import ListItem from 'react-md/lib/Lists/ListItem'
8+
import NavigationDrawer from 'react-md/lib/NavigationDrawers'
9+
import SelectField from 'react-md/lib/SelectFields'
10+
11+
const avatarSrc = 'https://cloud.githubusercontent.com/assets/13041/19686250/971bf7f8-9ac0-11e6-975c-188defd82df1.png'
12+
13+
const drawerHeaderChildren = [
14+
<Avatar
15+
key={avatarSrc}
16+
src={avatarSrc}
17+
role='presentation'
18+
iconSized
19+
style={{ alignSelf: 'center', marginLeft: 16, marginRight: 16, flexShrink: 0 }}
20+
/>,
21+
<SelectField
22+
id='account-switcher'
23+
defaultValue='Jonathan'
24+
menuItems={['Jonathan', 'Fred']}
25+
key='account-switcher'
26+
position={SelectField.Positions.BELOW}
27+
className='md-select-field--toolbar'
28+
/>
29+
]
30+
31+
const NavigationLink = (props) => {
32+
const { href, as, children, ..._props } = props
33+
return (
34+
<div {..._props}>
35+
<Link href={href} as={as}>
36+
<a className='md-list-tile' style={{padding: 0, overflow: 'hidden'}}>
37+
{children}
38+
</a>
39+
</Link>
40+
</div>
41+
)
42+
}
43+
44+
export default () => {
45+
const closeButton = (
46+
<Button
47+
icon
48+
tooltipLabel='Close the interactive demo'
49+
tooltipDelay={150}
50+
tooltipPosition='left'
51+
>
52+
close
53+
</Button>
54+
)
55+
56+
return (
57+
<div>
58+
<Head>
59+
<link rel='stylesheet' href='/static/react-md.light_blue-yellow.min.css' />
60+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
61+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material+Icons' />
62+
</Head>
63+
<NavigationDrawer
64+
navItems={[
65+
<ListItem
66+
key='0'
67+
component={NavigationLink}
68+
href='/'
69+
leftIcon={<FontIcon>inbox</FontIcon>}
70+
tileClassName='md-list-tile--mini'
71+
primaryText={'Root'}
72+
/>,
73+
<ListItem
74+
key='1'
75+
component={NavigationLink}
76+
href='/non-existing-page'
77+
leftIcon={<FontIcon>star</FontIcon>}
78+
tileClassName='md-list-tile--mini'
79+
primaryText={'404 page'}
80+
/>
81+
]}
82+
contentClassName='md-grid'
83+
drawerHeaderChildren={drawerHeaderChildren}
84+
mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY_MINI}
85+
tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
86+
desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
87+
toolbarTitle='Hello, World!'
88+
toolbarActions={closeButton}
89+
>
90+
<h1>Hello Next.js!</h1>
91+
</NavigationDrawer>
92+
</div>
93+
)
94+
}

‎examples/with-react-md/static/react-md.light_blue-yellow.min.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../node_modules/react-md/dist/react-md.light_blue-yellow.min.css

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy