mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
example: with react-toolbox (#2047)
* example with react-toolbox * JavaScript standard
This commit is contained in:
RasmusErik Voel Jensen
Tim Neutkens
parent
1723d9defd
commit
8b90e6f148
27
examples/with-react-toolbox/README.md
Normal file
27
examples/with-react-toolbox/README.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-toolbox)
|
||||
|
||||
# With react-toolbox example
|
||||
|
||||
## 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-toolbox
|
||||
cd with-react-toolbox
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
yarn
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Notice that `yarn toolbox` (or `npm run toolbox`) should be rerun every time the `"reactToolbox"` configuration in `package.json` is changed, in order to update `static/theme.js` and `static/theme.css`. The `"reactToolbox"` configuration includes styling, and the list of react-toolbox components to include.
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
This is a simple example of getting react-toolbox up and running, using [react-toolbox-themr](https://github.com/react-toolbox/react-toolbox-themr).
|
||||
|
||||
For actual use, you probably also want to add Roboto Font, and Material Design Icons. See <http://react-toolbox.com/#/install>
|
||||
35
examples/with-react-toolbox/package.json
Normal file
35
examples/with-react-toolbox/package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "with-react-toolbox",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"toolbox": "react-toolbox-themr"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"next": "latest",
|
||||
"react": "^15.5.4",
|
||||
"react-addons-css-transition-group": "^15.5.2",
|
||||
"react-dom": "^15.5.4",
|
||||
"react-toolbox": "^2.0.0-beta.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-toolbox-themr": "^1.0.2"
|
||||
},
|
||||
"reactToolbox": {
|
||||
"include": [
|
||||
"BUTTON",
|
||||
"DATE_PICKER"
|
||||
],
|
||||
"customProperties": {
|
||||
"animation-duration": "0.3s",
|
||||
"color-accent": "var(--palette-pink-a200)",
|
||||
"color-accent-dark": "var(--palette-pink-700)",
|
||||
"color-primary-contrast": "var(--color-dark-contrast)",
|
||||
"color-accent-contrast": "var(--color-dark-contrast)"
|
||||
},
|
||||
"output": "static"
|
||||
}
|
||||
}
|
||||
16
examples/with-react-toolbox/pages/index.js
Normal file
16
examples/with-react-toolbox/pages/index.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import ThemeProvider from 'react-toolbox/lib/ThemeProvider'
|
||||
import theme from '../static/theme'
|
||||
import Head from 'next/head'
|
||||
|
||||
import Button from 'react-toolbox/lib/button/Button'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Head>
|
||||
<link href='/static/theme.css' rel='stylesheet' />
|
||||
</Head>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Button raised primary>Hello</Button>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
)
|
||||
1
examples/with-react-toolbox/static/theme.css
Normal file
1
examples/with-react-toolbox/static/theme.css
Normal file
File diff suppressed because one or more lines are too long
1
examples/with-react-toolbox/static/theme.js
Normal file
1
examples/with-react-toolbox/static/theme.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
module.exports = {'RTButton': {'button': '_2Agdx', 'rippleWrapper': '_3AVBi', 'squared': '_2GH_L', 'icon': '_3aBSX', 'solid': '_1ZxqC', 'raised': '_221ic _2Agdx _2GH_L _1ZxqC', 'flat': '_1jWAQ _2Agdx _2GH_L', 'floating': '_3IRMZ _2Agdx _1ZxqC', 'mini': '_2DCN-', 'toggle': 'hC5Z2 _2Agdx', 'primary': '_3tTAW', 'accent': '_2wp6F', 'neutral': '_2CPs4', 'inverse': '_2SPZr'}, 'RTRipple': {'rippleWrapper': '_16N7o', 'ripple': '_3SV_u', 'rippleRestarting': '_2OZWa', 'rippleActive': '_3O2Ue'}, 'RTDatePicker': {'input': '_2ISvI', 'disabled': 'Cf3yF', 'inputElement': 'x7MhN', 'header': '_2vLUd', 'year': '_1VWY-', 'date': '_3K2Ws', 'calendarWrapper': '_1t-4v', 'yearsDisplay': '_2OzvT', 'monthsDisplay': '_2DDdC', 'dialog': '_3fCV6', 'button': '_2hL6u', 'calendar': '_1X9ls', 'prev': 'Nv9Bc', 'next': '_3iPkS', 'title': '_2ESpD', 'years': 'zEdgW', 'active': '_1pjXb', 'week': 'PcByv', 'days': '_1qh3T', 'day': '_2qF_L', 'month': '_1hSm5', 'slideRightEnter': 'Rk89h', 'slideRightLeave': '_1nam4', 'slideRightEnterActive': 'm5B3T', 'slideRightLeaveActive': '_2bZap', 'slideLeftEnter': 'bGml_', 'slideLeftLeave': '_2WGqM', 'slideLeftEnterActive': '_3Ghls', 'slideLeftLeaveActive': '_2WLHG'}, 'RTInput': {'input': 'lFVgC', 'withIcon': '_1nKdf', 'icon': '_3ga1V', 'inputElement': '_4bZUj', 'bar': '_3FySS', 'label': '_34120', 'fixed': 'GRQEP', 'required': '_2G0aY', 'hint': 'bMyi_', 'filled': '_34NWn', 'error': '_2k5Jz', 'counter': '_1oTuT', 'disabled': '_3ZfJq', 'errored': '_2s74E', 'hidden': '_2gAMv'}, 'RTDialog': {'wrapper': '_3nrqp', 'dialog': '_3lw90', 'active': '_3ea_1', 'small': '_38VTT', 'normal': '_1K3iz', 'large': '_10LcP', 'fullscreen': '_3tLXQ', 'title': '_2J-aP', 'body': '_1Ivuq', 'navigation': 'wgwdj', 'button': '_22_c6'}, 'RTOverlay': {'overlay': '_2LA9x', 'active': '_1mb5R'}}
|
||||
Loading…
Reference in a new issue