Corex · Elixir Phoenix Framework UI Library

Minimal

Name

My custom value

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

With triggers

Name

Click the pencil to edit

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

Without edit trigger

Name

Double click to edit

    <.editable
  class="editable"
  value="Double click to edit"
  activation_mode="dblclick"
  select_on_focus
>
  <:label>Name</:label>
  <:edit_trigger><span class="sr-only">Edit</span></:edit_trigger>
  <:submit_trigger><.heroicon name="hero-check" class="icon" /></:submit_trigger>
  <:cancel_trigger><.heroicon name="hero-x-mark" class="icon" /></:cancel_trigger>
</.editable>