เมนู pull-up (ActionSheet) อนุญาตให้ผู้ใช้เลือกตัวเลือกผ่านช่องที่ปรากฏขึ้น
ตัวเลือกที่อันตรายมากจะได้รับการยอมรับในสีแดงไฮไลต์ คุณสามารถทำให้มันหายไปได้โดยคลิกที่ปุ่มยกเลิกหรือคลิกที่ว่าง
ตัวอย่าง
รหัส HTML
<body ng-app = "starter" ng-controller = "actionsheetctl"> <ion-pane> <ion-content> <h2 ng-click = "show ()"> แผ่นแอ็คชั่น </h2> </ion-content> </ion-pane>
รหัส JavaScript
การเรียกเมนูแบบดึงขึ้นในรหัสต้องใช้บริการ $ ionicactionsheet ในตัวควบคุมเชิงมุมของคุณ:
Angular.module ('Starter', ['Ionic']). Run (ฟังก์ชั่น ($ ionicplatform) {$ ionicplatform.ready (function () {// ซ่อนแถบอุปกรณ์เสริมโดยค่าเริ่มต้น (ลบสิ่งนี้เพื่อแสดงแถบอุปกรณ์เสริมด้านบนคีย์บอร์ด // {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} ถ้า (window.statusbar) {statusbar.styledefault ();}});}) คอนโทรลเลอร์ ('actionsheetctl', ['$ scope', ' , function ($ scope, $ ionicactionsheet, $ timeout) {$ scope.show = function () {var hidesheet = $ ionicactionsheet.show ({ปุ่ม: [{text: '<b> แบ่งปัน </b> this'}, {text: 'move'} 'Cancel', Cancel: function () {// เพิ่มรหัสยกเลิก .. }, buttonClicked: ฟังก์ชั่น (ดัชนี) {return true;}}); $ timeout (function () {hidesheet ();}, 2000);เอฟเฟกต์การดำเนินการมีดังนี้:
ซอร์สโค้ดที่สมบูรณ์:
<html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "เริ่มต้น = 1, ขนาดสูงสุด = 1 href = "http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel = "Stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.3 type = "text/javascript"> angular.module ('starter', ['ionic']). run (ฟังก์ชั่น ($ ionicplatform) {$ ionicplatform.ready (ฟังก์ชั่น () {// ซ่อนแถบอุปกรณ์เสริมโดยค่าเริ่มต้น {cordova.plugins.keyboard.hidekeyboardaccessorybar (true);} ถ้า (window.statusbar) {statusbar.styledefault ();}});}) คอนโทรลเลอร์ ('actionsheetctl', ['$ scope', ' , function ($ scope, $ ionicactionsheet, $ timeout) {$ scope.show = function () {var hidesheet = $ ionicactionsheet.show ({ปุ่ม: [{text: '<b> แบ่งปัน </b> this'}, {text: 'move'} 'Cancel', Cancel: function () {// เพิ่มรหัสยกเลิก .. }, buttonclicked: ฟังก์ชั่น (ดัชนี) {return true;}}); $ timeout (function () {hidesheet ();}, 2000);}; > <pane-pane> <ion-content> <h2 ng-click = "show ()"> แผ่นการกระทำ </h2> </ion-content> </ion-pane> </body> </html>ด้านบนเป็นความรู้ที่เกี่ยวข้องของรหัสอินสแตนซ์แบบดึงขึ้น (ActionSheet) Ionic (ActionSheet) ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!