Start your content search
2 min read

BaseGrid

BaseGrid

Grid component that is able to render different items based on their modelName value. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property: the items to render; and an optional one: the number columns the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit.

Props

Name Description Type Default
animation Animation component that will be used to animate the base grid. AnimationProp 'ul'
columns Number of columns the grid is divided into. By default, its value is 0, setting the grid
columns mode to auto-fill.		 number 0
items The list of items to be rendered. ListItem[]

Slots

Name Description Bindings
(name - type - description)
slotName Customized item rendering. Specifying a slot with the item's modelName will result in
item item - Item to render
default (required) Default item rendering. This slot will be used by default for rendering item item - Item to render

Examples

This component renders a list of elements in different slots depending on their modelName. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property, the items to render, and an optional one, the number of columns the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit.

Basic example

It renders a list of items using the default slot:

<template>
  <BaseGrid :items="items">
    <template #default="{ item }">
      {{ `Default slot content: ${item.id}` }}
    </template>
  </BaseGrid>
</template>

Configuring the number of columns

It renders a grid with 12 columns instead of 6, which is the default value:

<template>
  <BaseGrid :items="items" :columns="12">
    <template #default="{ item }">
      {{ `Default slot content: ${item.id}` }}
    </template>
  </BaseGrid>
</template>

Rendering usage

Configuring the number of columns.

It renders a list of items using the different scopedSlots created by the item's modelName. For example, if you want to use this component as the search grid, you pass the search results (results, banners, promoted, next queries...etc) as items. Each of these results have a different modelName and are rendered in different slots.

<template>
  <BaseGrid :animation="animation" :items="items">
    <template #banner="{ item }">
      <span class="banner">
        {{ `${item.title} banner` }}
      </span>
    </template>
    <template #next-queries="{ item }">
      <span>
        {{ `${item.totalResults} next queries` }}
      </span>
    </template>
    <template #promoted="{ item }">
      <span class="promoted">
        {{ `${item.title} promoted` }}
      </span>
    </template>
    <template #result="{ item }">
      <BaseResultLink :result="item">
        {{ item.name }}
      </BaseResultLink>
    </template>
  </BaseGrid>
</template>

Customizing the items width

The --x-size-min-width-grid-item variable can be used to customize the min width of the grid items.

<template>
  <BaseGrid :items="items" style="--x-size-min-width-grid-item: 150px">
    <template #default="{ item }">
      {{ `Default slot content: ${item.id}` }}
    </template>
  </BaseGrid>
</template>
Cookie-Less