Components chevron_right Toolbar

GitHub

Toolbar with Icon Buttons


Toolbar with Standard Buttons

Toolbar: tall=true, accent=true

Toolbar: tall with actions pin to the bottom (tall=true warn=true)

Template

{{! without contextual components }}
<PaperToolbar>
  <PaperToolbarTools>
    <PaperButton @iconButton={{true}}>
      {{paper-icon "menu"}}
    </PaperButton>
    <h2>
      Toolbar with Icon Buttons
    </h2>
    <span class="flex"></span>
    <PaperButton @iconButton={{true}}>
      {{paper-icon "favorite"}}
    </PaperButton>
    <PaperButton @iconButton={{true}}>
      {{paper-icon "more_vert"}}
    </PaperButton>
  </PaperToolbarTools>
</PaperToolbar>

<br>
{{! with contextual components }}
<PaperToolbar as |toolbar|>
  <toolbar.tools>
    <PaperButton>
      Go Back
    </PaperButton>
    <h2>Toolbar with Standard Buttons</h2>
    <span class="flex"></span>
    <PaperButton @raised={{true}}>
      Learn More
    </PaperButton>
    <PaperButton @mini={{true}} @aria-label="Favorite">
      {{paper-icon "favorite"}}
    </PaperButton>
  </toolbar.tools>
</PaperToolbar>

<br>

<PaperToolbar @tall={{true}} @accent={{true}}>
  <PaperToolbarTools>
    <h2>Toolbar: tall=true, accent=true</h2>
  </PaperToolbarTools>
</PaperToolbar>

<br>

<PaperToolbar @tall={{true}} @warn={{true}}>
  <span class="flex"></span>
  <PaperToolbarTools>
    <h2>Toolbar: tall with actions pin to the bottom (tall=true warn=true)</h2>
  </PaperToolbarTools>
</PaperToolbar>