terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add/semantic ui example (#1753)

Browse source 
* Using developit/unfetch as the Fetch API polyfill

* Added Semantic UI React example

* Fixed linting issues
This commit is contained in:
Dan Zajdband 2017-04-22 07:54:35 -05:00 committed by Tim Neutkens
parent 1bb20b1930
commit bbb8ff75a5
3 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
examples/with-semantic-ui/README.md Normal file
View file

@ -0,0 +1,29 @@
# Semantic UI 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-semantic-ui
cd with-semantic-ui
```
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 shows how to use Next.js along with [Semantic UI React](http://react.semantic-ui.com). This is intended to show the integration of this
UI toolkit with the Framework,

17
examples/with-semantic-ui/package.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "with-semantic-ui",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"semantic-ui-react": "^0.68.0"
},
"author": "",
"license": "ISC"
}

38
examples/with-semantic-ui/pages/index.js Normal file
View file

@ -0,0 +1,38 @@
import Head from 'next/head'
import { Modal, Header, Button, List } from 'semantic-ui-react'
export default () => (
<div>
<Head>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css' />
</Head>
<Modal trigger={<Button>Show Modal</Button>}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<Header>Default Profile Image</Header>
<p>We've found the following gravatar image associated with your e-mail address.</p>
<p>Is it okay to use this photo?</p>
</Modal.Description>
</Modal.Content>
</Modal>
<List vertical relaxed>
<List.Item>
<List.Content>
<List.Header as='a'>Next.js</List.Header>
</List.Content>
</List.Item>
<List.Item>
<List.Content>
<List.Header as='a'>React</List.Header>
</List.Content>
</List.Item>
<List.Item>
<List.Content>
<List.Header as='a'>Vue.js</List.Header>
</List.Content>
</List.Item>
</List>
</div>
)