GradientCollapse.md

Gradient Collapse

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.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents

• Usage
  • Configuration
  • Styles API
    • CSS Namespaces

Usage

You should follow the usage instruction in the main README.

To 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>

Configuration

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

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the GradientCollapse.

Class name	Description	Component Source
fadeBottom	The bottom of the collapse	index
pointerEventsNone	The GradientCollapse container	index
pointerEventsAuto	The Show Less/Show More button area	index