Packages
phoenix_webcomponent
1.6.0
3.2.4
3.2.3
3.2.2
3.2.1
3.2.0
3.1.5
3.1.4
3.1.3
3.1.2
3.1.1
3.1.0
2.8.0
2.7.0
2.6.0
2.5.4
2.5.3
2.5.2
2.5.1
2.5.0
2.4.0
2.3.6
2.3.5
2.3.4
2.3.3
2.3.2
2.3.1
2.2.3
2.2.2
2.2.1
2.2.0
2.1.4
2.1.3
2.1.2
2.1.1
2.1.0
2.0.0
1.6.3
1.6.2
1.6.1
1.6.0
1.5.1
1.5.0
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.0
1.1.1
1.1.0
1.0.0
1.0.0-beta.4
1.0.0-beta.3
1.0.0-beta.2
0.0.0
Phoenix view functions for working with WebComponent
Current section
Files
Jump to
Current section
Files
lib/phoenix_webcomponent/top_app_bar.ex
defmodule Phoenix.WebComponent.TopAppBar do
@moduledoc """
Conveniences for create top app bar.
"""
alias Phoenix.LiveView
import Phoenix.HTML.Tag
import Phoenix.LiveView.Helpers
@doc """
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>
```heex
<.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](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).
| `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
"""
def wc_top_app_bar(opts, do: contents) when is_list(opts) do
{fixed, opts} = Keyword.pop(opts, :fixed, false)
app_bar_tag = if fixed, do: :"mwc-top-app-bar-fixed", else: :"mwc-top-app-bar"
{title, opts} = Keyword.pop(opts, :title)
content_tag(app_bar_tag, opts) do
if is_nil(title) do
contents
else
[content_tag(:div, title, class: "app-bar-title", slot: "title"), contents]
end
end
end
def wc_top_app_bar(assigns) do
fixed = assigns[:fixed] || false
title = assigns[:title] || nil
attrs = assigns_to_attributes(assigns, [:fixed, :title])
assigns = LiveView.assign(assigns, fixed: fixed, title: title, attrs: attrs)
~H"""
<%= if @fixed do %>
<mwc-top-app-bar-fixed {@attrs}>
<%= if @title do %>
<div class="app-bar-title" slot="title">
<%= @title %>
</div>
<% end %>
<%= render_slot(@inner_block) %>
</mwc-top-app-bar-fixed>
<% else %>
<mwc-top-app-bar {@attrs}>
<%= if @title do %>
<div class="app-bar-title" slot="title">
<%= @title %>
</div>
<% end %>
<%= render_slot(@inner_block) %>
</mwc-top-app-bar>
<% end %>
"""
end
end