touchstack

TouchStack

Examples

Sample App

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Label,
  NavigationBar,
  Panel,
  View,
  Application,
  StatusBar
} from 'touchstack';

var App = React.createClass({
  render () {
    return (
      <Application>
        <StatusBar />
        <View>
          <NavigationBar title="Sample App" />
          <Panel>
            <Label text="Hello World!" />
          </Panel>
        </View>
      </Application>
    );
  }
});

function startApp () {
	ReactDOM.render(<App />, document.getElementById('application'));
}

if (!window.cordova) {
	startApp();
} else {
	document.addEventListener('deviceready', startApp, false);
}

Core Components

View Example

<View>
  <Label text="Hello World" />
</View>

Panel Example

<Panel>
  <Label text="UhOh" />
</Panel>

Scrollable area:

<Panel type="scrollable">
  <Label text="UhOh" />
</Panel>

This use flex display mode for grids:

<Panel type="row">
  <Label text="UhOh" />
</Panel>

StatusBar Example

<StatusBar />

UI Components

NavigationBar Example

<NavigationBar title="Title" />

SearchBar Example

<SearchBar placeholder="Search here" value={value...}
  onChange={event...}
  onCancel={event...}
  onSubmit={event...}
/>