ion-button
Pendahuluan
Tombol menyediakan elemen yang dapat diklik, yang dapat digunakan dalam formulir, atau di mana saja yang membutuhkan fungsionalitas tombol sederhana dan standar. Tombol dapat menampilkan teks, ikon, atau keduanya. Tombol dapat diberi gaya dengan beberapa atribut untuk tampilan tertentu.
Properti
| Properti | Deskripsi | Atribut | Tipe | Default |
|---|---|---|---|---|
| buttonType | Jenis tombol. | button-type | string | 'button' |
| color | Warna yang akan digunakan dari palet warna aplikasi Anda. Opsi default: 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'. Untuk informasi lebih lanjut tentang warna, lihat theming. | color | string | undefined | undefined |
| disabled | Jika true, pengguna tidak dapat berinteraksi dengan tombol. | disabled | boolean | false |
| download | Atribut ini menginstruksikan browser untuk mengunduh URL alih-alih menavigasi ke URL tersebut, sehingga pengguna akan diminta menyimpannya sebagai file lokal. Jika atribut memiliki nilai, nilai tersebut digunakan sebagai nama file yang sudah diisi sebelumnya di prompt Simpan (pengguna masih dapat mengubah nama file jika diinginkan). | download | string | undefined | undefined |
| expand | Setel ke 'block' untuk tombol selebar penuh atau ke 'full' untuk tombol selebar penuh dengan sudut persegi dan tanpa batas kiri atau kanan. | expand | 'block' | 'full' | undefined | undefined |
| fill | Setel ke 'clear' untuk tombol transparan yang menyerupai tombol datar, ke 'outline' untuk tombol transparan dengan batas, atau ke 'solid' untuk tombol dengan latar belakang terisi. Isi default adalah 'solid' kecuali di dalam toolbar, yang defaultnya adalah 'clear'. | fill | 'clear' | 'default' | 'outline' | 'solid' | undefined | undefined |
| form | Elemen formulir HTML atau id elemen formulir. Digunakan untuk mengirimkan formulir jika tombol bukan anak dari formulir. Ini adalah properti virtual yang diatur satu kali saat inisialisasi dan tidak akan diperbarui jika Anda mengubah nilainya setelah render awal. | form | HTMLFormElement | string | undefined | undefined |
| href | Berisi URL atau fragmen URL yang ditunjuk oleh hyperlink. Jika properti ini diatur, tag anchor akan dirender. | href | string | undefined | undefined |
| mode | Mode menentukan gaya platform mana yang akan digunakan. Ini adalah properti virtual yang diatur satu kali saat inisialisasi dan tidak akan diperbarui jika Anda mengubah nilainya setelah render awal. | mode | 'ios' | 'md' | undefined |
| rel | Menentukan hubungan objek target dengan objek tautan. Nilainya adalah daftar jenis tautan yang dipisahkan spasi. | rel | string | undefined | undefined |
| routerAnimation | Saat menggunakan router, ini menentukan animasi transisi saat menavigasi ke halaman lain menggunakan href. | undefined | ((baseEl: any, opts?: any) => Animation) | undefined | undefined |
| routerDirection | Saat menggunakan router, ini menentukan arah transisi saat menavigasi ke halaman lain menggunakan href. | router-direction | 'back' | 'forward' | 'root' | 'forward' |
| shape | Setel ke 'round' untuk tombol dengan sudut yang lebih membulat. | shape | 'round' | undefined | undefined |
| size | Setel ke 'small' untuk tombol dengan tinggi dan padding lebih kecil, ke 'default' untuk tombol dengan tinggi dan padding default, atau ke 'large' untuk tombol dengan tinggi dan padding lebih besar. Secara default ukurannya tidak diatur, kecuali tombol berada di dalam item, di mana ukurannya 'small' secara default. Setel ukuran ke 'default' di dalam item untuk membuatnya menjadi tombol ukuran standar. | size | 'default' | 'large' | 'small' | undefined | undefined |
| strong | Jika true, mengaktifkan tombol dengan berat font yang lebih tebal. | strong | boolean | false |
| target | Menentukan di mana URL yang ditautkan akan ditampilkan. Hanya berlaku jika href disediakan. Kata kunci khusus: '_blank', '_self', '_parent', '_top'. | target | string | undefined | undefined |
| type | Jenis tombol. | type | 'button' | 'reset' | 'submit' | 'button' |
expand
Properti ini memungkinkan Anda menentukan seberapa lebar tombol. Secara default, tombol memiliki display: inline-block, tetapi mengatur properti ini akan mengubah tombol menjadi elemen selebar penuh dengan display: block.
<ion-button expand="block">Block</ion-button> <ion-button expand="full">Full</ion-button>
shape
Properti ini memungkinkan Anda menentukan bentuk tombol. Secara default, tombol berbentuk persegi panjang dengan radius batas kecil, tetapi mengatur ini menjadi 'round' akan mengubah tombol menjadi elemen yang membulat.
<ion-button>Default</ion-button><ion-button shape="round">Round</ion-button><ion-button> <ion-icon slot="icon-only" name="heart"></ion-icon></ion-button><ion-button shape="round"> <ion-icon slot="icon-only" name="heart"></ion-icon></ion-button>
fill
Properti ini menentukan warna latar belakang dan warna batas tombol. Secara default, tombol memiliki latar belakang solid kecuali tombol berada di dalam toolbar, di mana ia memiliki latar belakang transparan.
<ion-button>Default</ion-button><ion-button fill="clear">Clear</ion-button><ion-button fill="outline">Outline</ion-button><ion-button fill="solid">Solid</ion-button>
size
Properti ini menentukan ukuran tombol. Mengatur properti ini akan mengubah tinggi dan padding tombol.
<ion-button size="small">Small</ion-button><ion-button size="default">Default</ion-button><ion-button size="large">Large</ion-button>
Ikon
Tombol dapat menampilkan ikon, baik saja atau bersama teks. Gunakan slot icon-only, start, atau end.
<ion-button size="small"> <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon></ion-button><ion-button> <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon></ion-button><ion-button size="large"> <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon></ion-button><ion-button size="small"> <ion-icon slot="start" name="star"></ion-icon> Left Icon</ion-button><ion-button> <ion-icon slot="start" name="star"></ion-icon> Left Icon</ion-button><ion-button size="large"> <ion-icon slot="start" name="star"></ion-icon> Left Icon</ion-button><ion-button size="small"> Right Icon <ion-icon slot="end" name="heart"></ion-icon></ion-button><ion-button> Right Icon <ion-icon slot="end" name="heart"></ion-icon></ion-button><ion-button size="large"> Right Icon <ion-icon slot="end" name="heart"></ion-icon></ion-button>
Warna
Gunakan atribut color untuk menerapkan warna dari palet aplikasi.
<ion-button>Default</ion-button><ion-button color="primary">Primary</ion-button><ion-button color="secondary">Secondary</ion-button><ion-button color="tertiary">Tertiary</ion-button><ion-button color="success">Success</ion-button><ion-button color="warning">Warning</ion-button><ion-button color="danger">Danger</ion-button><ion-button color="light">Light</ion-button><ion-button color="medium">Medium</ion-button><ion-button color="dark">Dark</ion-button>
CSS Custom Properties
Anda dapat menyesuaikan tampilan tombol menggunakan properti kustom CSS.
<ion-button>Custom Button</ion-button>
Aksesibilitas
Tombol dibangun agar dapat diakses, tetapi mungkin memerlukan beberapa penyesuaian tergantung pada kontennya. Komponen tombol merender elemen tombol asli yang memungkinkannya memanfaatkan fungsionalitas yang disediakan oleh tombol asli.
Overflowing Text Content
Ada banyak kasus di mana konten teks tombol dapat melebihi wadah. Disarankan untuk membungkus teks di dalam tombol saat ini terjadi sehingga semua teks masih dapat dibaca. Komponen tombol akan secara otomatis menyesuaikan tingginya untuk menampung baris teks tambahan.
Teks tombol tidak secara otomatis membungkus ke baris berikutnya saat teks terlalu panjang untuk muat. Untuk membuat teks membungkus, kelas ion-text-wrap dapat ditambahkan, yang akan mengatur properti white-space menjadi 'normal'. Ini akan menjadi default di rilis utama mendatang.
Catatan: Gaya max-width diatur pada tombol di bawah ini hanya untuk tujuan demo. Pembungkusan teks akan bekerja dengan lebar tombol dinamis.
<ion-button>Default</ion-button><ion-button class="ion-text-wrap" style="max-width: 400px">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
Event
| Nama | Deskripsi | Bubbles |
|---|---|---|
| ionBlur | Dipancarkan saat tombol kehilangan fokus. | true |
| ionFocus | Dipancarkan saat tombol memiliki fokus. | true |
Metode
Tidak ada metode publik yang tersedia untuk komponen ini.
CSS Custom Properties (Tabel)
| Nama | Deskripsi |
|---|---|
| --background | Latar belakang tombol |
| --background-activated | Latar belakang tombol saat ditekan. Catatan: mengatur ini akan mengganggu riak Material Design. |
| --background-activated-opacity | Opacity tombol saat ditekan |
| --background-focused | Latar belakang tombol saat difokuskan dengan tombol tab |
| --background-focused-opacity | Opacity tombol saat difokuskan dengan tombol tab |
| --background-hover | Latar belakang tombol saat dihover |
| --background-hover-opacity | Opacity latar belakang saat dihover |
| --border-color | Warna batas tombol |
| --border-radius | Radius batas tombol |
| --border-style | Gaya batas tombol |
| --border-width | Lebar batas tombol |
| --box-shadow | Bayangan kotak tombol |
| --color | Warna teks tombol |
| --color-activated | Warna teks tombol saat ditekan |
| --color-focused | Warna teks tombol saat difokuskan dengan tombol tab |
| --color-hover | Warna teks tombol saat dihover |
| --opacity | Opacity tombol |
| --padding-bottom | Padding bawah tombol |
| --padding-end | Padding kanan jika arah kiri-ke-kanan, dan padding kiri jika arah kanan-ke-kiri tombol |
| --padding-start | Padding kiri jika arah kiri-ke-kanan, dan padding kanan jika arah kanan-ke-kiri tombol |
| --padding-top | Padding atas tombol |
| --ripple-color | Warna efek riak tombol |
| --transition | Transisi tombol |
Slot
| Nama | Deskripsi |
|---|---|
| (default) | Konten ditempatkan di antara slot yang disebutkan jika disediakan tanpa slot. |
| end | Konten ditempatkan di sebelah kanan teks tombol dalam LTR, dan di sebelah kiri dalam RTL. |
| icon-only | Harus digunakan pada ikon di tombol yang tidak memiliki teks. |
| start | Konten ditempatkan di sebelah kiri teks tombol dalam LTR, dan di sebelah kanan dalam RTL. |
Platform Lainnya
Berita Piala Dunia
Jika Anda memiliki pertanyaan, silakan kirim email ke [email protected]