@empathyco/x-components/docs/API-reference/components/common/x-components.sliding-panel.md

Empathy X Components

---

title: SlidingPanel

---

# SlidingPanel

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`.

## Props

| Name                              | Description                                                                                                         | Type                       | Default           |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>scrollFactor</code>         | Scroll factor that will dictate how much the scroll moves when pressing a navigation button.                        | <code>number</code>        | <code>0.7</code>  |
| <code>showButtons</code>          | Would make the navigation buttons visible when they're needed or always hide them.                                  | <code>boolean</code>       | <code>true</code> |
| <code>resetOnContentChange</code> | When true, whenever the DOM content in the sliding panel slot changes, it will reset<br />the scroll position to 0. | <code>boolean</code>       | <code>true</code> |
| <code>buttonClass</code>          |                                                                                                                     | <code>VueCSSClasses</code> | <code></code>     |
| <code>scrollContainerClass</code> |                                                                                                                     | <code>VueCSSClasses</code> | <code></code>     |

## Slots

| Name                                    | Description                      | Bindings<br />(name - type - description) |
| --------------------------------------- | -------------------------------- | ----------------------------------------- |
| <code>default</code>                    | (Required) Sliding panel content | None                                      |
| <code>sliding-panel-addons</code>       |                                  | <br />                                    |
| <code>sliding-panel-left-button</code>  | Left button content              | None                                      |
| <code>sliding-panel-right-button</code> | Right button content             | None                                      |

## Events

This component emits no events.

## See it in action

Simplest implementation of the component, just a list-based component inside its slot.

```vue
<template>
  <SlidingPanel>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </SlidingPanel>
</template>

<script>
import { SlidingPanel } from '@empathyco/x-components'

export default {
  name: 'SlidingPanelDemo',
  components: {
    SlidingPanel,
  },
}
</script>

<style>
.x-sliding-panel {
  width: 200px;
}

.item {
  display: inline-block;
  width: 100px;
}
</style>
```

### Play with props

#### Modifying scroll buttons travel distance

Edit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`
prop.

```vue
<template>
  <SlidingPanel :scrollFactor="1.5">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </SlidingPanel>
</template>

<script>
import { SlidingPanel } from '@empathyco/x-components'

export default {
  name: 'SlidingPanelDemo',
  components: {
    SlidingPanel,
  },
}
</script>

<style>
.x-sliding-panel {
  width: 200px;
}

.item {
  display: inline-block;
  width: 100px;
}
</style>
```

#### Hiding scroll buttons

Hide the navigational buttons completely by setting the `showButtons` prop to `false`. This is
intended to be used when other scrolling options are available, like in mobile, where you can scroll
just by swiping.

```vue
<template>
  <SlidingPanel :showButtons="false">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </SlidingPanel>
</template>

<script>
import { SlidingPanel } from '@empathyco/x-components'

export default {
  name: 'SlidingPanelDemo',
  components: {
    SlidingPanel,
  },
}
</script>

<style>
.x-sliding-panel {
  width: 200px;
}

.item {
  display: inline-block;
  width: 100px;
}
</style>
```

#### Customizing the content with classes

The `buttonClass` prop can be used to add classes to the buttons.

The `scrollContainerClass` prop can be used to add classes to the scroll content.

```vue
<template>
  <SlidingPanel buttonClass="x-button--round" scrollContainerClass="x-sliding-panel-fade">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </SlidingPanel>
</template>

<script>
import { SlidingPanel } from '@empathyco/x-components'

export default {
  name: 'SlidingPanelDemo',
  components: {
    SlidingPanel,
  },
}
</script>

<style>
.x-sliding-panel {
  width: 200px;
}

.item {
  display: inline-block;
  width: 100px;
}
</style>
```

#### Disabling reset the scroll when content changes

By default, whenever the content of the sliding panel changes, it auto resets its scroll position.
You can disable this behavior setting the `resetOnContentChange` prop to `false`.

```vue
<template>
  <div>
    <button @click="items++">Add item</button>
    <label>
      <input type="checkbox" v-model="resetOnContentChange" />
      Reset content onchange
    </label>
    <SlidingPanel :resetOnContentChange="resetOnContentChange">
      <div class="item" v-for="item in items" :key="item">Item {{ item }}</div>
    </SlidingPanel>
  </div>
</template>

<script>
import { SlidingPanel } from '@empathyco/x-components'

export default {
  name: 'SlidingPanelDemo',
  components: {
    SlidingPanel,
  },
  data() {
    return {
      items: 4,
      resetOnContentChange: false,
    }
  },
}
</script>

<style>
.x-sliding-panel {
  width: 200px;
}

.item {
  display: inline-block;
  width: 100px;
}
</style>
```

## Extending the component

### Overriding Button content

By default the buttons show an arrow depicting the direction the scroll would go to when clicked,
but this content can be customized with anything, from characters to SVG and images.

```vue
<template>
  <SlidingPanel>
    <template #sliding-panel-left-button>Left</template>
    <template #default>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
    </template>
    <template #sliding-panel-right-button>Right</template>
  </SlidingPanel>
</template>

<script>
import { SlidingPanel } from '@empathyco/x-components'

export default {
  name: 'SlidingPanelDemo',
  components: {
    SlidingPanel,
  },
}
</script>

<style>
.x-sliding-panel {
  width: 200px;
}

.item {
  display: inline-block;
  width: 100px;
}
</style>
```