basic-fade-overflow

Fades out content that overflows so the user knows there's more.

Usage no npm install needed!

<script type="module">
  import basicFadeOverflow from 'https://cdn.skypack.dev/basic-fade-overflow';
</script>

README

API Documentation

FadeOverflow ⇐ ElementBase

Fades out content that overflows so the user knows there's more.

This component doesn't handle interactivity.

The component needs to know the color it should fade to, which it tries to infer from the background color. In some situations, this may not work, in which case you can explicitly set the fadeColor attribute.

The component currently always displays the fade, even if the component's content is short enough to fit completely in view.

Kind: global class Extends: ElementBase

fadeOverflow.fadeColor

The color of the fade.

The fade color should match the background color. The component does its best to infer the background color, but in some situations, that may not work. In those cases, you can manually identify the background color. This should be a solid color.

Kind: instance property of FadeOverflow Default: white
Attribute: fadeColor

fadeOverflow.refresh()

Infer the fade color from background color. If you have programmatically changed the color behind the component, you can invoke this method to have the component try to pick up the new background color.

Kind: instance method of FadeOverflow

fadeOverflow.showFade : boolean

True if the component should show the fade to the background color.

Kind: instance property of FadeOverflow Default: true