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>
View in new tab »

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:

Left side Rigtht side
<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>
View in new tab »
« Previous Next »