Item Action
Used to render multiple items with some information, an icon and actions for each of them.
Mainly used in settings pages to render the properties and the actions alongside.
<ItemAction>
<img slot="icon" src="{icpLogo}" class="start" />
<div class="content">
<p>Unlocking</p>
<p class="description">No age bonus</p>
</div>
<button slot="actions" class="secondary">
One action
</button>
</ItemAction>
Properties
Property | Description | Type | Default |
---|---|---|---|
tagName | The tagName of the parent element. | "li" or "div" | "li" |
testId | Add a data-tid attribute to the DOM, useful for test purpose. | string or undefined | undefined |
Slots
Slot name | Description |
---|---|
Default slot | The main content of the item. |
logo | The logo of the item. Recommended to use 100% width and height. |
actions | Slot to add the item actions. |
Usage Recommendation
Square Icon
The icon should be square and take all the item height.
The item has a set height of the button height plus some padding. The icon slot is square of the whole item height and the same size for the width.
Therefore, the icon slot should take the whole width and height to be square.
Full Width Actions Mobile
In mobile, the actions are rendered below the content. It’s recommended that the buttons take the full width.
If it’s just on button, then stretch it or set the slot to the button. If it’s two buttons, make sure they cover the full width together.
Showcase
The component is within a div
with background to highlight the component exactly as it is.
IMPORTANT: The component has no internal padding nor external margin. The spacing with the other components is responsibility of the parent using this component.
Showcase Logo as Div
Unlocking
No age bonus
Showcase Icon Inside UL
Unlocking
No age bonus