x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="lui-multiple-list"> <div id="lui-token_list_5793709857" class="lui-token-list lui-token-list--horizontal" data-controller="token-list" data-token-list-frame-id-value="lui-token_list_5793709857_frame" data-token-list-model-association-overlay-outlet="#lui-token_list_5793709857 .lui-association-overlay"> <turbo-frame class="lui-token-list__items" id="lui-token_list_5793709857_frame"> <div data-controller="drag" class="lui-token-list__items"> <span id="lui-token_9912568611" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> <span id="lui-token_2322156580" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> </div> <span> <span class="lui-counter lui-counter--increment"> <span class="lui-counter__text lui-counter__text--increment">+3</span> </span> <div class="lui-tooltip hidden" data-controller="tooltips" data-tooltips-tippy-target-id-value="" data-tooltips-position-value="top" data-tooltips-interactive-value="true" > <div class="lui-tooltip__description"> <div class="flex flex-col gap-1"> <span id="lui-token_6597424226" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> <span id="lui-token_8670528836" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> <span id="lui-token_9451751915" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> </div> </div> </div> </span> </turbo-frame> </div> <div id="lui-token_list_5215854990" class="lui-token-list lui-token-list--horizontal" data-controller="token-list" data-token-list-frame-id-value="lui-token_list_5215854990_frame" data-token-list-model-association-overlay-outlet="#lui-token_list_5215854990 .lui-association-overlay"> <turbo-frame class="lui-token-list__items" id="lui-token_list_5215854990_frame"> <div data-controller="drag" class="lui-token-list__items"> <span id="lui-token_1569762617" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> <span id="lui-token_5005363814" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> <span id="lui-token_9404554452" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> <span id="lui-token_5703447052" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> <span id="lui-token_3999329769" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #006053; border-color: #b3d0cc;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">token</span> <div class="lui-token__actions"> </div> </span> </div> </turbo-frame> </div></div>MultipleList
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= render LooposUi::MultipleList.new do %> <%= render LooposUi::TokenList.new(max_tokens: 2) do |token_list| %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% end %> <%= render LooposUi::TokenList.new do |token_list| %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% token_list.with_token_tag(text: "token") %> <% end %><% end %>No notes provided.
No params configured.
Description
Documentation for MultipleList
Arguments
| Property | Default | Description |
|---|---|---|
name |
:value |
Description |
Slots
SlotName - Description