Brotkrumen-Navigation
Dokumentation
'Kitchen Sink'-Dokumentation von Style: 'Delos' vom 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:
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); }
Relations
- Parents
- UIComponent
- Button