Corex.Editable (Corex v0.1.0-alpha.29)

View Source

Phoenix implementation of Zag.js Editable.

Examples

Basic

<.editable id="edit" value="Click to edit" class="editable">
  <:label>Name</:label>
  <:edit_trigger><.icon name="hero-pencil-square" class="icon" /></:edit_trigger>
  <:submit_trigger><.icon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.icon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>

Required slots: :label, :edit_trigger, :submit_trigger, :cancel_trigger. Preview value is managed by the component and the Editable TS hook.

Styling

Use data attributes to target elements:

[data-scope="editable"][data-part="root"] {}
[data-scope="editable"][data-part="area"] {}
[data-scope="editable"][data-part="label"] {}
[data-scope="editable"][data-part="input"] {}
[data-scope="editable"][data-part="preview"] {}
[data-scope="editable"][data-part="edit-trigger"] {}
[data-scope="editable"][data-part="control"] {}
[data-scope="editable"][data-part="submit-trigger"] {}
[data-scope="editable"][data-part="cancel-trigger"] {}

If you wish to use the default Corex styling, you can use the class editable on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/editable.css";

You can then use modifiers

<.editable class="editable editable--accent editable--lg" value="">
  <:label>Label</:label>
  <:edit_trigger>Edit</:edit_trigger>
  <:submit_trigger>Save</:submit_trigger>
  <:cancel_trigger>Cancel</:cancel_trigger>
</.editable>

Learn more about modifiers and Corex Design

Summary

Components

editable(assigns)

Components

editable(assigns)

Attributes

  • id (:string)
  • value (:string) - Defaults to "".
  • controlled (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • read_only (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • invalid (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • form (:string) - Defaults to nil.
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • edit (:boolean) - Defaults to false.
  • controlled_edit (:boolean) - Defaults to false.
  • default_edit (:boolean) - Defaults to false.
  • placeholder (:string) - Defaults to nil.
  • activation_mode (:string) - Defaults to nil.Must be one of nil, "dblclick", or "focus".
  • select_on_focus (:boolean) - Defaults to true.
  • on_value_change (:string) - Defaults to nil.
  • on_value_change_client (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • label (required)
  • edit_trigger (required)
  • submit_trigger (required)
  • cancel_trigger (required)