yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.49k stars 431 forks source link

Template with select mode #1283

Closed balex25 closed 7 months ago

balex25 commented 7 months ago

About https://github.com/yairEO/tagify/issues/845

How to style tag in select mode?

        tag(tagData) {
          console.log(tagData);
          return `
            <tag title="${tagData.value}"
                 contenteditable='false'
                 spellcheck='false'
                 tabIndex="-1"
                 class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
                 ${this.getAttributes(tagData)}>
              <x title='remove tag' class="${this.settings.classNames.tagX}"></x>
              <div>
                <span class="${this.settings.classNames.tagText}">
                  ${tagData.icon ? `${tagData.icon} ` : ''}${tagData.name ? `${tagData.name}` : `${tagData.value}`}
                </span>
              </div>
              <h1>xxx</h1>
            </tag>
          `;
        },

Also, I checked out [https://github.com/yairEO/tagify/blob/master/src/parts/templates.js](https://github.com/yairEO/tagify/blob/master/src/parts/templates.js) and I don't see any template to customize that part of the tag.

HTML OUTPUT: chrome_TMcphRv8dR

It is possible to style this part of the tag? <span contenteditable="true" tabindex="0" data-placeholder="Enter value..." aria-placeholder="Enter value..." class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false" data-last-active-input="" data-suggest="">positive</span>

yairEO commented 7 months ago

Currently no, I apparently forgot about this, I will take a look and see what would be the best way to support what you want

yairEO commented 7 months ago

This has been fixed and now you can use the tag template to modify the selected item when in select mode