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.

Sign up for GitHub

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

Jump to bottom

feat(Sidebar): add component #905

Merged
merged 5 commits into from
Dec 3, 2016
Merged

feat(Sidebar): add component #905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dd4c9ed
feat(Sidebar): add component
fracmak Nov 20, 2016
d286850
feat(Sidebar): add component examples
fracmak Nov 20, 2016
367d7d6
feat(Sidebar): added Sidebar.Pushable and Sidebar.Pusher with docs
fracmak Nov 28, 2016
35b9429
fix(Sidebar): use dynamic animating className
levithomason Dec 3, 2016
a403966
docs(Sidebar): use augmentation and remove inline styles
levithomason Dec 3, 2016
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
| ✓ Label | | | ✓ Rating | |
| ✓ List | | | ✓ Search | |
| ✓ Loader | | | Shape | |
| ✓ Rail | | | Sidebar | |
| ✓ Rail | | | ✓ Sidebar | |
| ✓ Reveal | | | Sticky | |
| ✓ Segment | | | Tab | |
| ✓ Step | | | Transition | |
Expand Down
41 changes: 41 additions & 0 deletions docs/app/Examples/collections/Sidebar/Overlay/SidebarBottomOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarBottomOverlay extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} animation='overlay' direction='bottom' visible={visible} inverted>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarBottomOverlay
41 changes: 41 additions & 0 deletions docs/app/Examples/collections/Sidebar/Overlay/SidebarLeftOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarLeftOverlay extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} animation='overlay' width='thin' visible={visible} icon='labeled' vertical inverted>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarLeftOverlay
50 changes: 50 additions & 0 deletions docs/app/Examples/collections/Sidebar/Overlay/SidebarRightOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarRightOverlay extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar
as={Menu}
animation='overlay'
width='thin'
direction='right'
visible={visible}
icon='labeled'
vertical
inverted
>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarRightOverlay
41 changes: 41 additions & 0 deletions docs/app/Examples/collections/Sidebar/Overlay/SidebarTopOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarTopOverlay extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} animation='overlay' direction='top' visible={visible} inverted>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarTopOverlay
31 changes: 31 additions & 0 deletions docs/app/Examples/collections/Sidebar/Overlay/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react'

import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

const SidebarVariationsExamples = () => (
<ExampleSection title='Overlay'>
<ComponentExample
title='Left Overlay'
description='Sidebar attached to the left of the pushable container overlayed on the pusher.'
examplePath='collections/Sidebar/Overlay/SidebarLeftOverlay'
/>
<ComponentExample
title='Right Overlay'
description='Sidebar attached to the right of the pushable container overlayed on the pusher.'
examplePath='collections/Sidebar/Overlay/SidebarRightOverlay'
/>
<ComponentExample
title='Top Overlay'
description='Sidebar attached to the top of the pushable container overlayed on the pusher.'
examplePath='collections/Sidebar/Overlay/SidebarTopOverlay'
/>
<ComponentExample
title='Bottom Overlay'
description='Sidebar attached to the bottom of the pushable container overlayed on the pusher.'
examplePath='collections/Sidebar/Overlay/SidebarBottomOverlay'
/>
</ExampleSection>
)

export default SidebarVariationsExamples
41 changes: 41 additions & 0 deletions docs/app/Examples/collections/Sidebar/Push/SidebarBottomPush.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarBottomPush extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} animation='push' direction='bottom' visible={visible} inverted>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarBottomPush
41 changes: 41 additions & 0 deletions docs/app/Examples/collections/Sidebar/Push/SidebarLeftPush.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarLeftPush extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} animation='push' width='thin' visible={visible} icon='labeled' vertical inverted>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarLeftPush
50 changes: 50 additions & 0 deletions docs/app/Examples/collections/Sidebar/Push/SidebarRightPush.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarRightPush extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar
as={Menu}
animation='push'
width='thin'
direction='right'
visible={visible}
icon='labeled'
vertical
inverted
>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarRightPush
41 changes: 41 additions & 0 deletions docs/app/Examples/collections/Sidebar/Push/SidebarTopPush.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarTopPush extends Component {
state = { visible: false }

toggleVisibility = () => this.setState({ visible: !this.state.visible })

render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} animation='push' direction='top' visible={visible} inverted>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
}

export default SidebarTopPush
Loading