Renders an alert Right now we have styles only for danger variant, but it'll change soon

Attributes

• variant (:string) (required) - Must be one of "danger".
• 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)

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)

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"
  phx-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.
• 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".
• Global attributes are accepted.

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) (required) - Elements that will be displayed in the list's item slot.
• class (:any) - Additional classes. Defaults to nil.
• item_class (:any) - Additional classes for each item. Defaults to nil.

Slots

• item (required)

Attributes

• icon (:string) (required) - Icon to be displayed.
• class (:any) - Additional classes to add to the nav icon. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["id"].

Renders navbar 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

Attributes

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

Attributes

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

Slots

• right_panel
• inner_block

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.

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)