Documentation

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

Eyeopen

Description

Purpose: The Eye Open Glyph is used to toggle the revelation-mode of password fields. With the Eye Open Glyph shown, the field is currently masked.
Composition: The Eye Open Glyph uses the glyphicon-eye-open.
Effect: When clicked, the password-field is unmasked, thus revealing the input.

Context

Used with password-fields to toggle mask/revealed mode.

Rules

Composition

The Eye Open Glyph MUST only be used with Password-Inputs.

Accessibility

The aria-label MUST be "Eye Opened - Click to reveal the input's contents".

Example 1: Eyeopen

Active
Inactive
Highlighted

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