x-appbar
An <x-appbar>
is a simple component using flexbox to emulate the standard layout of a header seen at the top of a mobile application.
Basic usage
You can use any elements in place of the <div>
tags in the example below. The <header>
element is required and will be created automatically if not provided.
=
+
?
Markup
<x-appbar>
<div>=</div>
<header>Title</header>
<div>+</div>
<div>?</div>
</x-appbar>
Dynamically editing header with heading
The header's text can also be overridden and changed using the the heading
attribute, or the .heading
JavaScript property of the <x-appbar>
.
=
+
?
Markup
<x-appbar heading="Set by Attribute">
<div>=</div>
<header></header>
<div>+</div>
<div>?</div>
</x-appbar>
Adding a subheader with subheading
To add a small subheading to the <x-appbar>
, such as for message notifications, utilize thesubheading
attribute or .subheading
JavaScript property of the <x-appbar>
.
=
+
?
Markup
<x-appbar subheading="(2)">
<div>=</div>
<header>Title</header>
<div>+</div>
<div>?</div>
</x-appbar>
Custom styling
The <x-appbar>
is a simple element, and can be styled like any other element.
=
+
?
Markup
<x-appbar id="custom-style">
<div>=</div>
<header>Title</header>
<div>+</div>
<div>?</div>
</x-appbar>
CSS Styling
#custom-style{
background-color: orange;
background-image: none;
font-size: 1.5em;
color: white;
}
#custom-style > *{
padding: .25em;
}