View Source Shino.UI.Form (shino v0.1.0-alpha.0)

Provides form related components.

Builds forms in a more semantic way.

Examples

Create a form for collecting post information:

<Form.root
  for={@form}
  class="mt-8 space-y-6"
  phx-change="validate"
  phx-submit="save"
>
  <Form.field :let={field} field={@form[:title]}>
    <Form.label for={field}>Title</Form.label>
    <.input field={field} type="text" />
    <Form.description>Keep it short and simple.</Form.description>
    <Form.error field={field} />
  </Form.field>

  <Form.field :let={field} field={@form[:body]}>
    <Form.label for={field}>Body</Form.label>
    <.textarea field={field} />
    <Form.description>Please write something meaningful.</Form.description>
    <Form.error field={field} />
  </Form.field>

  <div class="flex justify-end">
    <Form.submit phx-disable-with="保存中...">保存</Form.submit>
  </div>
</Form.root>

References

Summary

Functions

I don't know how to use it, for now.

Renders a description for a field.

Renders errors for a field.

Renders a wrapper for wrapping parts of a field.

Renders a label for a field.

The root contains all the parts of a form.

Renders a submit button for the form.

Functions

I don't know how to use it, for now.

Attributes

  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a description for a field.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders errors for a field.

Localization

This component accepts a one-arity function as :translate_error attr. The argument is {msg, opts}. You can implement this function with gettext like this:

def translate_error({msg, opts}) do
  if count = opts[:count] do
    Gettext.dngettext(DemoWeb.Gettext, "errors", msg, msg, count, opts)
  else
    Gettext.dgettext(DemoWeb.Gettext, "errors", msg, opts)
  end
end

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • class (:string) - Defaults to nil.
  • translate_error (:any) - Defaults to &Shino.UI.Form.translate_error/1.
  • Global attributes are accepted.

Slots

  • inner_block

Renders a wrapper for wrapping parts of a field.

Attributes

Slots

  • inner_block (required)

Renders a label for a field.

Attributes

Slots

  • inner_block (required)

The root contains all the parts of a form.

Attributes

  • for (:any) (required)
  • as (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target", "multipart"].

Slots

  • inner_block (required)

Renders a submit button for the form.

Attributes

  • type (:string) - Defaults to "submit".
  • Global attributes are accepted.

Slots

  • inner_block (required)