Angular Appbar

Container Element

MUI provies a simple <mui-appbar> directive that automatically adjusts its height based on the viewport dimensions:

• 48px (phone landscape)
• 56px (phone portrait)
• 64px (default)

<mui-appbar></mui-appbar>

Helpers

MUI also provides several helper classes that are useful for sharing the appbar height with other elements:

• .mui--appbar-height (sets height property)
• .mui--appbar-min-height (sets min-height property)
• .mui--appbar-line-height (sets line-height property)

Height helpers are useful for centering appbar content:

<mui-appbar>
  <table width="100%">
    <tr style="vertical-align: middle;">
      <td class="mui--appbar-height">Left side</td>
      <td class="mui--appbar-height" style="text-align: right;">Rigtht side</td>
    </tr>
  </table>
</mui-appbar>