TTagEdit Component

[astverskoy]

Hello!

I wrote a component for visual tag management, similar to modern tag editors used on popular websites.
It has been tested on Windows and Linux, and is released under the MIT License.

https://github.com/plaintool/TagEdit

TagEdit — a custom Lazarus component that provides an editable tag input field similar to modern web tag editors. It allows users to enter text and convert it into visual tag chips with a remove button, supporting multiple lines, drag-and-drop reordering, and smooth tag editing.

Let me know if something doesn’t work as expected!

Version 1.1 released
Screenshots have been updated for the new version.

[n7800]

An interesting component! As a GitLab user, I can't help but think about its tags (called "labels"). Its own projects (the source code for the site itself) have a very extensive tagging system. For example, in this issue, you can see tags like the one in the attached image. They're multi-level, and each has its own color.

I don't really think all of this is necessary for your component, but maybe you'll find it inspiring for the next version ))

[n7800]

By the way, how about displaying "delete crosses" only on mouse hover?

Yes, you still need to leave space for them. However, they can even appear over the text to prevent the text from "jumping" when the mouse simply hovers over the tags.

[astverskoy]

Hi n7800 !

Thanks for the suggestions! The coloring looks really impressive.
I’ll take note of: coloring, status, also tooltips , and a delete button visible only on mouse hover.
The only issue is how to store all of this — in separate string-array properties or by creating some composite object properties.
It’s easier — when a component depends on data, in that case a TDBTagEdit needs to be developed

[n7800]

The only issue is how to store all of this — in separate string-array properties or by creating some composite object properties.
It’s easier — when a component depends on data, in that case a TDBTagEdit needs to be developed

Of course, I understand. But "scopes" ("groups") are easily implemented - the tag name is separated by the ":" symbol (for example) and rendered in two halves of different colors. That is, the "group" and "name" are extracted from the tag itself. Of course, need to add a property for the group color.

[astverskoy]

An interesting component! As a GitLab user, I can't help but think about its tags (called "labels"). Its own projects (the source code for the site itself) have a very extensive tagging system. For example, in this issue, you can see tags like the one in the attached image. They're multi-level, and each has its own color.

I don't really think all of this is necessary for your component, but maybe you'll find it inspiring for the next version ))

Hello!

I’ve released version 1.1.
I created a component version with groups and color highlighting.

The TagColors property contains a collection of colors for rendering the text of groups and tags (I call them tags and suffixes).
In the collection, colors are matched by checking if the text name specified in it occurs within the tag or group name.
If a color for the text is not found in the collection, the color is taken from TagColor or TagSuffixColor. If these properties are set to clNone, a unique random color is generated based on the tag name.
In the sample, the border is also specified, and the suffix color is set to white to create a GitLab-like effect.

Other improvements include options like CloseButtonOnHover, TagHoverUnderline, or you can hide buttons completely using the CloseButtons property. Other changes are mainly minor fixes and enhancements.