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. |