Pax.Components (Pax v0.0.1-dev.20251023)

Summary

Functions

Includes the Pax CSS and JS assets. Should be included in the <head> of your layout, for example

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 link/1 are passed through in that case.

pax_footer(assigns)

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

pax_header(assigns)

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

pax_input(assigns)

Renders a simple text input with no label.

pax_link(assigns)

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

pax_select(assigns)

Renders a simple select with no label.

pax_table(assigns)

Renders a table with.

pax_title(assigns)

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

Functions

assets(assigns)

Includes the Pax CSS and JS assets. Should be included in the <head> of your layout, for example:

<head>
  ...
  <Pax.Components.assets />
  ...
</head>

Attributes

at (:string) - Defaults to "/pax".

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 link/1 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:

primary: Aligned to the left side for desktops, useful for status lines.
secondary: Aligned to the right side for desktops, useful for links, buttons, etc.
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:

primary: Aligned to the left side for desktops, useful for titles.
secondary: Aligned to the right side for desktops, useful for links, buttons, etc.
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/1. 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)