Ionic Action Sheet: Panduan Komplit untuk 2026

Saat ini, Anda mungkin berada di salah satu situasi. Entah Anda membutuhkan cara yang bersih untuk menampilkan beberapa aksi kontekstual tanpa memenuhi layar dengan tombol tambahan, atau Anda sudah mengirimkan sebuah sheet aksi ionic dan menemukan bahwa versi demo yang mudah tidak sama dengan implementasi yang siap produksi.

Perbedaan ini penting. Sebuah sheet aksi tampak sederhana, tapi berada di persimpangan antara desain interaksi, API framework, perilaku platform, aksesibilitas, dan perawatan setelah rilis. Jika Anda hanya menganggapnya sebagai popup dengan tombol, Anda akan melewatkan bagian yang biasanya rusak pada tahap QA.

Daftar Isi

• Pendahuluan tentang Sheet Aksi Ionik
  • Mengapa tim terus mencari hal ini
• Mengerti Kontroler Sheet Aksi dan API
  • Mengapa API dikendalikan oleh Kontroler
  • Opsi yang sebenarnya berpengaruh
  • Penolakan adalah bagian dari kontrak
• Contoh Implementasi untuk Angular React dan Vue
  • Contoh Angular
  • Contoh React
  • Contoh Vue
• Pengaturan dan Pengaturan Tampilan dengan CSS
  • Mulai dengan cssClass sebelum menggantikan pengaturan global
  • Gunakan properti kustom untuk tema yang luas
  • Gunakan bagian bayangan ketika Anda memerlukan ketelitian
• Topik Lanjutan dan Pertimbangan Platform
  • Komponen web atau plugin native
  • Mode platform dan detail aksesibilitas
• Pitfall Perbaikan dan Pengiriman UI Hidup
  • Masalah yang muncul setelah demo berfungsi
  • Pengaturan Area Aman yang Praktis
  • Mengapa Perbaruan Hidup Penting untuk Defek UI

Pengenalan ke Action Sheet Ioni

Action Sheet Ioni adalah alat yang tepat ketika pengguna memerlukan memilih kecil, fokus yang terkait dengan konteks saat ini. Hapus draft. Ganti foto profil. Simpan, bagikan, atau arsipkan dokumen. Tindakan ini penting, tetapi tidak layak tempat permanen di tata letak utama.

Di Ionic, pola yang telah konsisten selama waktu lama. Aplikasi Ionic sebelumnya menggunakan $ionicActionSheet service, yang TutorialsPoint deskripsikan sebagai panel yang muncul dari bawah layar dan ditampilkan dengan menginjeksi service dan memanggil show() di controller. Aplikasi modern menggunakan ion-action-sheet, tetapi model interaksi masih dapat dikenali sebagai sama, yang membuat komponen ini salah satu contoh yang lebih jelas dari Ionic mempertahankan pola UI mobile melintasi generasi framework di dokumentasi ringkasan sheet aksi Ionic 1 dari TutorialsPoint.

Kontinuitas ini berguna dalam proyek nyata. Ini berarti komponen ini bukanlah abstraksi tren yang berubah setiap rilis. Ini adalah pola mobile pertama yang stabil yang dapat dihubungkan dengan menu pilihan iOS dan Android, dan masih terasa alami di proyek Angular, React, dan Vue.

Mengapa tim terus mencari komponen ini

Sheet aksi berfungsi baik ketika pengguna sudah memahami konteks dan hanya membutuhkan daftar langkah selanjutnya yang padat. Komponen ini tidak berfungsi baik ketika pengguna membutuhkan penjelasan, validasi, atau beberapa bidang formulir.

Aturan sederhana membantu:

• Gunakan sheet aksi untuk menu keputusan singkat yang terkait dengan item tertentu.
• Gunakan peringatan When Anda memerlukan konfirmasi dengan pilihan yang minimal.
• Pilih Modul When pengguna memerlukan konten, input, atau penggeser yang lebih banyak.

Aturan Praktis: Jika label tombol tidak dapat berdiri sendiri tanpa teks paragraf tambahan, jangan memaksa interaksi ke dalam sheet aksi.

Dalam aplikasi hybrid, pola ini juga cocok dengan model web ke native. Antarmuka sederhana cukup untuk dirender di layer web, sementara masih terasa native pada perangkat sentuh. Jika tim Anda membangun pada Capacitor dan ingin memiliki model mental yang lebih jelas tentang batasan itu, pemahaman tentang bagaimana Capacitor menghubungkan web dan native __CAPGO_KEEP_1__ how Capacitor bridges web and native code Pengertian Kontroler Sheet Aksi dan __CAPGO_KEEP_0__

Understanding the Action Sheet Controller and API

Diagram alir yang menjelaskan arsitektur, konfigurasi, dan __CAPGO_KEEP_0__ komponen Kontroler Sheet Aksi.

API dikendalikan

In pekerjaan sehari-hari Ionic, pendekatan berbasis controller biasanya adalah pilihan yang paling bersih karena sheet aksi adalah sementara. Anda tidak ingin potongan besar markup template yang berada di halaman Anda untuk menu yang hanya muncul setelah sentuhan pada ikon overflow.

Official Ionic docs mendefinisikan Action Sheet sebagai dialog modal yang memerlukan pengakhiran pengguna, dan mereka menempatkan banyak tekanan pada metode siklus pengakhiran seperti onDidDismiss untuk logika seleksi pasca- di dokumen Action Sheet Ionic API. Desain itu memberitahu Anda bagaimana mengatur code. Hadapi terlebih dahulu. Beraksi setelah pengakhiran. Jangan menghubungkan logika kritis ke asumsi tentang waktu.

Opsi yang sebenarnya berpengaruh

Banyak tim hanya membutuhkan subset kecil dari API, tetapi mereka perlu menggunakan subset tersebut dengan benar.

Konfigurasi tombol adalah tempat di mana kesalahan biasanya terjadi. Tombol biasa dapat mencakup:

• text untuk label yang terlihat.
• icon Jika Anda ingin tanda visual.
• handler Untuk logika panggilan balik segera.
• role Untuk perilaku semantik dan gaya platform.

role tidaklah dekoratif. Gunakan destructive Untuk aksi berbahaya seperti hapus. Gunakan cancel Untuk jalur kecemasan. Peran-peran tersebut mempengaruhi bagaimana sheet aksi menampilkan pilihan dan bagaimana pengguna membaca daftar di bawah tekanan.

Aksi berbahaya harus berada di tepi set pilihan, bukan dicampur dengan aksi netral dengan berat visual yang sama.

Penolakan adalah bagian dari kontrak

Bug yang umum terjadi seperti ini: seorang pengembang membuka sheet aksi, menganggap hasil handler sudah cukup, kemudian mengaktifkan navigasi atau memperbarui state sebelum overlay telah sepenuhnya ditutup. Hal itu dapat menghasilkan transisi yang tidak halus, state yang ketinggalan, atau kondisi balap di tes.

Gunakan siklus secara sengaja:

1. Buat sheet.
2. await present().
3. await onDidDismiss().
4. Baca peran atau data yang dikembalikan.
5. Triggerkan aksi berikutnya.

Pola itu membosankan, dan itu mengapa itu berhasil.

Contoh sederhana Angular-style dari bentuknya adalah:

const sheet = await this.actionSheetController.create({
  header: 'Photo options',
  buttons: [
    {
      text: 'Take Photo',
      icon: 'camera',
      handler: () => {
        console.log('take photo');
      }
    },
    {
      text: 'Delete Photo',
      role: 'destructive',
      icon: 'trash'
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
  ]
});

await sheet.present();

const result = await sheet.onDidDismiss();
console.log('dismissed with role:', result.role);

Jika Anda hanya ingat satu hal dari API, ingatlah ini: Tindakan sheet ionic bukanlah selesai ketika muncul. Ini selesai ketika ditutup.

Contoh Implementasi untuk Angular React dan Vue

Struktur sintaks berubah di antara framework, tapi model mentalnya tidak. Setiap versi menciptakan interaksi yang sama: pengguna mengetuk avatar, melihat opsi untuk foto profil, memilih aksi, dan aplikasi bereaksi setelah overlay tertutup.

Jika Anda juga mengelola keadaan offline untuk unggahan media, panduan ini untuk membuat layar offline di Vue Angular React cocok dengan contoh di bawah karena aksi foto seringkali langsung menuju ke aliran yang bergantung pada jaringan.

Contoh Angular

Dalam Ionic Angular, pendekatan yang paling umum adalah menginjeksi ActionSheetController ke dalam komponen atau halaman.

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-profile-photo',
  template: `
    <ion-button expand="block" (click)="openPhotoActions()">
      Profile Photo Options
    </ion-button>
  `
})
export class ProfilePhotoComponent {
  constructor(private actionSheetController: ActionSheetController) {}

  async openPhotoActions() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Profile photo',
      subHeader: 'Choose what to do next',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            console.log('Open camera flow');
          }
        },
        {
          text: 'Choose from Library',
          icon: 'images',
          handler: () => {
            console.log('Open photo library flow');
          }
        },
        {
          text: 'Remove Current Photo',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Remove current photo');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });

    await actionSheet.present();

    const { role } = await actionSheet.onDidDismiss();
    console.log('Action sheet dismissed with role:', role);
  }
}

Tim Angular biasanya salah di salah satu tempat. Mereka entah memindahkan logika terlalu banyak ke handler tombol, atau mereka lupa bahwa janji penolakan adalah tempat yang lebih aman untuk mengkoordinasikan transisi UI.

Contoh React

Dalam Ionic React, useIonActionSheet memberikan Anda fungsi API yang padat dan fungsional yang sesuai dengan alami dengan handler acara.

import React from 'react';
import { IonButton, useIonActionSheet } from '@ionic/react';

const ProfilePhotoActions: React.FC = () => {
  const [presentActionSheet] = useIonActionSheet();

  const openPhotoActions = () => {
    presentActionSheet({
      header: 'Profile photo',
      subHeader: 'Choose what to do next',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            console.log('Open camera flow');
          }
        },
        {
          text: 'Choose from Library',
          icon: 'images',
          handler: () => {
            console.log('Open photo library flow');
          }
        },
        {
          text: 'Remove Current Photo',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Remove current photo');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ],
      onDidDismiss: (event) => {
        console.log('Dismissed with role:', event.detail.role);
      }
    });
  };

  return (
    <IonButton expand="block" onClick={openPhotoActions}>
      Profile Photo Options
    </IonButton>
  );
};

export default ProfilePhotoActions;

Hook API React ergonomis, tetapi aturan yang sama berlaku. Tetapkan handler langsung fokus pada aksi yang dipilih. Gunakan panggilan balik penolakan untuk membersihkan, analisis, atau keadaan UI lanjutan.

Contoh Vue

Dalam Ionic Vue, actionSheetController berfungsi dengan baik di dalam API Komposisi.

<template>
  <ion-button expand="block" @click="openPhotoActions">
    Profile Photo Options
  </ion-button>
</template>

<script setup lang="ts">
import { IonButton, actionSheetController } from '@ionic/vue';

const openPhotoActions = async () => {
  const actionSheet = await actionSheetController.create({
    header: 'Profile photo',
    subHeader: 'Choose what to do next',
    buttons: [
      {
        text: 'Take Photo',
        icon: 'camera',
        handler: () => {
          console.log('Open camera flow');
        }
      },
      {
        text: 'Choose from Library',
        icon: 'images',
        handler: () => {
          console.log('Open photo library flow');
        }
      },
      {
        text: 'Remove Current Photo',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Remove current photo');
        }
      },
      {
        text: 'Cancel',
        role: 'cancel'
      }
    ]
  });

  await actionSheet.present();

  const result = await actionSheet.onDidDismiss();
  console.log('Dismissed with role:', result.role);
};
</script>

Perbedaan praktis dalam proyek Vue adalah di mana Anda menyimpan efek samping. Jika aplikasi Anda menggunakan komposabel untuk logika kamera atau pilih file, panggil dari handler dan biarkan pengontrol code tipis.

Tetapkan code spesifik framework Anda kecil. Logika bisnis untuk kamera, unggah, hapus, dan analisis harus hidup di luar pengaturan sheet aksi.

Penyesuaian dan Pengaturan Tampilan dengan CSS

Stilisasi boks aksi ionic default biasanya cukup baik untuk prototipe. Namun, tidak selalu cukup baik untuk aplikasi yang sudah memiliki branding, dan tentu saja tidak cukup ketika desain ingin memiliki jarak yang lebih rapat, tipografi yang berbeda, atau aksi penghancuran yang lebih jelas.

Jika tim Anda mencoba membuat aplikasi seluruhnya terasa kurang seperti pembungkus web generik dan lebih seperti produk asli, artikel ini tentang konfigurasi dasar JS dan CSS untuk tampilan aplikasi asli adalah teman yang berguna untuk penyesuaian dan pengaturan tampilan boks aksi.

Buatlah cssClass sebelum mengganti pengaturan global.

Aturan pengaturan tampilan pertama adalah sederhana. Jangan target setiap boks aksi di aplikasi kecuali Anda benar-benar berencana untuk melakukannya. Gunakan cssClass untuk membatasi varian tertentu.

const sheet = await actionSheetController.create({
  header: 'File actions',
  cssClass: 'file-actions-sheet',
  buttons: [
    { text: 'Rename' },
    { text: 'Delete', role: 'destructive' },
    { text: 'Cancel', role: 'cancel' }
  ]
});

Lalu atur hanya varian tersebut:

.file-actions-sheet {
  --background: #101418;
  --color: #f5f7fa;
  --backdrop-opacity: 0.4;
}

Metode ini lebih dapat menyesuaikan diri daripada mengejar selektor kemudian.

Pakai properti kustom untuk tema yang luas

CSS custom properties adalah cara termudah untuk mengubah kesan secara keseluruhan tanpa bertempur dengan struktur komponen.

Kasus penggunaan umum termasuk:

• Warna latar belakang dan teks ketika aplikasi Anda memiliki palet warna kustom gelap.
• Ketajaman latar belakang ketika penurunan default terasa terlalu lemah atau terlalu berat.
• Spasi dan ukuran ketika kepadatan visual harus sesuai dengan antarmuka lainnya.

.file-actions-sheet {
  --background: #1b1f24;
  --color: #ffffff;
  --backdrop-opacity: 0.32;
  --button-color: #dce3ea;
  --button-background-hover: #2a3138;
}

Gunakan bagian bayangan ketika Anda membutuhkan ketelitian

Ketika desain meminta perubahan yang sasaran, properti kustom mungkin tidak cukup. Itulah saat Bagian Bayangan berperan. Mereka memungkinkan Anda mengatur area internal sheet aksi secara lebih langsung.

.file-actions-sheet::part(container) {
  border-radius: 18px 18px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

.file-actions-sheet::part(button) {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.file-actions-sheet::part(backdrop) {
  backdrop-filter: blur(4px);
}

Apa yang biasanya tidak berfungsi dengan baik adalah menghias komponen hingga terlalu berlebihan dan tidak lagi merasa seperti menu pilihan sistem. Jika Anda membutuhkan kartu yang kaya, thumbnail, deskripsi panjang, atau tata letak bar kompleks, Anda telah melewatkan pola sheet aksi.

Pemindaian kustom yang baik harus membuat komponen sesuai dengan aplikasi, bukan menyembunyikan apa yang ada.

Topik-Topik Lanjutan dan Pertimbangan Platform

Aksi sheet produksi hidup di ruang keputusan yang lebih besar daripada kebanyakan tutorial yang mengakui. Anda tidak hanya memilih label tombol. Anda memutuskan apakah overlay harus dirender oleh layer web Ionic atau didelegasikan ke antarmuka native, seberapa kuat Anda ingin perilaku khusus platform, dan bagaimana memastikan sheet tetap dapat dipahami oleh semua pengguna.

Komponen web atau plugin native

Jika Anda membangun aplikasi Ionic standar, ion-action-sheet biasanya adalah default. Ini fleksibel, mudah diatur gaya, dan bekerja konsisten dengan sistem overlay aplikasi Anda lainnya.

Jika aplikasi Anda berbasis Capacitor dan Anda ingin sistem operasi host mengrender sheet, rute native adalah @capacitor/action-sheet. Dokumen Ionic yang mengelilingi showActions(options) -> Promise<ShowActionsResult>, diinstal dengan npm install @capacitor/action-sheet , dan disinkronkan dengan npx cap sync, sementara juga menyoroti bahwa Elemen PWA diperlukan dalam konteks web dan PWA dalam bahasa Indonesia Capacitor Dokumen plugin Sheet Aksi.

Itu memberikan Anda tabel perdagangan yang lebih praktis:

Gunakan komponen web ketika konsistensi visual dengan aplikasi Anda lebih penting. Gunakan plugin asli ketika kesetaraan platform lebih penting daripada kontrol CSS yang dalam.

Mode platform dan detail aksesibilitas

Ionic dapat menyesuaikan diri dengan mode iOS dan Material Design, dan itu mempengaruhi jarak, gerakan, dan ton visual keseluruhan. Jangan asumsikan gaya Anda berperilaku sama di kedua mode. Uji keduanya secara sengaja, terutama jika tim Anda memaksa mode tunggal di semua platform.

Kemampuan aksesibilitas juga sering diabaikan karena sheet aksi terlihat kecil. Dasar-dasar masih penting:

• Gunakan teks tombol yang jelas yang membuat arti di luar konteks.
• Simpan destructive untuk aksi berisiko agar antarmuka komunikasi tujuan.
• Tetapkan cancel jelas agar pengguna memiliki jalur keluar yang jelas.
• Hindari ketidakjelasan hiasan di mana beberapa aksi terdengar mirip tetapi memiliki hasil yang sangat berbeda.

A pengguna dengan pembaca layar atau keterbatasan beban kognitif tidak mengalami "overlay" yang "sederhana" sebagai sederhana jika labelnya tidak jelas.

Kesulitan tajam di sini adalah bahwa pendekatan asli dan web menyelesaikan masalah yang berbeda. Komponen web memberikan Anda lebih banyak kontrol atas penampilan dan integrasi. Plugin asli memberikan alihan platform yang lebih kuat. Tidak ada yang lebih baik secara otomatis. Jawaban yang tepat tergantung pada apakah masalah aplikasi saat ini Anda adalah konsistensi visual, kecepatan implementasi, atau perilaku sistem asli.

Pitfalls dan Perbaikan UI Langsung untuk Pengiriman

Banyak bug sheet aksi ionik tidak muncul ketika Anda pertama kali menghubungkan tiga tombol dan mengetuk melalui mereka di simulator. Mereka muncul kemudian, ketika sheet diatur, diuji pada perangkat baru, dan dikombinasikan dengan navigasi nyata dan transisi keadaan.

Bugs yang muncul setelah demo berfungsi

Kelas pertama bug adalah waktu. Logika berjalan terlalu awal karena code tidak menunggu pembatalan. Anda melihat perubahan rute saat overlay masih animasi, atau pembaruan keadaan yang bersaing melawan komponen lainnya yang menampilkan.

Kelas kedua adalah tata letak. Masalah Ionic yang diketahui melaporkan bahwa sheet aksi dapat menutupi area aman bawah pada beberapa perangkat iOS kondisi, terutama ketika --ion-safe-area-bottom tidak nol, dan laporan masalah mencatat bahwa bahkan dapat direproduksi di demo dokumen Ionic sendiri di masalah GitHub tentang overlap area aman bawah.Masalah ini adalah jenis masalah yang tim tidak lewatkan sampai QA akhir karena tergantung pada bentuk perangkat, mode, dan CSS kustom.

A solusi area aman yang praktis

Jika aplikasi Anda menampilkan sheet terlalu dekat dengan area indikator rumah, mulai dengan override yang terbatas daripada patch global yang luas.

.safe-area-sheet::part(container) {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

Kemudian aplikasikan kelas ketika membuat sheet aksi:

const sheet = await actionSheetController.create({
  header: 'More actions',
  cssClass: 'safe-area-sheet',
  buttons: [
    { text: 'Archive' },
    { text: 'Delete', role: 'destructive' },
    { text: 'Cancel', role: 'cancel' }
  ]
});

Namun itu tidak akan menggantikan pengujian perangkat yang tepat, tetapi memberikan Anda tempat yang konkrit untuk memulai tanpa mengubah setiap overlay di aplikasi.

Mengapa pembaruan hidup penting untuk defek UI

Kenyataan praktis operasi rilis menjadi jelas. Regresi area aman, aturan padding yang rusak, atau warna tombol destructive yang buruk sering hidup di JavaScript atau CSS. Jika bug itu berlayar ke produksi, menunggu rilis toko penuh dapat mengubah defek visual kecil menjadi hari frustrasi pengguna.

Salah satu pilihan praktis adalah layanan pembaruan hidup untuk aplikasi Capacitor. Misalnya Capgo mengirimkan paket web yang diperbarui sehingga tim dapat mengirimkan perbaikan JavaScript, CSS, salinan, konfigurasi, dan aset tanpa menunggu ulasan toko aplikasi, yang secara langsung relevan ketika bug gaya sheet aksi atau overlay melintas di QA.

Overlay UI tepatnya adalah fitur di mana jaringan keamanan itu membayar. Mereka sangat terlihat, mudah rusak dengan perubahan gaya kecil, dan biasanya dapat diperbaiki tanpa membangun kembali native code.

Jika tim Anda sering mengirimkan aplikasi Ionic atau Capacitor, Capgo perlu dievaluasi sebagai bagian dari alur pelepasan Anda. Ini memberi Anda cara untuk memasukkan perbaikan layer web untuk masalah seperti bug tata letak sheet aksi, regresi gaya, dan kesalahan salinan setelah pelepasan, sementara menjaga kendali atas saluran perluasan dan perilaku pembaruan.

Teruskan dari Ionic Action Sheet: Panduan Lengkap untuk 2026

Jika Anda menggunakan Ionic Action Sheet: Panduan Lengkap untuk 2026 untuk merencanakan migrasi dan operasi bisnis, hubungkannya dengan Capgo Enterprise untuk alur kerja produk di Capgo Enterprise, Ionic Enterprise Plugin Alternatives untuk alur kerja produk di Ionic Enterprise Plugin Alternatives, Capgo Alternatives untuk alur kerja produk di Capgo Alternatives, Capgo Consulting untuk alur produk di Capgo Consulting, dan Capgo Support Premium untuk alur produk di Capgo Support Premium.