Ringkasan dasar tentang cara membuat komponen tab yang mirip dengan yang ada di aplikasi iOS dan Android.
Dalam postingan ini, saya ingin berbagi pemikiran tentang cara membuat komponen Tab untuk web yang responsif, mendukung beberapa input perangkat, dan berfungsi di berbagai browser. Coba demo.
Jika Anda lebih suka video, berikut versi YouTube dari postingan ini:
Ringkasan
Tab adalah komponen umum dari sistem desain, tetapi dapat memiliki banyak bentuk dan
wujud. Pertama, ada tab desktop yang dibuat di elemen <frame>, dan sekarang kita memiliki
komponen seluler yang lancar yang menganimasikan konten berdasarkan properti fisik.
Semuanya mencoba melakukan hal yang sama: menghemat ruang.
Saat ini, hal penting dalam pengalaman pengguna tab adalah area navigasi tombol yang mengalihkan visibilitas konten dalam frame tampilan. Banyak area konten yang berbeda menggunakan ruang yang sama, tetapi ditampilkan secara bersyarat berdasarkan tombol yang dipilih di navigasi.
Taktik web
Secara keseluruhan, saya merasa komponen ini cukup mudah dibuat, berkat beberapa fitur platform web yang penting:
scroll-snap-pointsuntuk interaksi geser dan keyboard yang elegan dengan posisi berhenti scroll yang sesuai- Deep link melalui hash URL untuk penambatan scroll dalam halaman dan dukungan berbagi yang ditangani browser
- Dukungan pembaca layar dengan markup elemen
<a>danid="#hash" prefers-reduced-motionuntuk mengaktifkan transisi crossfade dan scroll dalam halaman instan- Fitur web
@scroll-timelinedalam draf untuk menggarisbawahi dan mengubah warna tab yang dipilih secara dinamis
HTML
Pada dasarnya, UX di sini adalah: klik link, buat URL mewakili status halaman bertingkat, lalu lihat area konten diperbarui saat browser di-scroll ke elemen yang cocok.
Ada beberapa anggota konten struktural di dalamnya: link dan :target. Kita
memerlukan daftar link, yang cocok untuk <nav>, dan daftar elemen
<article>, yang cocok untuk <section>. Setiap hash link akan cocok dengan suatu bagian,
sehingga browser dapat men-scroll konten melalui penautan.
Misalnya, mengklik link akan otomatis memfokuskan artikel :target di
Chrome 89, tanpa memerlukan JS. Kemudian, pengguna dapat men-scroll konten artikel dengan
perangkat inputnya seperti biasa. Konten ini adalah konten pelengkap, seperti yang ditunjukkan dalam
markup.
Saya menggunakan markup berikut untuk mengatur tab:
<snap-tabs>
<header>
<nav>
<a></a>
<a></a>
<a></a>
<a></a>
</nav>
</header>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</snap-tabs>
Saya dapat membuat koneksi antara elemen <a> dan <article> dengan
properti href dan id seperti ini:
<snap-tabs>
<header>
<nav>
<a href="#responsive"></a>
<a href="#accessible"></a>
<a href="#overscroll"></a>
<a href="#more"></a>
</nav>
</header>
<section>
<article id="responsive"></article>
<article id="accessible"></article>
<article id="overscroll"></article>
<article id="more"></article>
</section>
</snap-tabs>
Selanjutnya, saya mengisi artikel dengan jumlah lorem yang bervariasi, dan link dengan panjang dan kumpulan judul gambar yang bervariasi. Dengan konten yang akan digunakan, kita dapat memulai tata letak.
Tata letak scroll
Ada 3 jenis area scroll yang berbeda dalam komponen ini:
- Navigasi (merah muda) dapat di-scroll secara horizontal
- Area konten (biru) dapat di-scroll secara horizontal
- Setiap item artikel (hijau) dapat di-scroll secara vertikal.
Ada 2 jenis elemen yang terlibat dalam scroll:
- Jendela
Kotak dengan dimensi yang ditentukan yang memiliki gaya propertioverflow. - Platform yang terlalu besar
Dalam tata letak ini, container daftar: link navigasi, artikel bagian, dan konten artikel.
Tata letak <snap-tabs>
Tata letak tingkat teratas yang saya pilih adalah flex (Flexbox). Saya menetapkan arah ke
column, sehingga header dan bagian diurutkan secara vertikal. Ini adalah jendela scroll pertama kita, dan jendela ini menyembunyikan semua elemen dengan overflow tersembunyi. Header dan
bagian akan segera menggunakan overscroll, sebagai zona individual.
<snap-tabs> <header></header> <section></section> </snap-tabs>
snap-tabs { display: flex; flex-direction: column; /* establish primary containing box */ overflow: hidden; position: relative; & > section { /* be pushy about consuming all space */ block-size: 100%; } & > header { /* defend againstneeding 100% */ flex-shrink: 0; /* fixes cross browser quarks */ min-block-size: fit-content; } }
Menunjuk kembali ke diagram 3-scroll yang berwarna-warni:
<header>kini siap menjadi penampung scroll (merah muda).<section>disiapkan untuk menjadi penampung scroll (biru).
Frame yang telah saya tandai di bawah dengan VisBug membantu kita melihat jendela yang telah dibuat oleh penampung scroll.
Tata letak <header> tab
Tata letak berikutnya hampir sama: Saya menggunakan flex untuk membuat pengurutan vertikal.
<snap-tabs>
<header>
<nav></nav>
<span class="snap-indicator"></span>
</header>
<section></section>
</snap-tabs>header { display: flex; flex-direction: column; }
.snap-indicator harus bergerak secara horizontal dengan grup link, dan
tata letak header ini membantu menyiapkan tahap tersebut. Tidak ada elemen yang diposisikan secara mutlak di sini.
Selanjutnya, gaya scroll. Ternyata kita dapat membagikan gaya scroll
antara 2 area scroll horizontal (header dan bagian), jadi saya membuat class
utilitas, .scroll-snap-x.
.scroll-snap-x {
/* browser decide if x is ok to scroll and show bars on, y hidden */
overflow: auto hidden;
/* prevent scroll chaining on x scroll */
overscroll-behavior-x: contain;
/* scrolling should snap children on x */
scroll-snap-type: x mandatory;
@media (hover: none) {
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
}
Masing-masing memerlukan overflow pada sumbu x, penampung scroll untuk menangkap overscroll, scrollbar tersembunyi untuk perangkat sentuh, dan terakhir scroll-snap untuk mengunci area presentasi konten. Urutan tab keyboard kami dapat diakses dan interaksi apa pun memandu fokus secara alami. Penampung pengepasan posisi scroll juga mendapatkan interaksi gaya carousel yang bagus dari keyboard.
Tata letak header tab <nav>
Link navigasi harus diletakkan dalam satu baris, tanpa jeda baris, di tengah secara vertikal, dan setiap item link harus dipaskan ke penampung scroll-snap. Swift work for 2021 CSS!
<nav> <a></a> <a></a> <a></a> <a></a> </nav>
nav { display: flex; & a { scroll-snap-align: start; display: inline-flex; align-items: center; white-space: nowrap; } }
Setiap link menentukan gaya dan ukurannya sendiri, sehingga tata letak navigasi hanya perlu menentukan arah dan alur. Lebar unik pada item navigasi membuat transisi antar-tab menjadi menyenangkan karena indikator menyesuaikan lebarnya dengan target baru. Bergantung pada jumlah elemen di sini, browser akan merender scrollbar atau tidak.
Tata letak <section> tab
Bagian ini adalah item fleksibel dan harus menjadi konsumen ruang yang dominan. Sistem ini juga perlu membuat kolom untuk menempatkan artikel. Sekali lagi, kerja cepat
untuk CSS 2021! block-size: 100% merentangkan elemen ini untuk mengisi
induk sebanyak mungkin, lalu untuk tata letaknya sendiri, elemen ini membuat serangkaian
kolom yang lebarnya 100% dari induk. Persentase berfungsi dengan baik di sini karena kita telah menulis batasan yang kuat pada induk.
<section> <article></article> <article></article> <article></article> <article></article> </section>
section { block-size: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; }
Seolah-olah kita mengatakan "perluas secara vertikal sebanyak mungkin, dengan cara yang memaksa"
(ingat header yang kita tetapkan ke flex-shrink: 0: ini adalah pertahanan terhadap dorongan
perluasan ini), yang menetapkan tinggi baris untuk sekumpulan kolom tinggi penuh. Gaya
auto-flow memberi tahu petak untuk selalu menata letak turunan dalam garis
horizontal, tanpa penggabungan, persis seperti yang kita inginkan; untuk meluap ke jendela induk.
Terkadang, saya merasa sulit untuk memahaminya. Elemen bagian ini dimasukkan ke dalam kotak, tetapi juga membuat sekumpulan kotak. Semoga visual dan penjelasannya membantu.
Tata letak <article> tab
Pengguna harus dapat men-scroll konten artikel, dan scrollbar hanya boleh muncul jika ada tambahan. Elemen artikel ini berada dalam posisi yang rapi. Elemen ini sekaligus merupakan induk scroll dan turunan scroll. Browser benar-benar menangani beberapa interaksi sentuh, mouse, dan keyboard yang rumit untuk kita di sini.
<article> <h2></h2> <p></p> <p></p> <h2></h2> <p></p> <p></p> ... </article>
article { scroll-snap-align: start; overflow-y: auto; overscroll-behavior-y: contain; }
Saya memilih untuk membuat artikel diposisikan pas di dalam scroller induknya. Saya sangat menyukai cara item link navigasi dan elemen artikel diposisikan ke inline-start container scroll masing-masing. Hubungan ini terlihat dan terasa harmonis.
Artikel ini adalah turunan petak, dan ukurannya telah ditentukan sebelumnya sebagai area area pandang yang ingin kita sediakan UX scroll. Artinya, saya tidak memerlukan gaya tinggi atau lebar di sini, saya hanya perlu menentukan cara overflow-nya. Saya menetapkan overflow-y ke auto, lalu juga menjebak interaksi scroll dengan properti overscroll-behavior yang praktis.
Rangkuman 3 area scroll
Di bawah, saya telah memilih "selalu tampilkan scrollbar" di setelan sistem saya. Menurut saya, penting bagi tata letak untuk berfungsi dengan setelan ini diaktifkan, karena saya perlu meninjau tata letak dan orkestrasi scroll.
Menurut saya, melihat gutter scrollbar di komponen ini membantu menunjukkan dengan jelas di mana area scroll berada, arah yang didukung, dan cara area tersebut berinteraksi satu sama lain. Pertimbangkan bagaimana setiap frame jendela scroll ini juga merupakan induk flex atau grid untuk tata letak.
DevTools dapat membantu kita memvisualisasikan hal ini:
Tata letak scroll sudah lengkap: snapping, dapat di-deep link, dan dapat diakses dengan keyboard. Fondasi yang kuat untuk peningkatan UX, gaya, dan kepuasan.
Sorotan fitur
Turunan yang dipaskan posisi scroll-nya mempertahankan posisi terkuncinya selama pengubahan ukuran. Artinya, JavaScript tidak perlu menampilkan apa pun saat perangkat diputar atau browser diubah ukurannya. Cobalah di Mode Perangkat Chromium DevTools dengan memilih mode apa pun selain Responsif, lalu mengubah ukuran frame perangkat. Perhatikan bahwa elemen tetap terlihat dan terkunci dengan kontennya. Hal ini telah tersedia sejak Chromium memperbarui implementasinya agar sesuai dengan spesifikasi. Berikut adalah postingan blog tentang hal ini.
Animasi
Tujuan pekerjaan animasi di sini adalah untuk menautkan interaksi dengan masukan UI secara jelas. Hal ini membantu memandu atau membantu pengguna (semoga) menemukan semua konten dengan lancar. Saya akan menambahkan gerakan dengan tujuan dan secara bersyarat. Pengguna kini dapat menentukan preferensi gerakan di sistem operasi mereka, dan saya sangat senang merespons preferensi mereka di antarmuka saya.
Saya akan menautkan garis bawah tab dengan posisi scroll artikel. Pengepasan tidak hanya membuat perataan terlihat rapi, tetapi juga menambatkan awal dan akhir animasi.
Tindakan ini membuat <nav>, yang berfungsi seperti
peta mini, tetap terhubung ke konten.
Kita akan memeriksa preferensi gerakan pengguna dari CSS dan JS. Ada beberapa tempat yang bagus untuk bersikap penuh perhatian.
Perilaku scroll
Ada peluang untuk meningkatkan perilaku gerakan :target dan
element.scrollIntoView(). Secara default, prosesnya instan. Browser hanya menetapkan
posisi scroll. Nah, bagaimana jika kita ingin beralih ke posisi scroll tersebut,
bukan langsung berpindah ke sana?
@media (prefers-reduced-motion: no-preference) {
.scroll-snap-x {
scroll-behavior: smooth;
}
}
Karena kita memperkenalkan gerakan di sini, dan gerakan yang tidak dikontrol pengguna (seperti scroll), kita hanya menerapkan gaya ini jika pengguna tidak memiliki preferensi di sistem operasi mereka terkait gerakan yang dikurangi. Dengan cara ini, kita hanya memperkenalkan gerakan scroll untuk orang yang tidak keberatan.
Indikator tab
Tujuan animasi ini adalah untuk membantu mengaitkan indikator dengan status
konten. Saya memutuskan untuk menggunakan gaya crossfade warna border-bottom bagi pengguna
yang lebih menyukai gerakan yang dikurangi, dan animasi geser + fade warna yang ditautkan ke scroll
bagi pengguna yang tidak keberatan dengan gerakan.
Di Chromium Devtools, saya dapat mengaktifkan preferensi dan menunjukkan 2 gaya transisi yang berbeda. Saya sangat senang membuat ini.
@media (prefers-reduced-motion: reduce) {
snap-tabs > header a {
border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
transition: color .7s ease, border-color .5s ease;
&:is(:target,:active,[active]) {
color: var(--text-active-color);
border-block-end-color: hsl(var(--accent));
}
}
snap-tabs .snap-indicator {
visibility: hidden;
}
}
Saya menyembunyikan .snap-indicator saat pengguna lebih memilih gerakan yang dikurangi karena saya tidak
memerlukannya lagi. Kemudian, saya menggantinya dengan gaya border-block-end dan
transition. Perhatikan juga dalam interaksi tab bahwa item navigasi aktif tidak
hanya memiliki sorotan garis bawah merek, tetapi warna teksnya juga lebih gelap. Elemen
aktif memiliki kontras warna teks yang lebih tinggi dan aksen cahaya bawah yang terang.
Hanya beberapa baris CSS tambahan akan membuat seseorang merasa diperhatikan (dalam arti bahwa kita dengan cermat menghormati preferensi gerakan mereka). Saya suka sekali.
@scroll-timeline
Di bagian di atas, saya telah menunjukkan cara menangani gaya crossfade pengurangan gerakan, dan di bagian ini, saya akan menunjukkan cara menautkan indikator dan area scroll. Berikutnya adalah beberapa hal eksperimental yang menyenangkan. Semoga Anda sama antusiasnya dengan saya.
const { matches:motionOK } = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
);
Pertama-tama, saya memeriksa preferensi gerakan pengguna dari JavaScript. Jika hasilnya
adalah false, yang berarti pengguna lebih memilih gerakan yang dikurangi, kita tidak akan menjalankan
efek gerakan penautan scroll apa pun.
if (motionOK) {
// motion based animation code
}
Saat artikel ini ditulis, dukungan browser untuk
@scroll-timeline tidak ada. Ini adalah
spesifikasi draf yang hanya memiliki
implementasi eksperimental. Namun, API ini memiliki polyfill, yang saya gunakan dalam demo ini.
ScrollTimeline
Meskipun CSS dan JavaScript dapat membuat linimasa scroll, saya memilih JavaScript agar dapat menggunakan pengukuran elemen langsung dalam animasi.
const sectionScrollTimeline = new ScrollTimeline({
scrollSource: tabsection, // snap-tabs > section
orientation: 'inline', // scroll in the direction letters flow
fill: 'both', // bi-directional linking
});
Saya ingin 1 hal mengikuti posisi scroll hal lain, dan dengan membuat
ScrollTimeline, saya menentukan pemicu link scroll, yaitu scrollSource.
Biasanya, animasi di web berjalan berdasarkan tick jangka waktu global, tetapi dengan
sectionScrollTimeline kustom dalam memori, saya dapat mengubah semua itu.
tabindicator.animate({
transform: ...,
width: ...,
}, {
duration: 1000,
fill: 'both',
timeline: sectionScrollTimeline,
}
);
Sebelum membahas keyframe animasi, penting untuk
menunjukkan bahwa pengikut scroll, tabindicator, akan dianimasikan berdasarkan
linimasa kustom, yaitu scroll bagian kita. Tindakan ini akan menyelesaikan penautan, tetapi
tidak memiliki elemen terakhir, yaitu titik stateful untuk dianimasikan, yang juga dikenal sebagai
keyframe.
Keyframe dinamis
Ada cara CSS deklaratif murni yang sangat efektif untuk menganimasikan dengan
@scroll-timeline, tetapi animasi yang saya pilih terlalu dinamis. Tidak ada
cara untuk melakukan transisi antara lebar auto, dan tidak ada cara untuk membuat
sejumlah keyframe secara dinamis berdasarkan panjang turunan.
Namun, JavaScript tahu cara mendapatkan informasi tersebut, jadi kita akan melakukan iterasi pada turunan sendiri dan mengambil nilai yang dihitung saat runtime:
tabindicator.animate({
transform: [...tabnavitems].map(({offsetLeft}) =>
`translateX(${offsetLeft}px)`),
width: [...tabnavitems].map(({offsetWidth}) =>
`${offsetWidth}px`)
}, {
duration: 1000,
fill: 'both',
timeline: sectionScrollTimeline,
}
);
Untuk setiap tabnavitem, destrukturisasi posisi offsetLeft dan tampilkan string
yang menggunakannya sebagai nilai translateX. Tindakan ini akan membuat 4 keyframe transformasi untuk
animasi. Hal yang sama dilakukan untuk lebar, masing-masing ditanya berapa lebar dinamisnya,
lalu digunakan sebagai nilai keyframe.
Berikut contoh output, berdasarkan preferensi font dan browser saya:
Keyframe TranslateX:
[...tabnavitems].map(({offsetLeft}) =>
`translateX(${offsetLeft}px)`)
// results in 4 array items, which represent 4 keyframe states
// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]
Keyframe Lebar:
[...tabnavitems].map(({offsetWidth}) =>
`${offsetWidth}px`)
// results in 4 array items, which represent 4 keyframe states
// ["121px", "117px", "226px", "67px"]
Untuk meringkas strategi, indikator tab kini akan dianimasikan di 4 keyframe bergantung pada posisi snap scroll dari scroller bagian. Titik paskan menciptakan delineasi yang jelas antara keyframe dan benar-benar menambah kesan sinkronisasi animasi.
Pengguna menggerakkan animasi dengan interaksinya, melihat lebar dan posisi indikator berubah dari satu bagian ke bagian berikutnya, mengikuti scroll dengan sempurna.
Anda mungkin tidak menyadarinya, tetapi saya sangat bangga dengan transisi warna saat item navigasi yang ditandai dipilih.
Warna abu-abu yang lebih terang dan tidak dipilih akan tampak lebih terdorong ke belakang saat item yang disorot memiliki kontras yang lebih tinggi. Mentransisikan warna untuk teks, seperti saat kursor diarahkan dan saat dipilih, adalah hal yang umum, tetapi mentransisikan warna tersebut saat di-scroll, yang disinkronkan dengan indikator garis bawah, adalah hal yang luar biasa.
Berikut cara saya melakukannya:
tabnavitems.forEach(navitem => {
navitem.animate({
color: [...tabnavitems].map(item =>
item === navitem
? `var(--text-active-color)`
: `var(--text-color)`)
}, {
duration: 1000,
fill: 'both',
timeline: sectionScrollTimeline,
}
);
});
Setiap link navigasi tab memerlukan animasi warna baru ini, yang melacak linimasa scroll yang sama dengan indikator garis bawah. Saya menggunakan linimasa yang sama seperti sebelumnya: karena perannya adalah memunculkan tick saat di-scroll, kita dapat menggunakan tick tersebut dalam jenis animasi apa pun yang kita inginkan. Seperti yang saya lakukan sebelumnya, saya membuat 4 keyframe dalam loop, dan menampilkan warna.
[...tabnavitems].map(item =>
item === navitem
? `var(--text-active-color)`
: `var(--text-color)`)
// results in 4 array items, which represent 4 keyframe states
// [
"var(--text-active-color)",
"var(--text-color)",
"var(--text-color)",
"var(--text-color)",
]
Keyframe dengan warna var(--text-active-color) menandai link, dan
warna lainnya adalah warna teks standar. Loop bertingkat di sana membuatnya relatif
mudah, karena loop luar adalah setiap item navigasi, dan loop dalam adalah keyframe
pribadi setiap item navigasi. Saya memeriksa apakah elemen loop luar sama dengan
elemen loop dalam, dan menggunakannya untuk mengetahui kapan elemen tersebut dipilih.
Saya sangat senang menulis ini. Sangat banyak.
Peningkatan JavaScript lainnya
Perlu diingat bahwa inti dari apa yang kami tunjukkan di sini berfungsi tanpa JavaScript. Dengan demikian, mari kita lihat cara meningkatkannya saat JS tersedia.
Deep link
Deep link lebih merupakan istilah seluler, tetapi menurut kami, maksud deep link
terpenuhi di sini dengan tab karena Anda dapat membagikan URL langsung ke konten tab. Browser akan melakukan navigasi dalam halaman ke ID yang cocok dalam hash URL. Saya menemukan
bahwa pengendali onload ini membuat efek di seluruh platform.
window.onload = () => {
if (location.hash) {
tabsection.scrollLeft = document
.querySelector(location.hash)
.offsetLeft;
}
}
Sinkronisasi akhir scroll
Pengguna tidak selalu mengklik atau menggunakan keyboard, terkadang mereka hanya men-scroll bebas, sebagaimana mestinya. Saat penggulir bagian berhenti menggulir, di mana pun penggulir berhenti, bagian tersebut harus cocok dengan menu navigasi atas.
Berikut cara menunggu akhir scroll:
js
tabsection.addEventListener('scroll', () => {
clearTimeout(tabsection.scrollEndTimer);
tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
});
Setiap kali bagian di-scroll, hapus waktu tunggu bagian jika ada, dan mulai yang baru. Saat bagian berhenti di-scroll, jangan hapus waktu tunggu, dan aktifkan 100 md setelah berhenti. Saat diaktifkan, panggil fungsi yang berupaya mencari tahu tempat pengguna berhenti.
const determineActiveTabSection = () => {
const i = tabsection.scrollLeft / tabsection.clientWidth;
const matchingNavItem = tabnavitems[i];
matchingNavItem && setActiveTab(matchingNavItem);
};
Dengan asumsi posisi scroll telah pas, membagi posisi scroll saat ini dengan lebar area scroll akan menghasilkan bilangan bulat, bukan desimal. Kemudian, saya mencoba mengambil navitem dari cache melalui indeks yang dihitung ini, dan jika menemukan sesuatu, saya mengirimkan kecocokan untuk ditetapkan sebagai aktif.
const setActiveTab = tabbtn => {
tabnav
.querySelector(':scope a[active]')
.removeAttribute('active');
tabbtn.setAttribute('active', '');
tabbtn.scrollIntoView();
};
Menetapkan tab aktif dimulai dengan menghapus tab yang saat ini aktif, lalu memberikan atribut status aktif ke item navigasi yang masuk. Panggilan ke scrollIntoView()
memiliki interaksi yang menarik dengan CSS yang perlu diperhatikan.
.scroll-snap-x {
overflow: auto hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
Dalam CSS utilitas pengepasan posisi scroll horizontal, kami telah
menyusun bertingkat kueri media yang menerapkan
scroll smooth jika pengguna menoleransi gerakan. JavaScript dapat dengan bebas melakukan
panggilan untuk men-scroll elemen ke tampilan, dan CSS dapat mengelola UX secara deklaratif.
Terkadang, mereka bisa menjadi pasangan yang cukup menyenangkan.
Kesimpulan
Setelah tahu cara saya melakukannya, bagaimana cara Anda melakukannya? Hal ini membuat arsitektur komponen menjadi menarik. Siapa yang akan membuat versi pertama dengan slot di framework favorit mereka? 🙂
Mari kita diversifikasi pendekatan kita dan pelajari semua cara untuk membangun di web. Buat Glitch, tweet versi Anda, dan saya akan menambahkannya ke bagian Remix komunitas di bawah.
Remix komunitas
- @devnook, @rob_dodson, dan @DasSurma dengan Komponen Web: artikel.
- @jhvanderschee dengan tombol: Codepen.