Ρύθμιση στηρίγματα στο Framer X

Στο Framer X, μπορείτε να ορίσετε στηρίγματα ενός στοιχείου απευθείας από το περιβάλλον χρήστη. Εδώ είναι πώς να το κάνουμε και γιατί είναι φοβερό.

Φωτογραφία του Hermes Riversa, ευγενική προσφορά του Unsplash.

Μία από τις πιο ενδιαφέρουσες πτυχές του Framer X είναι η σχέση μεταξύ των συστατικών που δημιουργείτε στον κώδικα και του περιβάλλοντος σχεδιασμού που χρησιμοποιείται για την τοποθέτηση και τον χειρισμό αυτών των στοιχείων. Ενώ η σχέση αυτή εξακολουθεί να αναπτύσσεται, η beta ήδη περιλαμβάνει αυτό που μπορεί να είναι το χαρακτηριστικό του δολοφόνου: η ικανότητα να σχεδιάζει ένα στοιχείο με τέτοιο τρόπο ώστε ένας χρήστης να μπορεί να ρυθμίσει τα στηρίγματα του εξαρτήματος μέσω του περιβάλλοντος χρήστη του Framer X.

Στα αριστερά, ένα κανονικό πλαίσιο Framer X. Στα δεξιά, ένα στοιχείο κώδικα με προσαρμοσμένα στοιχεία ελέγχου.

Στα παραπάνω στιγμιότυπα οθόνης, μπορείτε να δείτε έναν αριθμό επιπλέον ελέγχων ιδιοκτησίας στη φωτογραφία στα δεξιά. Όλα αυτά είναι έθιμα: ο συντάκτης του συστατικού τους έγραψε στο ίδιο το στοιχείο.

Αυτό το άρθρο θα καλύπτει όλα όσα υπάρχουν (επί του παρόντος) είναι να γνωρίζετε σχετικά με τους ελέγχους ιδιοκτησίας. Έρχεται σε τέσσερα μικρά μέρη:

  • Μέρος 1: Το Props in React είναι μια γρήγορη ενημέρωση για το τι είναι τα στηρίγματα, από πού προέρχονται και για το τι χρησιμοποιούνται για
  • Μέρος 2: Οι υποστηρίξεις στο Framer X καλύπτουν τον τρόπο με τον Framer X που χειρίζεται τα στηρίγματα
  • Μέρος 3: Η εγκατάσταση στοιχείων ελέγχου ιδιοτήτων θα δείξει τον τρόπο προσθήκης στοιχείων ελέγχου ιδιοτήτων σε ένα στοιχείο κώδικα
  • Μέρος 4: Οι τύποι ελέγχου ιδιοκτησίας περιγράφουν καθένα από τα διαφορετικά στοιχεία ιδιοκτησίας που είναι διαθέσιμα στο Framer X και τον ακριβή κώδικα που απαιτείται για τη δημιουργία τους

Μέρος 1: Υποστηρίξεις στο React

Στο Framer X, τα στοιχεία κώδικα είναι τα στοιχεία React. Δεν θα μπω σε πολλές λεπτομέρειες για το πώς λειτουργεί το React, αλλά είναι σημαντικό να γνωρίζουμε ότι τα στοιχεία του React δέχονται δεδομένα από τον έξω κόσμο με τη μορφή ιδιοτήτων ή στηρίξεων.

Σε ένα στοιχείο React, χρησιμοποιούμε ιδιότητες (ή

Από τεχνική άποψη, αυτά τα στηρίγματα είναι το δεύτερο επιχείρημα της μεθόδου React.createElement. Πιο συχνά, θα δείτε πιο συχνά σκηνικά στο JSX, όπου μοιάζουν με ιδιότητες ενός στοιχείου HTML.

Για παράδειγμα, εάν είχαμε ένα στοιχείο όπως το παραπάνω:

const UserCard = props => (
  
    

{props.username}     

{props.motto}     {props.children}    )

Θα μπορούσαμε να δημιουργήσουμε μια εμφάνιση αυτού του στοιχείου με σκηνικά όπως αυτό:

React.createElement (
  UserCard,
  {όνομα χρήστη: "ClodMorden420", σύνθημα: "sry im sry"},
  "η κόλαση είναι γεμάτη"
)

Θα μπορούσαμε επίσης (και μάλλον) να κάνουμε το ίδιο με το JSX αντί:


  η κόλαση είναι γεμάτη

Είτε έτσι είτε αλλιώς, τροφοδοτούμε την επιλογή του UserCard με δύο στηρίγματα, το όνομα χρήστη και το σύνθημα, τα οποία και τα δύο θα είναι διαθέσιμα μέσα στο στοιχείο κάτω από τα στηρίγματα των παραδειγμάτων.

Υπάρχει επίσης ένα τρίτο στήριγμα, τα παιδιά, το οποίο ορίζεται είτε από το τρίτο επιχείρημα στο React.createElement είτε από ό, τι συμβαίνει ανάμεσα στις ετικέτες JSX.

Εάν κοιτάξετε ξανά το στοιχείο UserCard, θα δείτε ότι το έχουμε ρυθμίσει για να εμφανίσει αυτές τις τιμές ως props.username, props.motto και props.children. Και, δεδομένου εκείνων των στηρίξεων, το προκύπτον παράδειγμα θα έδινε κάτι σαν αυτό:

Τα στηρίγματα καθιστούν δυνατή την επαναχρησιμοποίηση ... και επαναδραστηριοποίηση

Αν θέλαμε να δημιουργήσουμε μια δεύτερη εμφάνιση με διαφορετικές τιμές για αυτά τα στηρίγματα, τότε αυτή η δεύτερη εμφάνιση θα εμφανίζει αυτές τις άλλες τιμές. Ακόμα καλύτερα - και εδώ είναι μέρος του πού το React κερδίζει το όνομά του - αν κάποια στιγμή αργότερα αποφασίσαμε να περάσουμε διαφορετικές τιμές προβολής στην περίπτωση του UserCard, θα επανεκδοθεί αμέσως (με τη νέα τιμή του στηρίγματος) και θα εμφανίζει τις νέες τιμές.


  τρέχει με άγρια ​​σκεύη

Μέρος 2: Ρύθμιση στηρίγματα στο Framer X

Εντάξει, πίσω στο Framer X, όπου σε αντίθεση με ένα κανονικό περιβάλλον React, δημιουργούμε στιγμιότυπα των στοιχείων μας χρησιμοποιώντας τη διεπαφή χρήστη: μεταφέρουμε τα στοιχεία μας έξω από το δίσκο ή τα αντιγράφετε από τα σχέδια μας.

Ωστόσο, παρόλο που δεν δημιουργούμε τις παρουσίες μας στον κώδικα, εξακολουθούμε να χρειαζόμαστε κάποιο τρόπο να περάσουμε στηρίγματα - και εκεί έρχονται τα στοιχεία ελέγχου ιδιοκτησίας του Framer X, επιτρέποντάς μας να καθορίσουμε στηρίγματα μέσω του περιβάλλοντος χρήστη.

Ένα στοιχείο κώδικα με πολλά στοιχεία ιδιοκτησίας.

Υπάρχει όμως ένα πρόβλημα: κάθε στοιχείο θα έχει διαφορετικά στηρίγματα, καθένα από τα οποία μπορεί να απαιτεί διαφορετικούς ελέγχους διεπαφής, ανάλογα με τον τύπο δεδομένων που αναμένουν οι χρήστες. Πώς μπορούμε να διασφαλίσουμε ότι οι χρήστες εμφανίζουν τους σωστούς ελέγχους για το στοιχείο;

Ο Framer X επιλύει αυτό ελέγχοντας την ιδιότητα propertyControls μιας συνιστώσας κώδικα, όπου αναμένει να βρει ένα αντικείμενο που περιγράφει ποια στοιχεία ελέγχου θα δείξουν, πώς να τα δείξουν και τα στηρίγματα που ελέγχουν.

Ακολουθήστε το lingo: οι τιμές των στοιχείων ελέγχου UI μεταβιβάζονται στο στοιχείο ως σκηνικά.

Όταν είναι επιλεγμένο ένα στοιχείο κώδικα, ο Framer X θα χρησιμοποιήσει αυτό το αντικείμενο propertyControls για να δημιουργήσει τα στοιχεία ελέγχου που έχει ορίσει ο συγγραφέας. Καθώς ένας χρήστης αλλάζει οποιαδήποτε από τις τιμές ελέγχου, οι τιμές θα μεταβιβαστούν πίσω στο στοιχείο ως σκηνικά και το στοιχείο θα επανεκδοθεί.

Μέρος 3: Ρύθμιση στοιχείων ελέγχου ιδιοτήτων

Για να δώσουμε στον Framer X τις οδηγίες για τους ελέγχους ιδιοκτησίας σας, πρέπει να ξεκινήσουμε με το αντικείμενο propertyControls στην κλάση του κώδικα. Όταν δημιουργείτε ένα νέο στοιχείο κώδικα, ένας έλεγχος ιδιότητας εμφανίζεται από προεπιλογή:

Ίσως είναι πιο χρήσιμο να σκεφτείτε το αντικείμενο του propertyControls ξεκινώντας ως κενό αντικείμενο:

static propertyControls: PropertyControls = {}

... στην οποία προσθέτουμε τους παρακάτω ελέγχους:

static propertyControls: PropertyControls = {
  username: {
    πληκτρολογήστε: ControlType.String,
    τίτλος: "Όνομα χρήστη"
  },
  motto: {
    πληκτρολογήστε: ControlType.String,
    τίτλος: "Motto"
  }}
}}

Προκαθορισμένα στηρίγματα

Πριν βρεθούμε στους διαφορετικούς τύπους ελέγχων ιδιοκτησίας, αξίζει να αναφέρουμε τα defaultProps. Όταν δημιουργείτε για πρώτη φορά μια παράσταση, ο Framer X θα χρησιμοποιήσει τις τιμές που παρέχετε στα defaultProps ως αρχικά στηρίγματα του στοιχείου.

static defaultProps = {
  όνομα χρήστη: "admin τύπος",
  motto: "im το ADMIN"
}}
static propertyControls: PropertyControls = {
  username: {
    πληκτρολογήστε: ControlType.String,
    τίτλος: "Όνομα χρήστη"
  },
  motto: {
    πληκτρολογήστε: ControlType.String,
    τίτλος: "Motto"
  }}
}}

Μέρος 4: Είδη ελέγχου ιδιοτήτων

Κοινές επιλογές: τίτλος και κρυφό

Υπάρχουν μερικοί τύποι ελέγχων ιδιοκτησίας. Κάθε ένα έχει ένα σύνολο απαιτούμενων ιδιοτήτων, καθώς και μερικές που δεν απαιτούνται. Ενώ οι περισσότερες από αυτές τις ιδιότητες είναι μοναδικές για τον τύπο, όλες μοιράζονται τα δύο: τίτλο και κρυφό.

Η ιδιότητα τίτλου είναι απλή: είναι μια συμβολοσειρά που εμφανίζεται στα αριστερά του στοιχείου ελέγχου.

Η κρυφή ιδιότητα είναι πιο ενδιαφέρουσα: είναι μια συνάρτηση που παίρνει τα στηρίγματα του στοιχείου σαν ένα όρισμα και επιστρέφει είτε αληθινό είτε ψευδές. Μπορείτε να χρησιμοποιήσετε κρυμμένα για απόκρυψη ή εμφάνιση στοιχείων ελέγχου ανάλογα με τα άλλα στοιχεία ελέγχου. Για παράδειγμα, ίσως να θέλουμε να δείξουμε έναν έλεγχο σφάλματοςText μόνο εάν η κατάσταση του στοιχείου μας είναι "σφάλμα".

static propertyControls: PropertyControls = {
  κατάσταση: {
    πληκτρολογήστε: ControlType.Enum,
    επιλογές: ["ρελαντί", "λήψη", "επιτυχία", "σφάλμα"],
    optionsTitles: ["Αδράνεια", "Ανάκτηση", "Επιτυχία", "Σφάλμα"],
    τίτλος: "Κατάσταση"
  },
  errorText: {
    πληκτρολογήστε: ControlType.String,
    τίτλο: "Κείμενο σφάλματος",
    κρυφή: (στηρίγματα) => props.status! == "σφάλμα"
  }}
}}
Η κρυφή ιδιότητα ελέγχει αν πρέπει ή όχι να εμφανιστεί ένας έλεγχος.

Αυτές οι δύο ιδιότητες, τίτλος και κρυφό, είναι διαθέσιμες σε όλους τους παρακάτω τύπους ελέγχου.

ControlType.Boolean

Μια τιμή boolean μπορεί να είναι είτε αληθής είτε ψευδής. Ο Framer X χρησιμοποιεί ένα διακόπτη για αυτόν τον έλεγχο. Εκτός από τις κοινές ιδιότητες που περιγράφονται παραπάνω, ο έλεγχος μπορεί να λάβει δύο προαιρετικές ιδιότητες, disabledTitle και enabledTitle, οι οποίες ορίζουν το κείμενο του διακόπτη.

Το ControlType.Boolean ελέγχει ένα στήριγμα που μπορεί να είναι είτε αληθινό είτε ψευδές. Μπορείτε να αλλάξετε τις ετικέτες με τις ιδιότητες disabledTitle και enabledTitle.
κουρασμένος: {
  τύπου: ControlType.Boolean,
  τίτλος: "Ισχυρός",
  disabledTitle: "Nope",
  enabledTitle: "Yep"
}}

ControlType.String

Η συμβολοσειρά χρησιμοποιείται για τις εισόδους κειμένου. Εκτός από τις κοινές επιλογές που αναφέρθηκαν παραπάνω, έχει μια προαιρετική ιδιότητα, σύμβολο κράτησης θέσης, που θέτει το κείμενο με σύμβολο κράτησης θέσης για το πεδίο κειμένου του στοιχείου ελέγχου.

ControlType.String καταγράφει τιμές κειμένου.
ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: {
  πληκτρολογήστε: ControlType.String,
  τίτλος: "Ηλεκτρονικό ταχυδρομείο",
  σύμβολο κράτησης θέσης: "[email protected]"
}}

ControlType.Number

Ο αριθμός χρησιμοποιείται για την καταγραφή εισόδων αριθμών. Ο Framer X χρησιμοποιεί ένα ρυθμιστικό για αυτό το στοιχείο ελέγχου, και. Αυτός ο τύπος έχει πολλές προαιρετικές ιδιότητες: μπορείτε να καθορίσετε το βήμα που λαμβάνετε μεταξύ των τιμών, να δώσετε μια μονάδα που θα εμφανίζεται δίπλα στον αριθμό και να ορίσετε τις τιμές min και max του ρυθμιστή.

Το ControlType.Number σάς επιτρέπει να καταγράφετε έναν περιορισμένο αριθμό.
δόντια: {
  πληκτρολογήστε: ControlType.Number,
  τίτλος: "Δόντια",
  λεπτά: 0,
  max: 32,
  μονάδα: "t",
  βήμα 1
}}

ControlType.Enum

Μην αφήνετε να σας ρίξει το όνομα του υπολογιστή-επιστήμονα: ο τύπος ελέγχου Enum χρησιμοποιείται μόνο για να επιλέξετε μεταξύ ενός συνόλου αμοιβαία αποκλειστικών επιλογών - ή, εάν αισθάνεστε ακριβείς, ένα απαριθμημένο σύνολο επιλογών.

Ο Framer X χρησιμοποιεί ένα αναπτυσσόμενο μενού για αυτόν τον έλεγχο. Απαιτεί μία ιδιότητα, επιλογές: μια σειρά τιμών. Έχει επίσης μια προαιρετική ιδιότητα, optionTitles, που παρέχει μια σειρά συμβολοσειρών για εμφάνιση για κάθε μία από αυτές τις επιλογές.

κατάσταση: {
    πληκτρολογήστε: ControlType.Enum,
    επιλογές: ["ρελαντί", "λήψη", "επιτυχία", "σφάλμα"],
    optionsTitles: ["Αδράνεια", "Ανάκτηση", "Επιτυχία", "Σφάλμα"],
    τίτλος: "Κατάσταση"
  },

ControlType.Color και ControlType.Image

Και οι δύο αυτοί τύποι ελέγχου δεν έχουν ιδιότητες εκτός από τις προεπιλογές, τον τίτλο και τις κρυφές.

bonesColor: {
  τύπου: ControlType.Color,
  τίτλος: "Χρώμα"
},
userPhoto: {
  πληκτρολογήστε: ControlType.Image,
  τίτλος: "Φωτογραφία χρήστη"
}}

ControlType.SegmentedEnum

Ένα κατακερματισμένο enum είναι το ίδιο με ένα ControlType.Enum, παρουσιάζεται μόνο ως έλεγχος τμήματος.

ευθυγραμμίστε: {
  πληκτρολογήστε: ControlType.SegmentedEnum,
  επιλογές: ["αριστερά", "κέντρο", "δεξιά", "δικαιολογήσουν"],
  Τίτλοι επιλογών: ["L", "C", "R", "J"],
  τίτλος: "Ευθυγράμμιση"
}}

ControlType.FusedNumber

Πολύ πιο ασυνήθιστος τύπος ελέγχου είναι ο ControlType.FusedNumber. Αυτός ο έλεγχος σάς επιτρέπει να ορίσετε τέσσερις ξεχωριστές ιδιότητες ή μια πέμπτη ιδιότητα που καθορίζει και τα τέσσερα. Εξετάστε την παραμόρφωση ως περίπτωση χρήσης: στο CSS, μπορείτε να ορίσετε μια μοναδική τιμή padding, όπως padding: 4px; - ή τέσσερις διαφορετικές τιμές, όπως padding: 4px 8px 12px 8px ;, που θα ορίσετε τα επάνω, δεξιά, κάτω και αριστερά paddings. Ένας έλεγχος αριθμημένων αριθμών θα σας επιτρέψει να ρυθμίσετε εύκολα αυτούς τους τύπους τιμών.

padding: {
  πληκτρολογήστε: ControlType.FusedNumber,
  τίτλος: "Padding",
  toggleKey: "pSide",
  toggleTitles: ["Padding", "Padding per Side"],
  valueKeys: ["pt", "pr", "pb", "pl"],
  τιμέςΑριθμοί: ["T", "R", "B", "L"],
  min: 0
}}

ControlType.File

Με το ControlType.File, μπορείτε να επιτρέπετε στους χρήστες να προσθέτουν αρχεία στο έργο Framer X. Πρέπει να συμπεριλάβετε μια σειρά επεκτάσεων αρχείων ως συμβολοσειρές (π.χ. "jpeg"), για να πείτε στον έλεγχο ποιοι τύποι αρχείων επιτρέπουν.

αρχείο: {
  πληκτρολογήστε: ControlType.File,
  τίτλος: "Έγγραφο",
  ΕπιτρεπόμεναΦύλλα Τύπος: ["txt", "pdf", "docx"]
}}

συμπέρασμα

Ο Framer X εξακολουθεί να βρίσκεται σε έκδοση beta, επομένως ορισμένες από αυτές τις διασυνδέσεις μπορεί να αλλάξουν γρηγορότερα από ότι μπορώ να ενημερώσω αυτό το άρθρο. Εάν κάτι δεν λειτουργεί, πηδήξτε στο χαλαρό και βρείτε κάποια βοήθεια.

Εάν σας άρεσε αυτό το άρθρο, σπάστε αυτό το πολύτιμο κουμπί χειροκρότημα και με ενημερώστε.

Ενημερώσεις:

  • 15 Σεπτεμβρίου 2018: προστέθηκε το ControlType.File, ενημερώθηκε το ControlType.Color