View Source ReflectOS.ConsoleWeb.CoreComponents (reflect_os_console v0.10.1)

Provides core UI components.

At first glance, this module may seem daunting, but its goal is to provide core building blocks for your application, such as modals, tables, and forms. The components consist mostly of markup and are well-documented with doc strings and declarative assigns. You may customize and style them in any way you want, based on your application growth and needs.

The default components use Tailwind CSS, a utility-first CSS framework. See the Tailwind CSS documentation to learn how to customize them or feel free to swap in another framework altogether.

Icons are provided by heroicons. See icon/1 for usage.

Summary

Functions

Renders a button.

Examples

<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>

Attributes

  • type (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)

Renders a drawer.

Examples

<.drawer id="confirm-modal">
  This is a modal.
</.drawer>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.drawer id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  This is another modal.
</.drawer>

Attributes

  • id (:string) (required)
  • show (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.

Slots

  • inner_block (required)

Renders flash notices.

Examples

<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>

Attributes

  • id (:string) - the optional id of flash container.
  • flash (:map) - the map of flash messages to display. Defaults to %{}.
  • title (:string) - Defaults to nil.
  • kind (:atom) - used for styling and flash lookup.Must be one of :info, or :error.
  • Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

  • inner_block - the optional inner block that renders the flash message.

Shows the flash group with standard titles and content.

Examples

<.flash_group flash={@flash} />

Attributes

  • flash (:map) (required) - the map of flash messages.
  • id (:string) - the optional id of flash container. Defaults to "flash-group".
Link to this function

hide(js \\ %JS{}, selector)

View Source
Link to this function

hide_drawer(js \\ %JS{}, id)

View Source

Renders a Heroicon.

Heroicons come in three styles – outline, solid, and mini. By default, the outline style is used, but solid and mini may be applied by using the -solid and -mini suffix.

You can customize the size and colors of the icons by setting width, height, and background color classes.

Icons are extracted from the deps/heroicons directory and bundled within your compiled app.css by the plugin in your assets/tailwind.config.js.

Examples

<.icon name="hero-x-mark-solid" />
<.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />

Attributes

  • name (:string)
  • raw (:string)
  • class (:string) - Defaults to nil.
@spec opts_to_attrs(keyword()) :: list()
Link to this function

show(js \\ %JS{}, selector)

View Source
Link to this function

show_drawer(js \\ %JS{}, id)

View Source