Documentation
Feedback
Guides

Deprecated
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

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page