• Overview
• Row
  • Properties
• Panel
  • Properties
• Modal
  • Properties
  • Methods
• Tabs
  • Methods
• Inline

Containers

Overview #

The container widgets provide the layout or container for other widgets. Container is also widget so a container can be contained in another container.

Row #

Row container is the most basic layout for other widgets. KoolReport Dashboard is built based on Bootstrap so the Row container is wrapped php class for Row in bootstrap. View more about Bootstrap Grid system.

Example

use \koolreport\dashboard\containers\Row;

class IncomeBoard extends Dashboard
{
    protected function widgets()
    {
        return [
            // We would like to put IncomDetailTable adjacent to IncomeChartByMonth
            // Both of them shares half of space
            Row::create()->sub([
                IncomeChartByMonth::create()->width(1/2),
                IncomeDetailTable::create()->width(1/2)
            ])
        ];
    }
}

Properties #

Note: Those above properties follows this code rules.

Panel #

Panel provide a separate section to display inner widgets

Example:

use \koolreport\dashboard\containers\Panel;

class IncomeBoard extends Dashboard
{
    protected function widgets()
    {
        return [
            //We would like to put IncomeChart inside a panel.
            Panel::create()->header("Income Chart")->type("primary")->sub([
                IncomeChartByMonth::create(),
            ])
        ];
    }
}

Properties #

Note: Those above properties follows this code rules.

Modal #

Modal can help widgets hide from view and show them when needed.

Example:

use \koolreport\dashboard\containers\Modal;

class IncomeBoard extends Dashboard
{
    protected function widgets()
    {
        return [
            Button::create()->text("Open Modal")->onClick(function(){
                return Modal::show("myModal")
            }),

            Modal::create("myModal")
            ->sub([
                MyTable::create()
            ])
            ->title("Income Status")
            ->showCloseIcon(true)
            ->type("primary")
            ->size("md")
            ->open(false)
            ->centered(false)
            ->footer([
                Button::create()->text("Cancel")->onClick(function(){
                    return Modal::hide("myModal");
                })
            ])
            ->animation("fade")
        ];
    }
}

Properties #

Note: Those above properties follows this code rules.

Methods #

There are two built-in static functions to control open and close of Modal at client-side, this static function will return javascript code. You can use those static function inside onClick() of Button widget to open/close Modal.

Example:

Button::create()->text("Open Modal")
->onClick(function(){
    return Modal::show("myModal");
})


Button::create()->text("Open Modal")
->onClick(function(){
    return Modal::hide("myModal");
})

Tabs #

Tabs is another useful container which you can use to organize your widgets.

Example:

use \koolreport\dashboard\containers\Tabs;

class MyDashboard extends Dashboard
{
    protected function widgets()
    {
        return [
            Tabs::create()
            ->addTab("Income",[
                IncomeColumnChart::create(),
                IncomeDetailTable::create(),
            ],true)
            ->addTab("Tax",[
                TaxSummary::create(),
                TaxTable::create(),
            ])
        ];
    }
}

Methods #

Inline #

Inline is an simple containers that used to put widget adjacent to each other without making new line

Example:

use \koolreport\dashboard\containers\Inline;

class MyDashboard extends Dashboard
{
    protected function widgets()
    {
        return [
            Inline::create()->sub([
                Text::create()->text("We use"),
                Text::create()->text("Inline"),
                Text::create()->text("to remove breakline"),
            ])
        ];
    }
}