Development documentation
  1. Components
  2. UppScrollableComponent

File

libs/upp-wdgt/src/components/upp-scrollable/upp-scrollable.ts

Description

A reusable scrollable component for Angular applications.

This component provides a customizable scroll behavior for its content, with the ability to configure scroll directions (x, y, both, or none). It leverages HostBinding to dynamically set CSS classes based on the input properties and the state of the viewService.

Example Usage:

Example :
<upp-scrollable scrollbar="x">
  <div>Scrollable content here</div>
</upp-scrollable>

Features:

  • Dynamically controls scroll visibility (horizontal, vertical, or both).
  • Integrates with viewService for additional view-specific adjustments.
  • Provides scrollbar customization via CSS classes.

Metadata

selector upp-scrollable
styleUrls ./upp-scrollable.scss
templateUrl ./upp-scrollable.html

Index

Properties
Inputs
HostBindings
Accessors

Constructor

constructor(view: viewService)

Constructor for the UppScrollableComponent.

Example :
        is on a mobile device or has a visible scrollbar.
Parameters :
Name Type Optional Description
view viewService No

A service providing view-related state, such as whether the current view is on a mobile device or has a visible scrollbar.

Inputs

scrollbar
Type : "none" | "x" | "y" | "both"
Default value : 'none'

Defines the scrollable direction for the component.

  • 'none': No scrollbars are displayed (content overflow is hidden).
  • 'x': Horizontal scrollbar is enabled; vertical scrolling is disabled.
  • 'y': Vertical scrollbar is enabled; horizontal scrolling is disabled.
  • 'both': Both horizontal and vertical scrollbars are enabled.

HostBindings

class
Type : string

Dynamically generates CSS classes based on the scrollbar input value.

  • Adds --no-scrollbar-x when horizontal scrolling is disabled.
  • Adds --no-scrollbar-y when vertical scrolling is disabled.
  • Both classes are added when scrollbar is set to 'none'.

Properties

Public view
Type : viewService
A service providing view-related state, such as whether the current view is on a mobile device or has a visible scrollbar.

Accessors

panelClasses
getpanelClasses()

Dynamically generates CSS classes based on the scrollbar input value.

  • Adds --no-scrollbar-x when horizontal scrolling is disabled.
  • Adds --no-scrollbar-y when vertical scrolling is disabled.
  • Both classes are added when scrollbar is set to 'none'.
Returns : string 
<div class="wrapper">
    <div class="upp-scrollable-content" [ngClass]="{ 'mobile': view.Mobile, 'show': view.Scrollbar }">
        <div style="clear: both; height: 100%;">
            <ng-content></ng-content>
            <div style="clear: both; height: 200px"></div>    
        </div>
    </div>
</div>

./upp-scrollable.scss 


:host {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .upp-scrollable-content {
        flex-grow: 1;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    &.--no-scrollbar-y .upp-scrollable-content {
        box-sizing: content-box;
        background: var(--ion-background-color);
        scrollbar-width: none;

        height: 100%;
    
        &.show {
            overflow-y: auto !important;
            margin: 0px !important;
            padding: 0px !important;
    
            &::-webkit-scrollbar {
                width: 10px !important;
            }
        
            &::-webkit-scrollbar-track {
                background-color: var(--ion-background-color);
            }    
        
            &::-webkit-scrollbar-thumb {
                background-color: var(--ion-color-medium);
                border-radius: 5px;
            }    
        }
    
        // https://www.geeksforgeeks.org/hide-scroll-bar-but-while-still-being-able-to-scroll-using-css/
        overflow-y: -moz-scrollbars-none;
        -ms-overflow-style: none; 
        &::-webkit-scrollbar { 
            width: 0 !important 
        }
        
        margin: 0px -30px 0px 0px;
        padding: 0px 30px 0px 0px;
        z-index: 0;
    
        &.mobile {  /* adjust for mobile devices */
            width: 100%;
            overflow-y: auto;
            margin-right: 0px;
            padding: 0px !important;
        }  
    }

    &.--no-scrollbar-x .upp-scrollable-content {
        box-sizing: content-box;
        background: var(--ion-background-color);
        scrollbar-width: none;

        width: 100%;
    
        &.show {
            overflow-x: auto !important;
            margin: 0px !important;
            padding: 0px !important;
    
            &::-webkit-scrollbar {
                width: 10px !important;
            }
        
            &::-webkit-scrollbar-track {
                background-color: var(--ion-background-color);
            }    
        
            &::-webkit-scrollbar-thumb {
                background-color: var(--ion-color-medium);
                border-radius: 5px;
            }    
        }
    
        // https://www.geeksforgeeks.org/hide-scroll-bar-but-while-still-being-able-to-scroll-using-css/
        overflow-x: -moz-scrollbars-none;
        -ms-overflow-style: none; 
        &::-webkit-scrollbar { 
            width: 0 !important 
        }
        
        z-index: 0;
    
        &.mobile {  /* adjust for mobile devices */
            width: 100%;
            overflow-x: auto;
            margin-right: 0px;
            padding: 0px !important;
        }  
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""