Documentation

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

Standard

Description

Purpose: The Standard Dropdown is the default Dropdown to be used in ILIAS. If there is no good reason using another Dropdown instance in ILIAS, this is the one that should be used.
Composition: The Standard Dropdown uses the primary color as background.

Rules

Usage

Standard Dropdown MUST be used if there is no good reason using another instance.

Example 1: Base

function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $items = array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->button()->shy("GitHub", "https://www.github.com")
    );
    return $renderer->render($f->dropdown()->standard($items)->withLabel("Actions"));
}

Example 2: With aria label

function with_aria_label()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $items = array(
        $f->button()->shy("GitHub", "https://www.github.com"),
        $f->button()->shy("Bugs", "https://mantis.ilias.de"),
    );
    return $renderer->render($f->dropdown()->standard($items)->withAriaLabel("MyLabel"));
}

Example 3: With buttons and links

function with_buttons_and_links()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $items = array(
        $f->button()->shy("Github", "https://www.github.com"),
        $f->link()->standard("ILIAS", "https://www.ilias.de")->withOpenInNewViewport(true)
    );
    return $renderer->render($f->dropdown()->standard($items)->withLabel("Actions"));
}

Example 4: With divider

function with_divider()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $items = array(
        $f->button()->shy("ILIAS", "https://www.ilias.de"),
        $f->divider()->horizontal(),
        $f->button()->shy("GitHub", "https://www.github.com")
    );
    return $renderer->render($f->dropdown()->standard($items)->withLabel("Actions"));
}

Example 5: With divider with label

function with_divider_with_label()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $items = array(
        $f->button()->shy("GitHub", "https://www.github.com"),
        $f->divider()->horizontal()->withLabel("ILIAS"),
        $f->button()->shy("Docu", "https://www.ilias.de"),
        $f->button()->shy("Features", "https://feature.ilias.de"),
        $f->button()->shy("Bugs", "https://mantis.ilias.de"),
    );
    return $renderer->render($f->dropdown()->standard($items)->withLabel("Actions"));
}

Relations

Parents

UIComponent
Dropdown