HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
This is fixed to the top of the screen a header title bar. If you add to it 'bar-subheader' this style, it is subtitled.
<ion-header-bar align-title="left" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething()">Left Button</button> </div> <h1 class="title">Title!</h1> <div class="buttons"> <button class="button">Right Button</button> </div> </ion-header-bar> <ion-content> Some content! </ion-content>
Attributes | Types of | description |
---|
align-title (optional) | string | This is the alignment of the title. If not set, it will follow the default layout of the phone (Ios default is centered, Android default Left). Its value can be 'left', 'center', 'right'. |
no-tap-scroll (optional) | boolean | By default, the head of the title bar when you click on the screen contents will scroll to the head, no-tap-scroll can be set to true to disable the action. . Its value is a Boolean value (true / false). |
Know ion-header-bar, understand ion-footer-bar on easy attractive! Only ion-footer-bar is at the bottom of the screen.
<ion-content> Some content! </ion-content> <ion-footer-bar align-title="left" class="bar-assertive"> <div class="buttons"> <button class="button">Left Button</button> </div> <h1 class="title">Title!</h1> <div class="buttons" ng-click="doSomething()"> <button class="button">Right Button</button> </div> </ion-footer-bar>
Attributes | Types of | description |
---|
align-title (optional) | string | This is the alignment of the title. If not set, it will follow the default layout of the phone (Ios default is centered, Android default Left). Its value can be 'left', 'center', 'right'. |