Scroll Bar Component

Overview

The scroll bar component can be used any time you require a programmable scroll bar. Unlike HTML container scroll bars, the scroll bar component lets you render either a vertical or horizontal scroll bar, assign an initial value and maximum range.

The scroll bar responds to clicking on a position, dragging to a position or by using the mouse wheel, and the size of the scroll bar is determined by the dimensions of the container HTML element.

Our table component uses the scroll bar component to handle virtual scrolling.

Required Imports

To use the scroll bar component in your component, you must import the MpageScrollBarComponent from @clinicaloffice/mpage-developer. You must also include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {MpageScrollBarComponent} from '@clinicaloffice/mpage-developer';

@Component({
    selector: 'your-component',
    imports: [MpageScrollBarComponent],
    templateUrl: './your-component.component.html',
    styleUrl: './your-component.component.scss',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

The scroll bar component is not bound to Angular forms and instead tracks the value of the scroll bar through a numeric value property. Styling of the scrollbar is handled completely with CSS and explained later in this document.

The scroll bar component will fit to 100% the size of its parent container as shown below. Including the scroll bar component in a parent div allows the flexibility of controlling the size of your scrollbar.

<div style="width: 500px; height: 10px">
    <mpage-scroll-bar [(value)]="myScrollBarVariable" [minValue]="0" [maxValue]="100" />
</div>

Options

Styling

The table below describes the styles specific to the MPage scroll bar component that you can customize. These changes are global to your MPage and will affect anything using the scroll bar including the table component. If you are building a component to be used in the Cerner MPage Component Framework, these styles are specific to your component and changes will have no impact on other Clinical Office components displayed on the same page.

Customizing Individual Scroll Bars

If you need a scroll bar that has a unique look different from all others, you can create a custom class to control how your scroll bar appears.

Your custom class can consist of global class styling, as well as specific styling for the .co-scroll-bar and .co-scroll-bar-thumb subclasses. The example below will render a light red scroll bar with a solid 2px dashed border and a bright red thumb control.

.my-custom-scrollbar {
  border: 2px dashed red;

  .co-scroll-bar {
    display: inline-flex;
    width: 100%;
    height: 100%;
    background-color: pink;
    padding: 0;
    margin: 0;
  }

  .co-scroll-bar-thumb {
    background-color: red;
  }
}

<mpage-scroll-bar [(value)]="scrollBarValue" [minValue]="0" [maxValue]="100" [vertical]="false" class="my-custom-scrollbar" />