The header is an toolbar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.
The header is an toolbar at the top of the page that usually contains the page title text, and optional buttons positioned to the the left and/or right of the title for navigation or actions.
The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.
@@ -27,22 +29,25 @@
The header toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.
The header toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.
See that "back" button? The framework automatically generates a "back" button for you to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header either add your own button to the left slot (see below) or, add this attribute: data-nobackbtn="true" to the header container.
+
See that "back" button? The framework automatically generates a "back" button on every page, to simplify the process of including this common navigation element. To prevent the back button from being added to a header, either add your own button to the left slot (see below) or, add this attribute: data-nobackbtn="true" to the header container.
In the standard header configuration, there are slots buttons on either side of the text heading. Each button is typically an anchor element but any valid button markup will work. To save space, buttons in toolbars are set to inline styling so the button is only as wide as the text and icons they contain.
In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an anchor element, but any valid button markup will work. To save space, buttons in toolbars are set to inline styling so the button is only as wide as the text and icons they contain.
The header plugin looks for immediate children of the header container and will automatically set the first link found into the left button slot and the second link into the right button slot. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot because of their sequence in the source order.
+The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order.
@@ -59,8 +64,16 @@
Edit Contact
Save
Buttons automatically adapt to the color of the bar they sit in so a link in a header bar with the "a" swatch color will also be styled as "a" colored buttons. To make the right button visually stand out, use add the data-theme attribute and set the color swatch for the button, "b" in this case.
Buttons automatically adapt to the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out — here, we add the data-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.
+ + +
This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same data-id attribute.