Dokumentation

'Kitchen Sink'-Dokumentation von Style: 'Delos' vom Skin: 'ILIAS'

Drilldown

Description

Purpose: A Drilldown Menu offers a partial view on a larger set of hierarchically structured navigation possibilities. While the entries of a Drilldown Menu are actually organized in a tree-structure, there is only one level of branches visible at a time, so that space is saved and the users attention is not being obstrused by irrelevant options.
Composition: Drilldown Menus consist of a list of Buttons organized in three areas: The backlink-area holds exactly one Button to navigate to a higher level of entries, the following area again holds exactly one button to outline the current position within the tree-structure and finally the main area consisting of an unlimited number of buttons. Also, Dividers may be used so separate entries from each other.
Effect: Buttons within the Drilldown Menu will either affect the Menu itself or trigger other navigational events. Speaking of the the first ("Submenus"), the user will navigate down the tree-structure of the Menu's entries. The currently selected level will be outlined, and a backlink will be presented to navigate back up the hierarchy. Entries directly below the current level will be presented as a flat list.

Context

Drilldown Menus are primarily used in Mainbar-Slates to break down navigational topics into smaller parts.

Rules

Usage

A Drilldown Menu MUST contain further Submenus or Buttons.
Drilldown Menus MUST contain more than one entry (Submenu or Button).

Example 1: Drilldown

- - - >>
      
      link

function drilldown()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
 
    $ico = $f->symbol()->icon()->standard('', '')->withSize('medium')->withAbbreviation('+');
 
    $image = $f->image()->responsive("src/UI/examples/Image/mountains.jpg", "Image source: https://stocksnap.io, Creative Commons CC0 license");
    $page = $f->modal()->lightboxImagePage($image, 'Mountains');
    $modal = $f->modal()->lightbox($page);
 
    $button = $f->button()->bulky($ico->withAbbreviation('>'), 'Modal', '')
        ->withOnClick($modal->getShowSignal());
 
    $label = $f->button()->bulky($ico->withAbbreviation('0'), 'root', '');
 
    $uri = new \ILIAS\Data\URI('https://ilias.de');
    $link = $f->link()->bulky($ico->withAbbreviation('>>'), 'link', $uri);
 
    $items = [
        $f->menu()->sub(toBulky('1'), [
            $f->menu()->sub(
                toBulky('1.1'),
                [$button, $link]
            )
                ->withInitiallyActive(),
            $f->menu()->sub(toBulky('1.2'), [
                $f->menu()->sub('1.2.1', [$button]),
                $f->menu()->sub('1.2.2', [$button])
            ]),
            $button
        ]),
 
        $f->menu()->sub(toBulky('2'), [
            $f->menu()->sub('2.1', [$button]),
            $f->menu()->sub('2.2', [$button]),
            $f->divider()->horizontal(),
            $f->menu()->sub('2.3', [$button])
        ])
    ];
 
    $dd = $f->menu()->drilldown($label, $items);
 
    return $renderer->render([
        $dd,
        $modal
    ]);
}
 
 
function toBulky(string $label) : \ILIAS\UI\Component\Button\Bulky
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $ico = $f->symbol()->icon()->standard('', '')
        ->withSize('medium')
        ->withAbbreviation('+');
 
    return $f->button()->bulky($ico, $label, '');
}

Relations

Parents

UIComponent
Menu