trimmings
1.0.0
Apa yang terjadi pada proses pengembangan web Anda ketika Anda dapat fokus pada merancang pandangan dan berhenti berpikir tentang cara menjahitnya bersama? Trimmings by postlight adalah perpustakaan JavaScript nol-konfigurasi yang menambahkan lapisan interaksi dalam halaman yang halus dan cepat ke halaman web Anda. Yang harus Anda lakukan adalah menambahkan beberapa petunjuk ke HTML yang sudah Anda miliki.
Baca lebih lanjut tentang hal itu dalam perkenalan kami untuk hiasan.
Proyek ini mengikuti jejak perpustakaan seperti turbolink dan stimulus. Percaya bahwa tempat terbaik untuk bisnis Anda dan rendering logika ada di server, bahwa Anda harus mengirim pengguna HTML, dan bahwa JavaScript paling cocok untuk manipulasi DOM yang ditingkatkan secara progresif. Trimmings adalah serangkaian pola yang memungkinkan Anda untuk menambahkan manipulasi DOM ke aplikasi Anda dengan menambahkan atribut data-trimmings-* ke elemen interaktif Anda. Lebih sedikit javascript dalam proyek Anda berarti lebih sedikit risiko.
Setelah Anda membangun situs web Anda dan melayani HTML yang disajikan seperti yang Anda suka, Anda dapat mulai menambahkan petunjuk hiasan yang akan meningkatkan cara perilaku interaksi Anda.
Mungkin Anda memiliki tautan ke halaman detail yang ingin Anda buka dalam modal. Halaman mandiri mungkin memiliki header dan footer yang tidak ingin Anda render dalam modal Anda. Itu tidak masalah. Cukup tambahkan petunjuk inline ke tautan Anda:
<a data-trimmings-inline="from: .detail-container, to: .modal-container" href="/photos/2">
View as a modal
</a>
Jika pengunjung Anda mengklik tautan itu, halaman akan diambil di latar belakang, elemen dengan kelas detail-container akan diekstraksi dari hasilnya, dan itu akan dimasukkan ke dalam elemen dengan kelas modal-container yang sudah ada di halaman. Anda dapat menulis CSS yang akan membuat ini muncul sesuka Anda. Sekarang Anda memiliki modal! Hanya itu yang ada di sana!
Cukup sertakan trimmings.js di <head> Anda. Itu saja. Trimming akan secara otomatis diaktifkan saat halaman Anda dimuat - tidak perlu memikirkan siklus hidup.
<script src="/trimmings.js"></script>
Fitur hiasan diaktifkan pada elemen spesifik dengan menambahkan atribut data-trimmings-* . Untuk detail lebih lanjut tentang penggunaan setiap fitur hiasan, silakan berkonsultasi dengan buku pegangan hiasan.
Berlisensi di bawah salah satu dari
di pilihan Anda.
Jika Anda telah menemukan bug atau Anda ingin mengusulkan fitur baru, kirimkan masalah dan mari kita bicarakan!
Kami berharap bahwa semua kontributor untuk hiasan akan mematuhi kode etik kami.
Kecuali jika Anda secara eksplisit menyatakan sebaliknya, kontribusi apa pun secara sengaja diserahkan untuk dimasukkan dalam pekerjaan oleh Anda, sebagaimana didefinisikan dalam lisensi APACHE-2.0, harus dilisensikan ganda seperti di atas, tanpa syarat atau ketentuan tambahan.
? Proyek Labs dari teman -teman Anda di postlight. Happy Coding!
