This page is about version 3.119.6 of the app, which is not the most recent version. The latest stable version is 3.178.3.
Description
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-componentapp to your theme's dependencies in themanifest.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 |