Rename

A component for renaming stuff.

Installation

Use the following composition to build Rename:

Rename.Root is also exported as Rename. For inline editing without a toolbar, use Rename.Root (or Rename) alone.

When in content editable mode the user can click on the text to start editing it.

The Rename component can also be a textarea by setting the inputTag prop to 'textarea'.

You can put the Rename component into edit mode by using the Edit component or by setting the mode prop to 'edit'.

Rename.

Inline rename component that toggles between a text view and an input for editing.

Prop	Type	Default
id?	string	-
this?	enum	-
inputTag?	enum	input
mode? $bindable	enum	view
blurBehavior?	enum	-
fallbackSelectionBehavior?	enum	end
value $bindable	string	-
class?	string	-
inputClass?	string	-
textClass?	string	-
onSave?	function	-
onCancel?	function	-
validate?	function	() => true

Rename.

Context provider enabling external Edit/Cancel/Save buttons to control the current Rename input.

Rename.

Button that switches the current Rename input into edit mode.

Prop	Type	Default
child?	Snippet	-

Rename.

Button that cancels editing and returns to view mode.

Prop	Type	Default
child?	Snippet	-

Rename.

Button that triggers save on the current Rename input.

Prop	Type	Default
child?	Snippet	-

On This Page