@outbook/webcomponents-scrollable

This package provides a web component for creating a scrollable area with overflow indicators.

Installation

npm install @outbook/webcomponents-scrollable

Usage

As a Lit Element

import {html} from 'lit';
import {Scrollable} from '@outbook/webcomponents-scrollable';

function render() {
  return html`
    ${Scrollable({
    content: () => html`<p>Some long content that will scroll.</p>`
  })}
  `;
}

Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

import '@outbook/webcomponents-scrollable';

<outbook-scrollable>
  <p>Some long content that will scroll.</p>
</outbook-scrollable>

Component: outbook-scrollable

This is the underlying web component. It can be used directly in HTML or in any framework.

Properties

| Attribute | Property | Type | Default | Description | |------------------------------|----------------------------|-----------|-------------|---------------------------------------------------------------------------------------------------------| | event-scroll-to-playing-item | eventScrollToPlayingItem | Boolean | false | Listens for a scrollToPlayingItem document event and scrolls to the selectedPosition in the event detail. | | event-scroll-to-top | eventScrollToTop | Boolean | false | Listens for a scrollToTop document event and scrolls the content to the top. | | extraClasses | extraClasses | String | undefined | Classes to add to the host element. |

Slots

| Name | Description | |---------|-------------------------------------------| | | The content to be made scrollable. |

Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

Custom Properties

Can be used with css light-dark function.

| Custom Property | Description | |--------------------------------------------------|-------------------------------| | --outbook-scrollable--indicator-max-width | The max width of the indicator. | | --outbook-scrollable--indicator-color | The color of the indicator. |

License

This component is licensed under the Apache-2.0 License.