@empathyco/x-components/docs/API-reference/api/x-components.slicedfilters.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [SlicedFilters](./x-components.slicedfilters.md)

## SlicedFilters variable

Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    filters: PropType<Filter[]>;
    parentId: {
        type: PropType<Filter["id"]>;
        required: false;
    };
    max: {
        type: NumberConstructor;
        required: true;
    };
    buttonClass: StringConstructor;
}, {
    cssClasses: import("vue").ComputedRef<VueCSSClasses>;
    toggleShowMoreFilters: (event: MouseEvent) => void;
    showButton: import("vue").ComputedRef<boolean>;
    difference: import("vue").ComputedRef<number>;
    slicedFilters: import("vue").ComputedRef<Filter[]>;
    showMoreFilters: import("vue").Ref<boolean>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click:show-less" | "click:show-more")[], "click:show-less" | "click:show-more", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    filters: PropType<Filter[]>;
    parentId: {
        type: PropType<Filter["id"]>;
        required: false;
    };
    max: {
        type: NumberConstructor;
        required: true;
    };
    buttonClass: StringConstructor;
}>> & {
    "onClick:show-less"?: ((...args: any[]) => any) | undefined;
    "onClick:show-more"?: ((...args: any[]) => any) | undefined;
}, {}, {}>
```