บทช่วยสอน เมนู pop-up ไอออนิก (ActionSheet) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่าง,
เมนู (ActionSheet) ป๊อปอัพผ่านทางช่องป๊อปขึ้นมาเพื่อให้ผู้ใช้สามารถเลือกตัวเลือก
ตัวเลือกที่อันตรายมากจะถูกเน้นด้วยสีแดงเป็นครั้งแรกที่จะระบุคน คุณสามารถคลิกปุ่มยกเลิกหรือคลิกสถานที่ว่างเปล่าจะทำให้มันหายไป
<body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">Action Sheet</h2> </ion-content> </ion-pane> </body>
เมนู pop-up ทริกเกอร์ในรหัสคุณจำเป็นต้องใช้บริการ $ ionicActionSheet ในการควบคุมเชิงมุมของคุณ:
angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){ $scope.show = function() { var hideSheet = $ionicActionSheet.show({ buttons: [ { text: '<b>Share</b> This' }, { text: 'Move' } ], destructiveText: 'Delete', titleText: 'Modify your album', cancelText: 'Cancel', cancel: function() { // add cancel codeth }, buttonClicked: function(index) { return true; } }); $timeout(function() { hideSheet(); }, 2000); }; }])
ผลการดำเนินงานดังนี้