1 min read
RenderlessFilter
RenderlessFilter
Renders default slot content. It binds to the default slot a @empathyco/x-types#BooleanFilter, the XEvent that will be emitted when clicking the content, the css classes and if the content should be deactivated.
Props
Name | Description | Type | Default |
---|---|---|---|
filter | The filter data to render. | BooleanFilter |
|
clickEvents | Additional events with its payload to emit when the filter is clicked. | Partial |
|
Examples
Renders default slot content. It binds to the default slot a filter, the events that will be emitted when clicking the content, the CSS classes and if the content should be deactivated.
Basic usage
<RenderlessFilter :filter="filter" />
Customizing its contents and adding new events
<template>
<RenderlessFilter
:filter="filter"
:clickEvents="clickEvents"
v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
>
<button @click="clickFilter" :class="cssClasses" :disabled="isDisabled">
{{ filter.label }}
</button>
</RenderlessFilter>
</template>
<script>
import { RenderlessFilter } from '@empathyco/x-components';
export default {
components: {
RenderlessFilter
},
props: ['filter'],
computed: {
clickEvents() {
return { UserClickedAHierarchicalFilter: this.filter };
}
}
};
</script>