Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Komponent osi czasu

Ostatnia aktualizacja:

Oś czasu CSS Tailwind, zawierająca wyłącznie chronologiczne listy wydarzeń. Układ pionowy z ikonami, treścią i miejscami na linie łączące. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Komponenty osi czasu przedstawiają sekwencję wydarzeń, kamieni milowych lub postępu narracji w porządku chronologicznym. Osie czasu, zbudowane w oparciu o semantyczny kod HTML, pomagają użytkownikom zrozumieć historyczny postęp i fazy projektu. System osi czasu Frutjam obsługuje wiele kierunków, kolorów i stylów elementów — idealnie nadaje się do historii projektu, informacji o wydaniu i map podróży.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
timelineOpieraćUporządkowana lista wydarzeń chronologicznych
timeline-itemModyfikatorIndywidualny rząd zdarzeń — umieść na każdym <li>
timeline-startModyfikatorTreść umieszczona przed osią czasu
timeline-middleModyfikatorKropka wyśrodkowana na osi czasu
timeline-endModyfikatorTreść umieszczona za osią czasu
timeline-horizontalModyfikatorUkład poziomy
timeline-verticalModyfikatorUkład pionowy (domyślny)
timeline-snap-startModyfikatorUkrywa kolumnę początkową — kropka wyrównuje się do lewej krawędzi
timeline-snap-endModyfikatorUkrywa kolumnę końcową — kropka wyrównuje się do prawej krawędzi
timeline-primaryKolorKropka i złącze koloru podstawowego — umieść na timeline-item
timeline-secondaryKolorDodatkowa kolorowa kropka i złącze — umieść na timeline-item
timeline-accentKolorKolorowa kropka akcentująca i złącze — umieść na timeline-item
timeline-neutralKolorNeutralny kolor kropki i złącza — umieść na timeline-item
timeline-infoKolorKolorowa kropka informacyjna i złącze — umieść na timeline-item
timeline-successKolorKolorowa kropka i złącze sukcesu — umieść na timeline-item
timeline-warningKolorOstrzegawcza kolorowa kropka i złącze — umieść na timeline-item
timeline-errorKolorBłąd koloru kropki i złącza — umieść na timeline-item

Podstawowe użycie

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul className="timeline timeline-vertical">
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Jan 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Project started</div>
      <div className="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Apr 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Beta released</div>
      <div className="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Today</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">v2.0 launched</div>
      <div className="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

Timeline with Colors

Add a color modifier to each timeline-item to color its dot and the connector line trailing from it.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start text-sm opacity-60">Step 1</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Primary</div></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start text-sm opacity-60">Step 2</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Secondary</div></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start text-sm opacity-60">Step 3</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Success</div></div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start text-sm opacity-60">Step 4</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Warning</div></div>
  </li>
  <li class="timeline-item timeline-error">
    <div class="timeline-start text-sm opacity-60">Step 5</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Error</div></div>
  </li>
</ul>

Alternating Sides

Alternate content between timeline-start and timeline-end on each item to create a zigzag layout.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Design phase</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Development</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-accent">
    <div class="timeline-start">
      <div class="font-semibold">Testing</div>
      <div class="text-sm opacity-60">May 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launch</div>
      <div class="text-sm opacity-60">Jun 2024</div>
    </div>
  </li>
</ul>

Two-Toned Connectors

Each item's connector line inherits its color, creating seamless transitions between differently-colored steps.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-info">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Planned</div>
      <div class="text-sm opacity-60">Backlog item created</div>
    </div>
  </li>
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Progress</div>
      <div class="text-sm opacity-60">Development started</div>
    </div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Review</div>
      <div class="text-sm opacity-60">Awaiting approval</div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Done</div>
      <div class="text-sm opacity-60">Shipped to production</div>
    </div>
  </li>
</ul>

Start Side Only

Place content only in timeline-start with an empty timeline-end to push everything to the left of the axis.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Requirements gathered</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Prototype built</div>
      <div class="text-sm opacity-60">Feb 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start">
      <div class="font-semibold">Shipped</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

End Side Only

Use timeline-snap-start to push the dot to the left edge with all content on the right.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

Rich Card Content

Wrap content in a border rounded-box p-3 block to give each timeline event a card-like appearance.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jan 15, 2024</div>
        <div class="font-semibold">Project Kickoff</div>
        <p class="text-sm opacity-70 mt-1">Team assembled, goals defined, and roadmap approved by stakeholders.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Mar 1, 2024</div>
        <div class="font-semibold">Alpha Released</div>
        <p class="text-sm opacity-70 mt-1">Internal testing began with 12 pilot users across 3 departments.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jun 10, 2024</div>
        <div class="font-semibold">v1.0 General Availability</div>
        <p class="text-sm opacity-70 mt-1">Public launch with full documentation, support, and SLA guarantees.</p>
      </div>
    </div>
  </li>
</ul>

Snap Start

Use timeline-snap-start on the list to hide the start column and align the dot to the left edge.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

Snap End

Use timeline-snap-end on the list to hide the end column and align the dot to the right edge.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Oś czasu. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP