Documentation

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

Collapse Horizontal

Description

Purpose: The Collapse Horizontal Glyph is used to trigger the collapsing of some neighbouring Container Collection (such as a Slate) or to navigate within a menu where collapsing might mean "switching to a higher level". The Collapse Horizontal Glyph is used where collapsing is better indicated by a left-triangle than by a down-triangle.
Composition: The Collapse Horizontal Glyph is composed of a triangle pointing to the left.
Effect: Clicking the Collapse Horizontal Glyph hides the display of some Container Collection. It might simultaneously trigger the display of another Container Collection.

Context

The Collapse Horizontal Glyph appears in the Drilldown Menu.
The Collapse Horizontal Glyph appears in Main Bar to hide Slates.

Rivals

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

Rules

Accessibility

The aria-label MUST be ‘collapse/back'.

Example 1: Collapsehorizontal

Active
Inactive
Highlighted

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