rMoreItems

Component which initially displays a limited set of items to provide a concise view. It includes a toggle control that allows users to expand the view and display all items, and toggle back to the shortened view if needed.

Props

Name	Type	Default	Required	Description
items	T[]		✅	Items to render
maxItems	number		✅	Number of items to show when not expanded

Slots

Name	Description	Slot props
item	Item to render	item
cta	Place to use custom toggle	toggleItems, isExpanded

Code snippet

Example usage:

<script setup lang="ts">
const items = [1, 2, 3, 4, 5, 6, 7, 8];
</script>

<template>
  <RMoreItems :items="items" :max-items="3">
    <template #item="{ item }">
      {{ item }}
    </template>

    <template #cta="{ toggleItems, isExpanded }">
      <RButton intent="primary" @click="toggleItems"> Show more </RButton>
    </template>
  </RMoreItems>
</template>