[develop | DONE | ADDED] add new custom classes fo slider-tabs container

This commit is contained in:
Alex Martzios 2024-03-19 12:55:39 +02:00
parent ca8b732a64
commit 6c4a4d9721
1 changed files with 7 additions and 2 deletions

View File

@ -20,7 +20,7 @@ declare var UIkit;
template: ` template: `
<div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'" <div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
[ngClass]="customClass"> [ngClass]="customClass">
<div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'"> <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'" [ngClass]="containerClass">
<ul #tabsElement [class.uk-flex-nowrap]="position === 'horizontal'" <ul #tabsElement [class.uk-flex-nowrap]="position === 'horizontal'"
[class.uk-slider-items]="position === 'horizontal'" [class.uk-slider-items]="position === 'horizontal'"
[class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'" [class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
@ -112,6 +112,11 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
* */ * */
@Input() @Input()
public flexPosition: 'center' | 'left' | 'right' = 'left'; public flexPosition: 'center' | 'left' | 'right' = 'left';
/**
* Set a class for the container
* */
@Input()
public containerClass: string;
/** /**
* Set a class above tabs * Set a class above tabs
* */ * */
@ -164,7 +169,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
} }
}); });
if (this.type === 'static') { if (this.type === 'static') {
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect}); let tabs = UIkit.switcher(this.tabsElement.nativeElement, {connect: this.connect});
tabs.show(this.activeIndex); tabs.show(this.activeIndex);
if (this.connect.includes('#')) { if (this.connect.includes('#')) {
this.scrollToStart(); this.scrollToStart();