İçeriğe geç

React Native Swipeout Kullanımı

Özellikle mobil uygulamalarda alan yetersizliği ve kullanıcı deneyimi için arayüzün basit ve işlevsel olması gerekmekte. Swipeout ile buton üzerinde sağa ve sola kaydırma ile işlemler yapılabilir. Örneğin sola kaydır ve sil veya listede yer alan bilgi için özellikleri göster olabilir.

swipeout preview

Kullanılan kütüphaneye buradan ulaşabilirsiniz.

Bileşene verilebilen özellikler:

Prop Type Optional Default Description
autoClose bool Yes false auto close on button press
backgroundColor string Yes ‘#dbddde’
close bool Yes close swipeout
disabled bool Yes false whether to disable the swipeout
left array Yes [] swipeout buttons on left
onOpen func Yes (sectionID, rowId, direction: string) => void
onClose func Yes (sectionID, rowId, direction: string) => void
right array Yes [] swipeout buttons on right
scroll func Yes prevent parent scroll
style style Yes style of the container
sensitivity number Yes 50 change the sensitivity of gesture
buttonWidth number Yes each button width
Butona verilen özellikler:
Prop Type Optional Default Description
backgroundColor string Yes ‘#b6bec0’ background color
color string Yes ‘#ffffff’ text color
component ReactNode Yes null pass custom component to button
onPress func Yes null function executed onPress
text string Yes ‘Click Me’ text
type string Yes ‘default’ default, delete, primary, secondary
underlayColor string Yes null button underlay color on press
disabled bool Yes false disable button

 

 

Tarih:React Native

İlk Yorumu Siz Yapın

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir