Ionic Action Sheet: Panduan Komplit untuk 2026

Anda mungkin berada di salah satu situasi berikut. Atau 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 terlihat 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 gagal pada tahap QA.

Isi Kandungan

Pendahuluan ke Sheet Aksi Ionic
- Mengapa tim terus mencari kepadanya
Mengerti Kontroler Sheet Aksi dan API
Contoh Implementasi untuk Angular React dan Vue
Pengaturan dan Pemakaian CSS
Topik Lanjutan dan Pertimbangan Platform
- Komponen web atau plugin native
- Mode platform dan detail aksesibilitas
Kebocoran yang Muncul Setelah Demo Berjalan

Intro ke Action Sheet Ionic

Action sheet Ionic adalah alat yang tepat ketika pengguna membutuhkan memilih kecil, fokus yang terkait dengan konteks saat ini. Menghapus draft. Mengganti foto profil. Menyimpan, berbagi, atau menyimpan dokumen. Aksi-aksi ini penting, tapi tidak layak mendapatkan ruang permanen di layout utama.

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

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

Mengapa tim tetap mencari kepadanya

Action sheet berfungsi baik ketika pengguna sudah memahami konteks dan hanya membutuhkan daftar langkah selanjutnya yang kompak. Action sheet 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 ketika Anda memerlukan konfirmasi dengan pilihan minimal.
Gunakan modal ketika pengguna membutuhkan konten lebih, input, atau penggeseran.

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 dapat 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 tersebut, pemahaman tentang bagaimana Capacitor menghubungkan web dan native __CAPGO_KEEP_1__ how Capacitor bridges web and native code perlu diingat saat Anda memutuskan di mana sheet aksi harus berada.

Mengerti Kontroler Sheet Aksi dan API

Action Sheet menjadi lebih mudah dipahami ketika Anda berhenti memikirkannya sebagai komponen inline lainnya. Komponen ini berperilaku lebih seperti overlay sementara dengan siklus hidup. Anda membuatnya, menampilkan, menunggu user, dan kemudian menghandle hasil setelah pembatalan.

Diagram alir yang menjelaskan arsitektur, konfigurasi, dan API komponen Kontroler Action Sheet.

Mengapa API dikendalikan oleh Kontroler?

Dalam pekerjaan sehari-hari Ionic, pendekatan berbasis kontroler biasanya adalah pilihan yang paling bersih karena Action Sheet adalah sementara. Anda tidak ingin memiliki bagian besar markup template di halaman Anda untuk menu yang hanya muncul setelah sentuhan pada ikon overflow.

Official Ionic docs mendefinisikan Action Sheet sebagai dialog modal yang memerlukan pembatalan user, dan mereka menempatkan banyak tekanan pada metode siklus hidup pembatalan seperti onDidDismiss untuk logika seleksi pasca- di dokumentasi resmi Ionic Action Sheet API.Desain tersebut memberitahu Anda bagaimana mengatur code. Tampilkan terlebih dahulu. Berreaksi setelah pembatalan. Jangan menghubungkan logika kritis ke asumsi tentang waktu.

Opsi yang sebenarnya berpengaruh

Tim biasanya hanya membutuhkan subset kecil dari API, tetapi mereka perlu menggunakan subset tersebut dengan benar.

Pilihan	Apa yang dilakukan	Mengapa ini penting
`header`	Mengatur label atas	Baik untuk konteks ketika aksi mungkin ambigu
`subHeader`	Menambahkan teks sekunder	Bermanfaat ketika aksi memerlukan klarifikasi ringan
`buttons`	Mengdefinisikan aksi yang tersedia	Ini adalah tempat di mana perilaku dan penekanan visual hidup
`cssClass`	Menambahkan kelas kustom	Diperlukan untuk gaya yang terbatas alih-alih trik global
`mode`	Menggunakan gaya iOS atau MD	Untuk pengujian terkendali di berbagai platform

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

text untuk label yang dapat dilihat.
icon jika Anda ingin tanda visual.
handler untuk logika panggilan balik segera.
role untuk perilaku semantik dan gaya pengaturan platform.

role bukanlah dekoratif. Gunakan destructive untuk aksi berbahaya seperti menghapus. Gunakan cancel untuk jalur keluar. Peran-peran tersebut mempengaruhi cara tampilan daftar pilihan dan cara pengguna membaca daftar tersebut 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 umum seperti ini sering terjadi: seorang pengembang membuka tampilan aksi, menganggap hasil handler cukup, kemudian mengaktifkan navigasi atau memperbarui keadaan sebelum overlay telah sepenuhnya ditutup. Hal ini dapat menghasilkan transisi yang tidak halus, keadaan yang ketinggalan, atau kondisi balapan dalam tes.

Gunakan siklus hidup secara sengaja:

Membuat sheet.
await present().
await onDidDismiss().
Membaca peran atau data yang dikembalikan.
Mengaktifkan aksi berikutnya.

Polanya itu membosankan, dan itu mengapa polanya itu berhasil.

Contoh sederhana Angular-style 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 mengingat satu hal dari API, ingatlah ini: Sheet aksi ionik bukanlah selesai ketika muncul. Selesai ketika ditutup.

Contoh Implementasi untuk Angular React dan Vue

Struktur sintaks berbeda-beda 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 ditutup.

Gambar tiga desain layar aplikasi seluler yang berlabel Angular, React, dan Vue menampilkan antarmuka pengiriman makanan.

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

contoh Angular

Pada 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);
  }
}

Pada tim Angular, biasanya salah satu hal yang salah adalah mereka memindahkan terlalu banyak logika ke handler tombol, atau mereka lupa bahwa janji pemutusan adalah tempat yang lebih aman untuk mengkoordinasikan transisi UI.

contoh React

Pada Ionic React, useIonActionSheet memberi Anda sebuah API yang padat dan fungsional yang sesuai dengan alur event.

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 yang ergonomis, tetapi aturan yang sama berlaku. Tetapkan handler langsung fokus pada aksi yang dipilih. Gunakan callback pemutusan untuk membersihkan, analisis, atau mengatur keadaan UI lanjutan.

contoh Vue

Pada Ionic Vue, actionSheetController berfungsi dengan baik di dalam Komposisi 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 komponen untuk logika kamera atau pilih file, panggil dari handler dan biarkan pengontrol code tipis.

Tetapkan framework khusus code Anda kecil. Logika bisnis untuk kamera, unggah, hapus, dan analitik seharusnya berada di luar pengaturan sheet aksi.

Pengaturan dan gaya kustom dengan CSS

Styling sheet aksi ionic default biasanya cukup baik untuk prototipe. Tidak selalu cukup baik untuk aplikasi yang sudah memiliki branding, dan tidak cukup ketika desain ingin memiliki jarak yang lebih ketat, tipe huruf yang berbeda, atau aksi yang lebih jelas untuk menghapus.

Slide presentasi desain web yang menampilkan enam teknik pengaturan dan gaya CSS yang berbeda dengan contoh desain grafis tema apple.

Jika tim Anda mencoba membuat aplikasi seluruhnya merasa kurang seperti wrapper web umum dan lebih seperti produk asli, artikel ini tentang konfigurasi dasar JS dan CSS untuk tampilan aplikasi asli adalah teman yang berguna untuk pengaturan gaya sheet aksi.

Mulai dengan cssClass sebelum menggantikan global

Aturan gaya pertama adalah sederhana. Jangan target setiap sheet aksi di aplikasi kecuali Anda berarti 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' }
  ]
});

Kemudian gayakan hanya instance tersebut:

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

Metode tersebut lebih dapat berkembang daripada mengejar selektor kemudian.

Pakai properti kustom untuk tema yang luas

Properti kustom CSS adalah cara tercepat untuk mengubah kesan keseluruhan tanpa harus melawan struktur komponen.

Penggunaan kasus 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.
Jarak 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;
}

Pakai bagian bayangan ketika Anda membutuhkan ketelitian

Ketika desain meminta perubahan yang spesifik, properti kustom mungkin tidak cukup. Itu di mana Shadow Parts berperan penting. Mereka memungkinkan Anda untuk mengatur area internal dari sheet aksi secara 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 berfungsi dengan baik adalah meng-over-style komponen hingga tidak terasa seperti menu pilihan sistem. Jika Anda membutuhkan kartu yang kaya, thumbnail, deskripsi panjang, atau tata letak baris kompleks, Anda telah melewatkan pola sheet aksi.

Pass personalisasi yang baik harus membuat komponen sesuai dengan aplikasi Anda, bukan menyembunyikan apa yang sebenarnya.

Topik Lanjutan dan Pertimbangan Platform

Sheet aksi produksi hidup di ruang keputusan yang lebih besar daripada tutorial yang paling banyak disebutkan. Anda tidak hanya memilih label tombol. Anda juga memutuskan apakah overlay harus dirender oleh layer web Ionic atau didelegasikan ke UI native, seberapa kuat Anda ingin perilaku spesifik platform, dan bagaimana memastikan sheet tetap dapat dipahami oleh semua pengguna.

Gambar split menampilkan bentuk 3D abstrak pada latar hitam dan buah fig pada latar hijau.

Komponen web atau plugin native

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

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

Yaitu memberikan Anda tabel perdagangan praktis:

Pilihan	Kekuatan	Biaya
`ion-action-sheet`	Easier theming and shared web UI patterns	Kurang sedikit kesetaraan dengan keaslian native
`@capacitor/action-sheet`	Penggunaan rendering host OS dan perasaan platform yang lebih kuat	Keterbatasan implementasi lebih luas di konteks browser dan PWA

Menggunakan komponen web ketika konsistensi visual dengan aplikasi Anda lebih penting. Gunakan plugin native ketika kesetiaan 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.

Aksesibilitas juga sering diabaikan karena sheet aksi terlihat kecil. Aspek-aspek dasar masih penting:

Pilih teks tombol yang jelas yang membuat arti di luar konteks.
Sisihkan destructive untuk tindakan berisiko agar antarmuka berkomunikasi dengan niat.
Tetapkan cancel eksplisit Jadi pengguna memiliki jalur keluar yang jelas.
Hindari ketidakjelasan dekoratif. Di mana beberapa aksi terdengar mirip tetapi memiliki hasil yang sangat berbeda.

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

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

Kesulitan Penyelesaian dan Mengirimkan Perbaikan UI Langsung

Masalah kebanyakan sheet aksi ionic 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.

Masalah yang muncul setelah demo berjalan

Kelas pertama masalah adalah waktu. Logika berjalan terlalu awal karena code tidak menunggu pengosongan. Anda melihat perubahan rute sementara overlay masih animasi, atau pembaruan keadaan yang berlari melawan komponen lainnya yang menampilkan.

Kelas kedua adalah tata letak. Masalah yang diketahui Ionic melaporkan bahwa sheet aksi dapat menutupi area aman bawah pada beberapa perangkat iOS, terutama ketika --ion-safe-area-bottom tidak nol, dan laporan masalah menyebutkan bahwa bahkan dapat diulangi di demo dokumen sendiri Ionic di masalah GitHub tentang penutupan area aman bawah. Masalah ini adalah jenis masalah yang sering diabaikan oleh tim hingga tahap QA yang lebih lanjut karena tergantung pada bentuk perangkat, mode, dan CSS kustom.

Pemecahan masalah area aman yang praktis

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

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

Lalu 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' }
  ]
});

Hal ini tidak akan menggantikan pengujian perangkat yang tepat, tetapi memberikan 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 tersebut dikirim ke produksi, menunggu rilis toko penuh dapat mengubah defek visual kecil menjadi hari frustrasi pengguna.

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

Overlay UI adalah jenis fitur yang sangat terlihat, mudah rusak dengan perubahan gaya kecil, dan biasanya dapat diperbaiki tanpa membangun code native kembali.

Jika tim Anda mengirimkan aplikasi Ionic atau Capacitor secara teratur, Capgo perlu dievaluasi sebagai bagian dari alur pelepasan Anda. Ini memberi Anda cara untuk mendorong perbaikan layer web untuk masalah seperti bug tata letak sheet aksi, regresi gaya, dan kesalahan penulisan setelah pelepasan, sambil menjaga kendali atas saluran perbarui dan perilaku update.

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, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di Ionic Enterprise Plugin Alternatives, Capgo Alternatives untuk alur kerja produk di Capgo Alternatives, Capgo Konsultasi untuk alur kerja produk di Capgo Konsultasi, dan Capgo Layanan Premium untuk alur kerja produk di Capgo Layanan Premium.