ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.94k stars 13.52k forks source link

RC.4 Nightly Issue: Slides options ignored #9906

Closed peterpeterparker closed 7 years ago

peterpeterparker commented 7 years ago

Ionic version: 2.0.0-rc.4-201701062325

I'm submitting a ... bug

Current behavior: In my app I built a wizard based on the Slides component. It's the core process of my app.

To handle the different the wizard and guide the user across the different steps, I use the Slides' option "onlyExternal = true" to disable the default behavior of allowing the user to swipe across the different slides. Furthermore, I also set the pager to false because I don't want to show a pager.

Today I tried the last nightly and it turns out that setting "onlyExternal = true" (just for trying) hasn't got any effects anymore. Even with that option, I was able to swipe between slides aka to swipe across my wizard without feeling informations.

For "fun" I tried to activate the pager = true, this had no effect too.

Expected behavior: The Slides' option "onlyExternal = true" when activated, should works as before aka don't allow user to swipes the slides.

Same for pager, when activated, a pager should be displayed.

Steps to reproduce: Create a slides with "onlyExternal = true and at least to slides. Try to swipe, shouldn't not be possible.

Related code:

<ion-slides #newAdSlider [options]="newAdSlideOptions" (ionSlideDidChange)="onSlideChanged()">
 </ion-slides>

constructor() {
     this.newAdSlideOptions = {
        initialSlide: 0,
        loop: false,
        pager: true,
        onlyExternal: true
    };
}

Ionic info:

Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-rc.4-201701062325 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 Ionic App Scripts Version: 0.0.48 ios-deploy version: 1.9.0 ios-sim version: 5.0.13 OS: macOS Sierra Node Version: v7.2.1 Xcode version: Xcode 8.2.1 Build version 8C1002

P.S.: Hi @jgw96 I saw that you seems to work on the sliders according different issues, thought maybe this information may interest you

peterpeterparker commented 7 years ago

Notes:

In current nightly, passing options to ion-slider is marked as deprecated.

ion-slides "options" has been deprecated. Please use ion-slide's input properties instead.

Workaround:

I found a workaround (or the correct way now) to activate onlyExternal mode. Therefor, I created a ViewChild references to the slider and set the variable to false in ionViewWillEnter:

@ViewChild('loginSlider') slider: Slides;

ionViewWillEnter() {
   this.slider.onlyExternal = true; // Yep it gonna works, I won't be able to swipe the slider
}

This workaround seems to work too in modal, but only if onlyExternal is set in ionViewDidEnter. If set in ionViewWillEnter it ain't gonna work.

Furthermore tried to do the same with pager, this wasn't successful:

this.slider.pager = true; // => Nope pager is still not shown

Conclusion:

When it comes to the options, I guess the msg "ion-slides "options" has been deprecated." is misleading. It's not really "deprecated" but the code has to be modified. If I'm right, could you please enhance the warning?

When it comes to the pager option, I would like to have a feedback. Thx you in advance for that.

peterpeterparker commented 7 years ago

The documentation about the attribute pager boolean doesn't seems to be correct neither in slides.d.ts

/**
 * @input {boolean}  String with type of pagination. Can be
 * `bullets`, `fraction`, `progress`. Default does not have
 * pagination set.
 */
pager: boolean;
private _pager;
peterpeterparker commented 7 years ago

Last update ;)

I found a way to activate the pager by setting it to true in the html code like following, but this means that by default it isn't active as documented..

<ion-slides  pager="true"> <!-- ==> Gonna work, page gonna be active only if explicitly written down -->

Furthermore to that, seems that this version introduce a new default color (blue) for the active pager instead of black as it was...

.swiper-pagination-bullet-active {
    background: #007aff;
 }
jgw96 commented 7 years ago

Hey @peterpeterparker , thanks for opening an issue with us! So looks like you have ran into one of the dangers of running nightly, currently un-documented changes (: . So all the options for ion-slides should now be passed as attributes to ion-slides. This is going to be in the changelog for our next release. I will look into the issue you are seeing with the pager not being active by default and the pager bullet being blue. Thanks for all the detailed info on this!

jgw96 commented 7 years ago

Hey @peterpeterparker could you point me to where you see that we document that the pager option is true by default? Im looking here and see that we document pager as being false by default.

peterpeterparker commented 7 years ago

@jgw96 thx a lot for your feedback. look like I was dreaming you are absolutely right, pager is set per default to false, sorry for the false information and loosing your time.

yep I ran into some dangers of running the nightly, but it was for good purpose, wanted/had to tests other issues related to the nightly (which are now solved).

jgw96 commented 7 years ago

No problem at all, very glad to hear the nightly has fixed your issues. Ill be closing this issue for now but feel free to open new issues if you run into something else!

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.