300px
x
150px
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
<action-list> <div data-view-component="true"> <ul aria-label="List heading" id="action-list-bc211cc9-9a4f-44ce-aed5-75ac19786e18" role="list" data-view-component="true" class="ActionListWrap"> <li data-targets="action-list.items" data-view-component="true" class="ActionListItem"> <tool-tip id="tooltip-8ce81e37-4d31-4c8a-93d4-ae3d2381d604" for="item-17930122-b990-403c-a968-93caffde7196" popover="manual" data-direction="ne" data-type="description" data-view-component="true" class="ActionListItem-truncationTooltip sr-only position-absolute">Really really long label that may wrap, truncate, or appear as a tooltip</tool-tip> <button id="item-17930122-b990-403c-a968-93caffde7196" type="button" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label ActionListItem-label--truncate"> Really really long label that may wrap, truncate, or appear as a tooltip </span> </button> </li> <li data-targets="action-list.items" data-view-component="true" class="ActionListItem"> <tool-tip id="tooltip-7c5d7d5e-2a74-4e10-9cb6-a8cd60cc8b34" for="item-c3e569a0-672a-48b2-8b80-8e2ac1706ea7" popover="manual" data-direction="ne" data-type="description" data-view-component="true" class="ActionListItem-truncationTooltip sr-only position-absolute">Really really long label that may wrap, truncate, or appear as a tooltip</tool-tip> <button id="item-c3e569a0-672a-48b2-8b80-8e2ac1706ea7" type="button" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label ActionListItem-label--truncate"> Really really long label that may wrap, truncate, or appear as a tooltip </span> </button> </li> <li data-targets="action-list.items" data-view-component="true" class="ActionListItem"> <tool-tip id="tooltip-813a19fc-30e9-4e3b-986a-468ae94b2a64" for="item-0bb5d67c-fb9a-476d-a2e3-11572a238bf6" popover="manual" data-direction="ne" data-type="description" data-view-component="true" class="ActionListItem-truncationTooltip sr-only position-absolute">Really really long label that may wrap, truncate, or appear as a tooltip</tool-tip> <button id="item-0bb5d67c-fb9a-476d-a2e3-11572a238bf6" type="button" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label ActionListItem-label--truncate"> Really really long label that may wrap, truncate, or appear as a tooltip </span> </button> </li> <li data-targets="action-list.items" data-view-component="true" class="ActionListItem"> <tool-tip id="tooltip-57184381-fc15-4133-a5d3-3fbd54f56077" for="item-27230c2a-8160-4f40-bcc6-7ba502228a51" popover="manual" data-direction="ne" data-type="description" data-view-component="true" class="ActionListItem-truncationTooltip sr-only position-absolute">Really really long label that may wrap, truncate, or appear as a tooltip</tool-tip> <button id="item-27230c2a-8160-4f40-bcc6-7ba502228a51" type="button" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label ActionListItem-label--truncate"> Really really long label that may wrap, truncate, or appear as a tooltip </span> </button> </li> </ul> </div></action-list>No notes provided.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
render(Primer::Alpha::ActionList.new(aria: { label: "List heading" })) do |component| component.with_item( label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: truncate_label ) component.with_item( label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: truncate_label ) component.with_item( label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: truncate_label ) component.with_item( label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: truncate_label )end| Param | Description | Input |
|---|---|---|
|
— |
|