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']) |