Komponenty Złożone

Paczka Tailwind v4 udostępnia API Komponentów Złożonych, które daje pełną kontrolę nad wewnętrzną strukturą i renderowaniem każdego pickera. Zamiast pojedynczego, monolitycznego komponentu, tworzysz picker z poszczególnych części.

Jak to działa

Każdy picker (np. DatePicker) jest zarówno prostym komponentem, jak i przestrzenią nazw dla jego złożonych części:

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

// Proste użycie -- renderuje domyślny układ
<DatePicker value={value} onChange={setValue} />

// Złożone użycie -- pełna kontrola nad strukturą
<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>

Dzięki komponentom złożonym możesz:

• Zastąpić dowolną część własnym renderowaniem (np. niestandardowy przycisk otwierający, niestandardowa komórka dnia)
• Zmieniać układ (np. przenieść przyciski w stopce, dodać przycisk “Dzisiaj”)
• Pominąć części, których nie potrzebujesz (np. usunąć stopkę dla minimalistycznego kalendarza)
• Nadpisać klasy dowolnej części za pomocą propa className

Na kolejnych stronach omówiono każdy wzorzec dostosowywania wraz z działającymi demonstracjami.

Dostępne części

DatePicker

DateRangePicker

Zawiera wszystkie powyższe części oraz dodatkowo:

DateTimePicker / DateRangeTimePicker

Zawierają odpowiednie części bazowe oraz dodatkowo:

TimePicker