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 siap produksi.
Perbedaan ini penting. Sebuah 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
- Pengenalan ke Sheet Aksi Ionic
- Mengerti Kontroler Sheet Aksi dan API
- Contoh Implementasi untuk Angular React dan Vue
- Pengaturan dan Penggunaan CSS
- Topik Lanjutan dan Pertimbangan Platform
- Pitfall Perbaikan dan Kirim UI Langsung
Pendahuluan ke Sheet Aksi Ioni
Sheet aksi 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. Tindakan ini penting, tetapi tidak layak mendapatkan ruang permanen di layout utama.
Pada Ionic, pola telah tetap konsisten selama waktu lama. Aplikasi Ioni awal menggunakan $ionicActionSheet service, yang TutorialsPoint deskripsikan sebagai panel yang muncul dari bawah layar dan ditampilkan dengan menginjeksi show() service dan memanggil ion-action-sheetdi controller. Aplikasi modern menggunakan , tetapi model interaksi masih dapat dikenali sama, yang membuat komponen salah satu contoh yang lebih jelas dari Ionic mempertahankan pola UI mobile melalui generasi framework di.
ringkasan dokumentasi sheet aksi Ioni 1 dari TutorialsPoint
Kontinuitas itu 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
A aturan sederhana membantu:
- Pilihlah sheet aksi untuk menu keputusan singkat yang terkait dengan item tertentu.
- Pilihlah peringatan ketika Anda memerlukan konfirmasi dengan pilihan minimal.
- Pilihlah modal ketika pengguna memerlukan 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 pengguna sederhana sehingga 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 Jika tim Anda membangun pada __CAPGO_KEEP_0__ dan ingin memiliki model mental yang lebih jelas tentang batasan tersebut, pemahaman tentang bagaimana __CAPGO_KEEP_0__ menghubungkan web dan native __CAPGO_KEEP_1__
Mengerti Kontroler Sheet Aksi dan API
Setelah Anda berhenti berpikir tentang sheet aksi sebagai komponen inline lainnya, sheet aksi menjadi lebih mudah dipahami. Ini berperilaku lebih seperti overlay sementara dengan siklus hidup. Anda membuatnya, menampilkan, menunggu user, dan kemudian menghandle hasil setelah pembatalan.
Mengapa API dikendalikan oleh Kontroler.
Dalam pekerjaan sehari-hari Ionic, pendekatan berbasis kontroler biasanya adalah pilihan yang paling bersih karena sheet aksi adalah sementara. Anda tidak ingin memiliki bagian besar markup template yang berada di halaman untuk menu yang hanya muncul setelah sentuhan pada ikon overflow.
Dokumen resmi Ionic mendefinisikan Sheet Aksi sebagai dialog modal yang memerlukan pembatalan user, dan mereka menempatkan banyak bobot pada metode siklus hidup pembatalan seperti onDidDismiss untuk logika seleksi pasca- Dokumen Sheet Aksi Ionic APIMengatakan bagaimana Anda harus mengatur code. Tampilkan terlebih dahulu. Berreaksi setelah pembatalan. Jangan menghubungkan logika kritis ke asumsi tentang waktu.
Pilihan yang sebenarnya berpengaruh
Banyak tim hanya membutuhkan subset kecil dari API, tetapi mereka perlu menggunakan subset tersebut dengan benar.
| Pilihan | Apa yang dilakukan | Mengapa 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 daripada trik global |
mode | Menggunakan gaya iOS atau MD | Bermanfaat untuk tes yang terkendali di berbagai platform |
Konfigurasi tombol adalah tempat kesalahan biasanya terjadi. Tombol biasa dapat mencakup:
textuntuk label yang dapat dilihat.iconjika Anda ingin tanda visual.handleruntuk logika panggilan balik segera.roleuntuk perilaku semantik dan gaya pengaturan platform.
role bukanlah 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
Masalah umum seperti ini sering terjadi: seorang pengembang membuka sheet aksi, menganggap hasil handler sudah cukup, kemudian memicu navigasi atau pembaruan status sebelum overlay sepenuhnya ditutup. Hal itu dapat menghasilkan transisi yang tidak halus, status yang ketinggalan, atau kondisi balapan dalam tes.
Gunakan siklus hidup secara sengaja:
- Buatlah sheet.
await present().await onDidDismiss().- Baca peran atau data yang dikembalikan.
- Picu aksi berikutnya.
Polanya itu membosankan, dan itu mengapa polanya itu berhasil.
Contoh sederhana Angular-style dari bentuknya adalah sebagai berikut:
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: Sheet aksi ionic bukanlah selesai ketika muncul. Ia selesai ketika ia ditutup.
Contoh Implementasi untuk Angular React dan Vue
Sintaksnya berbeda-beda di setiap framework, tetapi 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-contoh di bawah ini 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 seringkali memindahkan logika terlalu banyak ke handler tombol, atau mereka lupa bahwa janji penghapusan 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 yang ergonomis, tetapi aturan yang sama berlaku. Tetapkan handler langsung fokus pada aksi yang dipilih. Gunakan panggilan balik penghapusan untuk membersihkan, analisis, atau keadaan UI lanjutan.
Contoh Vue
In 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 dalam proyek Vue adalah di mana Anda menyimpan efek samping. Jika aplikasi Anda menggunakan komponen yang dapat diakses untuk logika kamera atau pilih file, panggil itu dari handler dan biarkan pengontrol code tipis.
Keep your framework-specific code small. The business logic for camera, upload, delete, and analytics should live outside the action sheet setup.
Pengaturan dan gaya kustom dengan CSS
Stilisasi aksi sheet Ionic default biasanya cukup baik untuk prototipe. Tidak selalu cukup baik untuk aplikasi yang sudah memiliki branding, dan pasti tidak cukup ketika desain ingin ruang yang lebih ketat, tipe huruf yang berbeda, atau aksi yang lebih jelas untuk menghapus.
Jika tim Anda mencoba membuat aplikasi seluruhnya merasa 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 gaya aksi sheet.
Buka dengan cssClass sebelum penggantian global
Aturan gaya pertama sederhana. Jangan target setiap aksi sheet di aplikasi kecuali Anda berarti untuk melakukannya. Gunakan cssClass Mengatur skop untuk 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 efektif daripada mengejar selektor kemudian.
Menggunakan properti kustom untuk tema luas
Properti kustom CSS adalah cara tercepat untuk mengubah kesan keseluruhan tanpa 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;
}Gunakan bagian bayangan ketika Anda memerlukan ketelitian
Ketika desain meminta perubahan yang sasaran, properti kustom mungkin tidak cukup. Itu di mana Shadow Parts berperan. Mereka memungkinkan Anda mengatur area internal dari 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);
}Yang biasanya tidak berfungsi dengan baik adalah menghias komponen hingga tidak lagi terasa seperti menu pilihan sistem. Jika Anda memerlukan kartu yang kaya, thumbnail, deskripsi panjang, atau tata letak bar 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 kebanyakan tutorial yang mengakui. 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.
Komponen web atau plugin native
Jika Anda sedang membangun aplikasi Ionic standar, ion-action-sheet biasanya adalah pilihan default. Ini fleksibel, mudah dihias, dan bekerja konsisten dengan sistem overlay aplikasi Anda lainnya.
Jika aplikasi Anda berbasis Capacitor dan Anda ingin sistem operasi host yang mengrender sheet, rute native adalah @capacitor/action-sheetIonic mendokumentasikan plugin di sekitar showActions(options) -> Promise<ShowActionsResult>PWA Element diperlukan dalam konteks web dan PWA npm install @capacitor/action-sheet dan disinkronkan dengan npx cap sync, sementara juga menyoroti bahwa PWA Element diperlukan dalam konteks web dan PWA dalam Capacitor Dokumen plugin Sheet Aksi.
Itu memberikan Anda tabel perdagangan praktis:
| Pilihan | Kekuatan | Biaya |
|---|---|---|
ion-action-sheet | Mudahnya tema dan pola UI web yang dibagikan | Kurang sedikit kesetaraan dengan keaslian native |
@capacitor/action-sheet | Render rendering sistem operasi dan perasaan platform yang lebih kuat | Keterbatasan implementasi yang lebih banyak di konteks browser dan PWA |
Pakai komponen web ketika konsistensi visual dengan aplikasi Anda lebih penting. Pakai 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. Dasar-dasar masih penting:
- Pakai teks tombol yang jelas yang membuat arti di luar konteks.
- Sisihkan
destructiveuntuk aksi yang berisiko agar antarmuka berkomunikasi dengan niat. - Teruskan
canceljelas agar 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.
Sisi 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 secara otomatis lebih baik. Jawaban yang tepat tergantung pada apakah masalah aplikasi saat ini Anda adalah konsistensi visual, kecepatan implementasi, atau perilaku sistem asli.
Pitfall Perbaikan Masalah dan Mengirimkan UI Fix yang Aktif
The first class of bug is timing. Logic runs too early because the code doesn’t wait for dismissal. You see route changes while the overlay is still animating, or state updates that race against another component’s render.
Bugs yang muncul setelah demo berfungsi --ion-safe-area-bottom Kelas pertama bug adalah waktu. Logika berjalan terlalu awal karena __CAPGO_KEEP_0__ tidak menunggu pengosongan. Anda melihat perubahan rute saat overlay masih animasi, atau pembaruan keadaan yang bersaing dengan render komponen lainnya. masalah GitHub tentang area aman bawah yang tumpang tindih. Masalah ini adalah jenis masalah yang sering diabaikan oleh tim hingga tahap QA yang lebih lanjut karena tergantung pada bentuk perangkat, mode, dan CSS yang disesuaikan.
Pemecahan masalah area aman yang praktis
Jika aplikasi Anda menampilkan sheet terlalu dekat dengan area indikator home, 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 tersebut saat 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 live penting untuk defek UI
Kenyataan praktis operasi rilis menjadi jelas. Regresi area aman yang rusak, aturan padding yang rusak, atau warna tombol destructive yang buruk biasanya 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 pembaruan live untuk aplikasi Capacitor . Misalnya Capgo mengirimkan bundle web yang diperbarui sehingga tim dapat mengirimkan perbaikan JavaScript, CSS, copy, konfigurasi, dan aset tanpa menunggu ulasan toko, yang sangat relevan ketika bug styling atau overlay aksi melewati QA.
Overlay UI adalah jenis fitur yang tepat di mana jaringan keselamatan membayar. Mereka sangat terlihat, mudah rusak dengan perubahan styling kecil, dan biasanya dapat diperbaiki tanpa membangun kembali code native.
Jika tim Anda secara teratur mengirimkan aplikasi Ionic atau Capacitor Capgo layak 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 Ionic Action Sheet: Panduan Lengkap untuk 2026 untuk merencanakan migrasi dan operasi perusahaan, hubungkannya dengan Capgo Enterprise untuk alur kerja produk di Capgo Enterprise, Alternatif Plugin Ionic Enterprise untuk alur kerja produk di Alternatif Plugin Ionic Enterprise, Capgo Alternatif untuk alur kerja produk di Capgo Alternatif Capgo Konsultasi untuk alur kerja produk di Capgo Konsultasi, dan Capgo Layanan Premium untuk alur kerja produk di Capgo Layanan Premium.
