touchstack

TouchStack

Currently in dev/planning

Documentation

[Click here](https://github.com/hubstack/touchstack/wiki/Getting Started)

Examples

Complete Project: https://github.com/hubstack/touchstack-example

Sample App

import React from 'react'
import ReactDOM from 'react-dom'
import {
  Application,
  StatusBar,
  View,
  ViewsManager,
  Label,
  Link
} from 'touchstack'

var App = React.createClass({
  render () {
    return (
      <Application>
        <StatusBar />
        <ViewsManager defaultView="homeView">
          <View name="homeView">
            <Label>Hello World!</Label>
            <Link to="secondView" transition="showFromRight">Go to second view!</Link>
          </View>
          <View name="secondView">
            <Link to="homeView" transition="revealFromRight">Go back</Link>
          </View>
        </ViewsManager>
      </Application>
    );
  }
});

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

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

Core Components

ViewsManager Example

<ViewsManager defaultView="homeView">
  <View name="homeView">
    <Label>Home View</Label>
  </View>
  <View name="anotherView">
    <Label>Another View</Label>
  </View>
</ViewsManager>

View Example

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

Panel Example

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

Scrollable area:

<Panel type="scrollable" onScroll={event...}>
  <Label text="UhOh" />
</Panel>

This use flex display mode for grids:

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

StatusBar Example

<StatusBar />

Light text color:

<StatusBar type="light" />

UI Components

NavigationBar Example

<NavigationBar title="Title" />

SearchBar Example

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

Label Example

<Label>Text</Label>

Icon Example

<Icon icon="ion-ios-search" />