https://img.shields.io/badge/-Deprecated-redhttps://img.shields.io/badge/-Deprecated-red

Warning

The Gradient Collapse block has been deprecated in favor of the Disclosure Layout app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Disclosure Layout app.

GradientCollapse is a VTEX component that hides part of the children when it is bigger than the collapseHeight giving the user the show more or show less options. This Component can be imported and used by any VTEX app.

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Import it into your code:
import { GradientCollapse } from 'vtex.store-components'

You can use it in your code like a React component with the jsx tag: <GradientCollapse />.

<GradientCollapse>
  I'm a text and I will collapse if I'm bigger than my collapseHeight!
</GradientCollapse>
Prop nameTypeDescriptionDefault Value
collapseHeightNumber!MaxHeight of the containerundefined
childrenNodeThe component to be collapsednull

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
container
content
fadeBottom
pointerEventsAuto
pointerEventsNone
showMoreButton

Did this page help you?