mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Restructure with-material-ui (patch)
This commit is contained in:
parent
2ef80a354c
commit
dbe28e1471
|
@ -1,46 +0,0 @@
|
||||||
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/mui-org/material-ui/tree/v1-beta/examples/nextjs)
|
|
||||||
# Material-UI example
|
|
||||||
|
|
||||||
## How to use
|
|
||||||
|
|
||||||
### Using `create-next-app`
|
|
||||||
|
|
||||||
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx create-next-app --example with-material-ui-next with-material-ui-next-app
|
|
||||||
# or
|
|
||||||
yarn create next-app --example with-material-ui-next with-material-ui-next-app
|
|
||||||
```
|
|
||||||
|
|
||||||
### Download manually
|
|
||||||
|
|
||||||
Download the example [or clone the repo](https://github.com/mui-org/material-ui):
|
|
||||||
|
|
||||||
```bash
|
|
||||||
curl https://codeload.github.com/mui-org/material-ui/tar.gz/v1-beta | tar -xz --strip=2 material-ui-1-beta/examples/nextjs
|
|
||||||
cd nextjs
|
|
||||||
```
|
|
||||||
|
|
||||||
Install it and run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
npm run dev
|
|
||||||
# or
|
|
||||||
yarn
|
|
||||||
yarn dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
|
||||||
|
|
||||||
```bash
|
|
||||||
now
|
|
||||||
```
|
|
||||||
|
|
||||||
## The idea behind the example
|
|
||||||
|
|
||||||
[material-ui](https://github.com/mui-org/material-ui) is being rewritten from scratch on the [v1-beta branch](https://material-ui-1dab0.firebaseapp.com/).
|
|
||||||
This example shows how you use it with Next.js.
|
|
||||||
|
|
||||||
:warning: The source code [is hosted](https://github.com/mui-org/material-ui/tree/v1-beta/examples/nextjs) on the Material-UI repository.
|
|
|
@ -1,4 +1,4 @@
|
||||||
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-material-ui)
|
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/mui-org/material-ui/tree/master/examples/nextjs)
|
||||||
# Material-UI example
|
# Material-UI example
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
@ -15,11 +15,11 @@ yarn create next-app --example with-material-ui with-material-ui-app
|
||||||
|
|
||||||
### Download manually
|
### Download manually
|
||||||
|
|
||||||
Download the example [or clone the repo](https://github.com/zeit/next.js):
|
Download the example [or clone the repo](https://github.com/mui-org/material-ui):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-material-ui
|
curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs
|
||||||
cd with-material-ui
|
cd nextjs
|
||||||
```
|
```
|
||||||
|
|
||||||
Install it and run:
|
Install it and run:
|
||||||
|
@ -40,5 +40,6 @@ now
|
||||||
|
|
||||||
## The idea behind the example
|
## The idea behind the example
|
||||||
|
|
||||||
This example features how you use [material-ui](https://github.com/callemall/material-ui) (Material components that implement Google's Material Design) with Next.js.
|
This example features how you use [material-ui](https://github.com/mui-org/material-ui) (Material components that implement Google's Material Design) with Next.js.
|
||||||
|
|
||||||
|
:warning: The source code [is hosted](https://github.com/mui-org/material-ui/tree/master/examples/nextjs) on the Material-UI repository.
|
||||||
|
|
|
@ -1,11 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
webpack: (config) => {
|
|
||||||
// Remove minifed react aliases for material-ui so production builds work
|
|
||||||
if (config.resolve.alias) {
|
|
||||||
delete config.resolve.alias.react
|
|
||||||
delete config.resolve.alias['react-dom']
|
|
||||||
}
|
|
||||||
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,16 +0,0 @@
|
||||||
{
|
|
||||||
"name": "with-material-ui",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"dependencies": {
|
|
||||||
"material-ui": "^0.18.0",
|
|
||||||
"next": "latest",
|
|
||||||
"react": "^15.5.4",
|
|
||||||
"react-dom": "^15.5.4",
|
|
||||||
"react-tap-event-plugin": "^2.0.1"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"dev": "next",
|
|
||||||
"build": "next build",
|
|
||||||
"start": "next start"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,98 +0,0 @@
|
||||||
import React, {Component} from 'react'
|
|
||||||
import RaisedButton from 'material-ui/RaisedButton'
|
|
||||||
import Dialog from 'material-ui/Dialog'
|
|
||||||
import {deepOrange500} from 'material-ui/styles/colors'
|
|
||||||
import FlatButton from 'material-ui/FlatButton'
|
|
||||||
import getMuiTheme from 'material-ui/styles/getMuiTheme'
|
|
||||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
|
|
||||||
import injectTapEventPlugin from 'react-tap-event-plugin'
|
|
||||||
|
|
||||||
// Make sure react-tap-event-plugin only gets injected once
|
|
||||||
// Needed for material-ui
|
|
||||||
if (!process.tapEventInjected) {
|
|
||||||
injectTapEventPlugin()
|
|
||||||
process.tapEventInjected = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
container: {
|
|
||||||
textAlign: 'center',
|
|
||||||
paddingTop: 200
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const muiTheme = {
|
|
||||||
palette: {
|
|
||||||
accent1Color: deepOrange500
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Index extends Component {
|
|
||||||
static getInitialProps ({ req }) {
|
|
||||||
// Ensures material-ui renders the correct css prefixes server-side
|
|
||||||
let userAgent
|
|
||||||
if (process.browser) {
|
|
||||||
userAgent = navigator.userAgent
|
|
||||||
} else {
|
|
||||||
userAgent = req.headers['user-agent']
|
|
||||||
}
|
|
||||||
|
|
||||||
return { userAgent }
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor (props, context) {
|
|
||||||
super(props, context)
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
open: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleRequestClose = () => {
|
|
||||||
this.setState({
|
|
||||||
open: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTouchTap = () => {
|
|
||||||
this.setState({
|
|
||||||
open: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { userAgent } = this.props
|
|
||||||
|
|
||||||
const standardActions = (
|
|
||||||
<FlatButton
|
|
||||||
label='Ok'
|
|
||||||
primary={Boolean(true)}
|
|
||||||
onTouchTap={this.handleRequestClose}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MuiThemeProvider muiTheme={getMuiTheme({userAgent, ...muiTheme})}>
|
|
||||||
<div style={styles.container}>
|
|
||||||
<Dialog
|
|
||||||
open={this.state.open}
|
|
||||||
title='Super Secret Password'
|
|
||||||
actions={standardActions}
|
|
||||||
onRequestClose={this.handleRequestClose}
|
|
||||||
>
|
|
||||||
1-2-3-4-5
|
|
||||||
</Dialog>
|
|
||||||
<h1>Material-UI</h1>
|
|
||||||
<h2>example project</h2>
|
|
||||||
<RaisedButton
|
|
||||||
label='Super Secret Password'
|
|
||||||
secondary
|
|
||||||
onTouchTap={this.handleTouchTap}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</MuiThemeProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Index
|
|
Loading…
Reference in a new issue