Ö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.
Kullanılan kütüphaneye buradan ulaşabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React, { Component } from 'react' import { Text, View, StyleSheet } from 'react-native' import Swipeout from 'react-native-swipeout'; export default class App extends Component { render() { // Buttons var sagButon = [ { text: 'sağ 1' }, { text: 'sağ 2' } ] var solButon = [ { text: 'sol 1' }, { text: 'sol 2' } ] return ( <View style={styles.container}> <Text> textInComponent </Text> <Swipeout right={sagButon} left={solButon}> <View style={{width:'100%',height:50}}> <Text>Kaydır</Text> </View> </Swipeout> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', justifyContent: 'center', }, }); |
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 |
İlk Yorumu Siz Yapın