Search code examples
androidionic-frameworkionic-v1

Make Ionic 1 toggle switch look like the iOS one on Android

I'm working on an Ionic 1 project with a toggle switch in it. You know:

<ion-toggle>hello</ion-toggle>

It looks different on Android to iOS, and I prefer the iOS one. I know that in Ionic 2, I can do:

<ion-toggle mode="ios">hello</ion-toggle>

But this is an Ionic 1 project and I don't want to convert it to Ionic 2 just for this. Am I out of luck?

Solution

  • Yes you can do it using below two options:

    1. $ionicConfigProvider. You can configure lots of stuff(style/value/animation etc) using this. Use it inside myApp.config().

    Usage:

    var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {
  $ionicConfigProvider.views.maxCache(5);

  // note that you can also chain configs
  $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left');
});

    Your requirement: You need to style the toggle item using ``

    form.toggle(value) Toggle item style. Android defaults to small and iOS defaults to large.

    Use below if you want to set style for all the toggles in your project: $ionicConfigProvider.form.toggle('large');

    Checkout the form.toggle at this link :

    $ionicConfigProvider

    1. using CSS class: Add class="toggle-large" to ion-toggle like below to style specific toggle:

    <ion-toggle class="toggle-large">hello</ion-toggle>

    Working example code:

    https://codepen.io/anon/pen/jxONGy?editors=101