View Source SqueezeWeb.CoreComponents (OpenPace v0.0.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.
Link to this section Summary
Functions
Attributes
user(:map) (required)class(:string) - Defaults to"".size(:integer) - Defaults to32.position(:string) - Defaults to"relative".
Renders a card.
Generates a generic error message.
Renders an input with label and error messages.
Renders a label.
Renders a modal.
Translates an error message using gettext.
Link to this section Functions
attributes
Attributes
user(:map) (required)class(:string) - Defaults to"".size(:integer) - Defaults to32.position(:string) - Defaults to"relative".
Renders a card.
examples
Examples
<.card>
This is a card.
</.card>
attributes
Attributes
title(:string)subtitle(:string)
slots
Slots
inner_block(required)
Generates a generic error message.
slots
Slots
inner_block(required)
Renders an input with label and error messages.
A Phoenix.HTML.FormField may be passed as argument,
which is used to retrieve the input name, id, and values.
Otherwise all attributes may be passed explicitly.
types
Types
This function accepts all HTML input types, considering that:
You may also set
type="select"to render a<select>tagtype="checkbox"is used exclusively to render boolean valuesFor live file uploads, see
Phoenix.Component.live_file_input/1
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information.
examples
Examples
<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />
attributes
Attributes
id(:any) - Defaults tonil.name(:any)label(:string) - Defaults tonil.value(:any)type(:string) - Defaults to"text".field(Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].errors(:list) - Defaults to[].checked(:boolean) - the checked flag for checkbox inputs.prompt(:string) - the prompt for select inputs. Defaults tonil.options(:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.multiple(:boolean) - the multiple flag for select inputs. Defaults tofalse. Global attributes are accepted.
slots
Slots
inner_block
Renders a label.
attributes
Attributes
for(:string) - Defaults tonil.
slots
Slots
inner_block(required)
Renders a modal.
examples
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
Attributes
id(:string) (required)show(:boolean) - Defaults tofalse.on_cancel(Phoenix.LiveView.JS) - Defaults to%Phoenix.LiveView.JS{ops: []}.
slots
Slots
inner_block(required)
Translates an error message using gettext.