Breeze.Blocks (Breeze v0.4.0)

Copy Markdown View Source

Reusable built-in components for Breeze views.

Import this module in your view to use the provided components:

defmodule MyView do
  use Breeze.View
  import Breeze.Blocks
  ...
end

Built-in component previews

See the Built-in Components page for rendered previews and example source for each component.

Class merging

All components expose a class attribute (and where applicable an item_class attribute) that are merged with the component's defaults using merge_class/2. Style tokens are grouped by their property key, everything before the last - segment, so an override of "width-32" replaces the default "width-24" while leaving other properties intact (including focus: prefixes).

Summary

Functions

button(assigns)
dropdown(assigns)
flash_group(assigns)
input(assigns)
keybinding_bar(assigns)
list(assigns)
markdown(assigns)
merge_class(default, override)

Merge two class strings, with override taking precedence over default for matching style properties.

merge_style(default, override)

Alias for merge_class/2, retained for style-string compatibility.

modal(assigns)
panel(assigns)
scroll(assigns)
table(assigns)
tabs(assigns)
textarea(assigns)
tree(assigns)

Functions

button(assigns)

Attributes

  • id (:string) - Defaults to nil.
  • focusable (:boolean) - Defaults to true.
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

flash_group(assigns)

Attributes

  • id (:string) - Defaults to nil.
  • flash (:any) - Defaults to [].
  • variant (:string) - Defaults to "default".
  • placement (:string) - Defaults to "bottom-right".
  • width (:integer) - Defaults to 40.
  • offset (:integer) - Defaults to 1.
  • gap (:integer) - Defaults to 1.
  • layer (:integer) - Defaults to 60.
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • Global attributes are accepted.

input(assigns)

Attributes

  • id (:string) (required)
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • input-value (:string) - Defaults to "".
  • input-cursor (:any) - Defaults to nil.
  • input-placeholder (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

keybinding_bar(assigns)

Attributes

  • keybindings (:list) - Defaults to [].
  • class (:string) - Defaults to nil.

list(assigns)

Attributes

  • id (:string) (required)
  • loop (:boolean) - Defaults to true.
  • variant (:string) - Defaults to nil.
  • virtual (:boolean) - Defaults to false.
  • virtual_overscan (:integer) - Defaults to 24.
  • offset (:integer) - Defaults to nil.
  • virtual_window (:integer) - Defaults to nil.
  • selected-indicator (:string) - Defaults to ">".
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • item_class (:string) - Defaults to nil.
  • item_style (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item - Accepts attributes:
    • value (:string) (required)

markdown(assigns)

Attributes

  • id (:string) (required)
  • content (:string) (required)
  • width (:integer) (required)
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.

merge_class(default, override)

@spec merge_class(String.t(), String.t() | nil) :: String.t()

Merge two class strings, with override taking precedence over default for matching style properties.

The property key for each style token is everything before its final - segment, so tokens that share the same prefix override one another:

iex> Breeze.Blocks.merge_class("border width-24 height-8", "width-32")
"border width-32 height-8"

iex> Breeze.Blocks.merge_class("overflow-scroll", "overflow-hidden")
"overflow-hidden"

Tokens from override that do not match any default key are appended:

iex> Breeze.Blocks.merge_class("border width-24", "bg-4")
"border width-24 bg-4"

nil or an empty string override returns the default unchanged.

merge_style(default, override)

@spec merge_style(String.t(), String.t() | nil) :: String.t()

Alias for merge_class/2, retained for style-string compatibility.

modal(assigns)

Attributes

  • id (:string) (required)
  • width (:integer) - Defaults to nil.
  • height (:integer) - Defaults to nil.
  • inset (:integer) - Defaults to nil.
  • inset_x (:integer) - Defaults to nil.
  • inset_y (:integer) - Defaults to nil.
  • dim (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • frame_class (:string) - Defaults to nil.
  • frame_style (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • title
  • inner_block

panel(assigns)

Attributes

  • id (:string) - Defaults to nil.
  • width (:integer) - Defaults to nil.
  • height (:integer) - Defaults to nil.
  • scroll (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • title_class (:string) - Defaults to nil.
  • title_style (:any) - Defaults to nil.
  • scroll_class (:string) - Defaults to nil.
  • scroll_style (:any) - Defaults to nil.
  • focus_within (:boolean) - Defaults to true.
  • Global attributes are accepted.

Slots

  • title
  • inner_block

scroll(assigns)

Attributes

  • id (:string) (required)
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

table(assigns)

Attributes

  • id (:string) (required)
  • rows (:list) - Defaults to [].
  • selected (:any) - Defaults to nil.
  • row_value (:any) - Defaults to :id.
  • loop (:boolean) - Defaults to true.
  • scroll_padding (:integer) - Defaults to 0.
  • virtual (:boolean) - Defaults to false.
  • virtual_overscan (:integer) - Defaults to 24.
  • offset (:integer) - Defaults to nil.
  • virtual_window (:integer) - Defaults to nil.
  • empty (:string) - Defaults to "No rows".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • col - Accepts attributes:
    • label (:string) - Defaults to nil.
    • width (:any) - Defaults to nil.
    • align (:any) - Defaults to "left".
    • class (:string) - Defaults to nil.
    • style (:any) - Defaults to nil.

tabs(assigns)

Attributes

  • id (:string) (required)
  • selected (:string) - Defaults to nil.
  • variant (:string) - Defaults to "default".
  • highlight (:string) - Defaults to "primary".
  • panel (:boolean) - Defaults to true.
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • item_class (:string) - Defaults to nil.
  • item_style (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • tab - Accepts attributes:
    • value (:string) (required)
    • label (:string) (required)
    • highlight (:string) - Defaults to nil.

textarea(assigns)

Attributes

  • id (:string) (required)
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • textarea-value (:string) - Defaults to "".
  • textarea-cursor (:any) - Defaults to nil.
  • textarea-placeholder (:string) - Defaults to nil.
  • textarea-prefix (:string) - Defaults to nil.
  • textarea-submit-on-enter (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • Global attributes are accepted.

tree(assigns)

Attributes

  • id (:string) (required)
  • nodes (:list) - Defaults to [].
  • selected (:any) - Defaults to nil.
  • expanded (:any) - Defaults to nil.
  • default_expanded (:any) - Defaults to [].
  • loop (:boolean) - Defaults to true.
  • virtual (:boolean) - Defaults to false.
  • virtual_overscan (:integer) - Defaults to 24.
  • offset (:integer) - Defaults to nil.
  • virtual_window (:integer) - Defaults to nil.
  • collapsed_prefix (:string) - Defaults to ">".
  • expanded_prefix (:string) - Defaults to "⌄".
  • class (:string) - Defaults to nil.
  • style (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item
  • empty