Scroll Bar Component
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 a 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.
Component Properties
The following properties can be set on your scroll bar component implementation.
| Property Name | Binding | Description |
|---|---|---|
| barColor | Input | Change the color of the bar to any valid CSS color definition. The default is 'steelblue'. |
| barThickness | Input | Change the bar thickness to any valid CSS size (e.g. '30px', '5rem'). |
| containerColor | Input | Set the scroll bar background color to any valid CSS color definition. The default is 'lightgrey'. |
| maxValue | Input | Define the maximum value the scroll bar will represent. If the maximum value is a small enough number, the scroll bar size will adjust in height/width. |
| value | Input/Output | Name of variable used to track current scroll bar position |
| valueChange | Output | Emits an event with the current position value of the scroll bar. This can be used to trigger activities inside your application when the position on the scroll bar changes. |
| vertical | Input | Boolean value that determines if the scroll bar should be displayed vertically. The default is false. |
Usage Example
The following example displays 4 different bar graphs. Each graph is assigned to a variable (scrollValue1, scrollValue2, etc.). Above each bar the current value is displayed.
app.component.ts
import {Component, OnInit} from '@angular/core';
V4+ import { mPageService } from '@clinicaloffice/clinical-office-mpage-core';
< V3 import { mPageService } from '@clinicaloffice/clinical-office-mpage';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
scrollValue1 = 0;
scrollValue2 = 0;
scrollValue3 = 0;
scrollValue4 = 0;
constructor(public mPage: mPageService) { }
ngOnInit(): void {
this.mPage.setMaxInstances(2, true, 'CHART');
}
}
app.component.css
.inline {
display: inline-block;
height: 400px;
margin: 10px;
}
app.component.html
<h1>Scroll Bar Test</h1>
<div>
<div class="inline">
{{ scrollValue1 }}
<mpage-scroll-bar [(value)]="scrollValue1" [maxValue]="50" [vertical]="true"></mpage-scroll-bar>
</div>
<div class="inline">
{{ scrollValue2 }}
<mpage-scroll-bar [(value)]="scrollValue2" [maxValue]="150" [vertical]="true" [barThickness]="'16rem'"></mpage-scroll-bar>
</div>
<div class="inline">
{{ scrollValue3 }}
<mpage-scroll-bar [(value)]="scrollValue3" [maxValue]="250" [vertical]="true" [barColor]="'pink'" [containerColor]="'yellow'">
</mpage-scroll-bar>
</div>
<div class="inline" style="width: 400px;">
{{ scrollValue4 }}<br />
<mpage-scroll-bar [(value)]="scrollValue4" [maxValue]="4"></mpage-scroll-bar>
</div>
</div>