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>