Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Buttons Simple -->
<nav class="tabs__list" aria-label="Home and Settings">
  <a class="btn tabs__button" aria-current="page" href="#">Home</a>
  <a class="btn tabs__button" href="#">Settings</a>
</nav>
<!-- Buttons Disabled -->
<nav class="tabs__list" aria-label="Home and Disabled">
  <a class="btn tabs__button" aria-current="page" href="#">Home</a>
  <a class="btn tabs__button" aria-disabled="true" href="#">Disabled</a>
</nav>
<!-- Buttons Icons -->
<nav class="tabs__list" aria-label="Preview and Code">
  <a class="btn tabs__button" aria-current="page" href="#">
    <span class="icon icon--app-window" aria-hidden="true"></span>
    <span>Preview</span>
  </a>
  <a class="btn tabs__button" href="#">
    <span class="icon icon--code" aria-hidden="true"></span>
    <span>Code</span>
  </a></nav>
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
<%# Buttons Simple %>
<nav class="tabs__list" aria-label="Home and Settings">
  <%= link_to "Home", "#", class: "btn tabs__button", aria: { current: "page" } %>
  <%= link_to "Settings", "#", class: "btn tabs__button" %>
</nav>
<%# Buttons Disabled %>
<nav class="tabs__list" aria-label="Home and Disabled">
  <%= link_to "Home", "#", class: "btn tabs__button", aria: { current: "page" } %>
  <%= link_to "Disabled", "#", class: "btn tabs__button", aria: { disabled: true } %>
</nav>
<%# Buttons Icons %>
<nav class="tabs__list" aria-label="Preview and Code">
  <%= link_to "#", class: "btn tabs__button", aria: { current: "page" } do %>
    <span class="icon icon--app-window" aria-hidden="true"></span>
    <span>Preview</span>
  <% end %>
  <%= link_to "#", class: "btn tabs__button" do %>
    <span class="icon icon--code" aria-hidden="true"></span>
    <span>Code</span>
  <% end %>
</nav>
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
.tabs {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}
.tabs__list {
  align-self: start;
  background-color: var(--color-border-light);
  block-size: var(--size-8);
  border-radius: var(--rounded-lg);
  color: var(--color-text-subtle);
  column-gap: var(--size-1);
  display: inline-flex;
  padding: var(--size-1);
  position: relative;
  &::before {
    background-color: var(--color-bg);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-sm);
    content: "";
    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
    position: absolute;
    position-anchor: --tabs-selected;
    transition-duration: var(--time-150);
    transition-property: inset;
    transition-timing-function: var(--ease-in-out-3);
  }
}
.tabs__button {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-hover-color: transparent;
  &[aria-selected="true"] {
    anchor-name: --tabs-selected;
  }
  &[aria-current="page"] {
    anchor-name: --tabs-selected;
  }
}
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
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "button", "tab" ]
  static values  = { index: Number }
  connect() {
    this.#showCurrentTab()
  }
  select({ target }) {
    this.indexValue = this.buttonTargets.indexOf(target)
    this.#showCurrentTab()
  }
  prev() {
    if (this.indexValue > 0) {
      this.indexValue--
      this.#showCurrentTab()
      this.#focusCurrentButton()
    }
  }
  next() {
    if (this.indexValue < this.#lastIndex) {
      this.indexValue++
      this.#showCurrentTab()
      this.#focusCurrentButton()
    }
  }
  #showCurrentTab() {
    this.buttonTargets.forEach((it, index) => {
      it.ariaSelected = index === this.indexValue
      it.tabIndex = index === this.indexValue ? 0 : -1
    })
    this.tabTargets.forEach((it, index) => {
      it.hidden = index !== this.indexValue
    })
  }
  #focusCurrentButton() {
    this.buttonTargets[this.indexValue].focus()
  }
  get #lastIndex() {
    return this.tabTargets.length -1
  }
}

No notes provided.