Bileşik Bileşenler

Tailwind v4 paketi, her bir seçicinin iç yapısı ve render edilmesi üzerinde tam kontrol sağlayan bir Bileşik Bileşen API’si sunar. Tek parça monolitik bir bileşen yerine, seçiciyi ayrı parçalardan oluşturursunuz.

Nasıl Çalışır

Her seçici (ör. DatePicker), hem basit bir bileşen hem de bileşik parçaların bir isim alanıdır:

import { DatePicker } from "react-date-range-picker-tailwind4";


// Basit kullanım -- varsayılan düzeni render eder
<DatePicker value={value} onChange={setValue} />


// Bileşik kullanım -- yapı üzerinde tam kontrol
<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
    <DatePicker.Footer>
      <DatePicker.ClearButton />
      <DatePicker.CancelButton />
      <DatePicker.ConfirmButton />
    </DatePicker.Footer>
  </DatePicker.Content>
</DatePicker.Root>

Bileşik bileşenlerle şunları yapabilirsiniz:

  • Herhangi bir parçayı kendi render mantığınızla değiştirebilirsiniz (ör. özel tetikleyici, özel gün hücresi)
  • Düzeni yeniden düzenleyebilirsiniz (ör. alt bilgi düğmelerini taşıyabilir, bir bugün düğmesi ekleyebilirsiniz)
  • İhtiyaç duymadığınız parçaları çıkarabilirsiniz (ör. minimal bir takvim için alt bilgiyi kaldırabilirsiniz)
  • className prop’u aracılığıyla