About the editable-title category

Directory editable-title
1

editable-title: # <editable-title>

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

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

showing off the component

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