Inline Edit

Example 1

<nile-inline-edit
    label="Edit Username"
    placeholder="Enter your username"
    id="username-edit">
<nile-input id="username-input"></nile-input>
</nile-inline-edit>

<script>
      const usernameInput = document.getElementById('username-input');
      const usernameEdit = document.getElementById('username-edit');

      usernameInput?.addEventListener('nile-blur', e => {
        usernameEdit.removeAttribute('open');
        usernameEdit.setAttribute('value', e.detail.value);
      });
</script>

Example 2

    <nile-inline-edit
      label="Select a Fruit"
      placeholder="Choose a fruit"
      id="fruit-edit"
    >
      <nile-select
        placeholder="Please select a fruit"
        [multiple]="false"
        id="fruit-select"
        open
      >
        <nile-option value="apple">apple</nile-option>
        <nile-option value="banana">banana</nile-option>
        <nile-option value="cherry">cherry</nile-option>
        <nile-option value="date">date</nile-option>
      </nile-select>
    </nile-inline-edit>
    <script>
      const fruitSelect = document.getElementById('fruit-select');
      const fruitEdit = document.getElementById('fruit-edit');

      fruitSelect?.addEventListener('nile-change', e => {
        fruitEdit.removeAttribute('open');
        fruitEdit.setAttribute('value', e.target.value);
      });

      fruitSelect?.addEventListener('nile-hide', e => {
        fruitEdit.removeAttribute('open');
        fruitEdit.setAttribute('value', e.target.value);
      });
    </script>

Example 3

   <nile-inline-edit
      label="Enter Caption"
      placeholder="Enter your caption"
      id="caption-edit"
    >
      <nile-textarea
        placeholder="Enter your caption here"
        id="caption-input"
      ></nile-textarea>
    </nile-inline-edit>
    <script>
      const captionInput = document.getElementById('caption-input');
      const captionEdit = document.getElementById('caption-edit');

      captionInput?.addEventListener('nile-blur', e => {
        captionEdit.removeAttribute('open');
        captionEdit.setAttribute('value', e.detail.value);
      });
    </script>

Slot

Properties

Parts