Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="#">Home</a>
  <span class="icon icon--chevron-right" aria-hidden="true"></span>
  <a href="#">Components</a>
  <span class="icon icon--chevron-right" aria-hidden="true"></span>
  <span class="text-primary" aria-disabled="true" aria-current="page" role="link">Breadcrumb</span>
</nav>
1
2
3
4
5
6
7
<nav class="breadcrumb" aria-label="Breadcrumb">
  <%= link_to "Home", "#" %>
  <span class="icon icon--chevron-right" aria-hidden="true"></span>
  <%= link_to "Components", "#" %>
  <span class="icon icon--chevron-right" aria-hidden="true"></span>
  <span class="text-primary" aria-disabled="true" aria-current="page" role="link">Breadcrumb</span>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:where(.breadcrumb) {
  align-items: center;
  column-gap: var(--size-1);
  color: var(--color-text-subtle);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  overflow-wrap: break-word;
  a:hover {
    color: var(--color-text);
  }
  @media (width >= 40rem) {
    column-gap: var(--size-2);
  }
}
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "item" ]
  static values  = { index: Number }
  #observer
  initialize() {
    this.#observer = new IntersectionObserver(this.#reset.bind(this))
  }
  connect() {
    this.#observer.observe(this.element)
  }
  disconnect() {
    this.#observer.disconnect()
  }
  navigate(event) {
    switch (event.key) {
      case " ":
      case "Enter":
        this.#cancel(event)
        this.#activate(event.target)
        break
      case "ArrowUp":
        this.#cancel(event)
        this.#prev()
        break
      case "ArrowDown":
        this.#cancel(event)
        this.#next()
        break
      case "Home":
        this.#cancel(event)
        this.#first()
        break
      case "End":
        this.#cancel(event)
        this.#last()
        break
    }
  }
  #cancel(event) {
    event.stopPropagation()
    event.preventDefault()
  }
  #activate(menuItem) {
    menuItem.click()
  }
  #reset([ entry ]) {
    entry.isIntersecting && this.#first()
  }
  #prev() {
    if (this.indexValue > 0) {
      this.indexValue--
      this.#update()
    }
  }
  #next() {
    if (this.indexValue < this.#lastIndex) {
      this.indexValue++
      this.#update()
    }
  }
  #first() {
    this.indexValue = 0
    this.#update()
  }
  #last() {
    this.indexValue = this.#lastIndex
    this.#update()
  }
  #update() {
    this.#updateTabstops()
    this.#focusItemAtIndex()
  }
  #updateTabstops() {
    this.itemTargets.forEach((it, index) => {
      it.tabIndex = index === this.indexValue ? 0 : -1
    })
  }
  #focusItemAtIndex() {
    this.itemTargets[this.indexValue].focus()
  }
  get #lastIndex() {
    return this.itemTargets.length -1
  }
}

No notes provided.