Ionic Action Sheet: Panduan Lengkap untuk 2026

Anda kemungkinan besar sedang dalam salah satu dari dua situasi ini. Entah Anda membutuhkan cara yang bersih untuk menampilkan beberapa aksi kontekstual tanpa membebani layar dengan tombol tambahan, atau Anda sudah merilis ionic action sheet dan menyadari bahwa versi demo yang mudah tidak sama dengan implementasi yang siap produksi.

Kesenjangan itu penting. Action sheet terlihat sederhana, tetapi berada di persimpangan interaksi desain, API framework, perilaku platform, aksesibilitas, dan pemeliharaan pasca-rilis. Jika Anda hanya memandangnya sebagai popup dengan tombol, Anda akan melewatkan bagian yang biasanya bermasalah di akhir QA.

Table of Contents

• Pengantar Ionic Action Sheet
  • Mengapa tim terus menggunakannya
• Memahami Action Sheet Controller dan API
  • Mengapa API berbasis controller
  • Opsi yang benar-benar penting
  • Dismissal adalah bagian dari kontrak
• Contoh Implementasi untuk Angular, React, dan Vue
  • Contoh Angular
  • Contoh React
  • Contoh Vue
• Kustomisasi dan Styling dengan CSS
  • Mulai dengan cssClass sebelum override global
  • Gunakan custom properties untuk theming luas
  • Gunakan shadow parts saat butuh presisi
• Topik lanjutan dan pertimbangan platform
  • Web component atau native plugin
  • Mode platform dan detail aksesibilitas
• Jebakan troubleshooting dan merilis perbaikan UI live
  • Bug yang muncul setelah demo berhasil
  • Solusi praktis untuk safe area
  • Kenapa live updates penting untuk defect UI

Pengantar Ionic Action Sheet

Ionic action sheet adalah alat yang tepat ketika pengguna perlu membuat pilihan kecil dan fokus yang terkait dengan konteks saat ini. Menghapus draf. Mengganti foto profil. Menyimpan, membagikan, atau mengarsipkan dokumen. Aksi-aksi ini penting, tetapi tidak layak mendapat ruang permanen di layout utama.

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

Kontinuitas ini berguna di proyek nyata. Artinya, komponen ini bukan abstraksi yang ikut tren dan berubah tiap rilis. Ini pola mobile-first yang stabil, cocok untuk menu opsi iOS dan Android, dan tetap terasa natural di proyek Angular, React, dan Vue.

Mengapa tim terus menggunakannya

Action sheet bekerja baik saat pengguna sudah paham konteks dan hanya butuh daftar langkah berikutnya yang ringkas. Namun, ini kurang efektif jika pengguna butuh penjelasan, validasi, atau beberapa field form.

Aturan sederhananya:

• Gunakan action sheet untuk menu keputusan singkat yang terkait dengan item tertentu.
• Gunakan alert saat Anda butuh konfirmasi dengan opsi minimal.
• Gunakan modal saat pengguna butuh lebih banyak konten, input, atau scrolling.

Aturan praktis: Jika label tombol tidak bisa berdiri sendiri tanpa teks tambahan, jangan paksa interaksi tersebut masuk ke dalam action sheet.

Pada aplikasi hybrid, pola ini sangat cocok dengan model web-to-native. UI-nya cukup simpel untuk dirender di layer web, namun tetap terasa native di perangkat layar sentuh. Jika tim Anda membangun di atas Capacitor dan ingin model mental yang lebih jelas tentang batasan tersebut, penjelasan mengenai bagaimana Capacitor menjembatani web dan native code perlu diingat saat Anda memutuskan di mana action sheet sebaiknya ditempatkan.

Memahami Action Sheet Controller dan API

Action sheet akan lebih mudah dipahami jika Anda tidak lagi menganggapnya sekadar komponen inline biasa. Ia lebih berperan sebagai overlay sementara dengan lifecycle sendiri. Anda membuatnya, menampilkannya, menunggu user, lalu menangani hasilnya setelah ditutup.

Mengapa API berbasis controller

Dalam pekerjaan Ionic sehari-hari, pendekatan berbasis controller biasanya merupakan opsi terbersih karena action sheet bersifat ephemeral. Anda tidak ingin tumpukan markup template memenuhi halaman hanya untuk menu yang baru muncul setelah ikon overflow diketuk.

Dokumentasi resmi Ionic mendefinisikan Action Sheet sebagai dialog modal yang mengharuskan user menutupnya, dan sangat menekankan method lifecycle dismissal seperti onDidDismiss untuk logika pasca-seleksi di dokumen Ionic Action Sheet API. Desain itu menunjukkan cara menstruktur code Anda. Tampilkan dulu. Bereaksi setelah ditutup. Jangan kaitkan logika kritis dengan asumsi tentang timing.

Opsi yang benar-benar penting

Sebagian besar tim hanya butuh subset kecil dari API, tapi mereka harus menggunakan subset itu dengan benar.

Konfigurasi button sering menjadi sumber kesalahan. Button pada umumnya dapat berisi:

• text untuk label yang terlihat.
• icon jika Anda ingin petunjuk visual.
• handler untuk logika callback instan.
• role untuk perilaku semantik dan styling platform.

role bukan sekadar dekorasi. Gunakan destructive untuk aksi berbahaya seperti hapus. Gunakan cancel untuk jalur keluar. Peran-peran ini memengaruhi bagaimana action sheet menyajikan pilihan dan bagaimana pengguna membaca daftar di bawah tekanan.

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

Dismissal adalah bagian dari kontrak

Bug umum terjadi seperti ini: developer membuka action sheet, mengasumsikan hasil handler sudah cukup, lalu memicu navigasi atau pembaruan state sebelum overlay benar-benar tertutup. Hal ini bisa menghasilkan transisi yang patah-patah, state yang usang, atau race conditions dalam test.

Gunakan lifecycle secara sengaja:

1. Buat sheet-nya.
2. await present().
3. await onDidDismiss().
4. Baca role atau data yang dikembalikan.
5. Picu aksi berikutnya.

Pola itu membosankan, dan justru karena itu ia berhasil.

Berikut contoh gaya Angular sederhana tentang strukturnya:

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 mengingat satu hal dari API, ingat ini: Sebuah ionic action sheet tidak selesai saat muncul. Ia selesai saat ditutup.

Contoh Implementasi untuk Angular, React, dan Vue

Sintaksnya berubah antar framework, tetapi model mentalnya tidak. Setiap versi menciptakan interaksi yang sama: pengguna mengetuk avatar, melihat opsi untuk foto profil, memilih satu aksi, dan aplikasi merespons setelah overlay ditutup.

Jika Anda juga menangani status offline untuk upload media, panduan ini tentang membuat layar offline di Vue Angular React berpasangan dengan contoh di bawah karena aksi foto sering langsung masuk ke alur yang bergantung pada jaringan.

Contoh Angular

Di Ionic Angular, pendekatan paling umum adalah meng-inject 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 keliru di salah satu dari dua area. Mereka memindahkan terlalu banyak logika ke handler tombol, atau lupa bahwa promise dismissal adalah tempat yang lebih aman untuk mengoordinasikan transisi UI.

Contoh React

Di Ionic React, useIonActionSheet memberi Anda API fungsional yang ringkas dan cocok secara alami dengan event handler.

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 di React sangat ergonomis, tetapi aturan yang sama berlaku. Jaga agar handler langsung tetap fokus pada aksi yang dipilih. Gunakan callback dismissal untuk cleanup, analitik, atau status UI lanjutan.

Contoh Vue

Di Ionic Vue, actionSheetController berjalan mulus di dalam Composition API.

<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 di proyek Vue adalah di mana Anda menyimpan efek samping. Jika aplikasi Anda menggunakan composables untuk logika kamera atau file-picker, panggil dari handler dan biarkan controller code tetap tipis.

Jaga agar code yang spesifik framework tetap kecil. Logika bisnis untuk kamera, upload, hapus, dan analitik sebaiknya diletakkan di luar setup action sheet.

Kustomisasi dan Styling dengan CSS

Styling default ionic action sheet biasanya sudah cukup untuk prototipe. Namun, ini belum tentu cukup untuk aplikasi berbrand, apalagi jika tim desain menginginkan spacing yang lebih rapat, tipografi berbeda, atau aksi destruktif yang lebih jelas.

Jika tim Anda ingin aplikasi terasa kurang seperti web wrapper generik dan lebih seperti produk native, artikel ini tentang konfigurasi JS dan CSS dasar untuk tampilan aplikasi native adalah pendamping yang berguna untuk styling action sheet.

Mulai dengan cssClass sebelum override global

Aturan styling pertama itu sederhana. Jangan targetkan semua action sheet di aplikasi kecuali memang bermaksud demikian. 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 style hanya instance tersebut:

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

Pendekatan itu lebih mudah diskalakan daripada mengejar selector di kemudian hari.

Gunakan custom properties untuk theming luas

CSS custom properties adalah cara tercepat untuk mengubah nuansa keseluruhan tanpa harus melawan struktur komponen.

Kasus penggunaan umum meliputi:

• Warna latar belakang dan teks ketika aplikasi Anda memiliki palet gelap kustom.
• Opasitas backdrop ketika peredupan default terasa terlalu lemah atau terlalu berat.
• Jarak dan ukuran ketika kepadatan visual harus sesuai dengan sisa antarmuka Anda.

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

Gunakan shadow parts saat butuh presisi

Begitu desain meminta perubahan yang ditargetkan, custom properties mungkin tidak cukup. Di sinilah Shadow Parts berperan. Mereka memungkinkan Anda menstyle area internal action sheet 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);
}

Yang biasanya tidak berhasil adalah over-styling komponen hingga tidak lagi terasa seperti menu pilihan tingkat sistem. Jika Anda membutuhkan kartu kaya, thumbnail, deskripsi panjang, atau tata letak baris yang kompleks, Anda sudah melampaui pola action sheet.

Kustomisasi yang baik harus membuat komponen sesuai dengan aplikasi Anda, bukan menyamarkan identitas aslinya.

Topik lanjutan dan pertimbangan platform

Action sheet di produksi berada dalam ruang keputusan yang lebih besar daripada yang diakui kebanyakan tutorial. Anda tidak hanya memilih label tombol. Anda memutuskan apakah overlay harus dirender oleh lapisan web Ionic atau didelegasikan ke UI native, seberapa kuat perilaku spesifik platform yang Anda inginkan, dan bagaimana memastikan sheet tetap mudah dipahami oleh semua pengguna.

Web component atau native plugin

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

Jika aplikasi Anda berbasis Capacitor dan Anda ingin sistem operasi host yang merender sheet tersebut, rute native-nya adalah @capacitor/action-sheet. Ionic mendokumentasikan plugin tersebut di sekitar showActions(options) -> Promise<ShowActionsResult>, yang diinstal dengan npm install @capacitor/action-sheet dan disinkronkan dengan npx cap sync, sekaligus mencatat bahwa PWA Elements diperlukan dalam konteks web dan PWA di dalam Dokumentasi plugin Capacitor Action Sheet.

Berikut adalah tabel perbandingan praktisnya:

Gunakan web component ketika konsistensi visual dengan aplikasi Anda lebih penting. Gunakan plugin native ketika fidelitas platform lebih penting daripada kontrol CSS yang mendalam.

Mode platform dan detail aksesibilitas

Ionic dapat beradaptasi dengan mode iOS dan Material Design, yang memengaruhi spacing, motion, dan nuansa visual keseluruhan. Jangan asumsikan styling Anda berperilaku sama di kedua mode. Uji keduanya secara sengaja, terutama jika tim Anda memaksa satu mode di semua platform.

Accessibility juga sering terlewat karena action sheet terasa kecil. Hal-hal dasar tetap penting:

• Gunakan teks tombol yang jelas yang masuk akal di luar konteks.
• Sisihkan destructive untuk aksi berisiko agar antarmuka mengomunikasikan niat.
• Pertahankan cancel eksplisit agar pengguna memiliki jalur keluar yang jelas.
• Hindari ambiguitas dekoratif di mana beberapa tindakan terdengar mirip tetapi memiliki hasil yang sangat berbeda.

Pengguna dengan screen reader atau keterbatasan kognitif tidak akan merasakan overlay “sederhana” sebagai sesuatu yang sederhana jika labelnya ambigu.

Tantangan utamanya adalah pendekatan native dan web menyelesaikan masalah yang berbeda. Komponen web memberi Anda lebih banyak kontrol atas tampilan dan integrasi. Plugin native memberi Anda keselarasan platform yang lebih kuat. Tidak ada yang otomatis lebih baik. Jawaban yang tepat bergantung pada apakah masalah aplikasi Anda saat ini adalah konsistensi visual, kecepatan implementasi, atau perilaku sistem-native.

Jebakan troubleshooting dan merilis perbaikan UI live

Sebagian besar bug ionic action sheet tidak muncul saat Anda pertama kali mengatur tiga tombol dan mengetuknya di simulator. Mereka muncul kemudian, ketika sheet diberi gaya, diuji pada perangkat yang lebih baru, dan dikombinasikan dengan navigasi dan transisi state yang nyata.

Bug yang muncul setelah demo berhasil

Kelas bug pertama adalah timing. Logika berjalan terlalu awal karena code tidak menunggu penutupan. Anda melihat perubahan rute saat overlay masih beranimasi, atau pembaruan state yang bersaing dengan render komponen lain.

Kelas kedua adalah layout. Masalah Ionic yang diketahui melaporkan bahwa action sheet dapat tumpang tindih dengan area aman bawah pada beberapa kondisi perangkat iOS, terutama ketika --ion-safe-area-bottom tidak nol, dan laporan masalah mencatat bahwa hal ini bahkan dapat direproduksi di demo dokumentasi Ionic sendiri di masalah GitHub tentang tumpang tindih area aman bawah. Ini persis jenis masalah yang sering terlewat tim sampai tahap QA akhir, karena bergantung pada bentuk perangkat, mode, dan CSS kustom.

Solusi praktis untuk safe area

Jika aplikasi Anda menampilkan sheet terlalu dekat dengan area home indicator, mulailah dengan override yang ter-scope, bukan patch global yang luas.

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

Lalu terapkan class saat membuat action sheet:

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

Ini tidak menggantikan pengujian perangkat yang tepat, tetapi memberi Anda titik awal konkret tanpa mengubah setiap overlay di aplikasi.

Kenapa live updates penting untuk defect UI

Realitas praktis operasi rilis menjadi jelas. Regresi safe-area, aturan padding yang rusak, atau warna tombol destruktif yang salah sering kali ada di JavaScript atau CSS. Jika bug itu sampai ke produksi, menunggu rilis store penuh bisa mengubah cacat visual kecil menjadi frustrasi pengguna selama berhari-hari.

Salah satu opsi praktis adalah layanan live update untuk aplikasi Capacitor. Misalnya, Capgo mengirimkan web bundle yang diperbarui sehingga tim dapat merilis perbaikan JavaScript, CSS, copy, config, dan aset tanpa menunggu review app store, yang sangat relevan ketika bug styling action sheet atau overlay lolos dari QA.

UI overlay adalah persis jenis fitur di mana jaring pengaman itu membuahkan hasil. Mereka sangat terlihat, mudah rusak dengan perubahan styling kecil, dan biasanya bisa diperbaiki tanpa membangun ulang code native.

Jika tim Anda rutin merilis aplikasi Ionic atau Capacitor, Capgo layak dievaluasi sebagai bagian dari alur kerja rilis Anda. Ini memberi Anda cara untuk mendorong perbaikan lapisan web untuk masalah seperti bug tata letak action sheet, regresi styling, dan kesalahan teks setelah rilis, sambil tetap mengontrol kanal rollout dan perilaku pembaruan.

Lanjutkan dari Ionic Action Sheet: Panduan lengkap 2026

Jika Anda menggunakan Ionic Action Sheet: Panduan Lengkap untuk 2026 untuk merencanakan migrasi dan operasional enterprise, hubungkan dengan Capgo Enterprise untuk workflow produk di Capgo Enterprise, Alternatif Plugin Ionic Enterprise untuk workflow produk di Alternatif Plugin Ionic Enterprise, Alternatif Capgo untuk alur kerja produk di Alternatif Capgo, Konsultasi Capgo untuk alur kerja produk di Capgo Consulting, dan Dukungan Premium Capgo untuk alur kerja produk di Capgo Premium Support.