
Bottom sheets
Bottom sheets can be displayed by clicking one of the buttons below.
$0.00
Details
- Version:
- 1.0
- Ionic:
- 1.x
- Platforms:
- iOS, Android
- Released:
- 5 years ago
- Updated:
- 5 years ago
- Category:
- Plugins
- Tags:
- ,
#Bottom sheets can be displayed by clicking one of the buttons below.
##Leave the template html aside the directive's javascript
<link rel="stylesheet" href="ng_bottomSheet.css">
<script type="text/javascript" src="bottomSheet.js"></script>
##Add dependencies on the ion-BottomSheet AngularJS module: angular.module('myApp', ['ion-BottomSheet']);
###You can now use the directive: $bottomSheet.show({
buttons: [
[
{btText:"1",btClass:"",btId:"1"},
{btText:"2",btClass:"",btId:"2"},
{btText:"3",btClass:"",btId:"3"}
],
[
{btText:"4",btClass:"",btId:"4"},
{btText:"5",btClass:"",btId:"5"},
{btText:"6",btClass:"",btId:"6"}
],
[
{btText:"7",btClass:"",btId:"7"},
{btText:"8",btClass:"",btId:"8"},
{btText:"9",btClass:"",btId:"9"}
],
[
{btText:"",btClass:"icon ion-chevron-down",btId:"hide",hideOnClick:true}, //hide the bottomSheet when click
{btText:"0",btClass:"",btId:"0"},
{btText:"",btClass:"icon ion-backspace",btId:"back"}
]
],
titleText: '',
buttonClicked: function(button,scope) {
if(button.btId=='1'){
alert('you click 1,will cancel');
scope.cancel()
return;
}
}
});
The property* "buttons" is an *2D array. You can use 'btClass' customize the button style