Gradient Collapse

{"base64":" ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-gradientcollapse-0.png"}}

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

Import the vtex.store-component app to your theme's dependencies in the manifest.json;


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Import it into your code:


_10import { GradientCollapse } from "vtex.store-components";

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


_10<GradientCollapse>
_10  I'm a text and I will collapse if I'm bigger than my collapseHeight!
_10</GradientCollapse>

Prop name	Type	Description	Default Value
`collapseHeight`	`Number!`	MaxHeight of the container	`undefined`
`children`	`Node`	The component to be collapsed	`null`

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`