@empathyco/x-components
Version:
Empathy X Components
146 lines (122 loc) • 5.24 kB
Markdown
---
title: BaseVariableColumnGrid
---
# BaseVariableColumnGrid
The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
selected number of columns to the grid. It also allows to customize the grid items using the
available `scopedSlots`.
## Props
| Name | Description | Type | Default |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>animation</code> | Animation component that will be used to animate the grid. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>items</code> | The list of items to be rendered. | <code>ListItem[]</code> | <code></code> |
| <code>columns</code> | The columns to render by default in the grid. This property is used when the user has not<br />selected any value in the column picker. | <code>number</code> | <code>0</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ----------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------ |
| <code>name</code> | Customized item rendering. The slot name can either be default or the item's model | **item** <code>GridItem</code> - Item to render.<br /> |
## Examples
The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the
`ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows
you to customize the grid items using the available slots.
### Basic example
```vue
<template>
<section class="results">
<button @click="setColumns(4)" class="column-picker-selector">
<span class="column-picker-selector__text">4 columns</span>
</button>
<BaseVariableColumnGrid :animation="animation" :items="items">
<template #default="{ item }">
<span data-test="default-slot">{{ item.id }}</span>
</template>
<template #result="{ item }">
<span data-test="result-slot">{{ "Result " + item.id }}</span>
</template>
</BaseVariableColumnGrid>
</section>
</template>
<script setup>
import { ref } from "vue";
import {
BaseVariableColumnGrid,
StaggeredFadeAndSlide,
} from "@empathyco/x-components";
import { use$x } from "../../composables";
const x = use$x();
const animation = StaggeredFadeAndSlide;
const items = [
{ id: "res-1", modelName: "Result", name: "Product 1" },
{ id: "res-2", modelName: "Result", name: "Product 2" },
];
function setColumns(columns) {
x.emit("UserClickedColumnPicker", columns);
}
</script>
```
### Playing with props
Configuring the default columns to be rendered. These columns will be the default value until the
`ColumnsNumberProvided` is emitted and changes the value.
```vue
<template>
<section class="results">
<button @click="setColumns(5)" class="column-picker-selector">
<span class="column-picker-selector__text">5 columns</span>
</button>
<BaseVariableColumnGrid :animation="animation" :items="items" :columns="3">
<template #default="{ item }">
<span data-test="default-slot">{{ item.id }}</span>
</template>
<template #result="{ item }">
<span data-test="result-slot">{{ "Result " + item.id }}</span>
</template>
</BaseVariableColumnGrid>
</section>
</template>
<script setup>
import { ref } from "vue";
import {
BaseVariableColumnGrid,
StaggeredFadeAndSlide,
} from "@empathyco/x-components";
import { use$x } from "@empathyco/x-components";
const x = use$x();
const animation = StaggeredFadeAndSlide;
const items = [
{ id: "res-1", modelName: "Result", name: "Product 1" },
{ id: "res-2", modelName: "Result", name: "Product 2" },
];
function setColumns(columns) {
x.emit("UserClickedColumnPicker", columns);
}
</script>
```
### 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>
<BaseVariableColumnGrid
:animation="animation"
:items="items"
style="--x-size-min-width-grid-item: 150px"
>
<template #default="{ item }">
{{ `Default slot content: ${item.id}` }}
</template>
</BaseVariableColumnGrid>
</template>
<script setup>
import {
BaseVariableColumnGrid,
StaggeredFadeAndSlide,
} from "@empathyco/x-components";
import { ref } from "vue";
const animation = StaggeredFadeAndSlide;
const items = [
{ id: "res-1", modelName: "Result", name: "Product 1" },
{ id: "res-2", modelName: "Result", name: "Product 2" },
];
</script>
```