Editable · Anatomy
Basic setup and trigger slots.
Hex doc
Phoenix
Minimal
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
Double click to edit
<.editable
class="editable"
value="Double click to edit"
activation_mode="dblclick"
select_on_focus
>
<: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>