Ακολουθεί τις συρσίματα, αντιστέκεται πέρα από το μεγαλύτερο σημείο στάσης και σταθεροποιείται με την ταχύτητα απελευθέρωσης· ένα τίναγμα το μετακινεί ένα σημείο στάσης ή το κλείνει.
Οι συρσίματα αφής μεταβιβάζονται σε περιεχόμενο με κύλιση: το τράβηγμα προς τα κάτω κυλά πρώτα το περιεχόμενο πίσω στην κορυφή πριν κινηθεί το sheet.
Σημεία στάσης ως κλάσματα της οθόνης, pixels ή 'content' για το φυσικό μέγεθος του περιεχομένου.
Ένα modal sheet κρατά την εστίαση μέσα, κάνει τη σελίδα ανενεργή και κλείνει με Escape ή με το φόντο.
Χρησιμοποιήστε το για
Ένα πάνελ φίλτρων.
Ένα μενού κοινοποίησης.
Ένα συρτάρι πλοήγησης με side="start".
Props
Prop
Τύπος
Προεπιλογή
Περιγραφή
open
boolean
false
Αν εμφανίζεται το sheet.
onOpenChange
(open) => void
Εκτελείται με false όταν το sheet κλείνει με σύρση, πάτημα ή Escape.
detents
(number | 'content')[]
['content']
Μεγέθη ηρεμίας: κλάσμα της οθόνης, pixels ή 'content'.
detent
number
Ελεγχόμενο index σημείου στάσης.
defaultDetent
number
0
Index σημείου στάσης που χρησιμοποιείται κατά το άνοιγμα χωρίς detent.
onDetentChange
(index) => void
Εκτελείται με το index του σημείου στάσης στο οποίο ηρεμεί το sheet.
side
'bottom' | 'top' | 'start' | 'end'
'bottom'
Η άκρη από την οποία έρχεται το sheet.
modal
boolean
true
Προσθέτει φόντο, κρατά την εστίαση μέσα και κάνει τη σελίδα ανενεργή.
dismissible
boolean
true
Η σύρση πέρα από το μικρότερο σημείο στάσης, το φόντο και το Escape το κλείνουν.
backdropClassName
string
Κλάση για το φόντο· το backdropStyle ορίζει το inline στυλ του.
transition
Transition
spring
Μια καμπύλη timing { duration, easing } ή ένα ελατήριο { tempo: 'spring', spring }. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.
Web και React Native
Στο web ένα modal sheet είναι native dialog· το πάνελ είναι μια στήλη flex στην οποία δίνετε στυλ με className.
Στο React Native αποδίδεται σε ένα διαφανές Modal και το κουμπί επιστροφής το κλείνει. Τα εσωτερικά ScrollView κρατούν τις δικές τους χειρονομίες, οπότε το sheet σύρεται από τη λαβή, την κεφαλίδα και άλλες στατικές περιοχές του.
