Documentation

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

Mode

Description

Purpose: Mode View Controls enable the switching between different aspects of some data. The different modes are mutually exclusive and can therefore not be activated at once.
Composition: Mode View Controls are composed of Buttons switching between active/engaged and inactive states.
Effect: Clicking on an inactive Button turns this button active/engaged and all other inactive. Clicking on an active/engaged button has no effect.

Rules

Usage

Exactly one Button MUST always be active/engaged.

Accessibility

The HTML container enclosing the buttons of the Mode View Control MUST cary the role-attribute "group".
The HTML container enclosing the buttons of the Mode View Control MUST set an aria-label describing the element. Eg. "Mode View Control"
The Buttons of the Mode View Control MUST set an aria-label clearly describing what the button shows if clicked. E.g. "List View", "Month View", ...

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\ViewControl\Mode;
 
/**
 * Base example performing a page reload if active view is changed.
 */
function base()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $refinery = $DIC->refinery();
    $request_wrapper = $DIC->http()->wrapper()->query();
 
    //Some Target magic to get a behaviour closer to some real use case
    $target = $DIC->http()->request()->getRequestTarget();
    $param = "Mode";
 
    $active = 1;
    if ($request_wrapper->has($param) && $request_wrapper->retrieve($param, $refinery->kindlyTo()->int())) {
        $active = $request_wrapper->retrieve($param, $refinery->kindlyTo()->int());
    }
 
    //Here the real magic to draw the controls
    $actions = array(
        "$param 1" => "$target&$param=1",
        "$param 2" => "$target&$param=2",
        "$param 3" => "$target&$param=3",
    );
 
    $aria_label = "change_the_currently_displayed_mode";
    $view_control = $f->viewControl()->mode($actions, $aria_label)->withActive("$param $active");
    $html = $renderer->render($view_control);
 
    return $html;
}

Relations

Parents

UIComponent
View Control