README

Extensión Yii2 con 40+ widgets para crear interfaces de dashboard con Bootstrap 5, generadas completamente desde PHP.

Requisitos

PHP >= 7.4
Yii2 >= 2.0.0
yiisoft/yii2-bootstrap5

Instalación

composer require iguazoft/yii2-ui

Registra los assets en tu layout:

use iguazoft\ui\DashboardAsset;
DashboardAsset::register($this);

Componentes

Categoría	Widgets
Base	Card, Button, Badge, Alert
Dashboard	DashboardLayout, Sidebar, MetricCard, ReportCard, ProductTable, StatCard, Chart
Formularios	Form, Input, Select, Checkbox, Radio, Textarea, FileUpload
Navegación	Navbar, Breadcrumb, Tabs, Pagination
Datos	DataTable, ListView, DetailView
Feedback	Modal, Toast, Progress, Spinner
Layout	Container, Row, Col, Grid, Divider
Avanzados	Dropdown, Accordion, Carousel, Timeline, Offcanvas

Uso

MetricCard

use iguazoft\ui\widgets\MetricCard;

<?= MetricCard::widget([
    'title' => 'December income',
    'value' => '287,000',
    'prefix' => '$',
    'trend' => 'up',
    'trendValue' => '18.24%',
    'trendType' => 'success',
    'icon' => '💰',
]) ?>

DashboardLayout + Sidebar

use iguazoft\ui\widgets\DashboardLayout;
use iguazoft\ui\widgets\Sidebar;

<?php DashboardLayout::begin([
    'sidebar' => Sidebar::widget([
        'user' => ['name' => 'Admin', 'role' => 'Manager'],
        'mainMenu' => [
            ['label' => 'Dashboard', 'icon' => '🏠', 'url' => ['/'], 'active' => true],
            ['label' => 'Analytics', 'icon' => '📊', 'url' => ['/analytics']],
        ],
    ]),
]); ?>
    <!-- content -->
<?php DashboardLayout::end(); ?>

ProductTable

use iguazoft\ui\widgets\ProductTable;

<?= ProductTable::widget([
    'dataProvider' => $products,
    'totalCount' => 120,
    'pageSize' => 10,
    'currentPage' => 1,
    'columns' => [
        ['label' => 'Name', 'attribute' => 'name'],
        ['label' => 'Price', 'attribute' => 'price', 'format' => 'currency'],
        ['label' => 'Rating', 'attribute' => 'rating', 'format' => 'rating'],
    ],
]) ?>

Chart (Chart.js)

use iguazoft\ui\widgets\Chart;

<?= Chart::widget([
    'type' => 'line',
    'data' => [
        'labels' => ['Jan', 'Feb', 'Mar'],
        'datasets' => [[
            'label' => 'Sales',
            'data' => [12, 19, 3],
            'borderColor' => 'rgb(99, 102, 241)',
        ]],
    ],
    'height' => '300px',
]) ?>

Formularios

use iguazoft\ui\widgets\forms\Form;
use iguazoft\ui\widgets\forms\Input;
use iguazoft\ui\widgets\forms\Select;

<?php Form::begin(['action' => ['/save'], 'title' => 'Create Product']); ?>
    <?= Input::widget(['name' => 'title', 'label' => 'Product Name', 'required' => true]) ?>
    <?= Select::widget(['name' => 'category', 'label' => 'Category', 'items' => $categories]) ?>
<?php Form::end(); ?>

Más ejemplos

Ver la carpeta examples/ para un dashboard completo funcional.

Personalización

:root {
    --dashboard-primary: #6366f1;
    --dashboard-success: #22c55e;
    --dashboard-danger: #ef4444;
}

Todos los widgets aceptan options para clases CSS personalizadas:

<?= Card::widget(['title' => 'Custom', 'options' => ['class' => 'my-class']]) ?>

Para extender un widget:

class MyCard extends \iguazoft\ui\widgets\Card
{
    public function init()
    {
        parent::init();
        // custom logic
    }
}

Testing

composer install
vendor/bin/phpunit

iguazoft / yii2-ui

Maintainers

Details