Ionic Action Sheet: Panduan Lengkap untuk 2026

Anda mungkin berada di salah satu situasi berikut. 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 sangat penting. Sheet aksi tampak sederhana, tetapi 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 ke Sheet Aksi Ionic
  • Mengapa tim terus mencari itu
• Mengerti Kontroler Sheet Aksi dan API
  • Mengapa API dikendalikan oleh Kontroler
  • Pilihan yang sebenarnya berpengaruh
  • Penolakan adalah bagian dari kontrak
• Contoh Implementasi untuk Angular React dan Vue
  • Contoh Angular
  • Contoh React
  • Contoh Vue
• Kustomisasi dan Pengaturan Tampilan dengan CSS
  • Mulai dengan cssClass sebelum mengganti global
  • Pakai properti kustom untuk tema yang luas
  • Pakai bagian bayangan ketika Anda membutuhkan ketelitian
• Topik Lanjutan dan Pertimbangan Platform
  • Komponen web atau plugin native
  • Mode platform dan detail aksesibilitas
• Pitfall Perbaikan dan Kirim UI Langsung
  • Masalah yang muncul setelah demo berfungsi
  • Pengaturan Area Aman yang Praktis
  • Mengapa Perbarui Hidup Penting untuk Defekt UI

Pengenalan ke Action Sheet Ioni

Action Sheet Ioni adalah alat yang tepat ketika pengguna membutuhkan memilih kecil, fokus yang terkait dengan konteks saat ini. Hapus draft. Ganti foto profil. Simpan, bagikan, atau arsipkan dokumen. Aksi-aksi ini penting, tetapi mereka tidak layak tempat permanen di layout utama.

In Ionic, pola telah konsisten selama waktu yang lama. Aplikasi Ionic sebelumnya menggunakan $ionicActionSheet yang TutorialsPoint deskripsikan sebagai sebuah panel yang muncul dari bagian bawah layar dan ditampilkan dengan menginjeksi show() dan memanggil ion-action-sheetdi controller. Aplikasi modern menggunakan tetapi model interaksi masih dapat diidentifikasi sebagai sama, yang membuat komponen ini salah satu contoh yang lebih jelas dari Ionic yang mempertahankan pola UI mobile melalui generasi framework di .

ringkasan dokumentasi 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-langkah yang kompak. Ini tidak berfungsi baik ketika pengguna membutuhkan penjelasan, validasi, atau beberapa bidang formulir.

• Aturan sederhana membantu: Pakai sheet aksi
• untuk menu keputusan singkat yang terkait dengan item tertentu. Ketika Anda memerlukan konfirmasi dengan pilihan yang minimal.
• Gunakan modal. Ketika pengguna membutuhkan konten, input, atau penggeseran 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-to-native. Antarmuka sederhana dapat dirender di layer web, sementara masih terasa asli 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 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

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 di halaman Anda untuk menu yang hanya muncul setelah sentuhan pada ikon overflow.

Official Ionic docs mendefinisikan Action Sheet sebagai dialog modal yang memerlukan pengosongan pengguna, dan mereka menempatkan banyak tekanan pada metode siklus pengosongan seperti onDidDismiss untuk logika seleksi pasca- di dalam Action Sheet Ionic API docs.Desain tersebut memberitahu Anda bagaimana mengatur code. Hadapi terlebih dahulu. Berreaksi setelah pengosongan. 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.

Konfigurasi tombol adalah tempat 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 pengaturan platform.

role tidaklah dekoratif. Gunakan destructive untuk aksi berbahaya seperti menghapus. Gunakan cancel untuk jalur keluar. Peran-peran tersebut mempengaruhi cara tampilan daftar pilihan dan bagaimana 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

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

Gunakan siklus hidup secara sengaja:

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

Itu pola adalah membosankan, dan itu mengapa itu berhasil.

Contoh sederhana Angular-style dari bentuk:

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: Sebuah sheet aksi ionic bukanlah selesai ketika muncul. Ia selesai ketika ia 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 tertutup.

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

Contoh Angular

In Ionic Angular, cara paling umum adalah menginjeksikan 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 sering kali memindahkan terlalu banyak logika ke handler tombol, atau mereka lupa bahwa janji pembatalan adalah tempat yang lebih aman untuk mengkoordinasikan transisi UI.

Contoh React

In Ionic React, useIonActionSheet memberikan Anda fungsi API yang padat dan fungsional yang sesuai 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 adalah ergonomis, tetapi aturan yang sama berlaku. Tetapkan handler langsung fokus pada aksi yang dipilih. Gunakan panggilan balik pembatalan untuk membersihkan, analisis, atau keadaan UI lanjutan.

Contoh Vue

In 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 mempertahankan efek sampingan. Jika aplikasi Anda menggunakan komposisi untuk logika kamera atau pilih file, panggil dari handler dan biarkan code pengontrol tipis.

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

Kustomisasi dan Pengaturan Tampilan dengan CSS

Styling boks aksi ionic default biasanya sudah cukup baik untuk prototipe. Namun, tidak selalu cukup baik untuk aplikasi yang sudah memiliki branding, dan tentu saja tidak cukup ketika desain ingin memiliki ruang 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 pengaturan tampilan boks aksi.

Buatlah dengan cssClass sebelum menggantikan pengaturan global

Aturan styling pertama adalah sederhana. Jangan target semua 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 gayakan hanya instance tersebut:

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

Metode ini lebih baik dalam skala daripada mengejar selektor kemudian.

Pakai properti kustom untuk theming yang luas

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

Contoh penggunaan umum termasuk:

• Warna latar belakang dan teks ketika aplikasi Anda memiliki palet kustom gelap.
• Kemampuan keabuan 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 sasaran, properti kustom mungkin tidak cukup. Itulah saat Bagian Bayangan berperan. Mereka memungkinkan Anda mengatur area internal sheet aksi 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 berfungsi dengan baik adalah menghias komponen hingga terlalu berlebihan sehingga tidak lagi 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, bukan menyembunyikan apa yang sebenarnya.

Topik-Topik Lanjutan dan Pertimbangan Platform

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

Komponen web atau plugin native

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

Jika aplikasi Anda berbasis Capacitor dan Anda ingin sistem operasi host mengrender lembaran, rute native adalah @capacitor/action-sheetPlugin di sekitar showActions(options) -> Promise<ShowActionsResult>diinstal dengan npm install @capacitor/action-sheet dan disinkronkan dengan npx cap syncsedangkan juga menyoroti bahwa Elemen PWA diperlukan dalam konteks web dan PWA di dalam Capacitor Dokumen Plugin Sheet Aksi.

Itu memberikan Anda tabel perdagangan yang lebih praktis:

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

Mode platform dan detail aksesibilitas

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

Kemudahan aksesibilitas juga seringkali diabaikan karena sheet aksi terlihat kecil. Yang paling dasar masih penting:

• Pilih 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 ambiguasi dekoratif

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

Masalah 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 yang lebih baik secara otomatis. Jawaban yang tepat tergantung pada apakah masalah aplikasi saat ini Anda adalah konsistensi visual, kecepatan implementasi, atau perilaku sistem-native.

Kebijakan dan Pengiriman Fix UI Langsung

Banyak bug Ionic action sheet tidak muncul ketika Anda pertama kali menghubungkan tiga tombol dan mengetuk melalui mereka di simulator. Mereka muncul kemudian, ketika sheet diatur, diuji pada perangkat yang lebih 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 dengan komponen lainnya.

Kelas kedua adalah tata letak. Masalah Ionic yang diketahui melaporkan bahwa sheet aksi dapat menutupi area aman bawah pada beberapa perangkat iOS, terutama ketika --ion-safe-area-bottom bukan nol, dan laporan masalah menyebutkan bahwa bahkan dapat diulangi di demo dokumen Ionic sendiri di masalah GitHub tentang penutupan area aman bawah. Ini adalah masalah jenis yang sama yang tim tidak lupa sampai QA yang terlambat karena tergantung pada bentuk perangkat, mode, dan CSS kustom.

A solusi area aman yang nyata

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

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

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 kecacatan UI

Kenyataan-kenyataan praktis operasi rilis menjadi jelas. Regresi area aman, aturan padding yang rusak, atau warna tombol destructive yang buruk seringkali hidup di JavaScript atau CSS. Jika bug tersebut berlayar ke produksi, menunggu rilis toko penuh dapat mengubah kecacatan visual kecil menjadi hari-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 adalah jenis fitur yang tepat di mana jaringan keamanan tersebut membayar. Mereka sangat terlihat, mudah rusak dengan perubahan gaya kecil, dan biasanya dapat diperbaiki tanpa membangun kembali code native.

Jika tim Anda mengirimkan aplikasi Ionic atau Capacitor secara teratur, 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, sambil menjaga kendali atas saluran peluncuran dan perilaku pembaruan.

Teruskan dari Ionic Action Sheet: Panduan Lengkap untuk 2026

Jika Anda menggunakan Panduan Lengkap Ionic Action Sheet untuk 2026 Untuk merencanakan migrasi dan operasi bisnis, hubungkan dengan Capgo Enterprise untuk alur kerja produk di Capgo Enterprise, Pilihan Plugin Enterprise Ionic untuk alur kerja produk di Pilihan Plugin Enterprise Ionic, Capgo Alternatif untuk alur kerja produk di Capgo Alternatif, Capgo Konsultasi untuk alur kerja produk di Capgo Consulting, dan Capgo Support Premium untuk alur kerja produk di Capgo Support Premium.