Documentation

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

Collapse

Description

Purpose: The Collapse Glyph is used to trigger the collapsing of some neighbouring Container Collection such as a the content of a Dropdown or an Accordion currently shown.
Composition: The Collapse Glyph is composed of a triangle pointing to the bottom indicating that content is currently shown.
Effect: Clicking the Collapse Glyph hides the display of some Container Collection.

Rivals

Expand Glyph: The Expand Glyphs triggers the display of some Container Collection.
Previous Glyph: The Previous/Next Glyph opens a completely new view. It serves a navigational purpose.

Rules

Usage

The Collapse Glyph MUST indicate if the toggled Container Collection is visible or not.

Accessibility

The aria-label MUST be ‘Collapse Content'.

Example 1: Collapse

Active
Inactive
Highlighted

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Symbol\Glyph\Collapse;
 
function collapse()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $glyph = $f->symbol()->glyph()->collapse("#");
 
    //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