View Source Phoenix.WebComponent.TopAppBar (Phoenix.WebComponent v1.6.3)

Conveniences for create top app bar.

Link to this section Summary

Link to this section Functions

Link to this function

wc_top_app_bar(opts, list)

View Source

Generates a top app bar.

Or

Top app bar component

examples

Examples

wc_top_app_bar([fixed: true], do: "/world")
#=> <mwc-top-app-bar-fixed>/world</mwc-top-app-bar-fixed>
<.wc_top_app_bar fixed centerTitle slot="appContent" title={@page_title}>
  <mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
</.wc_top_app_bar>

options

Options

slots-of-custom-element

Slots of custom element

NameDescription
---------------
actionItemsA number of <mwc-icon-button> elements to use for action icons on the right side. NOTE: If using with mwc-drawer, please read note under Standard drawer example.
navigationIconOne <mwc-icon-button> element to use for the left icon.
titleA <div> or <span> that will be used as the title text.
defaultScrollable content to display under the bar. This may be the entire application.

properties-attributes-of-custom-element

Properties/Attributes of custom element

NameTypeDefaultDescription
-------------------------
centerTitlebooleanfalseCenters the title horizontally. Only meant to be used with 0 or 1 actionItems.
densebooleanfalseMakes the bar a little smaller for higher density applications.
prominentbooleanfalseMakes the bar much taller, can be combined with dense.

| scrollTarget | HTMLElement | Window | window | Element used to listen for scroll events.

elixir-options

Elixir options

NameTypeDefaultDescription
--------------------------
titlebinatrynilPut content in title slot