# SlidingSection

Section for content with sliding property.

# Most common usage scenario

<template>
  <div style="max-width: 64rem; margin: auto;">
    <SfSlidingSection>
      <template #static>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 34.6875rem;
            background-color: #f2f2f2;
          "
        >
          [#static slot content]
        </div>
      </template>
      <template #sliding>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 18.75rem;
            background-color: #f2f2f2;
          "
        >
          [#sliding slot content]
        </div>
      </template>
    </SfSlidingSection>
  </div>
</template>
<script>
import { SfSlidingSection } from "@storefront-ui/vue";
import {} from "@storefront-ui/vue";
export default {
  components: {
    SfSlidingSection,
  },
};
</script>

# Props

None.

# Slots

  • static

    • Use this slot to place static content.
  • close

    • Use this slot to replace close icon
    • bindings: closeHandler
  • sliding

    • Use this slot to place sliding content.
    • bindings: isActive

# Events

None.

# CSS modifiers

  • .sf-sliding-section--has-scroll-lock
  • .sf-sliding-section--is-active

# CSS custom properties (variables)

  • --sliding-section-display
  • --sliding-section-margin
  • --sliding-section-static-height
  • --sliding-section-static-transition
  • --sliding-section-sliding-padding
  • --sliding-section-mobile-bar-display
  • --sliding-section-mobile-bar-padding

# Overridden other components CSS variables

  • --sliding-section-sliding-margin

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.