trimmings
1.0.0
Was passiert mit Ihrem Webentwicklungsprozess, wenn Sie sich darauf konzentrieren können, Ansichten zu entwerfen und nicht mehr darüber nachzudenken, wie Sie sie zusammenfügen können? Trimings by Postlight ist eine JavaScript-Bibliothek mit Nullkonfiguration, die Ihren Webseiten eine schleppende Interaktion mit reibungsloser und schneller Einstellung hinzufügt. Alles, was Sie tun müssen, ist, der HTML, die Sie bereits haben, einige Hinweise hinzuzufügen.
Lesen Sie mehr darüber in unserer Einführung in die Zutaten.
Dieses Projekt folgt in die Fußstapfen von Bibliotheken wie Turbrolinks und Stimulus. Es ist der Ansicht, dass der beste Ort für Ihr Unternehmen und die Rendering-Logik auf dem Server liegt, dass Sie Ihren Benutzern HTML senden sollten und dass JavaScript am besten für die zunehmend verstärkte DOM-Manipulation geeignet ist. Trimings ist eine Reihe von Mustern, mit denen Sie Ihrer App DOM-Manipulation hinzufügen können, indem Sie Ihre interaktiven Elemente zu data-trimmings-* Attributen hinzufügen. Weniger JavaScript in Ihrem Projekt bedeutet weniger Risiko.
Sobald Sie Ihre Website erstellt haben und HTML dient, die die Art und Weise präsentiert, wie Sie sie mögen, können Sie Angaben zum Hinzufügen von Tipps hinzufügen, die die Art und Weise verbessern, wie sich Ihre Interaktionen verhalten.
Vielleicht haben Sie einen Link zu einer Detailseite, die Sie in einem Modal öffnen möchten. Die eigenständige Seite hat wahrscheinlich eine Header und Fußzeile, die Sie in Ihrem Modal nicht rendern möchten. Das ist kein Problem. Fügen Sie Ihrem Link einfach einen inline -Hinweis hinzu:
<a data-trimmings-inline="from: .detail-container, to: .modal-container" href="/photos/2">
View as a modal
</a>
Wenn Ihr Besucher auf diesen Link klickt, wird die Seite im Hintergrund abgerufen, das Element mit der detail-container -Klasse wird aus dem Ergebnis extrahiert und wird in ein Element mit der modal-container -Klasse eingefügt, die sich bereits auf der Seite befindet. Sie können CSS schreiben, mit denen dies angezeigt wird, wie Sie möchten. Jetzt hast du ein Modal! Das ist alles, was es gibt!
Fügen Sie einfach trimmings.js in Ihren <head> auf. Das war's. Die Zutaten werden automatisch aktiviert, wenn Ihre Seite geladen wird - nicht über Lebenszyklen nachdenken.
<script src="/trimmings.js"></script>
Die Trimings-Funktionen werden in bestimmten Elementen aktiviert, indem data-trimmings-* Attribute hinzugefügt werden. Weitere Informationen zur Nutzung der einzelnen Trimmings -Funktionen erhalten Sie vom Trinking -Handbuch.
Lizenziert unter einem von
nach Ihrer Option.
Wenn Sie einen Fehler gefunden haben oder eine neue Funktion vorschlagen möchten, senden Sie ein Problem und lassen Sie uns darüber sprechen!
Wir gehen davon aus, dass sich alle Mitwirkenden an den Zeugnissen an unseren Verhaltenskodex halten.
Sofern Sie nicht ausdrücklich anders angeben, ist ein Beitrag, der absichtlich zur Aufnahme in die Arbeit von Ihnen eingereicht wird, wie in der Apache-2.0-Lizenz definiert, ohne zusätzliche Bedingungen doppelt lizenziert wie oben.
? Ein Laborsprojekt von Ihren Freunden bei Postlight. Happy Coding!
