Popup¶

class Atk4\Ui\Popup¶

Implements a popup:

$button = Button::addTo($app, ['Click me']);
HelloWorld::addTo(Popup::addTo($app, [$button]));

Atk4\Ui\Popup::set($callback)¶

Popup can also operate with dynamic content:

$button = Button::addTo($app, ['Click me']);
Popup::addTo($app, [$button])
    ->set('hello world with rand=' . rand(1, 100));

Pop-up should be added into a viewport which will define boundaries of a pop-up, but it will be positioned relative to the $button. Popup remains invisible until it’s triggered by event of $button.

If second argument in the Seed is of class Button, Menu, MenuItem or Dropdown (note - NOT FormControl!), pop-up will also bind itself to that element. The above example will automatically bind “click” event of a button to open a pop-up.

When added into a menu, pop-up will appear on hover:

$menu = Menu::addTo($app);
$item = $menu->addItem('HoverMe')
Text::addTo(Popup::addTo($app, [$item]))->set('Appears when you hover a menu item');

Like many other Views of ATK, popup is an interractive element. It can load it’s contents when opened:

$menu = Menu::addTo($app);
$item = $menu->addItem('HoverMe');
Popup::addTo($app, [$item])->set(function (View $p) {
    Text::addTo($p)->set('Appears when you hover a menu item');
    Label::addTo($p, ['Random value', 'detail' => rand(1, 100)]);
});

Demo: https://ui.agiletoolkit.org/demos/popup.php

Fomantic-UI: https://fomantic-ui.com/modules/popup.html