https://github.com/arnemart/hamburger-basement

A hamburger basement component for React and Topcoat
https://github.com/arnemart/hamburger-basement

Last synced: 4 months ago
JSON representation

A hamburger basement component for React and Topcoat

• Host: GitHub
• URL: https://github.com/arnemart/hamburger-basement
• Owner: arnemart
• Created: 2014-02-26T12:44:45.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2015-04-14T17:10:44.000Z (over 9 years ago)
• Last Synced: 2024-06-22T20:24:47.861Z (6 months ago)
• Language: JavaScript
• Size: 2.33 MB
• Stars: 11
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
hamburger-basement

==================

A hamburger basement component for [React][1], using [Topcoat][2].

Wth

---

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.

Demo

----

Go here: 

(Preferably on mobile)

Installation

------------

`npm install hamburger-basement` or just download hamburger-basement.js and hamburger-basement.css.

Loading

-------

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.

Enabling touch events

---------------------

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:

```javascript

React.initializeTouchEvents(true);

```

Using

-----

Do like this:

```javascript

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.

[1]: http://facebook.github.io/react/

[2]: http://topcoat.io