Documentation

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

Tag

Description

Purpose: Tags classify entities. Thus, their primary purpose is the visualization of those classifications for one entity. However, tags are usually clickable - either to edit associations or list related entities, i.e. objects with the same tag.
Composition: Tags are a colored area with text on it. When used in a tag-cloud (a list of tags), tags can be visually "weighted" according to the number of their occurences, be it with different (font-)sizes, different colors or all of them.
Effect: Tags may trigger an action or change the view when clicked. There is no visual difference (besides the cursor) between clickable tags and tags with unavailable action.

Rules

Style

Tags SHOULD be used with an additonal class to adjust colors.
The font-color SHOULD be set with high contrast to the chosen background color.

Accessibility

The functionality of the tag button MUST be indicated for screen readers by an aria-label.

Example 1: Base

with unavailable action:

with additional class(es):

with fix colors:

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Tag;
 
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $df = new \ILIAS\Data\Factory();
    $renderer = $DIC->ui()->renderer();
    $buffer = array();
 
    $tag = $f->button()->tag("simple tag", "#");
 
    $possible_relevances = array(
        $tag::REL_VERYLOW,
        $tag::REL_LOW,
        $tag::REL_MID,
        $tag::REL_HIGH,
        $tag::REL_VERYHIGH
    );
 
    foreach ($possible_relevances as $w) {
        $buffer[] = $renderer->render($tag->withRelevance($w));
    }
 
    $buffer[] = '<hr>with unavailable action:<br>';
    $no_action_tag = $tag->withUnavailableAction();
    foreach ($possible_relevances as $w) {
        $buffer[] = $renderer->render($no_action_tag->withRelevance($w));
    }
 
    $buffer[] = '<hr>with additional class(es):<br>';
 
    $tag = $tag->withRelevance($tag::REL_VERYLOW);
    $buffer[] = $renderer->render(
        $tag->withClasses(array('il-btn-with-loading-animation',"btn-bulky"))
    );
 
    $lightcol = $df->color('#00ff00');
    $darkcol = $df->color('#00aa00');
    $forecol = $df->color('#d4190b');
 
    $buffer[] = '<hr>with fix colors:<br>';
    $tag = $tag->withBackgroundColor($lightcol);
    $buffer[] = $renderer->render($tag);
    $buffer[] = $renderer->render($tag->withBackgroundColor($darkcol));
 
    $buffer[] = '<br><br>';
    $buffer[] = $renderer->render(
        $tag->withBackgroundColor($lightcol)
            ->withForegroundColor($forecol)
    );
 
    return implode(' ', $buffer);
}

Example 2: Engaged

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Tag;
 
function engaged()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $tag = $f->button()->tag("simple tag", "#")
                                  ->withEngagedState(true);
 
    $possible_relevances = array(
        $tag::REL_VERYLOW,
        $tag::REL_LOW,
        $tag::REL_MID,
        $tag::REL_HIGH,
        $tag::REL_VERYHIGH
    );
 
    foreach ($possible_relevances as $w) {
        $buffer[] = $renderer->render($tag->withRelevance($w));
    }
 
    return implode(' ', $buffer);
}

Example 3: With tooltip

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Tag;
 
function with_tooltip()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $tag = $f->button()->tag("simple tag", "#")
        ->withEngagedState(true)
        ->withHelpTopics(
            ...$f->helpTopics("ilias", "learning management system")
        );
 
    $possible_relevances = array(
        $tag::REL_MID,
        $tag::REL_HIGH
    );
 
    foreach ($possible_relevances as $w) {
        $buffer[] = $renderer->render($tag->withRelevance($w));
    }
 
    return implode(' ', $buffer);
}

Relations

Parents

UIComponent
Button