# Scrollable

Scrollable wrapper with styled bar and toggle button.

# Most common usage scenario

<template>
  <SfScrollable
    :show-text="showText"
    :hide-text="hideText"
    :max-content-height="maxContentHeight"
    style="max-width: 13.75rem;"
  >
    <SfProductOption
      v-for="(option, key) in options"
      :key="option.color"
      :color="option.color"
      :label="option.label"
      :style="{ marginBottom: key < options.length - 1 ? '8px' : undefined }"
    />
  </SfScrollable>
</template>
<script>
import { SfScrollable } from "@storefront-ui/vue";
import { SfProductOption } from "@storefront-ui/vue";
export default {
  components: {
    SfScrollable,
    SfProductOption,
  },
  data() {
    return {
      options: [
        { color: "red", label: "Red" },
        { color: "blue", label: "Blue" },
        { color: "green", label: "Green" },
        { color: "black", label: "Black" },
        { color: "navy", label: "Navy" },
        { color: "pink", label: "Pink" },
      ],
      showText: "View all colors",
      hideText: "Hide colors",
      maxContentHeight: "6.875rem",
    };
  },
};
</script>

# Props

  • maxContentHeight

    • type: string
    • defaultValue: ""
  • showText

    • type: string
    • defaultValue: "Show"
  • hideText

    • type: string
    • defaultValue: "Hide"

# Slots

  • default

# Events

None.

# CSS modifiers

  • .sf-scrollable--is-open

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --scrollable-max-height

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.