Update Grid to v1 API #351
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridColumnsExample = () => ( | ||
| <Grid> | ||
| <Grid.Row> | ||
| <Grid.Column width='eight'>{image}</Grid.Column> | ||
| <Grid.Column width={8}>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column width='eight'>{image}</Grid.Column> | ||
| <Grid.Column width={8}>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridColumnsExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridRowsExample = () => ( | ||
| <Grid column={3}> | ||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridRowsExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React from 'react' | ||
| import { Grid, Segment } from 'stardust' | ||
|
|
||
| const { Column, Row } = Grid | ||
|
|
||
| const GridDeviceVisibilityExample = () => ( | ||
| <Grid> | ||
| <Row column={2} only='large screen'> | ||
| <Column> | ||
| <Segment>Large Screen</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Large Screen</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row column={2} only='widescreen'> | ||
| <Column> | ||
| <Segment>Widescreen</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Widescreen</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row column={2} only='mobile'> | ||
| <Column> | ||
| <Segment>Mobile</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Mobile</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row column={3}> | ||
| <Column only='computer'> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column only='tablet mobile'> | ||
| <Segment>Tablet and Mobile</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>All Sizes</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>All Sizes</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row column={4} only='computer'> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Computer</Segment> | ||
| </Column> | ||
| </Row> | ||
| <Row only='tablet'> | ||
| <Column> | ||
| <Segment>Tablet</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Tablet</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>Tablet</Segment> | ||
| </Column> | ||
| </Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridDeviceVisibilityExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
| const image = <Image src='http://semantic-ui.com/images/wireframe/image.png' /> | ||
|
|
||
| const GridDoublingExample = () => ( | ||
| <Grid doubling column={5}> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| <Column>{image}</Column> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridDoublingExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridResponsiveWidthExample = () => ( | ||
| <div> | ||
| <Grid> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile={16} tablet={8} computer={4}>{image}</Column> | ||
| <Column mobile='sixteen' tablet='eight' computer='four'>{image}</Column> | ||
| </Grid> | ||
|
|
||
| <Grid> | ||
| <Column largeScreen={2} widescreen={1}>{image}</Column> | ||
| <Column largeScreen={2} widescreen={1}>{image}</Column> | ||
| <Column largeScreen='two' widescreen='one'>{image}</Column> | ||
| <Column largeScreen='two' widescreen='one'>{image}</Column> | ||
| </Grid> | ||
| </div> | ||
| ) | ||
|
|
||
| export default GridResponsiveWidthExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import React from 'react' | ||
| import { Divider, Grid } from 'stardust' | ||
|
|
||
| const { Column, Row } = Grid | ||
|
|
||
| const GridreversedExamples = () => ( | ||
| <div> | ||
| <Grid reversed='computer' width='equal'> | ||
| <Row> | ||
| <Column>Computer A Fourth</Column> | ||
| <Column>Computer A Third</Column> | ||
| <Column>Computer A Second</Column> | ||
| <Column>Computer A First</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer B Fourth</Column> | ||
| <Column>Computer B Third</Column> | ||
| <Column>Computer B Second</Column> | ||
| <Column>Computer B First</Column> | ||
| </Row> | ||
| </Grid> | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Grid reversed='tablet' width='equal'> | ||
| <Column>Tablet Fourth</Column> | ||
| <Column>Tablet Third</Column> | ||
| <Column>Tablet Second</Column> | ||
| <Column>Tablet First</Column> | ||
| </Grid> | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Grid reversed='mobile' width='equal'> | ||
| <Column>Mobile Fourth</Column> | ||
| <Column>Mobile Third</Column> | ||
| <Column>Mobile Second</Column> | ||
| <Column>Mobile First</Column> | ||
| </Grid> | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Grid reversed='computer vertically'> | ||
| <Row> | ||
| <Column>Computer Row 4</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer Row 3</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer Row 2</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Computer Row 1</Column> | ||
| </Row> | ||
| </Grid> | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Grid reversed='tablet vertically'> | ||
| <Row> | ||
| <Column>Tablet Row 4</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Tablet Row 3</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Tablet Row 2</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Tablet Row 1</Column> | ||
| </Row> | ||
| </Grid> | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Grid reversed='mobile vertically'> | ||
| <Row> | ||
| <Column>Mobile Row 4</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Mobile Row 3</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Mobile Row 2</Column> | ||
| </Row> | ||
| <Row> | ||
| <Column>Mobile Row 1</Column> | ||
| </Row> | ||
| </Grid> | ||
| </div> | ||
| ) | ||
|
|
||
| export default GridreversedExamples |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React from 'react' | ||
| import { Image, Grid, Segment } from 'stardust' | ||
|
|
||
| const { Column } = Grid | ||
| const image = <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
|
|
||
| const GridStackableExample = () => ( | ||
| <Grid stackable column={2}> | ||
| <Column> | ||
| <Segment>{image}</Segment> | ||
| </Column> | ||
| <Column> | ||
| <Segment>{image}</Segment> | ||
| </Column> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridStackableExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/image.png' /> | ||
|
|
||
| const GridCelledExample = () => ( | ||
| <Grid celled> | ||
| <Grid.Row> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| <Grid.Column width='thirteen'> | ||
| <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' /> | ||
| </Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| <Grid.Column width='ten'><Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /></Grid.Column> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridCelledExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from 'react' | ||
| import { Divider, Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' /> | ||
|
|
||
| const GridDividedExample = () => ( | ||
| <div> | ||
| <Grid column={3} divided> | ||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
|
|
||
| <Divider /> | ||
|
|
||
| <Grid column='three' divided> | ||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| <Grid.Column>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| </div> | ||
| ) | ||
|
|
||
| export default GridDividedExample | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import _ from 'lodash' | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const columns = _.range(0, 16).map((i) => ( | ||
|
There was a problem hiding this comment.
_.range(0, 16).map((i) => {})
// becomes
_.times(16, (i) => {}) |
||
| <Grid.Column key={i}> | ||
| <Image src='http://semantic-ui.com/images/wireframe/media-paragraph.png' /> | ||
| </Grid.Column> | ||
| )) | ||
|
|
||
| const GridExample = () => ( | ||
| <Grid>{columns}</Grid> | ||
| ) | ||
|
|
||
| export default GridExample | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react' | ||
| import { Image, Grid } from 'stardust' | ||
|
|
||
| const image = <Image src='http://semantic-ui.com/images/wireframe/image.png' /> | ||
|
|
||
| const GridInternallyCelledExample = () => ( | ||
| <Grid celled='internally'> | ||
| <Grid.Row> | ||
| <Grid.Column width='three'>{image}</Grid.Column> | ||
| <Grid.Column width={10}> | ||
| <Image src='http://semantic-ui.com/images/wireframe/centered-paragraph.png' /> | ||
| </Grid.Column> | ||
| <Grid.Column width='three'>{image}</Grid.Column> | ||
| </Grid.Row> | ||
|
|
||
| <Grid.Row> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| <Grid.Column width='ten'><Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /></Grid.Column> | ||
| <Grid.Column width={3}>{image}</Grid.Column> | ||
| </Grid.Row> | ||
| </Grid> | ||
| ) | ||
|
|
||
| export default GridInternallyCelledExample |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To keep examples clean and concise, let's use separate example files instead of a
<Divider />between examples. Then when adding the<ComponentExample />to the index.js for the related examples, just omit thetitleanddescription. This way they'll appear all under one heading but have some whitespace between them and separate code toggle buttons.