View Source Phoenix.WebComponent.TopAppBar (Phoenix.WebComponent v1.4.0)
Conveniences for create top app bar.
Link to this section Summary
Link to this section Functions
Generates a top app bar.
Or
Top app bar component
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
Slots of custom element
Name | Description | |
---- | ----------- | |
actionItems | A 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. | |
navigationIcon | One <mwc-icon-button> element to use for the left icon. | |
title | A <div> or <span> that will be used as the title text. | |
default | Scrollable content to display under the bar. This may be the entire application. |
Properties/Attributes of custom element
Name | Type | Default | Description | |
---- | ---- | ------ | ----------- | |
centerTitle | boolean | false | Centers the title horizontally. Only meant to be used with 0 or 1 actionItems . | |
dense | boolean | false | Makes the bar a little smaller for higher density applications. | |
prominent | boolean | false | Makes the bar much taller, can be combined with dense . |
| scrollTarget
| HTMLElement
| Window
| window
| Element used to listen for scroll
events.
Elixir options
Name | Type | Default | Description | |
---- | ---- | ------- | ----------- | |
title | binatry | nil | Put content in title slot |