Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content
Your Search Results

    Header 2.3 implementation

    This page details how to implement a Firefox OS 2.3 <gaia-header> web component in your own app.

    Installation

    First of all, make sure you have followed the preliminary setup instructions. Next, cd into the directory containing your web app. You can install the gaia-header component with:

    bower install gaia-components/gaia-header

    The command installs not only the gaia-header component, but also the base gaia-component code that all gaia components need to run, plus the Gaia icons set that many Gaia web components make use of.

    Examples

    The following gives you an idea of what a rendered gaia-header would look like:

    You can find the gaia-header source code on Github, plus a detailed live example.

    Note: Remember that you need to be using a browser that supports web components (see the preliminary setup instructions for details.)

    Code

    This section details all the code you need.

    CSS and JavaScript

    To include all of the styles and script that these components make use of, you need to add the following to your document head:

    <script src="bower_components/gaia-icons/gaia-icons.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css"></link>
<script src="bower_components/gaia-component/gaia-component.js"></script>
<script src="bower_components/gaia-header/gaia-header.js"></script>

    HTML

    With the above setup done, you can now use a <gaia-header> element anywhere you like:

    <gaia-header action="back">
  <h1>Keyboard Settings</h1>
</gaia-header>

    All you need to do is include the heading text you want inside the <h1> element, and the type of action you want performed inside the action attribute to include the correct icon. The available types are:

    • back: include a back button arrow icon.
    • menu: include a hamburger menu icon.
    • close: include a closing 'X'.

    Note: If you don't want to include any kind of button in your header, simply remove the action attribute.

    You can also include custom buttons, links and other content inside your header by including it inside the <gaia-header> element. For example:

    <gaia-header action="menu">
  <h1>Keyboard Settings</h1>
  <a data-icon="compose"></a>

  <button data-icon="more"></button>
</gaia-header>

    Localization

    If choosing to use the built in action-button you may wish to localize the content within. You can do this by providing a specicial .l10n-action child node.

    <gaia-header action="back">
  <span class="l10n-action" aria-label="Back">Localized text</span>
  <h1>title</h1>
</gaia-header>

    Document Tags and Contributors

    Tags: 
     Contributors to this page: chrisdavidmills, chocoelho, MexieAndCo, kscarfone
     Last updated by: chrisdavidmills,