Composites & Sections · 8 Props

Tabs

Alpine.js tab navigation with RenderBlocks content per tab. Supports URL hash sync, daisyUI variants, badges, icons, and keyboard navigation.

Composites & Sections 8 Props

src/components/blocks/Tabs.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
tabs *	object[]	—	Array der Tabs
tabs[].badge	string	—
tabs[].blocks	any[]	—
tabs[].disabled	boolean	—
tabs[].icon	string	—
tabs[].id *	string	—	Eindeutige ID (wird auch für Hash genutzt)
tabs[].label *	string	—
align	string	start	"start" \| "end" \| "center"
class	string	—
defaultTab	string	—	ID des initial aktiven Tabs (default: erster Tab). Wird von URL-Hash überschrieben.
hashPrefix	string	tab	Hash-Prefix für URL-Sync (default: "tab") → #tab-{id}
hashSync	boolean	true	URL-Hash-Sync aktivieren
size	string	md	"sm" \| "md" \| "lg" \| "xs"
variant	string	bordered	daisyUI Tab-Variante "bordered" \| "lifted" \| "boxed"

Beispiele

Bordered

Bordered variant with icons, badges, and disabled tab.

Content of the first tab.

Content of the second tab with a badge.

{
  "type": "tabs",
  "props": {
    "variant": "bordered",
    "hashSync": false,
    "tabs": [
      {
        "id": "tab1",
        "label": "First Tab",
        "icon": "solar:home-smile-line-duotone",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Content of the first tab."
            }
          }
        ]
      },
      {
        "id": "tab2",
        "label": "Second Tab",
        "badge": "3",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Content of the second tab with a badge."
            }
          }
        ]
      },
      {
        "id": "tab3",
        "label": "Disabled",
        "disabled": true,
        "blocks": []
      }
    ]
  }
}

<Tabs
  variant="bordered"
  hashSync={false}
  tabs={[{"id":"tab1","label":"First Tab","icon":"solar:home-smile-line-duotone","blocks":[{"type":"text","props":{"text":"Content of the first tab."}}]},{"id":"tab2","label":"Second Tab","badge":"3","blocks":[{"type":"text","props":{"text":"Content of the second tab with a badge."}}]},{"id":"tab3","label":"Disabled","disabled":true,"blocks":[]}]}
/>

Boxed

Boxed variant with contained background.

Overview content.

Details content.

{
  "type": "tabs",
  "props": {
    "variant": "boxed",
    "hashSync": false,
    "tabs": [
      {
        "id": "boxed1",
        "label": "Overview",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Overview content."
            }
          }
        ]
      },
      {
        "id": "boxed2",
        "label": "Details",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Details content."
            }
          }
        ]
      }
    ]
  }
}

<Tabs
  variant="boxed"
  hashSync={false}
  tabs={[{"id":"boxed1","label":"Overview","blocks":[{"type":"text","props":{"text":"Overview content."}}]},{"id":"boxed2","label":"Details","blocks":[{"type":"text","props":{"text":"Details content."}}]}]}
/>