Ionic

Introduction

A pleasant surprise to find something which combines Angular with cross-platform. It also now supports React too though I have not tried it yet. Read the reviews it seems that performance, as ever, is the downside though no experience yet.

Ionic Site

There is one thing people agree on and that is the documentation is great docs. So far it looks like you use UI components from Ionic instead of standard HTML so there is a learning curve for this but the community is also said to be great.

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>Dashboard</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header color="primary">
      <ion-title class="ion-text-center"> Total: $500 </ion-title>
    </ion-card-header>
    <ion-footer>
      <ion-row>
        <ion-col size="3">
          <ion-button expand="full" fill="clear">Today</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button expand="full" fill="clear">Date</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button expand="full" fill="clear">Category</ion-button>
        </ion-col>
        <ion-col size="3">
          <ion-button expand="full" fill="clear">Amount</ion-button>
        </ion-col>
      </ion-row>
    </ion-footer>
  </ion-card>
  <ion-card>
    <ion-toolbar color="primary">
      <ion-buttons slot="end">
        <ion-button>
          <ion-icon size="large" name="help-circle-outline"></ion-icon>
        </ion-button>
        <ion-button>
          <ion-icon size="large" name="create-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>Amount</ion-title>
    </ion-toolbar>
    <ion-card-content>
      Description
      <ion-footer>
        <ion-label>
          Date And Time
        </ion-label>
        <ion-label>
          Type
        </ion-label>
      </ion-footer>
    </ion-card-content>
  </ion-card>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>