In the nightly, the actionsheet CSS has a platform specific update for android. It removes the cancel button (I’m ok with that) but also renders everything else pretty ugly (not so okay with that). Here’s an example of what it looks like.
If you want to the looks to be same in android and iphone then find the below code block in css stylesheet and comment it out. Then it will look the same as in iphone.
@mhartington I just incorporated the full material spec for bottom-sheets into our ionic app. One thing you are currently missing is the ability to handle lists that are larger than the screen. In my implementation:
the first X items are displayed (similar to what you have)
the X+1 item is half visible at the bottom (UX to imply there are more)
you can drag the menu upwards and it snaps to the top of the screen
If all of the items aren’t visible, then the list is scrollable
Oh nice that looks awesome. Any chance you could share some code?
We’re not planning on adding anything else to ionic until we get to 1.0 final, but this would be something that would investigate.
I kind of hacked this together to work in a codepen. Its very specific to our app and not a turn key solution for everyone to use - but it might be helpful to someone building their own:
I had to make a bunch of hacky changes to prevent me needing to pull in a bunch of other dependencies.
If I may, this is due to Material’s design guidelines on bottom sheets quoted as follows:
Bottom sheets can be dismissed by swiping the bottom sheet down, by touching an explicit control such as an X in the app bar, or by touching the system back button (Android). Modal bottom sheets can also be dismissed by touching outside of the bottom sheet.
Also, I would like to add to the solution the following snippet of code for adding an icon only for Android:
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
destructiveText: (ionic.Platform.isAndroid()?'<i class="icon ion-android-exit assertive"></i> ':'')+'End Task',
cancelText: 'Cancel',
cancel: function() {
hideSheet();
},
destructiveButtonClicked: function(index) {
console.log('Clicked end task');
//your function
return true;
}
});
but it still looks the same on android: Textcolor is black and only when I click the destructive option, it changes to red for a short time (and it still doesn’t look so fancy as in ios)
I tweaked a couple things including some margins and text color to get it more like ios while trying to keep some material-design properties. In other words, just trying to make use-able and not some text bunched down in the corner of the screen:
