# Scrollable

# 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

# SCSS variables

None.

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/molecules/SfScrollable/SfScrollable.html"></template>
<script src="@storefront-ui/vue/src/components/molecules/SfScrollable/SfScrollable.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfScrollable.scss";
</style>

You can read about using component partials here

# Play with this component

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