Card and tabs

19 · Cards

Using two components together to show different aspects of a record in a single card with tabs. All the options of each component are described on its own page (Basic card, Tabs).

PRO acun:card · acun:tabs

Card with tabs

Put the acun:tabs component in the body of the card. The tabs are rendered from the tabs array (key => title), and each acun:tab-panel takes the same key as value. Switching happens in the browser; no request goes to the server.

LIVE EXAMPLE

<acun:card title="Customer summary">
    <acun:slot:actions><acun:button variant="ghost" size="sm">Edit</acun:button></acun:slot:actions>

    <acun:tabs :tabs="['info' => 'Info', 'orders' => 'Orders', 'documents' => 'Documents']">
        <acun:tab-panel value="info"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium member · Istanbul</p></acun:tab-panel>
        <acun:tab-panel value="orders"><acun:progress :value="75" label="Annual target" /></acun:tab-panel>
        <acun:tab-panel value="documents"><acun:empty-state title="No documents" /></acun:tab-panel>
    </acun:tabs>
</acun:card>

Prop	Values
`tabs`	Array of key => title
`tab-panel value`	Key of the tab

Starting tab and pill style

When the page opens, the first tab is selected; to start with another tab, give its key with active. variant="pills" renders the tabs as filled buttons.

LIVE EXAMPLE

<acun:card title="Kadıköy store" subtitle="KDK-04 · 148 orders">
    <acun:tabs variant="pills" active="orders" :tabs="['general' => 'General', 'orders' => 'Orders', 'team' => 'Team']">
        <acun:tab-panel value="general"><p class="text-sm text-gray-600 dark:text-zinc-400">Store · 14 employees</p></acun:tab-panel>
        <acun:tab-panel value="orders"><p class="text-sm text-gray-600 dark:text-zinc-400">112 orders shipped this month, 36 waiting.</p></acun:tab-panel>
        <acun:tab-panel value="team"><p class="text-sm text-gray-600 dark:text-zinc-400">Ayşe Yılmaz, Mehmet Kaya</p></acun:tab-panel>
    </acun:tabs>
</acun:card>

Prop	Values
`active`	Key of the starting tab
`variant`	underline \| pills

With a footer

The card's footer slot stays fixed below the tabs; put actions that apply to all tabs here.

LIVE EXAMPLE

<acun:card title="Report">
    <acun:tabs :tabs="['week' => 'This week', 'month' => 'This month']">
        <acun:tab-panel value="week"><p class="text-sm tabular-nums">214 orders · 92% satisfaction</p></acun:tab-panel>
        <acun:tab-panel value="month"><p class="text-sm tabular-nums">1,248 orders · 89% satisfaction</p></acun:tab-panel>
    </acun:tabs>
    <acun:slot:footer>
        <acun:button size="sm" variant="white">Export to Excel</acun:button>
    </acun:slot:footer>
</acun:card>

Prop	Values
`footer`	Slot: the card's footer

API

Props and slots

The values the component accepts.

Prop	Default	Description
`card: title, subtitle`	`null`	Title and the small text below it
`card: collapsible, closable`	`false`	Collapse and close buttons
`card: padding`	`true`	false: the content touches the edges
`tabs: tabs`	`[]`	key => title
`tabs: active`	`first key`	Starting tab
`tabs: variant`	`underline`	underline · pills
`tab-panel: value`	—	Required. Key of the tab

Slots: card: actions, footer, default content · tabs: acun:tab-panel items.