# gx-intersection-observer

This control allows the user to wrap another component and use the Javascript Intersection Observer API on it. The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

## Children

The different building blocks of the card can be specified using a set of
predefined slots:


| Slot      | Details                                                                 |
| ----------- | ------------------------------------------------------------------------- |
| `content` | This slot will be rendered as content inside the intersection observer. |

## Example

```html
<gx-intersection-observer>
  <div slot="content">
    Some information
  </div>
</gx-intersection-observer>
```

<!-- Auto Generated Below -->

## Properties


| Property          | Attribute          | Description                                                                                                                                                                                | Type   | Default |
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------- |
| cssClass          | css-class          | A CSS class to set for the`gx-intersection-observer`                                                                                                                                       | string |         |
| root              | root               | Set the ID of the component that is used as the viewport, default is the browser.                                                                                                          | string | null    |
| topRootMargin     | top-root-margin    | Top margin around the root                                                                                                                                                                 | string | "0px"   |
| leftRootMargin    | left-root-margin   | Left margin around the root                                                                                                                                                                | string | "0px"   |
| bottomRootMargin  | bottom-root-margin | Bottom margin around the root                                                                                                                                                              | string | "0px"   |
| rightRootMargin   | right-root-margin  | Right margin around the root                                                                                                                                                               | string | "0px"   |
| intersectionRatio | intersection-ratio | The degree of intersection between the target element and its root, its a read-only property that change its value when the IntersectionUpdate event its triggered. Default value is zero. | number | 0       |
| threshold         | threshold          | Percentage values representation of the target element which are visible. Default value is 0                                                                                               | string | [0]     |

---

_Built with [StencilJS](https://stenciljs.com/)_