From 0a2466a36ea3d753b587b169195ecca3ba3e7a57 Mon Sep 17 00:00:00 2001 From: Vlad Frolov Date: Thu, 2 Feb 2017 14:10:59 +0200 Subject: [PATCH] Added React-MD example (#940) --- examples/with-react-md/README.md | 30 ++++++ examples/with-react-md/package.json | 19 ++++ examples/with-react-md/pages/index.js | 94 +++++++++++++++++++ .../static/react-md.light_blue-yellow.min.css | 1 + 4 files changed, 144 insertions(+) create mode 100644 examples/with-react-md/README.md create mode 100644 examples/with-react-md/package.json create mode 100644 examples/with-react-md/pages/index.js create mode 120000 examples/with-react-md/static/react-md.light_blue-yellow.min.css diff --git a/examples/with-react-md/README.md b/examples/with-react-md/README.md new file mode 100644 index 0000000000000..a8bb0d891604e --- /dev/null +++ b/examples/with-react-md/README.md @@ -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. diff --git a/examples/with-react-md/package.json b/examples/with-react-md/package.json new file mode 100644 index 0000000000000..6401504d560fe --- /dev/null +++ b/examples/with-react-md/package.json @@ -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" +} diff --git a/examples/with-react-md/pages/index.js b/examples/with-react-md/pages/index.js new file mode 100644 index 0000000000000..d1f8d3a25ee51 --- /dev/null +++ b/examples/with-react-md/pages/index.js @@ -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 = [ + , + +] + +const NavigationLink = (props) => { + const { href, as, children, ..._props } = props + return ( +
+ + + {children} + + +
+ ) +} + +export default () => { + const closeButton = ( + + ) + + return ( +
+ + + + + + inbox} + tileClassName='md-list-tile--mini' + primaryText={'Root'} + />, + star} + 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} + > +

Hello Next.js!

+ +
+ ) +} diff --git a/examples/with-react-md/static/react-md.light_blue-yellow.min.css b/examples/with-react-md/static/react-md.light_blue-yellow.min.css new file mode 120000 index 0000000000000..d1ec1bf198553 --- /dev/null +++ b/examples/with-react-md/static/react-md.light_blue-yellow.min.css @@ -0,0 +1 @@ +../node_modules/react-md/dist/react-md.light_blue-yellow.min.css \ No newline at end of file