Δημιουργήστε στοιχεία αυτόματης αλλαγής μεγέθους με το Scalable.js

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

Τα πάντα στη βιβλιοθήκη Scalable.js είναι εύκαμπτα, ώστε να μπορείτε να αλλάξετε το στυλ, το μέγεθος, τη θέση και το εσωτερικό περιεχόμενο κάθε κοντέινερ. Χρειάζεστε στοιχεία ευθυγραμμισμένα με το επάνω ή το κάτω μέρος της σελίδας; Το Scalable έχει επιλογές για αυτό.

Ρίξτε μια ματιά στο repos GitHub για να μάθετε περισσότερα για το πώς λειτουργεί αυτό.

Στην πιο βασική μορφή του, αυτό το σενάριο παίρνει ένα στοιχείο σελίδας στόχου μαζί με μερικές επιλογές για την προσαρμογή της οθόνης. Ακολουθεί ένας δείγμα κώδικα που έχει ληφθεί κατευθείαν από το GitHub:

var scalable = νέο κλιμακωτό (containerEl, επιλογές);

Φυσικά, η πρώτη παράμετρος είναι όποιο στοιχείο του δοχείου στοχεύετε (ιδανικά ένα

ή κάτι παρόμοιο).

Η παράμετρος επιλογών θα πρέπει να λάβει μια σειρά ζευγών κλειδιών => τιμών. Αυτές οι επιλογές περιλαμβάνουν τις τιμές ύψους δοχείου, τα ελάχιστα και τα μέγιστα πλάτη, μαζί με κλίμακες min και max (δηλαδή πόσο μπορεί να κλιμακωθεί με τα εσωτερικά στοιχεία).

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

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

Εάν θέλετε να το δοκιμάσετε, αρπάξτε ένα αντίγραφο από το GitHub και δείτε τι σκέφτεστε.

Το Scalable είναι ακόμα σε ενεργό ανάπτυξη, αλλά είναι ένα εύκολο σενάριο για επεξεργασία για τις ανάγκες σας.