Skip to content

Commit 692b3ae

Browse files
dpkwhanlevithomason
authored andcommitted
Docs/item (#868)
* style(Item): update docs to the latest standards * style(Item): update docs to the latest standards
1 parent 330d006 commit 692b3ae

33 files changed

+534
-555
lines changed

docs/app/Examples/views/Item/Content/Contents.js

Lines changed: 0 additions & 25 deletions
This file was deleted.

docs/app/Examples/views/Item/Content/Descriptions.js

Lines changed: 0 additions & 42 deletions
This file was deleted.

docs/app/Examples/views/Item/Content/ExtraContent.js

Lines changed: 0 additions & 38 deletions
This file was deleted.

docs/app/Examples/views/Item/Content/Headers.js

Lines changed: 0 additions & 29 deletions
This file was deleted.

docs/app/Examples/views/Item/Content/Images.js

Lines changed: 0 additions & 20 deletions
This file was deleted.
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import { Item } from 'semantic-ui-react'
3+
4+
const ItemExampleContents = () => (
5+
<Item.Group divided>
6+
<Item>
7+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
8+
<Item.Content verticalAlign='middle'>Content A</Item.Content>
9+
</Item>
10+
11+
<Item>
12+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
13+
<Item.Content verticalAlign='middle'>Content B</Item.Content>
14+
</Item>
15+
16+
<Item>
17+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
18+
<Item.Content content='Content C' verticalAlign='middle' />
19+
</Item>
20+
</Item.Group>
21+
)
22+
23+
export default ItemExampleContents
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
import { Item } from 'semantic-ui-react'
3+
4+
const description = [
5+
'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
6+
'tiny stature, and even others for their massive size.',
7+
].join(' ')
8+
9+
const ItemExampleDescriptions = () => (
10+
<Item.Group>
11+
<Item>
12+
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
13+
14+
<Item.Content>
15+
<Item.Header as='a'>Cute Dog</Item.Header>
16+
<Item.Description>
17+
<p>{description}</p>
18+
<p>
19+
Many people also have their own barometers for what makes a cute dog.
20+
</p>
21+
</Item.Description>
22+
</Item.Content>
23+
</Item>
24+
25+
<Item>
26+
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
27+
28+
<Item.Content>
29+
<Item.Header as='a'>Cute Dog</Item.Header>
30+
<Item.Description content={description} />
31+
</Item.Content>
32+
</Item>
33+
34+
<Item>
35+
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
36+
<Item.Content header='Cute Dog' description={description} />
37+
</Item>
38+
</Item.Group>
39+
)
40+
41+
export default ItemExampleDescriptions
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import { Icon, Image as ImageComponent, Item } from 'semantic-ui-react'
3+
4+
const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
5+
6+
const ItemExampleExtraContent = () => (
7+
<Item.Group>
8+
<Item>
9+
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
10+
11+
<Item.Content>
12+
<Item.Header as='a'>Cute Dog</Item.Header>
13+
<Item.Description>{paragraph}</Item.Description>
14+
<Item.Extra>
15+
<Icon name='green check' /> 121 Votes
16+
</Item.Extra>
17+
</Item.Content>
18+
</Item>
19+
20+
<Item>
21+
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
22+
23+
<Item.Content>
24+
<Item.Header as='a'>Cute Dog</Item.Header>
25+
<Item.Description>{paragraph}</Item.Description>
26+
<Item.Extra content='121 Votes' />
27+
</Item.Content>
28+
</Item>
29+
30+
<Item>
31+
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
32+
<Item.Content header='Cute Dog' extra='121 Votes' />
33+
</Item>
34+
</Item.Group>
35+
)
36+
37+
export default ItemExampleExtraContent
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import { Item } from 'semantic-ui-react'
3+
4+
const ItemExampleHeaders = () => (
5+
<Item.Group>
6+
<Item>
7+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
8+
<Item.Content verticalAlign='middle'>
9+
<Item.Header as='a'>12 Years a Slave</Item.Header>
10+
</Item.Content>
11+
</Item>
12+
13+
<Item>
14+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
15+
<Item.Content verticalAlign='middle'>
16+
<Item.Header as='a' content='My Neighbor Totoro' />
17+
</Item.Content>
18+
</Item>
19+
20+
<Item>
21+
<Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
22+
<Item.Content header='Watchmen' verticalAlign='middle' />
23+
</Item>
24+
</Item.Group>
25+
)
26+
27+
export default ItemExampleHeaders
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import { Item } from 'semantic-ui-react'
3+
4+
const ItemExampleImages = () => (
5+
<Item.Group divided>
6+
<Item>
7+
<Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
8+
</Item>
9+
10+
<Item>
11+
<Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
12+
</Item>
13+
14+
<Item image='http://semantic-ui.com/images/wireframe/image.png' />
15+
</Item.Group>
16+
)
17+
18+
export default ItemExampleImages

0 commit comments

Comments
 (0)