@onoffcanvas/react
onoffcanvas react package
Please consider following this project's author, onokumus, and consider starring the project to show your
Getting started
Install
Install with npm:
$ npm install --save @onoffcanvas/react
Install with yarn:
$ yarn add @onoffcanvas/react
Usage
html
Include onoffcanvas
StyleSheet
<link rel="stylesheet" href="https://unpkg.com/@onoffcanvas/core/dist/onoffcanvas.min.css">
es2015 module
import React, { Component } from "react";
import { OnoffCanvas, OnoffCanvasToggler } from "@onoffcanvas/react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
position: "is-left"
};
this.handleOpen = this.handleOpen.bind(this);
this.handlePosition = this.handlePosition.bind(this);
}
handleOpen() {
this.setState({
isOpen: !this.state.isOpen
});
}
handlePosition(pos) {
this.setState({
position: pos
});
}
render() {
const { isOpen, position, ...rest } = this.state;
return (
<div className="App">
<OnoffCanvas className={`is-fixed ${position}`} isOpen={isOpen} {...rest}>
<OnoffCanvasToggler
isOpen={isOpen}
onClick={this.handleOpen}
isAnimated
/>
<h2>OC Demo</h2>
</OnoffCanvas>
<OnoffCanvasToggler
isOpen={isOpen}
onClick={this.handleOpen}
isAnimated
/>
<button onClick={(e) => this.handlePosition('is-top')}>is-top</button>
<button onClick={(e) => this.handlePosition('is-right')}>is-right</button>
<button onClick={(e) => this.handlePosition('is-left')}>is-left</button>
<button onClick={(e) => this.handlePosition('is-bottom')}>is-bottom</button>
<button onClick={(e) => this.handlePosition('is-center')}>is-center</button>
<button onClick={(e) => this.handlePosition('is-full')}>is-full</button>
</div>
);
}
}
export default App;
Canvas Options
- Position Options :
onoffcanvas
is in absolute position by default
- add class
is-fixed
to fixed position
<OnoffCanvas className="onoffcanvas is-fixed"></OnoffCanvas>
- Direction Options :
onoffcanvas
is in full-screen by default
is-top
is-right
-
is-bottom
, is-left
is-center
<OnoffCanvas className="onoffcanvas is-{top|right|bottom|left|center}" id="side-canvas"></OnoffCanvas>
- Opened/Closed Options :
onoffcanvas
is closed by default
- add class
is-open
to open.
<OnoffCanvas className="onoffcanvas is-open"></OnoffCanvas>
- Hoverable Options :
- add class
onoffcanvas-container
to parent element - add class
is-hoverable
toonoffcanvas
<div className="onoffcanvas-container">
<OnoffCanvas className="onoffcanvas is-hoverable"></OnoffCanvas>
</div>
Author
onokumus
License
Copyright © 2018, onokumus. Released under the MIT License.
This file was generated by verb-generate-readme, v0.8.0, on September 19, 2018.