WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Header


This chapter can show you the way to begin with Ionic Framework. the subsequent table contains the list of parts required to begin with Ionic.


Adding Header


If you would like to form a header, you would like to feature bar-header when your main bar category. Open your www/index.html file and add the header category within your body tag. we tend to area unit adding a header to the index.html body as a result of we wish it to be offered on each screen within the app.
 class = "bar bar-header">
class = "title">Header

Blank App


If you would like to begin from the scratch, you'll be able to install the Ionic blank templet. we'll use a similar steps that are explained on top of with the addition of ionic begin myApp blank rather than ionic begin myApp tabs

Header Colors


you just have to be compelled to add the acceptable color category to that. after you vogue your parts, you would like to feature your main component category as prefix to your color category.
we area unit styling the header bar, the prefix category are going to be bar and also the color category that we wish to use during this example is positive (blue).
 class = "bar bar-header bar-positive">
class = "title">Header

Header Elements


The following code is AN example to feature a menu button and a home button within a header.
 class = "bar bar-header bar-positive">
<button</span> class = "button icon ion-navicon"></button></span>
class = "title">Header Buttons
<button</span> class = "button icon ion-home"></button></span>

Sub Header


You will produce a sub header which will be situated just under the header bar. the subsequent example can show a way to add a header and a sub header to your app. Here, we've titled the sub header with AN "assertive" (red) color category.


 class = "bar bar-header bar-positive">
<button</span> class = "button icon ion-navicon"></button></span>
class = "title">Header Buttons
<button</span> class = "button icon ion-home"></button></span>


class = "bar bar-subheader bar-assertive">
class = "title">Sub Header
The on top of code can turn out the subsequent screen

To fix this you would like to feature a ‘has-header’ or a ‘has-subheader’ category to the ion-content tags of your screens. Open one amongst your markup language files from www/templates and add the has-subheader category to the ion-content. If you merely use header in your app, you may have to be compelled to add the has-header category instead.


category="result notranslate">