Overview
The KListWithOverflow component is useful when we want a horizontal list that is responsive and adaptable to the container size. The list only shows the items that fit on the container element. When items exceed the available space, the component seamlessly integrates a "see more" button to show additional items.
Example
When a number of items fit within the screen boundaries, the list will be displayed without any changes. For example, since there are only 3 items here, we can see the entire list without problems.
But if the list becomes very long, and does not fit within the screen, then the overflowed items will be cut, and an element will be placed to show more. For example, here are 12 items in the list.
The following is a code example to render the above examples:
<KListWithOverflow
:items="items"
>
<template #item="{ item }">
<KIconButton
:tooltip="item.label"
:icon="item.icon"
/>
</template>
<template #more="{ overflowItems }">
<KIconButton
tooltip="More"
icon="optionsVertical"
>
<template #menu>
<KDropdownMenu
:options="overflowItems"
/>
</template>
</KIconButton>
</template>
</KListWithOverflow>
data() {
return {
items: [
{ label: "Item 1", icon: "edit" },
{ label: "Item 2", icon: "edit" },
{ label: "Item 3", icon: "edit" },
// ...
{ label: "Item 12", icon: "edit" },
]
};
},
You can also use dividers within the list by passing a { type: "divider" } object, and set a #divider slot.
Note that the visible list will not end with a divider. And a divider object will not be passed as a first overflowed item.
To use dividers, you can include a divider object in the items list, and add a #divider slot.
<KListWithOverflow
:items="items"
>
<!-- ... -->
<template #divider>
<div class="divider-wrapper">
<div :style="dividerStyle"></div>
</div>
</template>
</KListWithOverflow>
data() {
return {
items: [
{ label: "Item 1", icon: "edit" },
{ label: "Item 2", icon: "edit" },
{ type: "divider" },
{ label: "Item 4", icon: "edit" },
// ...
]
};
},
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
items | An array of items to be shown, the items can be any type of object or primitive, as
they are passed to the #item slot for rendering.
The only special type of item is a divider, which must be an object with a type
property set to "divider", and this will render the #divider slot. | array | — | true |
appearanceOverrides | An object or string with CSS properties to be applied to the list wrapper | object|string |
null
| — |
Slots
| Name | Description |
|---|---|
divider | Slot for rendering divider items |
item | Slot responsible of rendering each item in the visible list |
more | Slot responsible of rendering the "see more" button. This slot receives as prop a list overflowItems with items that dont fit into the visible list. |