Renders an alert with

Attributes

• variant (:string) (required) - Must be one of "danger", "success", "warning", or "info".
• class (:any) - Additional classes to add to the alert. Defaults to nil.
• with_icon (:boolean) - Whether to show an icon. Defaults to false.
• heading (:string) - Heading for the alert. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Attributes

• text (:string) (required)
• icon (:string) (required)

Renders a button.

Attributes

• variant (:string) - Defaults to "primary".
• size (:string) - Defaults to "md".
• class (:any) - Additional classes to add to the button. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a card.

Attributes

• color (:string) - Defaults to "primary".
• class (:any) - Additional classes to add to the card. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Collapsible element that can be toggled open and closed. It uses the details and summary HTML elements. If you add hide-on-open class to element it will be hidden when collapsible is opened.

Examples

<.collapsible id="collapsible" open={true}>
  <:label>
    <div>Collapsible <div class="hide-on-open">Info when closed</div></div>
  </:label>
  <div>Content</div>
</.collapsible>

Attributes

• id (:string) (required)
• class (:any) - CSS class for parent container. Defaults to nil.
• label_class (:any) - CSS class for the label. Defaults to nil.
• chevron_class (:any) - CSS class for the chevron icon. Defaults to nil.
• open (:boolean) - Whether the collapsible is open by default. Defaults to false.
• icon (:string) - Icon for chevron. It will be rotated 90 degrees when the collapsible is open. Defaults to "icon-chevron-right".
• Global attributes are accepted.

Slots

• label (required)
• inner_block (required)

Attributes

• id (:string) (required)
• title (:string) (required)
• class (:any) - Defaults to nil.
• inner_class (:any) - Defaults to nil.
• open (:boolean) - Defaults to true.

Slots

• right_panel
• inner_block

Renders a fullscreen using Fullscreen hook. It can be opened and via browser "open" event (by default) with JS.dispatch or via server event (check example in fullscreen button).

You can use fullscreen_button to open this fullscreen. You can close the fullscreen using X button or by pressing ESC key.

Attributes

• id (:string) (required)
• title (:string) - Title of the fullscreen. Defaults to "".
• class (:any) - Additional classes to be added to the fullscreen element. Defaults to nil.

Slots

• inner_block (required)

Renders a button which will show a fullscreen when clicked. You can override phx-click value, but remember to push correct event at the end of handle_event function.

Examples

<.fullscreen_button
  id="my-fullscreen"
  on_click="open-fullscreen"
  icon="icon-expand"
/>

@impl true
def handle_event("open-fullscreen", _, socket) do
  trace_id = String.to_integer(string_id)

  socket
  |> push_event("my-fullscreen-open", %{})
  |> noreply()
end

Attributes

• id (:string) (required) - Same as id of the fullscreen.
• on_click (:any) - Defaults to nil.
• on_click_target (:any) - Defaults to nil.
• on_click_data (:any) - Defaults to nil.
• class (:any) - Additional classes to be added to the button. Defaults to nil.
• icon (:string) - Icon to be displayed as a button. Defaults to "icon-expand".

Typography component to render headings.

Attributes

• class (:any) - Additional classes to add to the heading. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders an icon. Not all icons are available. If you want to use an icon check if it exists in the assets/icons folder. name must start with icon-

Examples

<.icon name="icon-play" />

Attributes

• name (:string) (required) - The name of the icon. Must start with icon-.
• class (:any) - Additional classes to add to the icon. Defaults to nil.
• Global attributes are accepted.

Renders a button with an icon in it.

Attributes

• icon (:string) (required) - Icon to be displayed as a button.
• size (:string) - Size of the button. Defaults to "md".
• variant (:string) - Variant of the button. Defaults to "primary".
• class (:any) - Additional classes to add to the button. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["id"].

Attributes

• elements (:list) - List of maps with field :title and optional :description. Defaults to [].
• class (:any) - Additional classes. Defaults to nil.
• on_element_click (:string) - Defaults to nil.
• element_click_target (:any) - Defaults to nil.
• element_attributes_fun (:any) - Function to return HTML attributes for each row based on row data. Defaults to &LiveDebuggerWeb.Helpers.empty_map/1.

Slots

• title (required) - Slot that describes how to access title from given map.
• description - Slot that describes how to access description from given map.

Attributes

• class (:any) - Defaults to nil.
• text (:string) - Defaults to "See any issue? Report it".

Used to add Hook to element based on condition.

Attributes

• class (:any) - CSS class. Defaults to nil.
• size (:string) - Size of the spinner. Defaults to "md".
• show (:boolean) - show or hide spinner. Defaults to true.
• Global attributes are accepted.

Attributes

• rows (:list) - Elements that will be displayed in the list. Defaults to [].
• class (:any) - Additional classes. Defaults to nil.
• on_row_click (:string) - Defaults to nil.
• row_click_target (:any) - Defaults to nil.
• row_attributes_fun (:any) - Function to return HTML attributes for each row based on row data. Defaults to &LiveDebuggerWeb.Helpers.empty_map/1.

Slots

• column - Columns with column labels. Accepts attributes:
  • label (:string) - Column label.
  • class (:any)

Renders a tooltip using Tooltip hook.

Attributes

• id (:string) (required)
• content (:string) - Defaults to nil.
• position (:string) - Defaults to "top".
• Global attributes are accepted.

Slots

• inner_block (required)

Renders topbar with possible link to return to the main page.

Attributes

• return_link? (:boolean) (required) - Whether to show a link to return to the main page.

Slots

• inner_block