Documentation

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

Sort Ascending

Description

Purpose: The Sorting Glyphs indicate the current sorting direction of a column in a table as ascending (up) or descending (down). Only one Glyph is shown at a time. Clicking on the glyph will reverse the sorting direction.
Composition: The Sort Ascending Glyph uses glyphicon-arrow-up.
Effect: Clicking the Sort Ascending Glyph reverses the direction of ordering in a table.

Rules

Accessibility

The aria-label MUST be ‘Sort Ascending'.

Example 1: Sort ascending

Active
Inactive
Highlighted

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Symbol\Glyph\SortAscending;
 
/**
 * Note that this example does not provide any functionality, it just shows, how this Glyph
 * can be rendered. The functionality needs to be provided by some surrounding component (e.g. Table)
 */
function sort_ascending()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $glyph = $f->symbol()->glyph()->sortAscending("#");
 
    //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