풀업 메뉴 (ActionSheet)를 통해 사용자는 팝업 상자를 통해 옵션을 선택할 수 있습니다.
매우 위험한 옵션은 강조 표시된 빨간색으로 인식됩니다. 취소 버튼을 클릭하거나 빈 공간을 클릭하여 사라질 수 있습니다.
예
HTML 코드
<body ng-app = "starter"ng-controller = "actionsheetctl"> <iion-pane> <iion-content> <h2 ng-click = "show ()"> 액션 시트 </h2> </ison-content> </ison-pane> </body>
자바 스크립트 코드
코드에서 풀업 메뉴를 트리거하려면 Angular Controller의 $ itionActionSheet 서비스가 필요합니다.
Angular.Module ( 'starter', [ 'Ionic']). run (function ($ itionicplatform) {$ irionicplatform.ready (function () {// 액세서리 막대를 기본적으로 숨기십시오 (window.cordova && window.corbob.keyboard). {cordova.plugins.keyboard.hidekeyboardAccessoryBar (true);} if (wind , function ($ scope, $ ionicActionSheet, $ timeout) {$ scope.show = function () {var hidesheet = $ itionicactionsheet.show ({텍스트 : '<b> share </b> this'}, {text : 'move'}], 'destructivetext :', titletext : ', 취소 : titletext :'ledletext : ', titletext :'ledletet : function () {// CANCEL CODE ..작동 효과는 다음과 같습니다.
완전한 출처 코드 :
<html> <head> <meta charset = "utf-8"> <meta name = "viewport"컨텐츠 = "초기 스케일 = 1, maximum-scale = 1, user-scalable = no, width = device-width"> </title> <link href = "http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css"rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3.3.3.3.3.3.3s/ionic.bundle.min.js"> type = "text/javaScript"> angular.Module ( 'starter', [ 'iOnic']). run (function ($ irionicplatform) {$ irionicplatform.ready (function () {// 액세서리 바를 기본적으로 숨기기 위해 (window.cordova.cordova. {cordova.plugins.keyboard.hidekeyboardAccessoryBar (true);} if (wind , function ($ scope, $ ionicActionSheet, $ timeout) {$ scope.show = function () {var hidesheet = $ itionicactionsheet.show ({텍스트 : '<b> share </b> this'}, {text : 'move'}], 'destructivetext :', titletext : ', 취소 : titletext :'ledletext : ', titletext :'ledletet : function () {// 취소 코드 추가 .. ng-click = "show ()"> 액션 시트 </h2> </ision-content> </iion-pane> </body> </html>위는 편집기가 소개 한 이온 풀업 메뉴 (ActionSheet) 인스턴스 코드에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!