---
title: "Tabs-Komponente — zenit Zig UI"
description: "Zwischen gleichrangigen Ansichten in einem Kontext wechseln. underline / pill / tab, Größen, Badges, disabled und die aktive ID teilen sich ein Auswahlmodell."
url: https://zenit.z.express/de/components/tabs
language: de
alternate_en: https://zenit.z.express/components/tabs.md
alternate_zh: https://zenit.z.express/zh/components/tabs.md
alternate_es: https://zenit.z.express/es/components/tabs.md
alternate_ja: https://zenit.z.express/ja/components/tabs.md
alternate_ko: https://zenit.z.express/ko/components/tabs.md
alternate_fr: https://zenit.z.express/fr/components/tabs.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Tabs

`ui.widgets.Tabs`

Zwischen gleichrangigen Ansichten in einem Kontext wechseln.

[Video](https://zenit.z.express/media/stories/tabs.mp4?v=9f6c93c01e)

**BEHAVIOR CONTRACT**

underline / pill / tab, Größen, Badges, disabled und die aktive ID teilen sich ein Auswahlmodell.

**RECORDED INTERACTION**

Der Harness klickt Details; Indikator und Panel wechseln gemeinsam.

`examples/storybook/stories.zig:2282`

```zig
pub fn buildTabs(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 16);
    const items = [_]W.tabs.TabItem{
        .{ .id = "t1", .label_text = "Overview" },
        .{ .id = "t2", .label_text = "Details" },
        .{ .id = "t3", .label_text = "Settings", .badge = 3 },
        .{ .id = "t4", .label_text = "Disabled", .disabled = true },
    };

    const status = try ui.text(cx, "active → (none)", .{ .font_size = 13, .color = light.color.fg_secondary });
    status.meta.ownership.meta.test_id = "story.tabs.status";
    try c.appendChild(a, status);
    const story = try cx.bindState(TabsStory, .{ .status = status });

    // ── 变体 ──
    inline for (.{ W.tabs.TabsVariant.underline, .pill, .tab }, .{ "underline", "pill", "tab" }) |variant, name| {
        try c.appendChild(a, try label(cx, name));
        const tabs_node = try W.Tabs(.{
            .items = &items,
            .variant = variant,
            .on_change = ui.Cx.strHandlerFrom(TabsStory, story, TabsStory.onChange),
        }).mount(scope, cx);
        if (variant == .underline) tabs_node.meta.ownership.meta.test_id = "story.tabs.underline";
        try c.appendChild(a, tabs_node);
    }

    // ── 尺寸 ──
    const size_items = [_]W.tabs.TabItem{
        .{ .id = "a", .label_text = "One" },
        .{ .id = "b", .label_text = "Two" },
        .{ .id = "c", .label_text = "Three" },
    };
    try c.appendChild(a, try label(cx, "Sizes (xs / sm / md / lg)"));
    inline for (.{ W.tabs.TabsSize.xs, .sm, .md, .lg }) |sz| {
        try c.appendChild(a, try W.Tabs(.{ .items = &size_items, .variant = .pill, .size = sz }).mount(scope, cx));
    }
    return c;
}
```

[Quellcode auf GitHub ansehenexamples/storybook/stories.zig:2282](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2282)

Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). `W` steht für `ui.widgets`; `col` / `row` / `label` sind kleine Layout-Helfer des Storybooks.

### TabsProps

`ui.widgets.Tabs`

[src/ui/components/tabs/mod.zig:306](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/tabs/mod.zig#L306)

```zig
fn Tabs(props: TabsProps) TabsBuilder
```

| Feld | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `items` | `[]const TabItem` | — | — |
| `active_id` | `?[]const u8` | `null` | — |
| `default_active_id` | `?[]const u8` | `null` | — |
| `variant` | `TabsVariant` `.underline` `.pill` `.tab` | `.underline` | — |
| `size` | `TabsSize` | `.md` | — |
| `closable` | `bool` | `false` | — |
| `on_change` | `?core.HandlerRef` | `null` | 2026-07-31 并轨：统一 ?core.HandlerRef，用 invokeWithStr 触发 （payload = tab id）。 |
| `on_close` | `?core.HandlerRef` | `null` | — |
| `context` | `?*anyopaque` | `null` | — |
| `state_id` | `?u64` | `null` | — |

### TabPanelProps

`ui.widgets.TabPanel`

[src/ui/components/tabs/mod.zig:709](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/tabs/mod.zig#L709)

```zig
fn TabPanel(props: TabPanelProps) TabPanelBuilder
```

| Feld | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `id` | `[]const u8` | — | — |
| `active` | `bool` | `true` | — |

### \*Node

`ui.widgets.Tabs`

mount gibt `*Node` direkt zurück – hängen Sie es an einen Elternknoten an.

### TabPanelBuilder

`ui.widgets.TabPanel`

mount gibt `TabPanelBuilder` direkt zurück – hängen Sie es an einen Elternknoten an.