Documentation

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

Description

Purpose: The More Glyph allows shortening a part of a set of entries that are too long to be presented fully or would be overwhelming. The More glyph offers viewing the rest of the shortened set of entries so that the entire set becomes visible.
Composition: The More Glyph uses the glyphicon-option-horizontal.
Effect: Clicking the More Glyph shows the rest of the set of entries.

Context

This Glyph is currently used in the responsive view of the Main Bar.

Rivals

Disclosure Glyph: The Disclosure Glyph hides the complete set of entries, wherear the More Glyph only hides parts of it.
Mini Action Dropdown: The Dropdown in the ListGUI without text is used to offer a set of actions that cannot be displayed directly due to scarce space. This is different because the set of entries of the More Glyph does not entail actions.
Show More Less Button: The Show-More /Show Less Button in Timeline unhides a full individual entry of a timeline. Entries are caped at a certain length and Show-More-Buttons allow viewing all the content of this entry. This is different, because the unhidden entirety is an individual entry and not a set of entries. The Show-More /Show Less Button in filtered Categories with loads of objects shows the next x objects in the list GUI. This is different, because what is shown is not an entirety but a part of an entirety.
The Hamburg Glyph: The Hamburg Glyph is an icon introduced on the web, which in most cases represents a complete main menu. This is different from More Glyph, which abbreviates part of the menu. The hamburger icon currently used in the shortened toolbar (on small screens) should actually be replaced because it doesn't show the entire main menu, but more actions are displayed when you click on it.

Rules

Usage

The usage of this Glyph SHOULD be avoided if possible. Invisible components reduce the affordance of a screen.

Style

Because it has a certain similarity to the Disclose Glyph, it SHOULD also have a visual similarity, which can be distinguished from the Disclose Glyph.

Accessibility

The aria-label MUST be 'Show More'.

Example 1: More

Active
Inactive
Highlighted

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