Dojo's SlidePane
widget provides a component capable of moving content into or out of the viewport, as is commonly used for mobile navigation menus.
- Can be positioned on the left or right edge of the screen
- Position and animation powered by CSS transforms for maximum performance
- Pane follows the pointing device as it's opened or closed
Basic Example
import { w } from '@dojo/framework/widget-core/d';
import SlidePane from '@dojo/widgets/slide-pane';
w(SlidePane, {
open: this.state.open,
underlay: true,
onRequestClose: () => this.setState({ open: false })
}, [ 'Some content...' ]);
Right-aligned
import { w } from '@dojo/framework/widget-core/d';
import SlidePane, { Align } from '@dojo/widgets/slide-pane';
w(SlidePane, {
open: this.state.open,
align: Align.right,
onRequestClose: () => this.setState({ open: false })
}, [ 'Some content...' ]);
The following CSS classes are used to style the SlidePane
widget and should be provided by custom themes:
content
: Applied to the content of theSlidePane
left
: Applied to the content of a left-alignedSlidePane
open
: Applied to the content of an openSlidePane
right
: Applied to the content of a right-alignedSlidePane
root
: Applied to the top-level wrapper nodeslideIn
: Applied to the content of an openingSlidePane
slideOut
: Applied to the content of a closingSlidePane
underlay
: Applied to the element covering all content except this pane