Documentation

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

Scale Bar

Description

Purpose: Scale Bars are used to display a set of items some of which especially highlighted. E.g. they can be used to inform about a score or target on a rank ordered scale.
Composition: Scale Bars are composed of of a set of bars of equal size. Each bar contains a title. The highlighted elements differ from the others through their darkened background.

Context

Scale Bars are are used in the Competence Management on the Personal Desktop.

Rules

Composition

Each Bar of the Scale Bars MUST bear a title.
The title of Scale Bars MUST NOT contain any other content than text.

Example 1: Base

None
Low
Medium (Active)
High

<?php
 
declare(strict_types=1);
 
/* Copyright (c) 2017 Alex Killing <killing@leifos.de> Extended GPL, see docs/LICENSE */
 
namespace ILIAS\UI\examples\Chart\ScaleBar;
 
function base()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $c = $f->chart()->scaleBar(
        array(
            "None" => false,
            "Low" => false,
            "Medium" => true,
            "High" => false
        )
    );
 
    //Render
    return $renderer->render($c);
}

Example 2: Ten items

0
1
2
3
4
5
6 (Active)
7
8
9

<?php
 
declare(strict_types=1);
 
/* Copyright (c) 2017 Alex Killing <killing@leifos.de> Extended GPL, see docs/LICENSE */
 
namespace ILIAS\UI\examples\Chart\ScaleBar;
 
function ten_items()
{
    //Init Factory and Renderer
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $c = $f->chart()->scaleBar(
        array(
            "0" => false,
            "1" => false,
            "2" => false,
            "3" => false,
            "4" => false,
            "5" => false,
            "6" => true,
            "7" => false,
            "8" => false,
            "9" => false
        )
    );
 
    //Render
    return $renderer->render($c);
}

Relations

Parents

UIComponent
Chart