Css Zero Showcase
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 -->
<div class="tabs__list">
  <a class="btn tabs__button" aria-selected="true" href="">Home</a>
  <a class="btn tabs__button" href="">Settings</a>
</div>
<!-- Buttons Disabled -->
<div class="tabs__list">
  <a class="btn tabs__button" aria-selected="true" href="">Home</a>
  <a class="btn tabs__button" aria-disabled="true" href="">Disabled</a>
</div>
<!-- Buttons Icons -->
<div class="tabs__list">
  <a class="btn tabs__button" aria-selected="true" href="">
    <img aria-hidden="true" src="/assets/app-window-9502f486.svg" width="16" height="16" />
    <span>Preview</span>
  </a>
  <a class="btn tabs__button" href="">
    <img aria-hidden="true" src="/assets/code-37183917.svg" width="16" height="16" />
    <span>Code</span>
  </a></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%# Buttons Simple %>
<div class="tabs__list">
  <%= link_to "Home", "", class: "btn tabs__button", aria: { selected: true } %>
  <%= link_to "Settings", "", class: "btn tabs__button" %>
</div>
<%# Buttons Disabled %>
<div class="tabs__list">
  <%= link_to "Home", "", class: "btn tabs__button", aria: { selected: true } %>
  <%= link_to "Disabled", "", class: "btn tabs__button", aria: { disabled: true } %>
</div>
<%# Buttons Icons %>
<div class="tabs__list">
  <%= link_to "", class: "btn tabs__button", aria: { selected: true } do %>
    <%= image_tag "app-window.svg", size: 16, aria: { hidden: true } %>
    <span>Preview</span>
  <% end %>
  <%= link_to "", class: "btn tabs__button" do %>
    <%= image_tag "code.svg", size: 16, aria: { hidden: true } %>
    <span>Code</span>
  <% end %>
</div>
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
.tabs {
  display: flex;
  flex-direction: column;
  row-gap: var(--size-2);
}
.tabs__list {
  background-color: var(--color-border-light);
  block-size: var(--size-9);
  border-radius: var(--rounded-md);
  color: var(--color-text-subtle);
  column-gap: var(--size-2);
  display: inline-flex;
  padding: var(--size-1);
}
.tabs__button {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-box-shadow: none;
  --btn-hover-color: transparent;
  --btn-inline-size: var(--size-full);
  &[aria-selected=true] {
    --btn-background: var(--color-bg);
    --btn-box-shadow: var(--shadow-sm);
    --btn-hover-color: var(--color-bg);
  }
}
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.