Need to Create Same UI for both ios and android

I need to create one app with common ui for both android and iOS. But while developing I faced like toggle, action sheets, check box look and feel are changed automatically. How to prevent the auto change and make default in ionic framework

For the toggle and checkbox, you can override them using the $ionicConfigProvider:

$ionicConfigProvider.form.toggle('large').checkbox('circle');

As for the action sheet, I don’t think a config variable exists, but you could pass a custom class name in cssClass and override the styling.

For example:

$scope.showActionSheet = function() {

// Show the action sheet
var hideSheet = $ionicActionSheet.show({
  buttons: [
    { text: '<b>Share</b> This' },
    { text: 'Move' }
  ],
  destructiveText: 'Delete',
  titleText: 'Modify your album',
  cancelText: 'Cancel',
  cssClass: 'ios-actionsheet'
});

Then in the CSS something like this:

.ios-actionsheet.action-sheet-backdrop.active {
  background-color: rgba(0, 0, 0, 0.4);
}

or you can just comment the android specific css in Ionics css/scss file, see this post:

3 Likes

Always rocking. Thanks a lot

1 Like

one more query on top of this.

  • How to make common actionsheet view as like android view ?
  • How to make common popover view as like IOS view ?