-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Sidebar): add component examples
- Loading branch information
Showing
25 changed files
with
933 additions
and
0 deletions.
There are no files selected for viewing
39 changes: 39 additions & 0 deletions
39
docs/app/Examples/collections/Sidebar/Overlay/SidebarBottomOverlay.js
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,39 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable' style={{ overflow: 'hidden' }}> | ||
| <Sidebar as={Menu} animation='overlay' direction='bottom' visible={visible} icon='labeled' 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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarBottomOverlay |
39 changes: 39 additions & 0 deletions
39
docs/app/Examples/collections/Sidebar/Overlay/SidebarLeftOverlay.js
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,39 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable'> | ||
| <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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarLeftOverlay |
48 changes: 48 additions & 0 deletions
48
docs/app/Examples/collections/Sidebar/Overlay/SidebarRightOverlay.js
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,48 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable'> | ||
| <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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarRightOverlay |
39 changes: 39 additions & 0 deletions
39
docs/app/Examples/collections/Sidebar/Overlay/SidebarTopOverlay.js
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,39 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable' style={{ position: 'relative' }}> | ||
| <Sidebar as={Menu} animation='overlay' direction='top' visible={visible} icon='labeled' 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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarTopOverlay |
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,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 |
39 changes: 39 additions & 0 deletions
39
docs/app/Examples/collections/Sidebar/Push/SidebarBottomPush.js
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,39 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable' style={{ overflow: 'hidden' }}> | ||
| <Sidebar as={Menu} animation='push' direction='bottom' visible={visible} icon='labeled' 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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarBottomPush |
39 changes: 39 additions & 0 deletions
39
docs/app/Examples/collections/Sidebar/Push/SidebarLeftPush.js
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,39 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable'> | ||
| <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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarLeftPush |
48 changes: 48 additions & 0 deletions
48
docs/app/Examples/collections/Sidebar/Push/SidebarRightPush.js
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,48 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable'> | ||
| <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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarRightPush |
39 changes: 39 additions & 0 deletions
39
docs/app/Examples/collections/Sidebar/Push/SidebarTopPush.js
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,39 @@ | ||
| import React, { Component } from 'react' | ||
| import { Sidebar, 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> | ||
| <div className='pushable' style={{ position: 'relative', overflow: 'hidden' }}> | ||
| <Sidebar as={Menu} animation='push' direction='top' visible={visible} icon='labeled' 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> | ||
| <div className='pusher'> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default SidebarTopPush |
Oops, something went wrong.