x-appbar

« Back to docs

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.

=
Title
+
?

Markup

<x-appbar>
<div>=</div>
<header>Title</header>
<div>+</div>
<div>?</div>
</x-appbar>
Top

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>
Top

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>.

=
Title
+
?

Markup

<x-appbar subheading="(2)">
<div>=</div>
<header>Title</header>
<div>+</div>
<div>?</div>
</x-appbar>
Top

Custom styling

The <x-appbar> is a simple element, and can be styled like any other element.

=
Title
+
?

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;
}
Top