View Source MoonWeb.Components.CoreComponents (Moon v2.89.1)

Provides core UI components.

At the first glance, this module may seem daunting, but its goal is to provide some core building blocks in your application, such as modals, tables, and forms. The components are mostly markup and 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

hero_icon(assigns)

Renders a Heroicon.

modal(assigns)

Renders a modal.

Functions

Link to this function

hero_icon(assigns)

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 your assets/vendor/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) (required)
  • class (:string) - Defaults to nil.
Link to this function

modal(assigns)

View Source

Renders a modal.

Examples 

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

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

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

Attributes

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

Slots

  • inner_block (required)