@empathyco/x-components

--- title: 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 | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ----------------- | | <code>animation</code> | Animation component that will be used to animate the base grid. | <code>AnimationProp</code> | <code>'ul'</code> | | <code>columns</code> | Number of columns the grid is divided into. By default, its value is 0, setting the grid<br />columns mode to auto-fill. | <code>number</code> | <code>0</code> | | <code>items</code> | The list of items to be rendered. | <code>ListItem[]</code> | <code></code> | ## Slots | Name | Description | Bindings<br />(name - type - description) | | --------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------- | | <code>slotName</code> | Customized item rendering. Specifying a slot with the item's modelName will result in | <br />**item** <code>item</code> - Item to render | | <code>default</code> | (required) Default item rendering. This slot will be used by default for rendering | **item** <code>item</code> - 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: ```vue <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: ```vue <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. ```vue <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. ```vue <template> <BaseGrid :items="items" style="--x-size-min-width-grid-item: 150px"> <template #default="{ item }"> {{ `Default slot content: ${item.id}` }} </template> </BaseGrid> </template> ```