A hamburger basement component for React, using Topcoat.
A “hamburger basement” is a common design pattern in mobile apps, where a button with an icon that kinda looks like a hamburger (typically in the top left corner) slides the main content aside and reveals a menu underneath.
This one also uses touch events to allow sliding the content to the side with a finger.
Go here: http://arnemart.github.io/hamburger-basement/
(Preferably on mobile)
npm install hamburger-basement
or just download hamburger-basement.js and hamburger-basement.css.
With browserify: var HamburgerBasement = require('hamburger-basement');
With AMD (requires modules react
and react-topcoat
): require(['hamburger-basement'], function(HamburgerBasement) { // Do stuff })
…or just include in a script tag (after loading react.js and react-topcoat.js first).
Don't forget to include the Topcoat CSS and hamburger-basement.css
in your HTML.
Touch events are not enabled by default in React as of version 0.9.0. To activate touch events, add the following line before rendering any React components:
React.initializeTouchEvents(true);
Do like this:
var basement = React.createClass({
render: function() {
return tc.list({
header: 'Header',
items: [{content: 'aa'}, {content: 'bb'}, {content: 'cc'}, {content: 'dd'}]
});
}
});
var content = React.createClass({
render: function() {
return d.div(
null,
'Hello'
);
}
});
var hb = hamburgerBasement({
basement: basement(),
title: 'Testing testing',
content: content(),
basementWidth: 400
});
React.initializeTouchEvents(true);
React.renderComponent(hb, document.getElementById('main'));
Run npm run watch
to build the test script.