@empathyco/x-components
Version:
Empathy X Components
187 lines (163 loc) • 5.71 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 /> |
## Example
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 `scopedSlots`.
```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>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
export default {
name: 'ResultsSection',
components: {
BaseVariableColumnGrid,
},
data() {
return {
animation: StaggeredFadeAndSlide,
items: [
{
id: 'res-1',
modelName: 'Result',
name: 'Product 1',
},
{
id: 'res-2',
modelName: 'Result',
name: 'Product 2',
},
],
}
},
methods: {
setColumns(columns) {
this.$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>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
export default {
name: 'ResultsSection',
components: {
BaseVariableColumnGrid,
},
data() {
return {
animation: StaggeredFadeAndSlide,
items: [
{
id: 'res-1',
modelName: 'Result',
name: 'Product 1',
},
{
id: 'res-2',
modelName: 'Result',
name: 'Product 2',
},
],
}
},
methods: {
setColumns(columns) {
this.$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>
import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
export default {
name: 'ResultsSection',
components: {
BaseVariableColumnGrid,
},
data() {
return {
animation: StaggeredFadeAndSlide,
items: [
{
id: 'res-1',
modelName: 'Result',
name: 'Product 1',
},
{
id: 'res-2',
modelName: 'Result',
name: 'Product 2',
},
],
}
},
}
</script>
```