Documentation

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

User

Description

Purpose: The User Glyph triggers the “Who is online?” Popover in the Top Navigation. The User Glyph indicates the number of pending contact requests and users online via the the Novelty Counter and Status Counter respectively.
Composition: The User Glyph uses the glyphicon-user.
Effect: Clicking the User Glyph opens the “Who is online?” Popover.

Rules

Accessibility

The aria-label MUST be ‘Show who is online'.

Example 1: User

Active
Inactive
Highlighted

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

Example 2: With js binding

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Symbol\Glyph\User;
 
function with_js_binding()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render(
        $f->symbol()->glyph()->user("#")
            ->withOnLoadCode(function ($id) {
                return
                    "$(\"#$id\").click(function() { alert(\"Clicked: $id\"); return false; });";
            })
    );
}

Relations

Parents

UIComponent
Symbol
Glyph