Menjadikan komponen tanpa kepala mudah digayakan-tutorial css-php.cn

Menjadikan komponen tanpa kepala mudah digayakan

王林

Lepaskan： 2024-08-23 14:30:35

asal

252 orang telah melayarinya

Making headless components easy to style

Adakah komponen tanpa kepala hanyalah komponen yang tidak digayakan, atau adakah terdapat lebih daripadanya?

Web sudah memisahkan gaya daripada kandungan dengan memerlukan gaya ditakrifkan
dalam CSS dan bukannya HTML. Seni bina ini membolehkan setiap halaman web menerima pakai
global standard reka bentuk tanpa menentukan sebarang gaya khusus halaman.

Apabila web berkembang menjadi platform aplikasi, pembangun mencari cara untuk membuat
pangkalan kod mereka yang semakin meningkat lebih boleh diselenggara. Pada masa kini, strategi defacto untuk
menyusun kod aplikasi adalah untuk menentukan komponen kecil dan ringan yang boleh
digubah bersama. Oleh itu, komponen menjadi unit gubahan dalam
pembangunan web moden.

Komponen sering mentakrifkan HTML dan CSS mereka untuk kepentingan enkapsulasi.
Walaupun ini menjadikan mereka lebih mudah untuk mengarang, mereka boleh menjadi lebih sukar untuk
menggabungkan ke dalam sistem reka bentuk sedia ada secara kohesif. Ini adalah benar terutamanya
untuk komponen pihak ketiga yang diimport daripada vendor luar.

Komponen tanpa kepala menyelesaikan cabaran ini dengan memperkenalkan semula pemisahan antara
kandungan dan gaya. Namun kini pemisahan berada di sepanjang sempadan komponen sebagai
bertentangan dengan antara HTML dan CSS. Mereka kunci untuk mencipta komponen tanpa kepala yang hebat
terletak pada mereka bentuk antara muka komponen supaya pembangun boleh
dengan jelas dan mudah menggunakan gaya mereka sendiri.

Majukan prop yang berkaitan

Dalam pengertian yang paling asas, komponen tanpa kepala hanyalah komponen yang tidak digayakan.
Pembangun mesti boleh menggunakan CSS mereka sendiri pada elemen HTML yang
komponen mentakrifkan.

Untuk komponen mudah, ini mungkin hanya masalah memajukan className
sandarkan kepada elemen akar supaya pembangun boleh menggunakan pemilih kelas dalam
mereka CSS.

Jika komponen anda mempunyai semantik yang sama seperti elemen HTML asli, anda boleh menggunakan
jenis ComponentProps daripada React untuk memastikan semua prop yang berkaitan adalah
boleh dimajukan. Ingat untuk meninggalkan sebarang prop yang anda tidak mahu pengguna
komponen anda untuk dapat mengatasi.

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit<ComponentProps<'button'>, 'type'>) {
  return <button type="submit" {...props} />
}

Salin selepas log masuk

Menyediakan kelas yang telah ditetapkan

Untuk komponen yang mengandungi satu atau lebih elemen anak, pembangun mungkin akan
mahu menggayakan setiap elemen secara individu.

Satu strategi untuk menyokong ini adalah bergantung pada
Penggabung CSS.
Contohnya, komponen galeri tanpa kepala mungkin digayakan seperti ini:

/* Root container */
.gallery {
}

/* Gallery items container */
.gallery > ul {
}

/* Gallery item */
.gallery > ul > li {
}

/* Next and Previous buttons */
.gallery button {
}

Salin selepas log masuk

Tetapi pendekatan ini menimbulkan masalah besar kerana kini struktur HTML dalaman
komponen itu adalah sebahagian daripada API awamnya. Ini menghalang anda daripada mengubah suai
struktur kemudian tanpa berpotensi memecahkan kod hiliran.

Strategi yang lebih baik ialah mentakrifkan kelas untuk setiap elemen anak utama. Dengan cara ini
pembangun boleh menggunakan pemilih kelas tanpa bergantung pada mana-mana HTML
tertentu struktur:

.xyz-gallery {
}

.xyz-gallery-next-button {
}

.xyz-gallery-previous-button {
}

.xyz-gallery-items-container {
}

.xyz-gallery-item {
}

Salin selepas log masuk

Ingat untuk menetapkan awalan kelas anda supaya mereka tidak bertembung dengan
gaya pembangun sendiri.

Menyokong susun atur tersuai

Menyediakan kelas yang dipratentukan mungkin merupakan cara terpantas untuk membolehkan pembangun
gayakan komponen anda. Walau bagaimanapun, kelemahan dengan pendekatan ini ialah
Struktur HTML tidak boleh disesuaikan.

Ini mungkin tidak penting. Lagipun, HTML biasa sudah cukup fleksibel dalam caranya
boleh diberikan. Walau bagaimanapun kadangkala pembangun mencapai HTML tambahan mengikut urutan
untuk mencapai reka bentuk tertentu. Jika anda melihat kod sumber untuk hampir semua
tapak web, anda boleh menjangkakan untuk melihat banyak

tidak semantik; elemen,
yang tujuan tunggalnya adalah untuk mentakrifkan reka letak flex atau grid, secara visual kumpulan anak
elemen dalam sempadan atau cipta konteks tindanan baharu.

Anda boleh menyokong kes penggunaan sedemikian dengan membahagikan komponen tanpa kepala anda menjadi
pelbagai komponen yang berkaitan. Dengan cara ini pembangun bebas menambah
mereka sendiri elemen susun atur kepada komponen. Sebagai contoh, pembangun boleh membenamkan Seterusnya dan
Butang sebelumnya daripada contoh galeri dalam bekas flexbox tersuai:

<Gallery>
  <GalleryItems className='gallery-items-container'>
    {data.map((item) => (
      <GalleryItem key={item.id}>{item.content}</GalleryItem>
    ))}
  </GalleryItems>
  <div className='gallery-buttons-container'>
    <GalleryPreviousButton>
    <GalleryNextButton>
  </div>
</Gallery>

Salin selepas log masuk

.gallery-items-container {
}

.gallery-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

Salin selepas log masuk

Komponen jenis ini biasanya dilaksanakan menggunakan
konteks untuk lulus
data antara mereka. Mereka memerlukan lebih banyak kerja untuk mereka bentuk, melaksanakan dan
dokumen. Walau bagaimanapun, kepelbagaian yang terhasil selalunya bermakna usaha tambahan adalah
berbaloi.

Benarkan komponen ditindih

Sebilangan kecil kes penggunaan memerlukan komponen tanpa kepala menguruskan reka letak
komponen anaknya. Contohnya mungkin pandangan pokok warisan yang
membenarkan itemnya disusun semula melalui seret dan lepas. Kes penggunaan lain mungkin untuk
benarkan aplikasi satu halaman menggantikan elemen utama lalai dengan
komponen pautan tersuai yang memudahkan penghalaan pihak pelanggan.

An advanced strategy for allowing developers to define custom layouts is to
allow the actual child component being rendered to be overriden via props:

<TreeView
  nodes={[...]}
  components={{
    CustomRow,
    CustomDragPreview: (props) => <div className="drag-preview" {...props} />
  }}
/>

Salin selepas log masuk

This grants the developer full control over what is rendered in each child
component, while allowing the headless component to manage its overall
structure.

You can even allow developers to customise the root element of your component
via a prop. For example, this button component allows a developer to render it
as something else:

import { type ElementType } from 'react'

function HeadlessButton({ as, ...props }: { as?: ElementType }) {
  const Component = as ?? 'button'
  return <Component {...props} />
}

Salin selepas log masuk

For example, in order for assistive technology to treat the button like a link,
the developer can specify that an anchor element should be used to render the
button:

<HeadlessButton as="a">Actually a link</HeadlessButton>

Salin selepas log masuk

Summary

Headless components are much more than components that don't contain any
styles. Great headless components are fully extensible and allow the developer
to customise the entire internal HTML structure.

Atas ialah kandungan terperinci Menjadikan komponen tanpa kepala mudah digayakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!