Ringkasan dasar tentang cara membuat komponen setelan penggeser dan kotak centang.
Dalam posting ini saya ingin berbagi pemikiran tentang membangun komponen Setelan untuk web yang responsif, mendukung banyak {i>input<i} perangkat, dan berfungsi di berbagai browser. Coba demo.
Jika Anda lebih suka video, atau menginginkan pratinjau UI/UX dari apa yang sedang kami buat, berikut adalah panduan yang lebih singkat di YouTube:
Ringkasan
Saya telah membagi aspek komponen ini ke dalam bagian-bagian berikut:
- Tata Letak
- Warna
- Input rentang kustom
- Input kotak centang kustom
- Pertimbangan aksesibilitas
- JavaScript
Tata letak
Ini adalah demo Tantangan GUI pertama yang menjadi semua Petak CSS! Berikut ini setiap {i>grid<i} ditandai dengan Chrome DevTools untuk petak:
Hanya untuk celah
Tata letak yang paling umum:
foo {
display: grid;
gap: var(--something);
}
Saya menyebut tata letak ini "hanya untuk celah" karena hanya menggunakan {i>grid<i} untuk menambahkan celah antar blok.
Lima tata letak menggunakan strategi ini, semuanya ditampilkan berikut ini:
Elemen fieldset
, yang berisi setiap grup input (.fieldset-item
), menggunakan gap: 1px
untuk
membuat batas garis rambut di antara elemen. Tidak ada solusi perbatasan yang rumit.
.grid { display: grid; gap: 1px; background: var(--bg-surface-1); & > .fieldset-item { background: var(--bg-surface-2); } }
.grid { display: grid; & > .fieldset-item { background: var(--bg-surface-2); &:not(:last-child) { border-bottom: 1px solid var(--bg-surface-1); } } }
Kemasan petak alami
Tata letak yang paling kompleks akhirnya
menjadi tata letak makro, tata letak logis
sistem antara <main>
dan <form>
.
Menempatkan konten penggabungan di tengah
Flexbox dan petak keduanya memberikan kemampuan untuk align-items
atau
align-content
, dan saat menangani elemen penggabungan, tata letak content
akan mendistribusikan ruang di antara
anak-anak sebagai kelompok.
main {
display: grid;
gap: var(--space-xl);
place-content: center;
}
Elemen utama menggunakan perataan place-content: center
singkatan agar
turunan berada di tengah secara vertikal dan horizontal dalam tata letak satu dan dua kolom.
Tonton video di atas bagaimana "konten" tetap berada di tengah, meskipun telah yang terjadi.
Ulangi paskan otomatis minmax
<form>
menggunakan tata letak petak adaptif untuk setiap bagian.
Tata letak ini beralih dari satu ke dua kolom berdasarkan ruang yang tersedia.
form {
display: grid;
gap: var(--space-xl) var(--space-xxl);
grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
align-items: flex-start;
max-width: 89vw;
}
Petak ini memiliki nilai yang berbeda untuk row-gap
(--space-xl) dengan column-gap
(--space-xxl)
untuk memberikan sentuhan khusus pada tata letak responsif. Ketika kolom menumpuk, kita
menginginkan celah yang besar, tetapi tidak sebesar
saat kita berada di layar yang lebar.
Properti grid-template-columns
menggunakan 3 fungsi CSS: repeat()
, minmax()
, dan
min()
. Una Kravets memiliki blog tata letak yang bagus
posting tentang hal ini.
RAM.
Ada 3 tambahan khusus dalam tata letak kita, jika Anda membandingkannya dengan Una:
- Kita meneruskan fungsi
min()
tambahan. - Kami menentukan
align-items: flex-start
. - Ada gaya
max-width: 89vw
.
Fungsi min()
tambahan dijelaskan dengan baik oleh Evan Minto di blognya di bagian
posting Kisi CSS yang Responsif Secara Intrinsik dengan minmax() dan
min().
Sebaiknya baca informasi tersebut. Koreksi perataan flex-start
adalah untuk
menghapus efek peregangan {i>default<i}, sehingga
turunan tata letak ini tidak
harus memiliki tinggi yang sama, mereka dapat memiliki tinggi intrinsik yang alami. Tujuan
Video YouTube memiliki perincian singkat tentang penambahan penyelarasan ini.
max-width: 89vw
layak untuk diuraikan kecil dalam postingan ini.
Saya akan menunjukkan tata letak dengan dan tanpa gaya yang diterapkan:
Apa yang terjadi? Saat ditentukan, max-width
akan memberikan konteks,
ukuran eksplisit atau pasti
ukuran untuk auto-fit
algoritma tata letak
untuk mengetahui caranya
banyak pengulangan yang bisa
masuk ke dalam ruang. Meskipun tampaknya jelas bahwa
spasi adalah "lebar penuh", sesuai dengan spesifikasi kisi CSS, ukuran tertentu atau ukuran maksimum harus
disediakan. Saya telah memberikan ukuran maksimum.
Jadi, mengapa 89vw
? Karena "berhasil" untuk tata letak saya.
Saya dan beberapa orang Chrome lainnya sedang
menyelidiki mengapa nilai yang lebih masuk akal,
seperti 100vw
saja tidaklah cukup, dan jika ini memang bug.
Spasi
Mayoritas harmoni tata letak ini berasal dari palet jarak yang terbatas, 7 tepatnya.
:root {
--space-xxs: .25rem;
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-xxl: 6rem;
}
Penggunaan alur ini sangat lancar dengan petak, CSS @nest, dan sintaksis level 5
@media. Berikut contohnya, kumpulan gaya tata letak yang sepenuhnya <main>
.
main {
display: grid;
gap: var(--space-xl);
place-content: center;
padding: var(--space-sm);
@media (width >= 540px) {
& {
padding: var(--space-lg);
}
}
@media (width >= 800px) {
& {
padding: var(--space-xl);
}
}
}
Petak dengan konten yang berada di tengah, dengan padding yang cukup secara default (seperti di perangkat seluler). Tapi seiring bertambahnya ruang area pandang yang tersedia, area akan menyebar dengan meningkatkan padding. CSS 2021 terlihat cukup bagus!
Ingat tata letak sebelumnya, "hanya untuk celah"? Berikut ini versi yang lebih lengkap dari tampilannya dalam komponen ini:
header {
display: grid;
gap: var(--space-xxs);
}
section {
display: grid;
gap: var(--space-md);
}
Warna
Penggunaan warna yang terkontrol membantu desain ini tampil beda dan ekspresif akan sangat minim. Saya melakukannya seperti ini:
:root {
--surface1: lch(10 0 0);
--surface2: lch(15 0 0);
--surface3: lch(20 0 0);
--surface4: lch(25 0 0);
--text1: lch(95 0 0);
--text2: lch(75 0 0);
}
Saya memberi nama warna permukaan dan teks dengan angka, bukan nama seperti
surface-dark
dan surface-darker
karena dalam kueri media, saya akan membalik
sedangkan terang dan gelap tidak akan bermakna.
Saya membaliknya dalam kueri media preferensi seperti ini:
:root {
...
@media (prefers-color-scheme: light) {
& {
--surface1: lch(90 0 0);
--surface2: lch(100 0 0);
--surface3: lch(98 0 0);
--surface4: lch(85 0 0);
--text1: lch(20 0 0);
--text2: lch(40 0 0);
}
}
}
Penting untuk melihat sekilas gambaran dan strategi keseluruhan sebelum kita akan membahas detail sintaks warna. Tapi, karena saya sudah berjalan terlalu jauh, izinkan saya kembali.
LCH?
Tanpa masuk terlalu dalam ke bidang teori warna, LCH adalah sintaks yang berorientasi pada manusia, yang bergantung pada cara kita mempersepsikan warna, bukan cara kita mengukur warna dengan matematika (seperti 255). Hal ini memberikan keuntungan tersendiri karena manusia dapat menulisnya dengan lebih mudah dan manusia akan selaras dengan penyesuaian ini.
Untuk hari ini, dalam demo ini, mari kita fokus pada sintaksis dan nilai yang saya balikkan untuk membuat terang dan gelap. Mari kita lihat 1 platform dan 1 warna teks:
:root {
--surface1: lch(10 0 0);
--text1: lch(95 0 0);
@media (prefers-color-scheme: light) {
& {
--surface1: lch(90 0 0);
--text1: lch(40 0 0);
}
}
}
--surface1: lch(10 0 0)
diterjemahkan menjadi kecerahan 10%
, 0 kroma, dan 0 hue: a
berwarna abu-abu yang
sangat gelap. Kemudian, dalam kueri media untuk mode terang, tingkat kecerahan
dibalik menjadi 90%
dengan --surface1: lch(90 0 0);
. Dan itulah inti dari
strategi. Mulailah dengan hanya mengubah kecerahan di antara 2 tema, mempertahankan
rasio kontras yang dibutuhkan desain atau
apa yang dapat mempertahankan aksesibilitas.
Bonusnya dengan lch()
di sini adalah bahwa kecerahan berorientasi pada manusia, dan kita dapat merasakan
baik tentang perubahan %
, bahwa perubahan tersebut akan terlihat dan konsisten
%
yang berbeda. hsl()
misalnya tidak seperti
andal.
Ada lagi yang perlu
pelajari tentang
ruang warna dan lch()
jika Anda tertarik. Sebentar lagi!
CSS saat ini tidak dapat mengakses warna ini sama sekali. Izinkan saya ulangi: Kita tidak memiliki akses ke sepertiga dari warna di sebagian besar warna monitor. Dan ini bukan sekadar warna, tetapi warna yang paling cemerlang yang dapat ditampilkan di layar. Situs web kita lenyap karena perkembangan hardware monitor lebih cepat daripada spesifikasi CSS dan implementasi browser.
Lea Verou
Kontrol formulir adaptif dengan skema warna
Banyak browser mengirimkan kontrol tema gelap, saat ini Safari dan Chromium, tetapi Anda harus tentukan dalam CSS atau HTML bahwa desain Anda menggunakannya.
Hal di atas menunjukkan efek properti dari panel Styles DevTools. Demo ini menggunakan tag HTML, yang menurut saya umumnya lokasi yang lebih baik:
<meta name="color-scheme" content="dark light">
Pelajari semuanya dalam color-scheme
artikel oleh Thomas
Pengarah. Masih banyak lagi yang dapat
daripada input kotak centang gelap.
accent-color
CSS
Ada terbaru
aktivitas di sekitar
accent-color
pada elemen formulir, menjadi gaya CSS tunggal yang dapat mengubah
warna yang digunakan dalam elemen input browser. Baca selengkapnya di sini
GitHub. Saya telah memasukkannya ke
gaya untuk komponen ini. Karena {i>browser<i} mendukungnya, kotak centang saya akan
lebih banyak tentang tema dengan pop warna merah muda dan ungu.
input[type="checkbox"] {
accent-color: var(--brand);
}
Warna muncul dengan gradien tetap dan fokus dalam
Warna muncul paling sering ketika digunakan dengan hemat, dan salah satu cara yang saya suka mencapai yaitu melalui interaksi UI yang penuh warna.
Ada banyak lapisan umpan balik dan interaksi UI dalam video di atas, yang membantu memberikan kepribadian pada interaksi dengan:
- Menyoroti konteks.
- Memberikan masukan UI tentang "seberapa penuh" nilainya berada dalam rentang.
- Memberikan masukan UI bahwa kolom menerima input.
Untuk memberikan masukan saat elemen sedang berinteraksi, CSS menggunakan
:focus-within
untuk mengubah tampilan berbagai elemen, mari kita uraikan
.fieldset-item
, ini sangat menarik:
.fieldset-item {
...
&:focus-within {
background: var(--surface2);
& svg {
fill: white;
}
& picture {
clip-path: circle(50%);
background: var(--brand-bg-gradient) fixed;
}
}
}
Jika salah satu turunan elemen ini memiliki fokus di dalam:
- Latar belakang
.fieldset-item
diberi warna permukaan dengan kontras yang lebih tinggi. svg
bertingkat diisi dengan warna putih agar kontrasnya lebih tinggi.<picture>
clip-path
bertingkat diperluas menjadi lingkaran penuh dan latar belakang diisi dengan gradien tetap yang cerah.
Rentang kustom
Dengan elemen input HTML berikut, saya akan menunjukkan cara menyesuaikan penampilan:
<input type="range">
Ada 3 bagian untuk elemen ini yang perlu kita sesuaikan:
Gaya elemen rentang
input[type="range"] {
/* style setting variables */
--track-height: .5ex;
--track-fill: 0%;
--thumb-size: 3ex;
--thumb-offset: -1.25ex;
--thumb-highlight-size: 0px;
appearance: none; /* clear styles, make way for mine */
display: block;
inline-size: 100%; /* fill container */
margin: 1ex 0; /* ensure thumb isn't colliding with sibling content */
background: transparent; /* bg is in the track */
outline-offset: 5px; /* focus styles have space */
}
Beberapa baris pertama CSS adalah bagian khusus dari gaya, dan saya harap melabelinya dengan jelas. Gaya lainnya sebagian besar adalah gaya {i>reset<i}, untuk memberikan fondasi yang konsisten untuk membangun bagian yang rumit dari komponen.
Gaya pelacakan
input[type="range"]::-webkit-slider-runnable-track {
appearance: none; /* clear styles, make way for mine */
block-size: var(--track-height);
border-radius: 5ex;
background:
/* hard stop gradient:
- half transparent (where colorful fill we be)
- half dark track fill
- 1st background image is on top
*/
linear-gradient(
to right,
transparent var(--track-fill),
var(--surface1) 0%
),
/* colorful fill effect, behind track surface fill */
var(--brand-bg-gradient) fixed;
}
Trik untuk ini adalah "mengungkapkan" warna isian yang cerah. Hal ini dilakukan dengan gradien "hard stop" di atasnya. Gradien transparan hingga persentase pengisian, dan setelah yang menggunakan warna permukaan jalur yang tidak terisi. Di balik permukaan yang tidak terisi itu, ada warna lebar penuh, menunggu transparansi untuk mengungkapkannya.
Melacak gaya pengisian
Desain saya membutuhkan JavaScript untuk mempertahankan gaya isian. Ada adalah strategi khusus CSS, tetapi mereka memerlukan elemen thumb dengan tinggi yang sama sebagai trek, dan saya tidak bisa menemukan keharmonisan dalam batas itu.
/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')
/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
const max = slider.getAttribute('max') || 10;
const percent = slider.value / max * 100;
return `${parseInt(percent)}%`;
};
/* on page load, set the fill amount */
sliders.forEach(slider => {
slider.style.setProperty('--track-fill', rangeToPercent(slider));
/* when a slider changes, update the fill prop */
slider.addEventListener('input', e => {
e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
})
})
Menurut saya, hal ini memberikan peningkatan visual yang bagus. {i>Penggeser<i} berfungsi
dengan baik tanpa
JavaScript, properti --track-fill
tidak diperlukan, properti tersebut tidak akan memiliki
gaya isian jika tidak ada. Jika JavaScript tersedia, isi kolom kustom
sambil mengamati setiap perubahan yang dilakukan pengguna, menyinkronkan properti khusus dengan
nilai.
Berikut adalah
posting di
Trik CSS oleh Ana
Tudor, yang menunjukkan solusi khusus CSS untuk
{i>track fill<i}. Saya juga menemukan ini
Elemen range
sangat menginspirasi.
Gaya thumb
input[type="range"]::-webkit-slider-thumb {
appearance: none; /* clear styles, make way for mine */
cursor: ew-resize; /* cursor style to support drag direction */
border: 3px solid var(--surface3);
block-size: var(--thumb-size);
inline-size: var(--thumb-size);
margin-top: var(--thumb-offset);
border-radius: 50%;
background: var(--brand-bg-gradient) fixed;
}
Mayoritas gaya ini adalah untuk membuat lingkaran yang bagus.
Sekali lagi, Anda melihat gradien latar belakang
tetap di sana yang menyatukan
warna dinamis thumb, track, dan elemen SVG terkait.
Saya memisahkan gaya untuk interaksi untuk membantu mengisolasi box-shadow
yang digunakan untuk sorotan kursor:
@custom-media --motionOK (prefers-reduced-motion: no-preference);
::-webkit-slider-thumb {
…
/* shadow spread is initally 0 */
box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
/* if motion is OK, transition the box-shadow change */
@media (--motionOK) {
& {
transition: box-shadow .1s ease;
}
}
/* on hover/active state of parent, increase size prop */
@nest input[type="range"]:is(:hover,:active) & {
--thumb-highlight-size: 10px;
}
}
Tujuannya adalah untuk memudahkan pengelolaan dan memberikan animasi sorotan visual untuk masukan pengguna. Dengan menggunakan bayangan kotak, saya dapat menghindari pemicu tata letak dengan efek. Saya melakukan ini dengan membuat bayangan yang tidak diburamkan dan sesuai dengan bentuk lingkaran thumb. Kemudian saya mengubah dan mentransisikan ukuran yang tersebar saat kursor diarahkan ke atasnya.
Kalau saja efek sorotan yang begitu mudah di kotak centang...
Pemilih lintas browser
Saya mendapati bahwa saya memerlukan pemilih -webkit-
dan -moz-
ini untuk mencapai lintas browser
{i>consistency <i}(konsistensi):
input[type="range"] {
&::-webkit-slider-runnable-track {}
&::-moz-range-track {}
&::-webkit-slider-thumb {}
&::-moz-range-thumb {}
}
Kotak Centang Kustom
Dengan elemen input HTML berikut, saya akan menunjukkan cara menyesuaikan penampilan:
<input type="checkbox">
Ada 3 bagian untuk elemen ini yang perlu kita sesuaikan:
Elemen kotak centang
input[type="checkbox"] {
inline-size: var(--space-sm); /* increase width */
block-size: var(--space-sm); /* increase height */
outline-offset: 5px; /* focus style enhancement */
accent-color: var(--brand); /* tint the input */
position: relative; /* prepare for an absolute pseudo element */
transform-style: preserve-3d; /* create a 3d z-space stacking context */
margin: 0;
cursor: pointer;
}
Gaya transform-style
dan position
disiapkan untuk elemen pseudo yang akan kami perkenalkan nanti
untuk menata gaya sorotan. Jika tidak, kemungkinan besar
sedikit opini kecil tentang gaya
berpendirian saya dari saya. Saya suka kursornya
menjadi {i>pointer<i}, saya suka
offset garis batas, kotak centang default terlalu kecil, dan jika accent-color
berukuran
didukung, kirimkan
kotak centang ke dalam skema warna merek.
Label kotak centang
Penting untuk memberikan label untuk kotak centang karena 2 alasan. Yang pertama adalah menunjukkan fungsi nilai kotak centang, untuk menjawab "aktif atau nonaktif untuk apa?" Kedua adalah untuk UX, pengguna web sudah terbiasa berinteraksi dengan melalui label yang terkait.
<input type="checkbox" id="text-notifications" name="text-notifications" >
<label for="text-notifications"> <h3>Text Messages</h3> <small>Get notified about all text messages sent to your device</small> </label>
Pada label, masukkan atribut for
yang mengarah ke kotak centang berdasarkan ID: <label for="text-notifications">
. Pada kotak centang Anda, gandakan
nama dan id untuk
pastikan ditemukan dengan berbagai alat dan teknologi, seperti {i>mouse<i} atau {i>screen reader<i}:
<input type="checkbox" id="text-notifications" name="text-notifications">
.
:hover
, :active
, dan lainnya tersedia gratis dengan koneksi, sehingga meningkatkan
cara berinteraksi dengan formulir Anda.
Sorotan kotak centang
Saya ingin menjaga antarmuka saya tetap konsisten, dan elemen {i>slider<i} memiliki
yang ingin saya gunakan dengan kotak centang tersebut. Thumbnail-nya digunakan
dapat menggunakan box-shadow
dan propertinya adalah spread
untuk menskalakan bayangan ke atas dan
ke bawah. Akan tetapi, efek itu tidak berfungsi di sini karena kotak centang kita adalah, dan seharusnya
menjadi, persegi.
saya bisa mendapatkan efek visual yang sama dengan elemen semu, dan sebuah jumlah CSS yang rumit:
@custom-media --motionOK (prefers-reduced-motion: no-preference);
input[type="checkbox"]::before {
--thumb-scale: .01; /* initial scale of highlight */
--thumb-highlight-size: var(--space-xl);
content: "";
inline-size: var(--thumb-highlight-size);
block-size: var(--thumb-highlight-size);
clip-path: circle(50%); /* circle shape */
position: absolute; /* this is why position relative on parent */
top: 50%; /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
left: 50%;
background: var(--thumb-highlight-color);
transform-origin: center center; /* goal is a centered scaling circle */
transform: /* order here matters!! */
translateX(-50%) /* counter balances left: 50% */
translateY(-50%) /* counter balances top: 50% */
translateZ(-1px) /* PUTS IT BEHIND THE CHECKBOX */
scale(var(--thumb-scale)) /* value we toggle for animation */
;
will-change: transform;
@media (--motionOK) { /* transition only if motion is OK */
& {
transition: transform .2s ease;
}
}
}
/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
--thumb-scale: 1;
}
Membuat elemen semu lingkaran sangat mudah, tetapi menempatkannya di balik elemen yang melampirkannya lebih sulit. Berikut informasi sebelum dan setelah saya memperbaikinya:
Ini jelas merupakan interaksi mikro, tetapi penting bagi saya untuk menjaga
konsistensi. Teknik penskalaan animasi sama seperti yang telah kita gunakan pada
tempat lain. Kita menetapkan properti khusus ke nilai baru dan membiarkan CSS mentransisikannya
berdasarkan preferensi gerakan. Fitur utamanya adalah translateZ(-1px)
. Tujuan
induk membuat ruang 3D dan turunan elemen semu ini memanfaatkannya dengan
menempatkan dirinya sedikit
kembali ke spasi z.
Aksesibilitas
Video YouTube melakukan demonstrasi {i>mouse<i}, {i>keyboard<i}, dan interaksi pembaca layar untuk komponen setelan ini. Saya akan menyebutkan beberapa detailnya di sini.
Pilihan Elemen HTML
<form>
<header>
<fieldset>
<picture>
<label>
<input>
Masing-masing berisi petunjuk dan tips untuk alat penjelajahan pengguna. Beberapa elemen menyediakan petunjuk interaksi, beberapa interaktivitas yang terhubung, dan beberapa membantu membentuk pohon aksesibilitas yang dinavigasi pembaca layar.
Atribut HTML
Kita dapat menyembunyikan elemen yang tidak dibutuhkan oleh {i>screen reader<i}, dalam hal ini ikon di sebelah {i>slider<i}:
<picture aria-hidden="true">
Video di atas menunjukkan alur pembaca layar di Mac OS. Perhatikan bagaimana input fokus bergerak langsung dari satu {i>slider<i} ke {i>slider <i}berikutnya. Ini karena kita telah menyembunyikan ikon yang mungkin menjadi perhentian di perjalanan ke {i>slider<i} berikutnya. Tanpa ini pengguna, pengguna harus berhenti, mendengarkan, dan bergerak melewati gambar yang mereka mungkin tidak akan dapat melihat.
SVG merupakan sekumpulan alat matematika. Mari tambahkan elemen <title>
agar dapat mengarahkan mouse secara bebas
judul dan komentar yang dapat dibaca manusia tentang apa yang dibuat oleh matematika:
<svg viewBox="0 0 24 24">
<title>A note icon</title>
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>
Selain itu, kita telah menggunakan cukup banyak tanda HTML yang jelas, sehingga formulir penggunaan {i>mouse<i}, {i>keyboard<i}, {i> video game controller, <i}dan pembaca layar.
JavaScript
Saya sudah membahas bagaimana warna isian trek dikelola dari JavaScript,
jadi sekarang mari kita lihat JavaScript terkait <form>
:
const form = document.querySelector('form');
form.addEventListener('input', event => {
const formData = Object.fromEntries(new FormData(form));
console.table(formData);
})
Setiap kali formulir berinteraksi dan diubah, konsol mencatat formulir tersebut sebagai sebuah objek ke dalam tabel untuk peninjauan yang mudah sebelum mengirimkannya ke server.
Kesimpulan
Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda akan melakukannya?! Hal ini membuat suasana menjadi menyenangkan arsitektur komponen! Siapa yang akan membuat versi pertama dengan slot di framework favorit Anda? 🙂
Mari kita diversifikasi pendekatan kami dan mempelajari semua cara untuk membangun di web. Buat demo, link tweet saya, dan saya akan menambahkannya ke bagian Remix Komunitas di bawah.