Attempting to recreate the mobile facebook app UI with Ionic
A Pen by Michael Frohberg on CodePen.
| <html ng-app="ionic.example"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Segmented Control</title> | |
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> | |
| <link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet"> | |
| <script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script> | |
| </head> | |
| <body> | |
| <ion-pane> | |
| <ion-header-bar class="bar-positive item-input-inset"> | |
| <label class="item-input-wrapper"> | |
| <i class="icon ion-ios7-search placeholder-icon"></i> | |
| <input type="search" placeholder="Search"/> | |
| </label> | |
| <button class="button button-clear icon ion-navicon"> | |
| </button> | |
| </ion-header-bar> | |
| <ion-content has-padding has-subheader> | |
| <div class="bar bar-sub-header bar-stable"> | |
| <div class="button-bar"> | |
| <a href="#" class="button button-positive button-clear icon-left ion-ios7-compose-outline">Status</a> | |
| <a href="#" class="button button-positive button-clear icon-left ion-ios7-camera-outline">Photo</a> | |
| <a href="#" class="button button-positive button-clear icon-left ion-ios7-location-outline">Check in</a> | |
| </div> | |
| </div> | |
| </ion-content> | |
| </ion-pane> | |
| </body> |
Attempting to recreate the mobile facebook app UI with Ionic
A Pen by Michael Frohberg on CodePen.
| angular.module('ionic.example', ['ionic']) |