Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs/item #868

Merged
merged 2 commits into from
Nov 16, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 0 additions & 25 deletions docs/app/Examples/views/Item/Content/Contents.js

This file was deleted.

42 changes: 0 additions & 42 deletions docs/app/Examples/views/Item/Content/Descriptions.js

This file was deleted.

38 changes: 0 additions & 38 deletions docs/app/Examples/views/Item/Content/ExtraContent.js

This file was deleted.

29 changes: 0 additions & 29 deletions docs/app/Examples/views/Item/Content/Headers.js

This file was deleted.

20 changes: 0 additions & 20 deletions docs/app/Examples/views/Item/Content/Images.js

This file was deleted.

23 changes: 23 additions & 0 deletions docs/app/Examples/views/Item/Content/ItemExampleContents.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'
import { Item } from 'semantic-ui-react'

const ItemExampleContents = () => (
<Item.Group divided>
<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>Content A</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>Content B</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content content='Content C' verticalAlign='middle' />
</Item>
</Item.Group>
)

export default ItemExampleContents
41 changes: 41 additions & 0 deletions docs/app/Examples/views/Item/Content/ItemExampleDescriptions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react'
import { Item } from 'semantic-ui-react'

const description = [
'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
'tiny stature, and even others for their massive size.',
].join(' ')

const ItemExampleDescriptions = () => (
<Item.Group>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header as='a'>Cute Dog</Item.Header>
<Item.Description>
<p>{description}</p>
<p>
Many people also have their own barometers for what makes a cute dog.
</p>
</Item.Description>
</Item.Content>
</Item>

<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header as='a'>Cute Dog</Item.Header>
<Item.Description content={description} />
</Item.Content>
</Item>

<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content header='Cute Dog' description={description} />
</Item>
</Item.Group>
)

export default ItemExampleDescriptions
37 changes: 37 additions & 0 deletions docs/app/Examples/views/Item/Content/ItemExampleExtraContent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react'
import { Icon, Image as ImageComponent, Item } from 'semantic-ui-react'

const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />

const ItemExampleExtraContent = () => (
<Item.Group>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header as='a'>Cute Dog</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra>
<Icon name='green check' /> 121 Votes
</Item.Extra>
</Item.Content>
</Item>

<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header as='a'>Cute Dog</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra content='121 Votes' />
</Item.Content>
</Item>

<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content header='Cute Dog' extra='121 Votes' />
</Item>
</Item.Group>
)

export default ItemExampleExtraContent
27 changes: 27 additions & 0 deletions docs/app/Examples/views/Item/Content/ItemExampleHeaders.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react'
import { Item } from 'semantic-ui-react'

const ItemExampleHeaders = () => (
<Item.Group>
<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header as='a'>12 Years a Slave</Item.Header>
</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header as='a' content='My Neighbor Totoro' />
</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content header='Watchmen' verticalAlign='middle' />
</Item>
</Item.Group>
)

export default ItemExampleHeaders
18 changes: 18 additions & 0 deletions docs/app/Examples/views/Item/Content/ItemExampleImages.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react'
import { Item } from 'semantic-ui-react'

const ItemExampleImages = () => (
<Item.Group divided>
<Item>
<Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
</Item>

<Item>
<Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
</Item>

<Item image='http://semantic-ui.com/images/wireframe/image.png' />
</Item.Group>
)

export default ItemExampleImages
38 changes: 38 additions & 0 deletions docs/app/Examples/views/Item/Content/ItemExampleLink.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react'
import { Image as ImageComponent, Item } from 'semantic-ui-react'

const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />

const ItemExampleLink = () => (
<Item.Group>
<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header>Arrowhead Valley Camp</Item.Header>
<Item.Meta>
<span className='price'>$1200</span>
<span className='stay'>1 Month</span>
</Item.Meta>
<Item.Description>{paragraph}</Item.Description>
</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header>Buck's Homebrew Stayaway</Item.Header>
<Item.Meta content='$1000 2 Weeks' />
<Item.Description>{paragraph}</Item.Description>
</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
</Item>
</Item.Group>
)

export default ItemExampleLink
38 changes: 38 additions & 0 deletions docs/app/Examples/views/Item/Content/ItemExampleMetadata.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react'
import { Image as ImageComponent, Item } from 'semantic-ui-react'

const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />

const ItemExampleMetadata = () => (
<Item.Group>
<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header>Arrowhead Valley Camp</Item.Header>
<Item.Meta>
<span className='price'>$1200</span>
<span className='stay'>1 Month</span>
</Item.Meta>
<Item.Description>{paragraph}</Item.Description>
</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />

<Item.Content>
<Item.Header>Buck's Homebrew Stayaway</Item.Header>
<Item.Meta content='$1000 2 Weeks' />
<Item.Description>{paragraph}</Item.Description>
</Item.Content>
</Item>

<Item>
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
</Item>
</Item.Group>
)

export default ItemExampleMetadata
Loading