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

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

Contribuir

Ver CONTRIBUTING.md.

Soporte

• GitHub Issues
• CHANGELOG.md

Licencia

MIT