Pripomoček za zavihke

Navigacijska komponenta Bootstrap 5 zavihkov/tabletk. Popoln za organiziranje sorodne vsebine v vmesnikih z zavihki. Podpira navpično postavitev, ikone, značke in upravičeno distribucijo.

Osnovni zavihki

Standardni vodoravni zavihki z vsebinskimi ploščami.

Koda

<?php echo TabsWidget::widget([
    'items' => [
        ['label' => 'Home', 'content' => 'Home content...', 'active' => true],
        ['label' => 'Profile', 'content' => 'Profile content...'],
    ],
]); ?>

Demo v živo

Welcome to the home tab. This is where your main content goes.

This is the profile tab with user information and settings.

View and manage your messages here.

Pills Style

Navigacijski slog zaokroženih tablet.

Koda

<?php echo TabsWidget::widget([
    'type' => 'pills',
    'items' => [...],
]); ?>

Demo v živo

Overview and introduction to the topic.

Detailed list of available features.

Pricing plans and options.

Zavihki z ikonami in značkami

Zavihki z ikonami FontAwesome in značkami za obvestila.

Koda

<?php echo TabsWidget::widget([
    'items' => [
        ['label' => 'Dashboard', 'icon' => 'fas fa-home', 'content' => '...', 'active' => true],
        ['label' => 'Notifications', 'icon' => 'fas fa-bell', 'content' => '...', 'badge' => 3],
    ],
]); ?>

Demo v živo

Dashboard overview with statistics and charts.

Your recent notifications.

Application settings and preferences.

Navpični zavihki

Navpična navigacija zavihkov v slogu stranske vrstice.

Koda

<?php echo TabsWidget::widget([
    'vertical' => true,
    'items' => [...],
]); ?>

Demo v živo

General settings and preferences.

Password and security options.

Privacy and data protection settings.

Email and push notification preferences.

Poravnani zavihki

Zavihki, ki enakomerno zapolnijo celotno širino.

Koda

<?php echo TabsWidget::widget([
    'justified' => true,
    'items' => [...],
]); ?>

Demo v živo

First tab content.

Second tab content.

Third tab content.

Možnosti konfiguracije

Možnost	Vrsta	Privzeto	Opis
`items`	array	`[]`	Elementi zavihka (oznaka, vsebina, aktivno, ikona, značka itd.)
`type`	string	`tabs`	Vrsta: zavihki, tablete, podčrtano
`vertical`	bool	`false`	Uporabite navpično postavitev
`fill`	bool	`false`	Zapolnite širino sorazmerno
`justified`	bool	`false`	Enako poravnajte zavihke na celotno širino
`translate`	bool	`true`	Prevedite oznake

Accordion Widget Share Buttons Widget