Pax.Components (Pax v0.0.1-dev)

View Source

Summary

Functions

Renders a badge.

Renders a button. Can be called with "navigate", "patch" or "href" to render as a link styled like a button. All other attributes from Phoenix.Component.link are passed through in that case.

Renders a footer bar for use at the bottom of pages or sections. Includes 3 sections for content

Renders a header bar for use at the top of pages or sections. Includes 3 sections for content

Renders a simple text input with no label.

Renders a link using Phoenix.Component.link. All attributes from Phoenix.Component.link are passed through.

Renders a simple select with no label.

Renders a table with.

Renders a title element with the given level. The level can be 1, 2 or 3. The default is 1.

Functions

pax_badge(assigns)

Renders a badge.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["navigate", "patch", "href", "replace", "method", "csrf_token", "download", "hreflang", "referrerpolicy", "rel", "target", "type"].

Slots

  • inner_block (required)

pax_button(assigns)

Renders a button. Can be called with "navigate", "patch" or "href" to render as a link styled like a button. All other attributes from Phoenix.Component.link are passed through in that case.

Examples

<.pax_button>Send!</.button>
<.pax_button phx-click="go" class="ml-2">Send!</.button>
<.pax_button navigate="/to/somewhere">Go somewhere</.button>
<.pax_button patch="/my/liveview">Edit</.button>

Attributes

  • type (:string) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • level (:atom) - Defaults to nil.Must be one of nil, :primary, :secondary, or :tertiary.
  • large (:boolean) - Defaults to false.
  • icon (:boolean) - Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value", "navigate", "patch", "href", "replace", "method", "csrf_token", "download", "hreflang", "referrerpolicy", "rel", "target", "type"].

Slots

  • inner_block (required)

pax_footer(assigns)

Renders a footer bar for use at the bottom of pages or sections. Includes 3 sections for content:

  1. primary: Aligned to the left side for desktops, useful for status lines.
  2. secondary: Aligned to the right side for desktops, useful for links, buttons, etc.
  3. tertiary: Aligned in the middle for desktops.

Attributes

  • class (:any) - Defaults to nil.

Slots

  • primary
  • secondary
  • tertiary

pax_header(assigns)

Renders a header bar for use at the top of pages or sections. Includes 3 sections for content:

  1. primary: Aligned to the left side for desktops, useful for titles.
  2. secondary: Aligned to the right side for desktops, useful for links, buttons, etc.
  3. tertiary: Aligned in the middle for desktops, useful for search bars, etc.

Attributes

  • class (:any) - Defaults to nil.

Slots

  • primary
  • secondary
  • tertiary

pax_input(assigns)

Renders a simple text input with no label.

Attributes

  • id (:any) - Defaults to nil.
  • name (:string)
  • value (:any) (required)
  • class (:any) - Defaults to nil.
  • has_errors (:boolean) - Defaults to false.
  • type (:string) - Defaults to "text". Must be one of "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "radio", "search", "tel", "text", "time", "url", or "week".
  • Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "pattern", "placeholder", "readonly", "required", "size", "step", "inputmode"].

pax_link(assigns)

Renders a link using Phoenix.Component.link. All attributes from Phoenix.Component.link are passed through.

Attributes

  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["navigate", "patch", "href", "replace", "method", "csrf_token", "download", "hreflang", "referrerpolicy", "rel", "target", "type"].

Slots

  • inner_block (required)

pax_select(assigns)

Renders a simple select with no label.

Attributes

  • id (:any) - Defaults to nil.
  • name (:string)
  • value (:any) (required)
  • class (:any) - Defaults to nil.
  • options (:list) (required) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
  • prompt (:string) - the prompt for select inputs. Defaults to nil.
  • multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
  • has_errors (:boolean) - Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form"].

pax_table(assigns)

Renders a table with.

Examples

<.pax_table id="users" rows={@users}>
  <:col :let={user} label="id">{user.id}</:col>
  <:col :let={user} label="username">{user.username}</:col>
</.pax_table>

Attributes

  • id (:string) (required)
  • rows (:list) (required)
  • row_id (:any) - the function for generating the row id. Defaults to nil.
  • row_item (:any) - the function for mapping each row to the item. Defaults to nil.

Slots

  • col (required) - Accepts attributes:
    • label (:string)
  • action - the slot for showing user actions in the last table column.

pax_title(assigns)

Renders a title element with the given level. The level can be 1, 2 or 3. The default is 1.

Attributes

  • level (:integer) - Defaults to 1. Must be one of 1, 2, or 3.
  • class (:any) - Defaults to nil.

Slots

  • inner_block (required)