<editable-title>

The <editable-title> component allows a title that can be modified.

<editable-title>
  <h1>Title Here</h1>
</editable-title>

Installation

npm install editable-title

API

[open]

open is available as both an attribute and a property. When the editable title is open it will display the edit mode. When it is not open, the title will be displayed.

<editable-title open>
  <h1>Title Here</h1>
</editable-title>

Or modify the property:

let editableTitle = document.querySelector('editable-title');

editableTitle.open = false;

change event

Any time the title changes, a change event is fired. The event.detail contains a string of the new title.

let editableTitle = document.querySelector('editable-title');

editableTitle.addEventListener('change', ev => {
  console.log('New title is', ev.detail);
});

Styling

These variables are available:

--input-height

Controls the height of the input.

--input-width

Controls the width of the input.

--input-font-size

Controls the font-size of the input.

--input-outline

Controls the outline of the input.

--button-font-size

Controls the font-size of all buttons.

--button-background-color

Controls all buttons' background-color style.

--button-border

Controls the border of all buttons.

License

BSD-2-Clause

matthewp / editable-title