2

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?

Vikasdeep Singh
  • 20,983
  • 15
  • 78
  • 104
Chris Rae
  • 5,627
  • 2
  • 36
  • 51
  • Creating a custom component or overwrite the css to make it to look like a ios toggle even if it just a checkbox element. – August Mar 31 '18 at 03:59
  • I'd say, don't try to replicate the look and feel of another OS. The user never expects that. – mihail Apr 18 '18 at 06:35
  • Is it useful? : https://codepen.io/anon/pen/jxONGy?editors=1010 – Dhruv Apr 18 '18 at 06:54

1 Answers1

1

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

Vikasdeep Singh
  • 20,983
  • 15
  • 78
  • 104
  • Wow. Thank you so much. I sat down at my desk today with a heavy heart, ready to start trying to copy chunks of iOS CSS all over the place with !important stuck to them and instead the whole thing is working exactly how I wanted in two minutes. Will award bounty as soon as I can. – Chris Rae Apr 18 '18 at 16:42
  • 1
    @ChrisRae You are welcome. I am happy that I could help you. – Vikasdeep Singh Apr 19 '18 at 00:03