@empathyco/x-components/docs/API-reference/api/x-components.slidingpanel.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; [SlidingPanel](./x-components.slidingpanel.md)

## SlidingPanel variable

This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.

Additionally, this component exposes the following props to modify the classes of the elements: `buttonClass`<!-- -->.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    scrollFactor: {
        type: NumberConstructor;
        default: number;
    };
    showButtons: {
        type: BooleanConstructor;
        default: boolean;
    };
    resetOnContentChange: {
        type: BooleanConstructor;
        default: boolean;
    };
    buttonClass: {
        type: PropType<VueCSSClasses>;
    };
    scrollContainerClass: {
        type: PropType<VueCSSClasses>;
    };
}, {
    arrivedState: {
        left: boolean;
        right: boolean;
        top: boolean;
        bottom: boolean;
    };
    cssClasses: import("vue").ComputedRef<{
        'x-sliding-panel-at-start': boolean;
        'x-sliding-panel-at-end': boolean;
    }>;
    scrollContainerRef: import("vue").Ref<HTMLDivElement | undefined>;
    slotContainerWidth: import("vue").Ref<number>;
    xScroll: import("vue").WritableComputedRef<number>;
    slots: Readonly<{
        [name: string]: import("vue").Slot<any> | undefined;
    }>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    scrollFactor: {
        type: NumberConstructor;
        default: number;
    };
    showButtons: {
        type: BooleanConstructor;
        default: boolean;
    };
    resetOnContentChange: {
        type: BooleanConstructor;
        default: boolean;
    };
    buttonClass: {
        type: PropType<VueCSSClasses>;
    };
    scrollContainerClass: {
        type: PropType<VueCSSClasses>;
    };
}>>, {
    scrollFactor: number;
    showButtons: boolean;
    resetOnContentChange: boolean;
}, {}>
```