Documentation

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

Shy

Description

Purpose: Shy buttons are used in contexts that need a less obtrusive presentation than usual buttons have, e.g. in UI collections like Dropdowns.
Composition: Shy buttons do not come with a separte background color.

Rules

Usage

Shy buttons MUST only be used, if a standard button presentation is not appropriate. E.g. if usual buttons destroy the presentation of an outer UI component or if there is not enough space for a standard button presentation.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Shy;
 
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render($f->button()->shy("ILIAS", "http://www.ilias.de"));
}

Example 2: Engaged

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Shy;
 
function engaged()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $button = $f->button()->shy("Engaged Button", "#")
                                  ->withEngagedState(true);
    return $renderer->render($button);
}

Example 3: Unavailable action

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Shy;
 
/**
 * This example provides the given button with an unavailable action. Note
 * that the disabled attribute is set in the DOM. No action must be fired, even
 * if done by keyboard
 */
function unavailable_action()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $button = $f->button()->shy('Unavailable', '#')->withUnavailableAction();
 
    return $renderer->render([$button]);
}

Example 4: With tooltip

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Shy;
 
function with_tooltip()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $button = $f->button()
        ->shy("Goto ILIAS", "http://www.ilias.de")
        ->withHelpTopics(
            ...$f->helpTopics("ilias", "learning management system")
        );
 
    return $renderer->render($button);
}

Relations

Parents

UIComponent
Button