Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Drilldown

Description

Purpose: Drilldown Slates provide further menu structure in a slate. Only one level of the (contained) menu tree is visible at a time.
Composition: A Drilldown Slate contains exactly one Drilldown Menu.
Effect: Same as Drilldown Menu: Clicking on a Button containing lower levels, the Drilldown will display those. Clicking on a leaf-Button will trigger its action.

Context

The Drilldown Slate is used in the Main Bar.

Rivals

Combined Slates: Combined Slates can hold other slates and buttons, which might give the impression of a menu; Drilldown Slates contain an actual Menu. Therefore, they are less heterogeneous than Combined Slates but clear and dedicated in their nature of providing a navigational menu structure.

Rules

Usage

Drilldowns in Slates MUST use this component.

Example 1: Drilldownslate

Animal of the year

- - - Link
  - - - Link
    - - Link
  - Link
- - - Link
  - - Link
  - - Link

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\MainControls\Slate\Drilldown;
 
use ILIAS\UI\examples\Menu\Drilldown;
 
function drilldownslate()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $ico = $f->symbol()->icon()->standard('', '')->withSize('small')->withAbbreviation('+');
    $uri = new \ILIAS\Data\URI('https://ilias.de');
    $link = [$f->link()->bulky($ico->withAbbreviation('>'), 'Link', $uri)];
 
    $items = [
        $f->menu()->sub('Switzerland', [
            $f->menu()->sub('Riverine Amphipod', $link),
            $f->menu()->sub('Wildcat', [
                $f->menu()->sub('European Wildcat', $link),
                $f->menu()->sub('African Wildcat', $link)
            ]),
            $link[0]
        ]),
 
        $f->menu()->sub('Germany', [
            $f->menu()->sub('Otter', $link),
            $f->menu()->sub('Mole', $link),
            $f->menu()->sub('Deer', $link)
        ])
    ];
 
    $ddmenu = $f->menu()->drilldown('Animal of the year', $items);
 
    $icon = $f->symbol()->glyph()->comment();
    $slate = $f->maincontrols()->slate()->drilldown('drilldown example', $icon, $ddmenu);
 
    $triggerer = $f->button()->bulky(
        $slate->getSymbol(),
        $slate->getName(),
        '#'
    )
    ->withOnClick($slate->getToggleSignal());
 
    return $renderer->render([
        $triggerer,
        $slate
    ]);
}

Relations

Parents

UIComponent
Main Controls
Slate