BoxList

A lot of boxes

Example

Props

🕹️ standard props
boxes
Box[]
Array of box objects to be displayed in the list.
[]
gap
string
Gap between items in the list.
'15px'
🎨 style props
No data available

Slots

boxSnippet

Slot for custom content inside the box.

Default content:

{#if box.href}
  <a
    class="box"
    style:width={box.style?.width}
    style:max-width={box.style?.maxWidth}
    style:min-width={box.style?.minWidth}
    href={box.href}
    onclick={(event) => handleBoxClick(event, box)}
  >
    <div style:flex-grow="1">
      {box.label}
    </div>
    <div style:margin-left="10px">
      <Icon name="mdi-arrow-right" />
    </div>
  </a>
{:else}
  <button
    class="box"
    style:width={box.style?.width}
    style:max-width={box.style?.maxWidth}
    style:min-width={box.style?.minWidth}
    onclick={(event) => handleBoxClick(event, box)}
  >
    <div style:flex-grow="1">
      {box.label}
    </div>
    <div style:margin-left="10px">
      <Icon name="mdi-arrow-right" />
    </div>
  </button>
{/if}
      

Available variables:

Name	Type	Description
box	Box	The box object passed to the slot.

Events

onboxClick

Triggered when a box is clicked.

Attribute	Type	Description
box	Box	The box object that was clicked.