Documentation

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

Add

Description

Purpose: The Add Glyph serves as a replacement for the respective textual button in very crowded screens. It allows adding a new item.
Composition: The Add Glyph uses the glyphicon-plus-sign.
Effect: Clicking on the Add Glyph adds a new input to a form or an event to the calendar.

Context

Adding answer options or taxonomies in questions-editing forms in tests.
Adding events to the calendar in Month view of the agenda.

Rules

Usage

The Add Glyph SHOULD not come without a corresponding Remove Glyph and vice versa. Exceptions to this rule, such as the Calendar (where only elements can be added via Add Glyph, but not removed) are possible, but HAVE TO be run through the Jour Fixe.
The Add Glyph stands for an Action and SHOULD be placed in the action column of a form.
The Add Glyph MUST NOT be used to add lines to tables.

Interaction

Newly added items MUST be placed below the line in which the Add Glyph has been clicked

Accessibility

The aria-label MUST be ‘Add'.

Example 1: Add

Active
Inactive
Highlighted

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Symbol\Glyph\Add;
 
function add()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $glyph = $f->symbol()->glyph()->add("#");
 
    //Showcase the various states of this Glyph
    $list = $f->listing()->descriptive([
        "Active" => $glyph,
        "Inactive" => $glyph->withUnavailableAction(),
        "Highlighted" => $glyph->withHighlight()
    ]);
 
    return $renderer->render($list);
}

Relations

Parents

UIComponent
Symbol
Glyph