ion-buttons | Kerangka Ionic

ion-buttons

Komponen ion-buttons adalah elemen wadah. Komponen ini harus digunakan di dalam toolbar dan dapat menampung beberapa jenis tombol, termasuk tombol standar, tombol menu, dan tombol kembali.

Penggunaan Dasar

<ion-toolbar> <ion-buttons slot="start"> <ion-button>Button</ion-button> </ion-buttons> <ion-title>Default Buttons</ion-title></ion-toolbar>

Penempatan Tombol

Tombol dapat diposisikan di dalam toolbar menggunakan slot bernama. Tabel di bawah ini memiliki deskripsi setiap slot.

Slot	Deskripsi
`start`	Memposisikan ke kiri konten dalam LTR, dan ke kanan dalam RTL.
`end`	Memposisikan ke kanan konten dalam LTR, dan ke kiri dalam RTL.
`secondary`	Memposisikan elemen ke kiri konten dalam mode ios, dan langsung ke kanan dalam mode md.
`primary`	Memposisikan elemen ke kanan konten dalam mode ios, dan ke kanan jauh dalam mode md.

<ion-toolbar> <ion-buttons slot="start"> <ion-button>Start</ion-button> </ion-buttons> <ion-title>Buttons</ion-title> <ion-buttons slot="end"> <ion-button>End</ion-button> </ion-buttons></ion-toolbar><ion-toolbar> <ion-buttons slot="secondary"> <ion-button>Secondary</ion-button> </ion-buttons> <ion-title>Buttons</ion-title> <ion-buttons slot="primary"> <ion-button>Primary</ion-button> </ion-buttons></ion-toolbar>

Jenis Tombol

Tombol di toolbar secara default bergaya jernih, tetapi ini dapat diubah menggunakan properti fill pada tombol. Properti yang disertakan pada tombol kembali dan tombol menu dalam contoh ini hanya untuk tujuan tampilan; lihat dokumentasi masing-masing untuk penggunaan yang tepat.

<ion-toolbar> <ion-buttons slot="secondary"> <ion-button size="large"> Favorite </ion-button> </ion-buttons> <ion-title>Default Buttons</ion-title> <ion-buttons slot="primary"> <ion-button> Delete </ion-button> </ion-buttons></ion-toolbar><ion-toolbar> <ion-buttons slot="secondary"> <ion-button> <ion-icon slot="icon-only" name="person-circle"></ion-icon> </ion-button> <ion-button> <ion-icon slot="icon-only" name="search"></ion-icon> </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button> <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon> </ion-button> </ion-buttons> <ion-title>Icon Buttons</ion-title></ion-toolbar><ion-toolbar> <ion-buttons slot="secondary"> <ion-button fill="solid"> <ion-icon slot="start" name="person-circle"></ion-icon> Contact </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button fill="solid"> Help <ion-icon slot="end" name="help-circle"></ion-icon> </ion-button> </ion-buttons> <ion-title>Solid Buttons</ion-title></ion-toolbar><ion-toolbar> <ion-buttons slot="secondary"> <ion-button fill="outline"> <ion-icon slot="start" name="star"></ion-icon> Star </ion-button> </ion-buttons> <ion-buttons slot="primary"> <ion-button fill="outline"> Edit <ion-icon slot="end" name="create"></ion-icon> </ion-button> </ion-buttons> <ion-title>Outline Buttons</ion-title></ion-toolbar><ion-toolbar> <ion-buttons slot="start"> <ion-back-button default-href="#"></ion-back-button> </ion-buttons> <ion-title>Back Button</ion-title></ion-toolbar><ion-toolbar> <ion-buttons slot="start"> <ion-menu-button auto-hide="false"></ion-menu-button> </ion-buttons> <ion-title>Menu Button</ion-title></ion-toolbar>

Tombol yang Dapat Diciutkan

Properti collapse dapat diatur pada tombol untuk menciutkannya ketika header menciut. Ini biasanya digunakan dengan judul besar yang dapat diciutkan.

info Fitur ini hanya tersedia untuk iOS.

<ion-header [translucent]="true"> <ion-toolbar> <ion-title>Title</ion-title> <ion-buttons [collapse]="true" slot="end"> <ion-button>Button</ion-button> </ion-buttons> </ion-toolbar></ion-header><ion-content [fullscreen]="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Title</ion-title> <ion-buttons [collapse]="true" slot="end"> <ion-button>Button</ion-button> </ion-buttons> </ion-toolbar> </ion-header> <div class="ion-padding">Scroll the list to see the title & buttons collapse.</div> <ion-list> <ion-item>Item 1</ion-item> <ion-item>Item 2</ion-item> ... </ion-list></ion-content>

Properti

collapse

Properti	Nilai
Deskripsi	Jika true, tombol akan menghilang ketika toolbar induknya telah menciut sepenuhnya jika toolbar bukan yang pertama. Jika toolbar adalah yang pertama, tombol akan disembunyikan dan hanya akan ditampilkan setelah semua toolbar menciut sepenuhnya. Hanya berlaku dalam mode `ios` dengan `collapse` diatur ke true pada `ion-header`. Biasanya digunakan untuk Judul Besar yang Dapat Diciutkan.
Atribut	`collapse`
Tipe	`boolean`
Default	`false`