Dokumentation

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.

Style

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

Accessibility

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

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>';
    $tag = $tag->withUnavailableAction();
    foreach ($possible_relevances as $w) {
        $buffer[] = $renderer->render($tag->withRelevance($w));
    }
 
    $buffer[] = '<hr>with additional class(es):<br>';
    $buffer[] = '<style type="text/css">'
                . '  .demo_class_for_tags_color{background-color: #ff0000 !important; color: contrast(#ff0000) !important;}'
                . '  .demo_class_for_tags_bold{font-weight: bold;}'
                . '</style>';
    $buffer[] = $renderer->render(
        $tag->withClasses(array('demo_class_for_tags_color'))
    );
 
    $buffer[] = $renderer->render(
        $tag->withClasses(array('demo_class_for_tags_color', 'demo_class_for_tags_bold'))
    );
 
    $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);
}
 

Parents

1. UIComponent
2. Button