x
1
2
3
4
5
6
<span id="lui-token_5793709857" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #c81720; border-color: #f9b3b7;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">text</span> <div class="lui-token__actions"> </div></span>No Usage documentation to display.
1
render(LooposUi::TagToken.new(text: text, color: color&.to_sym))No notes provided.
| Param | Description | Input |
|---|---|---|
|
The text to display |
|
|
|
The color of the tag |
|
Description
A simple TagToken component that displays a tag.
Arguments
| Property | Default | Description |
|---|---|---|
text |
nil |
The text to display. |
color |
nil |
The color of the tag. Should not be used, reserved for testing purposes. |
color will be set to a random color from the list of colors defined in the COLORS constant in the TagToken component.
The possible colors are:
:handling:danger:core:submission:impact:manager:hubs:general
The color of the current app will never be chosen.
Examples
TODO: when organizing the tabs
TODO:
- [ ] Replace current tooltip with a non-react one. Reason: the current react Tooltip component wraps the component, making it difficult to control the tooltip's wrapper style.
- [ ] After adding the new tooltip, add real text width calculation to the tooltip (for elipsis)
- [ ] Possible implementation (using a JS controller)
javascript function isEllipsisActive(e) { var tolerance = 2; // In px. Depends on the font you are using return e.offsetWidth + tolerance < e.scrollWidth; }
- [ ] Possible implementation (using a JS controller)