x
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
<div class="tabs" style="max-inline-size: 400px" data-controller="tabs"> <div class="tabs__list" data-action="keydown.left->tabs#prev keydown.right->tabs#next" role="tablist"> <button type="button" id="trigger_overview" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_overview">Overview</button> <button type="button" id="trigger_analytics" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_analytics">Analytics</button> <button type="button" id="trigger_reports" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_reports">Reports</button> <button type="button" id="trigger_settings" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_settings">Settings</button> </div> <div hidden id="tab_overview" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_overview"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Overview</h3> <p class="text-sm text-subtle">View your key metrics and recent project activity. Track progress across all your active projects.</p> </div> <p class="text-sm text-subtle">You have 12 active projects and 3 pending tasks.</p> </div> </div> <div hidden id="tab_analytics" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_analytics"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Analytics</h3> <p class="text-sm text-subtle">Track performance and user engagement metrics. Monitor trends and identify growth opportunities.</p> </div> <p class="text-sm text-subtle">Page views are up 25% compared to last month.</p> </div> </div> <div hidden id="tab_reports" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_reports"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Reports</h3> <p class="text-sm text-subtle">Generate and download your detailed reports. Export data in multiple formats for analysis.</p> </div> <p class="text-sm text-subtle">You have 5 reports ready and available to export.</p> </div> </div> <div hidden id="tab_settings" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_settings"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Settings</h3> <p class="text-sm text-subtle">Manage your account preferences and options. Customize your experience to fit your needs.</p> </div> <p class="text-sm text-subtle">Configure notifications, security, and themes.</p> </div> </div></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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="tabs" style="max-inline-size: 400px" data-controller="tabs"> <div class="tabs__list" data-action="keydown.left->tabs#prev keydown.right->tabs#next" role="tablist"> <button type="button" id="trigger_overview" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_overview">Overview</button> <button type="button" id="trigger_analytics" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_analytics">Analytics</button> <button type="button" id="trigger_reports" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_reports">Reports</button> <button type="button" id="trigger_settings" class="btn tabs__button" data-tabs-target="button" data-action="tabs#select" role="tab" aria-controls="tab_settings">Settings</button> </div> <div hidden id="tab_overview" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_overview"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Overview</h3> <p class="text-sm text-subtle">View your key metrics and recent project activity. Track progress across all your active projects.</p> </div> <p class="text-sm text-subtle">You have 12 active projects and 3 pending tasks.</p> </div> </div> <div hidden id="tab_analytics" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_analytics"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Analytics</h3> <p class="text-sm text-subtle">Track performance and user engagement metrics. Monitor trends and identify growth opportunities.</p> </div> <p class="text-sm text-subtle">Page views are up 25% compared to last month.</p> </div> </div> <div hidden id="tab_reports" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_reports"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Reports</h3> <p class="text-sm text-subtle">Generate and download your detailed reports. Export data in multiple formats for analysis.</p> </div> <p class="text-sm text-subtle">You have 5 reports ready and available to export.</p> </div> </div> <div hidden id="tab_settings" data-tabs-target="tab" role="tabpanel" aria-labelledby="trigger_settings"> <div class="card flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Settings</h3> <p class="text-sm text-subtle">Manage your account preferences and options. Customize your experience to fit your needs.</p> </div> <p class="text-sm text-subtle">Configure notifications, security, and themes.</p> </div> </div></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
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.