JoshDSommer / nativescript-slides

A NativeScript plugin that is for Intro Tutorials, Image Carousels or any other slide functionality
Other
70 stars 32 forks source link

Indicators not shown #83

Closed LeoLazGR closed 7 years ago

LeoLazGR commented 7 years ago

Hi,

I use this really awesome plugin for my mobile app. But a face a problem. The indicators are not shown at the buttom. I am using Angular2.

My xml: <SlideContainer angular="true" pageIndicators="true" #slides>

<Slide>
    <Label text="This is Label in Tab 2"></Label>
</Slide>

My ts:

import { Component, ElementRef, OnInit, ViewChild, ChangeDetectionStrategy, ViewContainerRef } from "@angular/core"; import { Page } from "ui/page";

import { registerElement, ViewClass } from "nativescript-angular/element-registry"; registerElement("Slide", () => require("nativescript-slides").Slide); registerElement("SlideContainer", () => require("nativescript-slides").SlideContainer);

@Component({ selector: "slide", templateUrl: "./slide.html", styleUrls: ['./slide.css'], }) export class SlideTest implements OnInit {

data;
@ViewChild("slides") slides: ElementRef;

constructor(private page: Page){};

ngOnInit(){
    this.page.className = "list-page";
}

ngAfterViewInit() {
    let SlidesXml = this.slides.nativeElement;
    SlidesXml.constructView();
}

}

css: .slide-indicator-inactive{ background-color: #fff; opacity : 0.4; width : 10px; height : 10px; margin-left : 2.5px; margin-right : 2.5px; margin-top : 0px; border-radius : 5px; }

.slide-indicator-active{ background-color: #fff; opacity : 0.9; width : 10px; height : 10px; margin-left : 2.5px; margin-right : 2.5px; margin-top : 0; border-radius : 5px; }

Have anyone an idea why the idnicators are missing?

Thank you in advance.

chgandm commented 7 years ago

You may need to move the slide-indicator CSS classes from your component-specific css file to the application-wide css file (app.css) as mentioned in #77. At least that fixed it for me (I'm on TNS 2.4.0 and Angular 2.0.1).