Crestron Components Lib - Showcase App

Common attributes: appendClassWhenInViewport

This attribute applies the provided value as a class name while the component is visible and removes the class name when the component is not visible.

See the CSS tab.

Use the inspector to see how the class is added and removed.
A 1s transition is added for demonstration purposes.

Note: This attribute is not applicable for

- CH5 Date Time
- CH5 Qr Code
- Ch5 Text

HTML
JS
CSS

<div class="wrapper">
		<div class="button-wrapper">
				<ch5-button label="Default button" appendClassWhenInViewport="appended-class"></ch5-button>
		</div>
</div>

.appended-class{
		transition: background-color 1s ease;
		background-color: darkolivegreen;
}

.wrapper {
		height: 200px;
		overflow-y: scroll;
}

.button-wrapper {
		padding: 100px 0;
		height: 500px;
}

Execute JS before HTML

Preview