first commit
This commit is contained in:
fuzi_fauzia committed
commit
71a3a661dc
1943 files changed
+246917
No files matched your search
@@ -0,0 +1,11 @@
|
||||
:host ::ng-deep .always-visible .ps__rail-x {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .always-visible .ps__rail-y {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
vertical-scroll {
|
||||
overflow: auto !important;
|
||||
}
|
||||
@@ -0,0 +1,464 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<div class="alert alert-warning mb-2">
|
||||
<h4 class="alert-heading mb-2">Scrolling children inside perfect-scrollbar</h4>
|
||||
<p>You can natively scroll children inside perfect-scrollbar with the mouse-wheel. Scrolling automatically
|
||||
works if the child is a textarea. All other elements need to have the ps-child class.</p>
|
||||
</div>
|
||||
|
||||
<!-- Scroll types section start -->
|
||||
<section id="scroll-types">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Vertical Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Vertical Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="vertical-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Horizontal Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="horizontal-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<div class="horz-scroll-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Both Side Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Both Side Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="both-side-scroll scroll-example height-300" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<img src="../../../assets/images/carousel/09.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Scroll types section end -->
|
||||
|
||||
<!-- Scroll wheel section start -->
|
||||
<section id="scroll-wheel">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Wheel Speed : 1 -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Wheel Speed : 1</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example demonstrate the default scroll speed for the mouse wheel scroll. Default wheel
|
||||
speed is <code>1</code>. Chage <code>perfectScrollbar</code> option to achieve desired wheel speed.</p>
|
||||
</div>
|
||||
<div class="default-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed1">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wheel Speed : 10 -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Wheel Speed : 10</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example demonstrate the higher scroll speed for the mouse wheel scroll. Default wheel speed
|
||||
is <code>1</code>. In this example <code>perfectScrollbar</code> option is set to <code>10</code>.</p>
|
||||
</div>
|
||||
<div class="higher-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed10">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wheel Speed : 0.1 -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Wheel Speed : 0.1</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example demonstrate the lower scroll speed for the mouse wheel scroll. Default wheel speed
|
||||
is <code>1</code>. In this example <code>perfectScrollbar</code> option is set to <code>0.1</code>.</p>
|
||||
</div>
|
||||
<div class="lower-wheel-speed scroll-example height-300" fxFlex="auto" [perfectScrollbar]="speed">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via workplace
|
||||
diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the
|
||||
day, going forward, a new normal that has evolved from generation X is on the runway heading
|
||||
towards a streamlined cloud solution. User generated content in real-time will have multiple
|
||||
touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology immersion
|
||||
along the information highway will close the loop on focusing solely on the bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework. Taking
|
||||
seamless key performance indicators offline to maximise the long tail. Keeping your eye on the
|
||||
ball while performing a deep dive on the start-up mentality to derive convergence on
|
||||
cross-platform integration.</p>
|
||||
|
||||
<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically
|
||||
procrastinate B2C users after installed base benefits. Dramatically visualize customer directed
|
||||
convergence without revolutionary ROI.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Scroll wheel section end -->
|
||||
|
||||
<!-- Scroll options section start -->
|
||||
<section id="scroll-options">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Always Visible Scroll -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Always Visible Scroll</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add class <code>.always-visible</code> to the wrapper element to make the scrollbar always
|
||||
visible. Srollbars are shown on hover and hidden by default.</p>
|
||||
</div>
|
||||
<div class="visible-scroll always-visible scroll-example height-300" fxFlex="auto"
|
||||
[perfectScrollbar]="visibleScroll">
|
||||
<div class="horz-scroll-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
|
||||
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end
|
||||
of the day, going forward, a new normal that has evolved from generation X is on the runway
|
||||
heading towards a streamlined cloud solution. User generated content in real-time will have
|
||||
multiple touch points for offshoring.</p>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<p>Podcasting operational change management inside of workflows to establish a framework.
|
||||
Taking seamless key performance indicators offline to maximise the long tail. Keeping your
|
||||
eye on the ball while performing a deep dive on the start-up mentality to derive
|
||||
convergence on cross-platform integration.</p>
|
||||
|
||||
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test.
|
||||
Override the digital divide with additional click throughs from DevOps. Nano technology
|
||||
immersion along the information highway will close the loop on focusing solely on the
|
||||
bottom line.</p>
|
||||
|
||||
<p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative
|
||||
approaches to corporate strategy foster collaborative thinking to further the overall value
|
||||
proposition. Organically grow the holistic world view of disruptive innovation via
|
||||
workplace diversity and empowerment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Minimum Scrollbar Length -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Minimum Scrollbar Length</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add option <code>minScrollbarLength</code> to set the minimum scrollbar length. In this example
|
||||
we have set minimum scrollbar length to 200px.</p>
|
||||
</div>
|
||||
<div class="min-scroll-length scroll-example height-300" fxFlex="auto"
|
||||
[perfectScrollbar]="minScrollbarLength">
|
||||
<img src="../../../assets/images/carousel/07.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scrollbar With Margins -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Scrollbar With Margins</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add class <code>.large-margin</code> to the wrapper to have large margins on both sides.</p>
|
||||
</div>
|
||||
<div class="scrollbar-margins scroll-example height-300" fxFlex="auto" [perfectScrollbar]="margins">
|
||||
<img src="../../../assets/images/carousel/10.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Scroll options section end -->
|
||||
|
||||
<!-- Scroll events section start -->
|
||||
<section id="scroll-events">
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Default Handlers -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Default Handlers</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example supports all the handlers. Here is the list of all supported handlers :
|
||||
<code>'click-rail'</code>,
|
||||
<code>'drag-scrollbar'</code>, <code>'keyboard'</code>, <code>'wheel'</code>,
|
||||
<code>'touch'</code>. Use <code>handlers</code> option.</p>
|
||||
</div>
|
||||
<div class="default-handlers scroll-example height-300" fxFlex="auto" [perfectScrollbar]="handlers">
|
||||
<img src="../../../assets/images/carousel/06.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Keyboard -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">No Keyboard</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example supports all the handlers except keyboard. Here is the list of all supported
|
||||
handlers : <code>'click-rail'</code>, <code>'drag-scrollbar'</code>, <code>'wheel'</code>,
|
||||
<code>'touch'</code>. Use <code>noKeyboard</code> option.</p>
|
||||
</div>
|
||||
<div class="no-keyboard scroll-example height-300" fxFlex="auto" [perfectScrollbar]="noKeyboard">
|
||||
<img src="../../../assets/images/carousel/03.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Click and Drag -->
|
||||
<div class="col-xl-4 col-lg-12 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Click and Drag</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example supports only two handlers. Here is the list of supported handlers :
|
||||
<code>'click-rail'</code>,
|
||||
<code>'drag-scrollbar'</code>. Use <code>clickDrag</code> option. </p>
|
||||
</div>
|
||||
<div class="click-drag-handler scroll-example height-300" fxFlex="auto"
|
||||
[perfectScrollbar]="clickDrag">
|
||||
<img src="../../../assets/images/carousel/05.jpg" alt="girl" width="800" height="600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Scroll events section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ScrollableComponent } from './scrollable.component';
|
||||
|
||||
describe('ScrollableComponent', () => {
|
||||
let component: ScrollableComponent;
|
||||
let fixture: ComponentFixture<ScrollableComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ScrollableComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ScrollableComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import {
|
||||
PerfectScrollbarConfigInterface,
|
||||
PerfectScrollbarComponent, PerfectScrollbarDirective
|
||||
} from 'ngx-perfect-scrollbar';
|
||||
|
||||
@Component({
|
||||
selector: 'app-scrollable',
|
||||
templateUrl: './scrollable.component.html',
|
||||
styleUrls: ['./scrollable.component.css']
|
||||
})
|
||||
export class ScrollableComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
public config: PerfectScrollbarConfigInterface = { wheelPropagation: false};
|
||||
|
||||
public speed1: PerfectScrollbarConfigInterface = { wheelSpeed: 1 , wheelPropagation: false };
|
||||
|
||||
public speed10: PerfectScrollbarConfigInterface = { wheelSpeed: 10 , wheelPropagation: false };
|
||||
|
||||
public speed: PerfectScrollbarConfigInterface = { wheelSpeed: 0.1 , wheelPropagation: false };
|
||||
|
||||
public visibleScroll: PerfectScrollbarConfigInterface = {wheelPropagation: false};
|
||||
|
||||
public minScrollbarLength: PerfectScrollbarConfigInterface = { minScrollbarLength: 200 , wheelPropagation: false };
|
||||
|
||||
public margins: PerfectScrollbarConfigInterface = { scrollXMarginOffset: 40, scrollYMarginOffset: 90 , wheelPropagation: false };
|
||||
|
||||
public handlers: PerfectScrollbarConfigInterface = { wheelPropagation: false,
|
||||
handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'] };
|
||||
|
||||
public noKeyboard: PerfectScrollbarConfigInterface = {wheelPropagation: false,
|
||||
handlers: ['click-rail', 'drag-thumb', 'wheel', 'touch'] };
|
||||
|
||||
public clickDrag: PerfectScrollbarConfigInterface = {wheelPropagation: false,
|
||||
handlers: ['click-rail', 'drag-thumb'] };
|
||||
|
||||
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Scrollable',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Component',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Scrollable',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in new issue
Block a user